<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>