You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
69 lines
3.0 KiB
69 lines
3.0 KiB
<div id="colors" class="page-header mb-4">
|
|
<h2>Colors</h2>
|
|
<p class="text-muted">The main I2P color is Blue. Use Green as a secondary option and Yellow as accent color.</p>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-xs-12 col-sm-3 col-md-3">
|
|
<div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-primary text-white small">#4661A9</div>
|
|
<h6 class="pt2 text-left">Primary Color</h6>
|
|
</div>
|
|
<div class="col-xs-12 col-sm-3 col-md-3">
|
|
<div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-secondary text-white small">#60AB60</div>
|
|
<h6 class="pt2 text-left">Secondary color</h6>
|
|
</div>
|
|
<div class="col-xs-12 col-sm-3 col-md-3">
|
|
<div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-warning text-white small">#FFC434</div>
|
|
<h6 class="pt2 text-left">Warning</h6>
|
|
</div>
|
|
<div class="col-xs-12 col-sm-3 col-md-3">
|
|
<div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-danger text-white small">#E15647</div>
|
|
<h6 class="pt2 text-left">Danger</h6>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-xs-12 col-sm-3 col-md-3">
|
|
<div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-gray-0 text-black small">#f8f9fa</div>
|
|
<h6 class="pt2 text-left">Gray 0</h6>
|
|
</div>
|
|
<div class="col-xs-12 col-sm-3 col-md-3">
|
|
<div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-gray-1 text-black small">#f1f3f5</div>
|
|
<h6 class="pt2 text-left">Gray 1</h6>
|
|
</div>
|
|
<div class="col-xs-12 col-sm-3 col-md-3">
|
|
<div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-gray-2 text-black small">#e9ecef</div>
|
|
<h6 class="pt2 text-left">Gray 2</h6>
|
|
</div>
|
|
<div class="col-xs-12 col-sm-3 col-md-3">
|
|
<div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-gray-3 text-black small">#dee2e6</div>
|
|
<h6 class="pt2 text-left">Gray 3</h6>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-xs-12 col-sm-3 col-md-3">
|
|
<div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-gray-4 text-black small">#ced4da</div>
|
|
<h6 class="pt2 text-left">Gray 4</h6>
|
|
</div>
|
|
<div class="col-xs-12 col-sm-3 col-md-3">
|
|
<div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-gray-5 text-black small">#adb5bd</div>
|
|
<h6 class="pt2 text-left">Gray 5</h6>
|
|
</div>
|
|
<div class="col-xs-12 col-sm-3 col-md-3">
|
|
<div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-gray-6 text-white small">#868e96</div>
|
|
<h6 class="pt2 text-left">Gray 6</h6>
|
|
</div>
|
|
<div class="col-xs-12 col-sm-3 col-md-3">
|
|
<div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-gray-7 text-white small">#495057</div>
|
|
<h6 class="pt2 text-left">Gray 7</h6>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-xs-12 col-sm-3 col-md-3">
|
|
<div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-gray-8 text-white small">#343a40</div>
|
|
<h6 class="pt2 text-left">Gray 8</h6>
|
|
</div>
|
|
<div class="col-xs-12 col-sm-3 col-md-3">
|
|
<div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-gray-9 text-white small">#212529</div>
|
|
<h6 class="pt2 text-left">Gray 9</h6>
|
|
</div>
|
|
</div>
|
|
|