[nd_container different_values="0"]
[nd_title title="COLOR LIBRARY" underline="c-line-center c-theme-bg" label_align="c-center" bg_color="green" different_values="0" style_margin_top="60"]
[/nd_title]
[html format="ckeditor" different_values="0"]<p class="rtecenter"><strong><span style="font-size:16px;">JANGO Provides super flexible color helper classes to customize element colors on fly without editing any css.&nbsp;<br>Click below color options to view usage demos.</span></strong></p>[/html]
[html format="html" different_values="0" style_margin_top="60"]<div class="row"> <div class="col-md-2 col-sm-2 col-xs-6"> <div class="c-content-color-demo tooltips" data-original-title="Click to view demos for this color" data-toggle="modal" data-target="#demo_modal_white"> <div class="c-color-view c-bg-white c-bg-white-font c-font-14 c-font-bold c-font-uppercase"> #FFFFFF </div> <div class="c-color-info c-bg-white c-font-14 c-font-sbold c-font-uppercase"> white </div> </div> <div class="modal fade" id="demo_modal_white"> <div class="modal-dialog modal-lg"> <div class="modal-content c-square"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> <h4 class="modal-title c-font-title c-font-sbold c-font-uppercase">white</h4> </div> <div class="modal-body"> <div class="c-content-tab-1 c-theme c-margin-t-30"> <div class="nav-justified"> <ul class="nav nav-tabs nav-justified c-font-uppercase c-font-bold"> <li class="active"> <a href="#white_tab_1_content" data-toggle="tab">Typography</a> </li> <li> <a href="#white_tab_2_content" data-toggle="tab">Background &amp; Border</a> </li> <li> <a href="#white_tab_3_content" data-toggle="tab">Buttons</a> </li> </ul> <div class="tab-content c-bordered c-padding"> <div class="tab-pane active" id="white_tab_1_content"> <div style="margin: 30px 0;"> <span class="c-font-white c-font-24">Sample text...</span>&nbsp; <span class="c-font-white c-font-24 c-font-bold">Sample text...</span>&nbsp; <span class="c-font-white c-font-24 c-font-bold c-font-uppercase">Sample text...</span> </div> <code>class="c-font-white"</code> </div> <div class="tab-pane" id="white_tab_2_content"> <div style="margin: 30px 0;"> <div class="c-border-white" style="padding: 10px; border: 2px solid #fff;"> Some sample box </div> <code>class="c-border-white"</code> </div> <div style="margin: 30px 0;"> <div class="c-bg-white c-bg-white-font" style="padding: 10px">Some sample box</div> <code>class="c-bg-white c-bg-white-font"</code> </div> </div> <div class="tab-pane" id="white_tab_3_content"> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-white">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-white"</code> </div> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-border-1x c-btn-white">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-border-1x c-btn-white"</code> </div> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-border-2x c-btn-white">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-border-2x c-btn-white"</code> </div> </div> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default btn-md c-btn-grey-2 c-btn-bold c-square c-btn-uppercase" data-dismiss="modal">Ok</button> </div> </div> </div> </div> </div> <div class="col-md-2 col-sm-2 col-xs-6"> <div class="c-content-color-demo tooltips" data-original-title="Click to view demos for this color" data-toggle="modal" data-target="#demo_modal_black"> <div class="c-color-view c-bg-black c-bg-black-font c-font-14 c-font-bold c-font-uppercase"> #000000 </div> <div class="c-color-info c-bg-white c-font-14 c-font-sbold c-font-uppercase"> black </div> </div> <div class="modal fade" id="demo_modal_black"> <div class="modal-dialog modal-lg"> <div class="modal-content c-square"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> <h4 class="modal-title c-font-title c-font-sbold c-font-uppercase">black</h4> </div> <div class="modal-body"> <div class="c-content-tab-1 c-theme c-margin-t-30"> <div class="nav-justified"> <ul class="nav nav-tabs nav-justified c-font-uppercase c-font-bold"> <li class="active"> <a href="#black_tab_1_content" data-toggle="tab">Typography</a> </li> <li> <a href="#black_tab_2_content" data-toggle="tab">Background &amp; Border</a> </li> <li> <a href="#black_tab_3_content" data-toggle="tab">Buttons</a> </li> </ul> <div class="tab-content c-bordered c-padding"> <div class="tab-pane active" id="black_tab_1_content"> <div style="margin: 30px 0;"> <span class="c-font-black c-font-24">Sample text...</span>&nbsp; <span class="c-font-black c-font-24 c-font-bold">Sample text...</span>&nbsp; <span class="c-font-black c-font-24 c-font-bold c-font-uppercase">Sample text...</span> </div> <code>class="c-font-black"</code> </div> <div class="tab-pane" id="black_tab_2_content"> <div style="margin: 30px 0;"> <div class="c-border-black" style="padding: 10px; border: 2px solid #fff;"> Some sample box </div> <code>class="c-border-black"</code> </div> <div style="margin: 30px 0;"> <div class="c-bg-black c-bg-black-font" style="padding: 10px">Some sample box</div> <code>class="c-bg-black c-bg-black-font"</code> </div> </div> <div class="tab-pane" id="black_tab_3_content"> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-black">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-black"</code> </div> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-border-1x c-btn-black">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-border-1x c-btn-black"</code> </div> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-border-2x c-btn-black">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-border-2x c-btn-black"</code> </div> </div> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default btn-md c-btn-grey-2 c-btn-bold c-square c-btn-uppercase" data-dismiss="modal">Ok</button> </div> </div> </div> </div> </div> <div class="col-md-2 col-sm-2 col-xs-6"> <div class="c-content-color-demo tooltips" data-original-title="Click to view demos for this color" data-toggle="modal" data-target="#demo_modal_regular"> <div class="c-color-view c-bg-regular c-bg-regular-font c-font-14 c-font-bold c-font-uppercase"> #7f8c97 </div> <div class="c-color-info c-bg-white c-font-14 c-font-sbold c-font-uppercase"> regular </div> </div> <div class="modal fade" id="demo_modal_regular"> <div class="modal-dialog modal-lg"> <div class="modal-content c-square"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> <h4 class="modal-title c-font-title c-font-sbold c-font-uppercase">regular</h4> </div> <div class="modal-body"> <div class="c-content-tab-1 c-theme c-margin-t-30"> <div class="nav-justified"> <ul class="nav nav-tabs nav-justified c-font-uppercase c-font-bold"> <li class="active"> <a href="#regular_tab_1_content" data-toggle="tab">Typography</a> </li> <li> <a href="#regular_tab_2_content" data-toggle="tab">Background &amp; Border</a> </li> <li> <a href="#regular_tab_3_content" data-toggle="tab">Buttons</a> </li> </ul> <div class="tab-content c-bordered c-padding"> <div class="tab-pane active" id="regular_tab_1_content"> <div style="margin: 30px 0;"> <span class="c-font-regular c-font-24">Sample text...</span>&nbsp; <span class="c-font-regular c-font-24 c-font-bold">Sample text...</span>&nbsp; <span class="c-font-regular c-font-24 c-font-bold c-font-uppercase">Sample text...</span> </div> <code>class="c-font-regular"</code> </div> <div class="tab-pane" id="regular_tab_2_content"> <div style="margin: 30px 0;"> <div class="c-border-regular" style="padding: 10px; border: 2px solid #fff;"> Some sample box </div> <code>class="c-border-regular"</code> </div> <div style="margin: 30px 0;"> <div class="c-bg-regular c-bg-regular-font" style="padding: 10px">Some sample box</div> <code>class="c-bg-regular c-bg-regular-font"</code> </div> </div> <div class="tab-pane" id="regular_tab_3_content"> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-regular">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-regular"</code> </div> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-border-1x c-btn-regular">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-border-1x c-btn-regular"</code> </div> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-border-2x c-btn-regular">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-border-2x c-btn-regular"</code> </div> </div> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default btn-md c-btn-grey-2 c-btn-bold c-square c-btn-uppercase" data-dismiss="modal">Ok</button> </div> </div> </div> </div> </div> <div class="col-md-2 col-sm-2 col-xs-6"> <div class="c-content-color-demo tooltips" data-original-title="Click to view demos for this color" data-toggle="modal" data-target="#demo_modal_green"> <div class="c-color-view c-bg-green c-bg-green-font c-font-14 c-font-bold c-font-uppercase"> #32c5d2 </div> <div class="c-color-info c-bg-white c-font-14 c-font-sbold c-font-uppercase"> green </div> </div> <div class="modal fade" id="demo_modal_green" style="display: none;"> <div class="modal-dialog modal-lg"> <div class="modal-content c-square"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> <h4 class="modal-title c-font-title c-font-sbold c-font-uppercase">green</h4> </div> <div class="modal-body"> <div class="c-content-tab-1 c-theme c-margin-t-30"> <div class="nav-justified"> <ul class="nav nav-tabs nav-justified c-font-uppercase c-font-bold"> <li class=""> <a href="#green_tab_1_content" data-toggle="tab" aria-expanded="false">Typography</a> </li> <li class=""> <a href="#green_tab_2_content" data-toggle="tab" aria-expanded="false">Background &amp; Border</a> </li> <li class="active"> <a href="#green_tab_3_content" data-toggle="tab" aria-expanded="true">Buttons</a> </li> </ul> <div class="tab-content c-bordered c-padding"> <div class="tab-pane" id="green_tab_1_content"> <div style="margin: 30px 0;"> <span class="c-font-green c-font-24">Sample text...</span>&nbsp; <span class="c-font-green c-font-24 c-font-bold">Sample text...</span>&nbsp; <span class="c-font-green c-font-24 c-font-bold c-font-uppercase">Sample text...</span> </div> <code>class="c-font-green"</code> </div> <div class="tab-pane" id="green_tab_2_content"> <div style="margin: 30px 0;"> <div class="c-border-green" style="padding: 10px; border: 2px solid #fff;"> Some sample box </div> <code>class="c-border-green"</code> </div> <div style="margin: 30px 0;"> <div class="c-bg-green c-bg-green-font" style="padding: 10px">Some sample box</div> <code>class="c-bg-green c-bg-green-font"</code> </div> </div> <div class="tab-pane active" id="green_tab_3_content"> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-green">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-green"</code> </div> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-border-1x c-btn-green">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-border-1x c-btn-green"</code> </div> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-border-2x c-btn-green">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-border-2x c-btn-green"</code> </div> </div> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default btn-md c-btn-grey-2 c-btn-bold c-square c-btn-uppercase" data-dismiss="modal">Ok</button> </div> </div> </div> </div> </div> <div class="col-md-2 col-sm-2 col-xs-6"> <div class="c-content-color-demo tooltips" data-original-title="Click to view demos for this color" data-toggle="modal" data-target="#demo_modal_green-1"> <div class="c-color-view c-bg-green-1 c-bg-green-1-font c-font-14 c-font-bold c-font-uppercase"> #52c9ba </div> <div class="c-color-info c-bg-white c-font-14 c-font-sbold c-font-uppercase"> green-1 </div> </div> <div class="modal fade" id="demo_modal_green-1"> <div class="modal-dialog modal-lg"> <div class="modal-content c-square"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> <h4 class="modal-title c-font-title c-font-sbold c-font-uppercase">green-1</h4> </div> <div class="modal-body"> <div class="c-content-tab-1 c-theme c-margin-t-30"> <div class="nav-justified"> <ul class="nav nav-tabs nav-justified c-font-uppercase c-font-bold"> <li class="active"> <a href="#green-1_tab_1_content" data-toggle="tab">Typography</a> </li> <li> <a href="#green-1_tab_2_content" data-toggle="tab">Background &amp; Border</a> </li> <li> <a href="#green-1_tab_3_content" data-toggle="tab">Buttons</a> </li> </ul> <div class="tab-content c-bordered c-padding"> <div class="tab-pane active" id="green-1_tab_1_content"> <div style="margin: 30px 0;"> <span class="c-font-green-1 c-font-24">Sample text...</span>&nbsp; <span class="c-font-green-1 c-font-24 c-font-bold">Sample text...</span>&nbsp; <span class="c-font-green-1 c-font-24 c-font-bold c-font-uppercase">Sample text...</span> </div> <code>class="c-font-green-1"</code> </div> <div class="tab-pane" id="green-1_tab_2_content"> <div style="margin: 30px 0;"> <div class="c-border-green-1" style="padding: 10px; border: 2px solid #fff;"> Some sample box </div> <code>class="c-border-green-1"</code> </div> <div style="margin: 30px 0;"> <div class="c-bg-green-1 c-bg-green-1-font" style="padding: 10px">Some sample box</div> <code>class="c-bg-green-1 c-bg-green-1-font"</code> </div> </div> <div class="tab-pane" id="green-1_tab_3_content"> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-green-1">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-green-1"</code> </div> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-border-1x c-btn-green-1">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-border-1x c-btn-green-1"</code> </div> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-border-2x c-btn-green-1">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-border-2x c-btn-green-1"</code> </div> </div> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default btn-md c-btn-grey-2 c-btn-bold c-square c-btn-uppercase" data-dismiss="modal">Ok</button> </div> </div> </div> </div> </div> <div class="col-md-2 col-sm-2 col-xs-6"> <div class="c-content-color-demo tooltips" data-original-title="Click to view demos for this color" data-toggle="modal" data-target="#demo_modal_green-2"> <div class="c-color-view c-bg-green-2 c-bg-green-2-font c-font-14 c-font-bold c-font-uppercase"> #5dc09c </div> <div class="c-color-info c-bg-white c-font-14 c-font-sbold c-font-uppercase"> green-2 </div> </div> <div class="modal fade" id="demo_modal_green-2"> <div class="modal-dialog modal-lg"> <div class="modal-content c-square"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> <h4 class="modal-title c-font-title c-font-sbold c-font-uppercase">green-2</h4> </div> <div class="modal-body"> <div class="c-content-tab-1 c-theme c-margin-t-30"> <div class="nav-justified"> <ul class="nav nav-tabs nav-justified c-font-uppercase c-font-bold"> <li class="active"> <a href="#green-2_tab_1_content" data-toggle="tab">Typography</a> </li> <li> <a href="#green-2_tab_2_content" data-toggle="tab">Background &amp; Border</a> </li> <li> <a href="#green-2_tab_3_content" data-toggle="tab">Buttons</a> </li> </ul> <div class="tab-content c-bordered c-padding"> <div class="tab-pane active" id="green-2_tab_1_content"> <div style="margin: 30px 0;"> <span class="c-font-green-2 c-font-24">Sample text...</span>&nbsp; <span class="c-font-green-2 c-font-24 c-font-bold">Sample text...</span>&nbsp; <span class="c-font-green-2 c-font-24 c-font-bold c-font-uppercase">Sample text...</span> </div> <code>class="c-font-green-2"</code> </div> <div class="tab-pane" id="green-2_tab_2_content"> <div style="margin: 30px 0;"> <div class="c-border-green-2" style="padding: 10px; border: 2px solid #fff;"> Some sample box </div> <code>class="c-border-green-2"</code> </div> <div style="margin: 30px 0;"> <div class="c-bg-green-2 c-bg-green-2-font" style="padding: 10px">Some sample box</div> <code>class="c-bg-green-2 c-bg-green-2-font"</code> </div> </div> <div class="tab-pane" id="green-2_tab_3_content"> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-green-2">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-green-2"</code> </div> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-border-1x c-btn-green-2">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-border-1x c-btn-green-2"</code> </div> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-border-2x c-btn-green-2">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-border-2x c-btn-green-2"</code> </div> </div> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default btn-md c-btn-grey-2 c-btn-bold c-square c-btn-uppercase" data-dismiss="modal">Ok</button> </div> </div> </div> </div> </div> </div> <div class="row"> <div class="col-md-2 col-sm-2 col-xs-6"> <div class="c-content-color-demo tooltips" data-original-title="Click to view demos for this color" data-toggle="modal" data-target="#demo_modal_green-3"> <div class="c-color-view c-bg-green-3 c-bg-green-3-font c-font-14 c-font-bold c-font-uppercase"> #84c68f </div> <div class="c-color-info c-bg-white c-font-14 c-font-sbold c-font-uppercase"> green-3 </div> </div> <div class="modal fade" id="demo_modal_green-3"> <div class="modal-dialog modal-lg"> <div class="modal-content c-square"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> <h4 class="modal-title c-font-title c-font-sbold c-font-uppercase">green-3</h4> </div> <div class="modal-body"> <div class="c-content-tab-1 c-theme c-margin-t-30"> <div class="nav-justified"> <ul class="nav nav-tabs nav-justified c-font-uppercase c-font-bold"> <li class="active"> <a href="#green-3_tab_1_content" data-toggle="tab">Typography</a> </li> <li> <a href="#green-3_tab_2_content" data-toggle="tab">Background &amp; Border</a> </li> <li> <a href="#green-3_tab_3_content" data-toggle="tab">Buttons</a> </li> </ul> <div class="tab-content c-bordered c-padding"> <div class="tab-pane active" id="green-3_tab_1_content"> <div style="margin: 30px 0;"> <span class="c-font-green-3 c-font-24">Sample text...</span>&nbsp; <span class="c-font-green-3 c-font-24 c-font-bold">Sample text...</span>&nbsp; <span class="c-font-green-3 c-font-24 c-font-bold c-font-uppercase">Sample text...</span> </div> <code>class="c-font-green-3"</code> </div> <div class="tab-pane" id="green-3_tab_2_content"> <div style="margin: 30px 0;"> <div class="c-border-green-3" style="padding: 10px; border: 2px solid #fff;"> Some sample box </div> <code>class="c-border-green-3"</code> </div> <div style="margin: 30px 0;"> <div class="c-bg-green-3 c-bg-green-3-font" style="padding: 10px">Some sample box</div> <code>class="c-bg-green-3 c-bg-green-3-font"</code> </div> </div> <div class="tab-pane" id="green-3_tab_3_content"> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-green-3">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-green-3"</code> </div> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-border-1x c-btn-green-3">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-border-1x c-btn-green-3"</code> </div> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-border-2x c-btn-green-3">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-border-2x c-btn-green-3"</code> </div> </div> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default btn-md c-btn-grey-2 c-btn-bold c-square c-btn-uppercase" data-dismiss="modal">Ok</button> </div> </div> </div> </div> </div> <div class="col-md-2 col-sm-2 col-xs-6"> <div class="c-content-color-demo tooltips" data-original-title="Click to view demos for this color" data-toggle="modal" data-target="#demo_modal_red"> <div class="c-color-view c-bg-red c-bg-red-font c-font-14 c-font-bold c-font-uppercase"> #eb5d68 </div> <div class="c-color-info c-bg-white c-font-14 c-font-sbold c-font-uppercase"> red </div> </div> <div class="modal fade" id="demo_modal_red"> <div class="modal-dialog modal-lg"> <div class="modal-content c-square"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> <h4 class="modal-title c-font-title c-font-sbold c-font-uppercase">red</h4> </div> <div class="modal-body"> <div class="c-content-tab-1 c-theme c-margin-t-30"> <div class="nav-justified"> <ul class="nav nav-tabs nav-justified c-font-uppercase c-font-bold"> <li class="active"> <a href="#red_tab_1_content" data-toggle="tab">Typography</a> </li> <li> <a href="#red_tab_2_content" data-toggle="tab">Background &amp; Border</a> </li> <li> <a href="#red_tab_3_content" data-toggle="tab">Buttons</a> </li> </ul> <div class="tab-content c-bordered c-padding"> <div class="tab-pane active" id="red_tab_1_content"> <div style="margin: 30px 0;"> <span class="c-font-red c-font-24">Sample text...</span>&nbsp; <span class="c-font-red c-font-24 c-font-bold">Sample text...</span>&nbsp; <span class="c-font-red c-font-24 c-font-bold c-font-uppercase">Sample text...</span> </div> <code>class="c-font-red"</code> </div> <div class="tab-pane" id="red_tab_2_content"> <div style="margin: 30px 0;"> <div class="c-border-red" style="padding: 10px; border: 2px solid #fff;"> Some sample box </div> <code>class="c-border-red"</code> </div> <div style="margin: 30px 0;"> <div class="c-bg-red c-bg-red-font" style="padding: 10px">Some sample box</div> <code>class="c-bg-red c-bg-red-font"</code> </div> </div> <div class="tab-pane" id="red_tab_3_content"> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-red">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-red"</code> </div> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-border-1x c-btn-red">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-border-1x c-btn-red"</code> </div> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-border-2x c-btn-red">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-border-2x c-btn-red"</code> </div> </div> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default btn-md c-btn-grey-2 c-btn-bold c-square c-btn-uppercase" data-dismiss="modal">Ok</button> </div> </div> </div> </div> </div> <div class="col-md-2 col-sm-2 col-xs-6"> <div class="c-content-color-demo tooltips" data-original-title="Click to view demos for this color" data-toggle="modal" data-target="#demo_modal_red-1"> <div class="c-color-view c-bg-red-1 c-bg-red-1-font c-font-14 c-font-bold c-font-uppercase"> #cd6262 </div> <div class="c-color-info c-bg-white c-font-14 c-font-sbold c-font-uppercase"> red-1 </div> </div> <div class="modal fade" id="demo_modal_red-1"> <div class="modal-dialog modal-lg"> <div class="modal-content c-square"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> <h4 class="modal-title c-font-title c-font-sbold c-font-uppercase">red-1</h4> </div> <div class="modal-body"> <div class="c-content-tab-1 c-theme c-margin-t-30"> <div class="nav-justified"> <ul class="nav nav-tabs nav-justified c-font-uppercase c-font-bold"> <li class="active"> <a href="#red-1_tab_1_content" data-toggle="tab">Typography</a> </li> <li> <a href="#red-1_tab_2_content" data-toggle="tab">Background &amp; Border</a> </li> <li> <a href="#red-1_tab_3_content" data-toggle="tab">Buttons</a> </li> </ul> <div class="tab-content c-bordered c-padding"> <div class="tab-pane active" id="red-1_tab_1_content"> <div style="margin: 30px 0;"> <span class="c-font-red-1 c-font-24">Sample text...</span>&nbsp; <span class="c-font-red-1 c-font-24 c-font-bold">Sample text...</span>&nbsp; <span class="c-font-red-1 c-font-24 c-font-bold c-font-uppercase">Sample text...</span> </div> <code>class="c-font-red-1"</code> </div> <div class="tab-pane" id="red-1_tab_2_content"> <div style="margin: 30px 0;"> <div class="c-border-red-1" style="padding: 10px; border: 2px solid #fff;"> Some sample box </div> <code>class="c-border-red-1"</code> </div> <div style="margin: 30px 0;"> <div class="c-bg-red-1 c-bg-red-1-font" style="padding: 10px">Some sample box</div> <code>class="c-bg-red-1 c-bg-red-1-font"</code> </div> </div> <div class="tab-pane" id="red-1_tab_3_content"> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-red-1">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-red-1"</code> </div> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-border-1x c-btn-red-1">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-border-1x c-btn-red-1"</code> </div> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-border-2x c-btn-red-1">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-border-2x c-btn-red-1"</code> </div> </div> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default btn-md c-btn-grey-2 c-btn-bold c-square c-btn-uppercase" data-dismiss="modal">Ok</button> </div> </div> </div> </div> </div> <div class="col-md-2 col-sm-2 col-xs-6"> <div class="c-content-color-demo tooltips" data-original-title="Click to view demos for this color" data-toggle="modal" data-target="#demo_modal_red-2"> <div class="c-color-view c-bg-red-2 c-bg-red-2-font c-font-14 c-font-bold c-font-uppercase"> #e7505a </div> <div class="c-color-info c-bg-white c-font-14 c-font-sbold c-font-uppercase"> red-2 </div> </div> <div class="modal fade" id="demo_modal_red-2"> <div class="modal-dialog modal-lg"> <div class="modal-content c-square"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> <h4 class="modal-title c-font-title c-font-sbold c-font-uppercase">red-2</h4> </div> <div class="modal-body"> <div class="c-content-tab-1 c-theme c-margin-t-30"> <div class="nav-justified"> <ul class="nav nav-tabs nav-justified c-font-uppercase c-font-bold"> <li class="active"> <a href="#red-2_tab_1_content" data-toggle="tab">Typography</a> </li> <li> <a href="#red-2_tab_2_content" data-toggle="tab">Background &amp; Border</a> </li> <li> <a href="#red-2_tab_3_content" data-toggle="tab">Buttons</a> </li> </ul> <div class="tab-content c-bordered c-padding"> <div class="tab-pane active" id="red-2_tab_1_content"> <div style="margin: 30px 0;"> <span class="c-font-red-2 c-font-24">Sample text...</span>&nbsp; <span class="c-font-red-2 c-font-24 c-font-bold">Sample text...</span>&nbsp; <span class="c-font-red-2 c-font-24 c-font-bold c-font-uppercase">Sample text...</span> </div> <code>class="c-font-red-2"</code> </div> <div class="tab-pane" id="red-2_tab_2_content"> <div style="margin: 30px 0;"> <div class="c-border-red-2" style="padding: 10px; border: 2px solid #fff;"> Some sample box </div> <code>class="c-border-red-2"</code> </div> <div style="margin: 30px 0;"> <div class="c-bg-red-2 c-bg-red-2-font" style="padding: 10px">Some sample box</div> <code>class="c-bg-red-2 c-bg-red-2-font"</code> </div> </div> <div class="tab-pane" id="red-2_tab_3_content"> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-red-2">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-red-2"</code> </div> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-border-1x c-btn-red-2">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-border-1x c-btn-red-2"</code> </div> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-border-2x c-btn-red-2">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-border-2x c-btn-red-2"</code> </div> </div> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default btn-md c-btn-grey-2 c-btn-bold c-square c-btn-uppercase" data-dismiss="modal">Ok</button> </div> </div> </div> </div> </div> <div class="col-md-2 col-sm-2 col-xs-6"> <div class="c-content-color-demo tooltips" data-original-title="Click to view demos for this color" data-toggle="modal" data-target="#demo_modal_red-3"> <div class="c-color-view c-bg-red-3 c-bg-red-3-font c-font-14 c-font-bold c-font-uppercase"> #d05163 </div> <div class="c-color-info c-bg-white c-font-14 c-font-sbold c-font-uppercase"> red-3 </div> </div> <div class="modal fade" id="demo_modal_red-3"> <div class="modal-dialog modal-lg"> <div class="modal-content c-square"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> <h4 class="modal-title c-font-title c-font-sbold c-font-uppercase">red-3</h4> </div> <div class="modal-body"> <div class="c-content-tab-1 c-theme c-margin-t-30"> <div class="nav-justified"> <ul class="nav nav-tabs nav-justified c-font-uppercase c-font-bold"> <li class="active"> <a href="#red-3_tab_1_content" data-toggle="tab">Typography</a> </li> <li> <a href="#red-3_tab_2_content" data-toggle="tab">Background &amp; Border</a> </li> <li> <a href="#red-3_tab_3_content" data-toggle="tab">Buttons</a> </li> </ul> <div class="tab-content c-bordered c-padding"> <div class="tab-pane active" id="red-3_tab_1_content"> <div style="margin: 30px 0;"> <span class="c-font-red-3 c-font-24">Sample text...</span>&nbsp; <span class="c-font-red-3 c-font-24 c-font-bold">Sample text...</span>&nbsp; <span class="c-font-red-3 c-font-24 c-font-bold c-font-uppercase">Sample text...</span> </div> <code>class="c-font-red-3"</code> </div> <div class="tab-pane" id="red-3_tab_2_content"> <div style="margin: 30px 0;"> <div class="c-border-red-3" style="padding: 10px; border: 2px solid #fff;"> Some sample box </div> <code>class="c-border-red-3"</code> </div> <div style="margin: 30px 0;"> <div class="c-bg-red-3 c-bg-red-3-font" style="padding: 10px">Some sample box</div> <code>class="c-bg-red-3 c-bg-red-3-font"</code> </div> </div> <div class="tab-pane" id="red-3_tab_3_content"> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-red-3">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-red-3"</code> </div> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-border-1x c-btn-red-3">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-border-1x c-btn-red-3"</code> </div> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-border-2x c-btn-red-3">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-border-2x c-btn-red-3"</code> </div> </div> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default btn-md c-btn-grey-2 c-btn-bold c-square c-btn-uppercase" data-dismiss="modal">Ok</button> </div> </div> </div> </div> </div> <div class="col-md-2 col-sm-2 col-xs-6"> <div class="c-content-color-demo tooltips" data-original-title="Click to view demos for this color" data-toggle="modal" data-target="#demo_modal_yellow"> <div class="c-color-view c-bg-yellow c-bg-yellow-font c-font-14 c-font-bold c-font-uppercase"> #FF6B57 </div> <div class="c-color-info c-bg-white c-font-14 c-font-sbold c-font-uppercase"> yellow </div> </div> <div class="modal fade" id="demo_modal_yellow"> <div class="modal-dialog modal-lg"> <div class="modal-content c-square"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> <h4 class="modal-title c-font-title c-font-sbold c-font-uppercase">yellow</h4> </div> <div class="modal-body"> <div class="c-content-tab-1 c-theme c-margin-t-30"> <div class="nav-justified"> <ul class="nav nav-tabs nav-justified c-font-uppercase c-font-bold"> <li class="active"> <a href="#yellow_tab_1_content" data-toggle="tab">Typography</a> </li> <li> <a href="#yellow_tab_2_content" data-toggle="tab">Background &amp; Border</a> </li> <li> <a href="#yellow_tab_3_content" data-toggle="tab">Buttons</a> </li> </ul> <div class="tab-content c-bordered c-padding"> <div class="tab-pane active" id="yellow_tab_1_content"> <div style="margin: 30px 0;"> <span class="c-font-yellow c-font-24">Sample text...</span>&nbsp; <span class="c-font-yellow c-font-24 c-font-bold">Sample text...</span>&nbsp; <span class="c-font-yellow c-font-24 c-font-bold c-font-uppercase">Sample text...</span> </div> <code>class="c-font-yellow"</code> </div> <div class="tab-pane" id="yellow_tab_2_content"> <div style="margin: 30px 0;"> <div class="c-border-yellow" style="padding: 10px; border: 2px solid #fff;"> Some sample box </div> <code>class="c-border-yellow"</code> </div> <div style="margin: 30px 0;"> <div class="c-bg-yellow c-bg-yellow-font" style="padding: 10px">Some sample box</div> <code>class="c-bg-yellow c-bg-yellow-font"</code> </div> </div> <div class="tab-pane" id="yellow_tab_3_content"> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-yellow">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-yellow"</code> </div> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-border-1x c-btn-yellow">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-border-1x c-btn-yellow"</code> </div> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-border-2x c-btn-yellow">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-border-2x c-btn-yellow"</code> </div> </div> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default btn-md c-btn-grey-2 c-btn-bold c-square c-btn-uppercase" data-dismiss="modal">Ok</button> </div> </div> </div> </div> </div> </div> <div class="row"> <div class="col-md-2 col-sm-2 col-xs-6"> <div class="c-content-color-demo tooltips" data-original-title="Click to view demos for this color" data-toggle="modal" data-target="#demo_modal_yellow-1"> <div class="c-color-view c-bg-yellow-1 c-bg-yellow-1-font c-font-14 c-font-bold c-font-uppercase"> #c8d046 </div> <div class="c-color-info c-bg-white c-font-14 c-font-sbold c-font-uppercase"> yellow-1 </div> </div> <div class="modal fade" id="demo_modal_yellow-1"> <div class="modal-dialog modal-lg"> <div class="modal-content c-square"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> <h4 class="modal-title c-font-title c-font-sbold c-font-uppercase">yellow-1</h4> </div> <div class="modal-body"> <div class="c-content-tab-1 c-theme c-margin-t-30"> <div class="nav-justified"> <ul class="nav nav-tabs nav-justified c-font-uppercase c-font-bold"> <li class="active"> <a href="#yellow-1_tab_1_content" data-toggle="tab">Typography</a> </li> <li> <a href="#yellow-1_tab_2_content" data-toggle="tab">Background &amp; Border</a> </li> <li> <a href="#yellow-1_tab_3_content" data-toggle="tab">Buttons</a> </li> </ul> <div class="tab-content c-bordered c-padding"> <div class="tab-pane active" id="yellow-1_tab_1_content"> <div style="margin: 30px 0;"> <span class="c-font-yellow-1 c-font-24">Sample text...</span>&nbsp; <span class="c-font-yellow-1 c-font-24 c-font-bold">Sample text...</span>&nbsp; <span class="c-font-yellow-1 c-font-24 c-font-bold c-font-uppercase">Sample text...</span> </div> <code>class="c-font-yellow-1"</code> </div> <div class="tab-pane" id="yellow-1_tab_2_content"> <div style="margin: 30px 0;"> <div class="c-border-yellow-1" style="padding: 10px; border: 2px solid #fff;"> Some sample box </div> <code>class="c-border-yellow-1"</code> </div> <div style="margin: 30px 0;"> <div class="c-bg-yellow-1 c-bg-yellow-1-font" style="padding: 10px">Some sample box</div> <code>class="c-bg-yellow-1 c-bg-yellow-1-font"</code> </div> </div> <div class="tab-pane" id="yellow-1_tab_3_content"> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-yellow-1">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-yellow-1"</code> </div> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-border-1x c-btn-yellow-1">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-border-1x c-btn-yellow-1"</code> </div> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-border-2x c-btn-yellow-1">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-border-2x c-btn-yellow-1"</code> </div> </div> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default btn-md c-btn-grey-2 c-btn-bold c-square c-btn-uppercase" data-dismiss="modal">Ok</button> </div> </div> </div> </div> </div> <div class="col-md-2 col-sm-2 col-xs-6"> <div class="c-content-color-demo tooltips" data-original-title="Click to view demos for this color" data-toggle="modal" data-target="#demo_modal_yellow-2"> <div class="c-color-view c-bg-yellow-2 c-bg-yellow-2-font c-font-14 c-font-bold c-font-uppercase"> #c5bf66 </div> <div class="c-color-info c-bg-white c-font-14 c-font-sbold c-font-uppercase"> yellow-2 </div> </div> <div class="modal fade" id="demo_modal_yellow-2"> <div class="modal-dialog modal-lg"> <div class="modal-content c-square"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> <h4 class="modal-title c-font-title c-font-sbold c-font-uppercase">yellow-2</h4> </div> <div class="modal-body"> <div class="c-content-tab-1 c-theme c-margin-t-30"> <div class="nav-justified"> <ul class="nav nav-tabs nav-justified c-font-uppercase c-font-bold"> <li class="active"> <a href="#yellow-2_tab_1_content" data-toggle="tab">Typography</a> </li> <li> <a href="#yellow-2_tab_2_content" data-toggle="tab">Background &amp; Border</a> </li> <li> <a href="#yellow-2_tab_3_content" data-toggle="tab">Buttons</a> </li> </ul> <div class="tab-content c-bordered c-padding"> <div class="tab-pane active" id="yellow-2_tab_1_content"> <div style="margin: 30px 0;"> <span class="c-font-yellow-2 c-font-24">Sample text...</span>&nbsp; <span class="c-font-yellow-2 c-font-24 c-font-bold">Sample text...</span>&nbsp; <span class="c-font-yellow-2 c-font-24 c-font-bold c-font-uppercase">Sample text...</span> </div> <code>class="c-font-yellow-2"</code> </div> <div class="tab-pane" id="yellow-2_tab_2_content"> <div style="margin: 30px 0;"> <div class="c-border-yellow-2" style="padding: 10px; border: 2px solid #fff;"> Some sample box </div> <code>class="c-border-yellow-2"</code> </div> <div style="margin: 30px 0;"> <div class="c-bg-yellow-2 c-bg-yellow-2-font" style="padding: 10px">Some sample box</div> <code>class="c-bg-yellow-2 c-bg-yellow-2-font"</code> </div> </div> <div class="tab-pane" id="yellow-2_tab_3_content"> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-yellow-2">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-yellow-2"</code> </div> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-border-1x c-btn-yellow-2">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-border-1x c-btn-yellow-2"</code> </div> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-border-2x c-btn-yellow-2">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-border-2x c-btn-yellow-2"</code> </div> </div> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default btn-md c-btn-grey-2 c-btn-bold c-square c-btn-uppercase" data-dismiss="modal">Ok</button> </div> </div> </div> </div> </div> <div class="col-md-2 col-sm-2 col-xs-6"> <div class="c-content-color-demo tooltips" data-original-title="Click to view demos for this color" data-toggle="modal" data-target="#demo_modal_yellow-3"> <div class="c-color-view c-bg-yellow-3 c-bg-yellow-3-font c-font-14 c-font-bold c-font-uppercase"> #c5b96b </div> <div class="c-color-info c-bg-white c-font-14 c-font-sbold c-font-uppercase"> yellow-3 </div> </div> <div class="modal fade" id="demo_modal_yellow-3"> <div class="modal-dialog modal-lg"> <div class="modal-content c-square"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> <h4 class="modal-title c-font-title c-font-sbold c-font-uppercase">yellow-3</h4> </div> <div class="modal-body"> <div class="c-content-tab-1 c-theme c-margin-t-30"> <div class="nav-justified"> <ul class="nav nav-tabs nav-justified c-font-uppercase c-font-bold"> <li class="active"> <a href="#yellow-3_tab_1_content" data-toggle="tab">Typography</a> </li> <li> <a href="#yellow-3_tab_2_content" data-toggle="tab">Background &amp; Border</a> </li> <li> <a href="#yellow-3_tab_3_content" data-toggle="tab">Buttons</a> </li> </ul> <div class="tab-content c-bordered c-padding"> <div class="tab-pane active" id="yellow-3_tab_1_content"> <div style="margin: 30px 0;"> <span class="c-font-yellow-3 c-font-24">Sample text...</span>&nbsp; <span class="c-font-yellow-3 c-font-24 c-font-bold">Sample text...</span>&nbsp; <span class="c-font-yellow-3 c-font-24 c-font-bold c-font-uppercase">Sample text...</span> </div> <code>class="c-font-yellow-3"</code> </div> <div class="tab-pane" id="yellow-3_tab_2_content"> <div style="margin: 30px 0;"> <div class="c-border-yellow-3" style="padding: 10px; border: 2px solid #fff;"> Some sample box </div> <code>class="c-border-yellow-3"</code> </div> <div style="margin: 30px 0;"> <div class="c-bg-yellow-3 c-bg-yellow-3-font" style="padding: 10px">Some sample box</div> <code>class="c-bg-yellow-3 c-bg-yellow-3-font"</code> </div> </div> <div class="tab-pane" id="yellow-3_tab_3_content"> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-yellow-3">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-yellow-3"</code> </div> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-border-1x c-btn-yellow-3">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-border-1x c-btn-yellow-3"</code> </div> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-border-2x c-btn-yellow-3">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-border-2x c-btn-yellow-3"</code> </div> </div> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default btn-md c-btn-grey-2 c-btn-bold c-square c-btn-uppercase" data-dismiss="modal">Ok</button> </div> </div> </div> </div> </div> <div class="col-md-2 col-sm-2 col-xs-6"> <div class="c-content-color-demo tooltips" data-original-title="Click to view demos for this color" data-toggle="modal" data-target="#demo_modal_blue"> <div class="c-color-view c-bg-blue c-bg-blue-font c-font-14 c-font-bold c-font-uppercase"> #3498DB </div> <div class="c-color-info c-bg-white c-font-14 c-font-sbold c-font-uppercase"> blue </div> </div> <div class="modal fade" id="demo_modal_blue"> <div class="modal-dialog modal-lg"> <div class="modal-content c-square"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> <h4 class="modal-title c-font-title c-font-sbold c-font-uppercase">blue</h4> </div> <div class="modal-body"> <div class="c-content-tab-1 c-theme c-margin-t-30"> <div class="nav-justified"> <ul class="nav nav-tabs nav-justified c-font-uppercase c-font-bold"> <li class="active"> <a href="#blue_tab_1_content" data-toggle="tab">Typography</a> </li> <li> <a href="#blue_tab_2_content" data-toggle="tab">Background &amp; Border</a> </li> <li> <a href="#blue_tab_3_content" data-toggle="tab">Buttons</a> </li> </ul> <div class="tab-content c-bordered c-padding"> <div class="tab-pane active" id="blue_tab_1_content"> <div style="margin: 30px 0;"> <span class="c-font-blue c-font-24">Sample text...</span>&nbsp; <span class="c-font-blue c-font-24 c-font-bold">Sample text...</span>&nbsp; <span class="c-font-blue c-font-24 c-font-bold c-font-uppercase">Sample text...</span> </div> <code>class="c-font-blue"</code> </div> <div class="tab-pane" id="blue_tab_2_content"> <div style="margin: 30px 0;"> <div class="c-border-blue" style="padding: 10px; border: 2px solid #fff;"> Some sample box </div> <code>class="c-border-blue"</code> </div> <div style="margin: 30px 0;"> <div class="c-bg-blue c-bg-blue-font" style="padding: 10px">Some sample box</div> <code>class="c-bg-blue c-bg-blue-font"</code> </div> </div> <div class="tab-pane" id="blue_tab_3_content"> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-blue">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-blue"</code> </div> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-border-1x c-btn-blue">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-border-1x c-btn-blue"</code> </div> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-border-2x c-btn-blue">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-border-2x c-btn-blue"</code> </div> </div> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default btn-md c-btn-grey-2 c-btn-bold c-square c-btn-uppercase" data-dismiss="modal">Ok</button> </div> </div> </div> </div> </div> <div class="col-md-2 col-sm-2 col-xs-6"> <div class="c-content-color-demo tooltips" data-original-title="Click to view demos for this color" data-toggle="modal" data-target="#demo_modal_blue-1"> <div class="c-color-view c-bg-blue-1 c-bg-blue-1-font c-font-14 c-font-bold c-font-uppercase"> #5e9cd1 </div> <div class="c-color-info c-bg-white c-font-14 c-font-sbold c-font-uppercase"> blue-1 </div> </div> <div class="modal fade" id="demo_modal_blue-1"> <div class="modal-dialog modal-lg"> <div class="modal-content c-square"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> <h4 class="modal-title c-font-title c-font-sbold c-font-uppercase">blue-1</h4> </div> <div class="modal-body"> <div class="c-content-tab-1 c-theme c-margin-t-30"> <div class="nav-justified"> <ul class="nav nav-tabs nav-justified c-font-uppercase c-font-bold"> <li class="active"> <a href="#blue-1_tab_1_content" data-toggle="tab">Typography</a> </li> <li> <a href="#blue-1_tab_2_content" data-toggle="tab">Background &amp; Border</a> </li> <li> <a href="#blue-1_tab_3_content" data-toggle="tab">Buttons</a> </li> </ul> <div class="tab-content c-bordered c-padding"> <div class="tab-pane active" id="blue-1_tab_1_content"> <div style="margin: 30px 0;"> <span class="c-font-blue-1 c-font-24">Sample text...</span>&nbsp; <span class="c-font-blue-1 c-font-24 c-font-bold">Sample text...</span>&nbsp; <span class="c-font-blue-1 c-font-24 c-font-bold c-font-uppercase">Sample text...</span> </div> <code>class="c-font-blue-1"</code> </div> <div class="tab-pane" id="blue-1_tab_2_content"> <div style="margin: 30px 0;"> <div class="c-border-blue-1" style="padding: 10px; border: 2px solid #fff;"> Some sample box </div> <code>class="c-border-blue-1"</code> </div> <div style="margin: 30px 0;"> <div class="c-bg-blue-1 c-bg-blue-1-font" style="padding: 10px">Some sample box</div> <code>class="c-bg-blue-1 c-bg-blue-1-font"</code> </div> </div> <div class="tab-pane" id="blue-1_tab_3_content"> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-blue-1">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-blue-1"</code> </div> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-border-1x c-btn-blue-1">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-border-1x c-btn-blue-1"</code> </div> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-border-2x c-btn-blue-1">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-border-2x c-btn-blue-1"</code> </div> </div> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default btn-md c-btn-grey-2 c-btn-bold c-square c-btn-uppercase" data-dismiss="modal">Ok</button> </div> </div> </div> </div> </div> <div class="col-md-2 col-sm-2 col-xs-6"> <div class="c-content-color-demo tooltips" data-original-title="Click to view demos for this color" data-toggle="modal" data-target="#demo_modal_blue-2"> <div class="c-color-view c-bg-blue-2 c-bg-blue-2-font c-font-14 c-font-bold c-font-uppercase"> #5893dd </div> <div class="c-color-info c-bg-white c-font-14 c-font-sbold c-font-uppercase"> blue-2 </div> </div> <div class="modal fade" id="demo_modal_blue-2"> <div class="modal-dialog modal-lg"> <div class="modal-content c-square"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> <h4 class="modal-title c-font-title c-font-sbold c-font-uppercase">blue-2</h4> </div> <div class="modal-body"> <div class="c-content-tab-1 c-theme c-margin-t-30"> <div class="nav-justified"> <ul class="nav nav-tabs nav-justified c-font-uppercase c-font-bold"> <li class="active"> <a href="#blue-2_tab_1_content" data-toggle="tab">Typography</a> </li> <li> <a href="#blue-2_tab_2_content" data-toggle="tab">Background &amp; Border</a> </li> <li> <a href="#blue-2_tab_3_content" data-toggle="tab">Buttons</a> </li> </ul> <div class="tab-content c-bordered c-padding"> <div class="tab-pane active" id="blue-2_tab_1_content"> <div style="margin: 30px 0;"> <span class="c-font-blue-2 c-font-24">Sample text...</span>&nbsp; <span class="c-font-blue-2 c-font-24 c-font-bold">Sample text...</span>&nbsp; <span class="c-font-blue-2 c-font-24 c-font-bold c-font-uppercase">Sample text...</span> </div> <code>class="c-font-blue-2"</code> </div> <div class="tab-pane" id="blue-2_tab_2_content"> <div style="margin: 30px 0;"> <div class="c-border-blue-2" style="padding: 10px; border: 2px solid #fff;"> Some sample box </div> <code>class="c-border-blue-2"</code> </div> <div style="margin: 30px 0;"> <div class="c-bg-blue-2 c-bg-blue-2-font" style="padding: 10px">Some sample box</div> <code>class="c-bg-blue-2 c-bg-blue-2-font"</code> </div> </div> <div class="tab-pane" id="blue-2_tab_3_content"> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-blue-2">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-blue-2"</code> </div> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-border-1x c-btn-blue-2">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-border-1x c-btn-blue-2"</code> </div> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-border-2x c-btn-blue-2">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-border-2x c-btn-blue-2"</code> </div> </div> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default btn-md c-btn-grey-2 c-btn-bold c-square c-btn-uppercase" data-dismiss="modal">Ok</button> </div> </div> </div> </div> </div> </div> <div class="row"> <div class="col-md-2 col-sm-2 col-xs-6"> <div class="c-content-color-demo tooltips" data-original-title="Click to view demos for this color" data-toggle="modal" data-target="#demo_modal_blue-3"> <div class="c-color-view c-bg-blue-3 c-bg-blue-3-font c-font-14 c-font-bold c-font-uppercase"> #57bfe1 </div> <div class="c-color-info c-bg-white c-font-14 c-font-sbold c-font-uppercase"> blue-3 </div> </div> <div class="modal fade" id="demo_modal_blue-3"> <div class="modal-dialog modal-lg"> <div class="modal-content c-square"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> <h4 class="modal-title c-font-title c-font-sbold c-font-uppercase">blue-3</h4> </div> <div class="modal-body"> <div class="c-content-tab-1 c-theme c-margin-t-30"> <div class="nav-justified"> <ul class="nav nav-tabs nav-justified c-font-uppercase c-font-bold"> <li class="active"> <a href="#blue-3_tab_1_content" data-toggle="tab">Typography</a> </li> <li> <a href="#blue-3_tab_2_content" data-toggle="tab">Background &amp; Border</a> </li> <li> <a href="#blue-3_tab_3_content" data-toggle="tab">Buttons</a> </li> </ul> <div class="tab-content c-bordered c-padding"> <div class="tab-pane active" id="blue-3_tab_1_content"> <div style="margin: 30px 0;"> <span class="c-font-blue-3 c-font-24">Sample text...</span>&nbsp; <span class="c-font-blue-3 c-font-24 c-font-bold">Sample text...</span>&nbsp; <span class="c-font-blue-3 c-font-24 c-font-bold c-font-uppercase">Sample text...</span> </div> <code>class="c-font-blue-3"</code> </div> <div class="tab-pane" id="blue-3_tab_2_content"> <div style="margin: 30px 0;"> <div class="c-border-blue-3" style="padding: 10px; border: 2px solid #fff;"> Some sample box </div> <code>class="c-border-blue-3"</code> </div> <div style="margin: 30px 0;"> <div class="c-bg-blue-3 c-bg-blue-3-font" style="padding: 10px">Some sample box</div> <code>class="c-bg-blue-3 c-bg-blue-3-font"</code> </div> </div> <div class="tab-pane" id="blue-3_tab_3_content"> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-blue-3">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-blue-3"</code> </div> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-border-1x c-btn-blue-3">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-border-1x c-btn-blue-3"</code> </div> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-border-2x c-btn-blue-3">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-border-2x c-btn-blue-3"</code> </div> </div> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default btn-md c-btn-grey-2 c-btn-bold c-square c-btn-uppercase" data-dismiss="modal">Ok</button> </div> </div> </div> </div> </div> <div class="col-md-2 col-sm-2 col-xs-6"> <div class="c-content-color-demo tooltips" data-original-title="Click to view demos for this color" data-toggle="modal" data-target="#demo_modal_purple"> <div class="c-color-view c-bg-purple c-bg-purple-font c-font-14 c-font-bold c-font-uppercase"> #b771b0 </div> <div class="c-color-info c-bg-white c-font-14 c-font-sbold c-font-uppercase"> purple </div> </div> <div class="modal fade" id="demo_modal_purple"> <div class="modal-dialog modal-lg"> <div class="modal-content c-square"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> <h4 class="modal-title c-font-title c-font-sbold c-font-uppercase">purple</h4> </div> <div class="modal-body"> <div class="c-content-tab-1 c-theme c-margin-t-30"> <div class="nav-justified"> <ul class="nav nav-tabs nav-justified c-font-uppercase c-font-bold"> <li class="active"> <a href="#purple_tab_1_content" data-toggle="tab">Typography</a> </li> <li> <a href="#purple_tab_2_content" data-toggle="tab">Background &amp; Border</a> </li> <li> <a href="#purple_tab_3_content" data-toggle="tab">Buttons</a> </li> </ul> <div class="tab-content c-bordered c-padding"> <div class="tab-pane active" id="purple_tab_1_content"> <div style="margin: 30px 0;"> <span class="c-font-purple c-font-24">Sample text...</span>&nbsp; <span class="c-font-purple c-font-24 c-font-bold">Sample text...</span>&nbsp; <span class="c-font-purple c-font-24 c-font-bold c-font-uppercase">Sample text...</span> </div> <code>class="c-font-purple"</code> </div> <div class="tab-pane" id="purple_tab_2_content"> <div style="margin: 30px 0;"> <div class="c-border-purple" style="padding: 10px; border: 2px solid #fff;"> Some sample box </div> <code>class="c-border-purple"</code> </div> <div style="margin: 30px 0;"> <div class="c-bg-purple c-bg-purple-font" style="padding: 10px">Some sample box</div> <code>class="c-bg-purple c-bg-purple-font"</code> </div> </div> <div class="tab-pane" id="purple_tab_3_content"> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-purple">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-purple"</code> </div> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-border-1x c-btn-purple">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-border-1x c-btn-purple"</code> </div> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-border-2x c-btn-purple">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-border-2x c-btn-purple"</code> </div> </div> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default btn-md c-btn-grey-2 c-btn-bold c-square c-btn-uppercase" data-dismiss="modal">Ok</button> </div> </div> </div> </div> </div> <div class="col-md-2 col-sm-2 col-xs-6"> <div class="c-content-color-demo tooltips" data-original-title="Click to view demos for this color" data-toggle="modal" data-target="#demo_modal_purple-1"> <div class="c-color-view c-bg-purple-1 c-bg-purple-1-font c-font-14 c-font-bold c-font-uppercase"> #a962bb </div> <div class="c-color-info c-bg-white c-font-14 c-font-sbold c-font-uppercase"> purple-1 </div> </div> <div class="modal fade" id="demo_modal_purple-1"> <div class="modal-dialog modal-lg"> <div class="modal-content c-square"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> <h4 class="modal-title c-font-title c-font-sbold c-font-uppercase">purple-1</h4> </div> <div class="modal-body"> <div class="c-content-tab-1 c-theme c-margin-t-30"> <div class="nav-justified"> <ul class="nav nav-tabs nav-justified c-font-uppercase c-font-bold"> <li class="active"> <a href="#purple-1_tab_1_content" data-toggle="tab">Typography</a> </li> <li> <a href="#purple-1_tab_2_content" data-toggle="tab">Background &amp; Border</a> </li> <li> <a href="#purple-1_tab_3_content" data-toggle="tab">Buttons</a> </li> </ul> <div class="tab-content c-bordered c-padding"> <div class="tab-pane active" id="purple-1_tab_1_content"> <div style="margin: 30px 0;"> <span class="c-font-purple-1 c-font-24">Sample text...</span>&nbsp; <span class="c-font-purple-1 c-font-24 c-font-bold">Sample text...</span>&nbsp; <span class="c-font-purple-1 c-font-24 c-font-bold c-font-uppercase">Sample text...</span> </div> <code>class="c-font-purple-1"</code> </div> <div class="tab-pane" id="purple-1_tab_2_content"> <div style="margin: 30px 0;"> <div class="c-border-purple-1" style="padding: 10px; border: 2px solid #fff;"> Some sample box </div> <code>class="c-border-purple-1"</code> </div> <div style="margin: 30px 0;"> <div class="c-bg-purple-1 c-bg-purple-1-font" style="padding: 10px">Some sample box</div> <code>class="c-bg-purple-1 c-bg-purple-1-font"</code> </div> </div> <div class="tab-pane" id="purple-1_tab_3_content"> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-purple-1">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-purple-1"</code> </div> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-border-1x c-btn-purple-1">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-border-1x c-btn-purple-1"</code> </div> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-border-2x c-btn-purple-1">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-border-2x c-btn-purple-1"</code> </div> </div> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default btn-md c-btn-grey-2 c-btn-bold c-square c-btn-uppercase" data-dismiss="modal">Ok</button> </div> </div> </div> </div> </div> <div class="col-md-2 col-sm-2 col-xs-6"> <div class="c-content-color-demo tooltips" data-original-title="Click to view demos for this color" data-toggle="modal" data-target="#demo_modal_purple-2"> <div class="c-color-view c-bg-purple-2 c-bg-purple-2-font c-font-14 c-font-bold c-font-uppercase"> #aa67a3 </div> <div class="c-color-info c-bg-white c-font-14 c-font-sbold c-font-uppercase"> purple-2 </div> </div> <div class="modal fade" id="demo_modal_purple-2"> <div class="modal-dialog modal-lg"> <div class="modal-content c-square"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> <h4 class="modal-title c-font-title c-font-sbold c-font-uppercase">purple-2</h4> </div> <div class="modal-body"> <div class="c-content-tab-1 c-theme c-margin-t-30"> <div class="nav-justified"> <ul class="nav nav-tabs nav-justified c-font-uppercase c-font-bold"> <li class="active"> <a href="#purple-2_tab_1_content" data-toggle="tab">Typography</a> </li> <li> <a href="#purple-2_tab_2_content" data-toggle="tab">Background &amp; Border</a> </li> <li> <a href="#purple-2_tab_3_content" data-toggle="tab">Buttons</a> </li> </ul> <div class="tab-content c-bordered c-padding"> <div class="tab-pane active" id="purple-2_tab_1_content"> <div style="margin: 30px 0;"> <span class="c-font-purple-2 c-font-24">Sample text...</span>&nbsp; <span class="c-font-purple-2 c-font-24 c-font-bold">Sample text...</span>&nbsp; <span class="c-font-purple-2 c-font-24 c-font-bold c-font-uppercase">Sample text...</span> </div> <code>class="c-font-purple-2"</code> </div> <div class="tab-pane" id="purple-2_tab_2_content"> <div style="margin: 30px 0;"> <div class="c-border-purple-2" style="padding: 10px; border: 2px solid #fff;"> Some sample box </div> <code>class="c-border-purple-2"</code> </div> <div style="margin: 30px 0;"> <div class="c-bg-purple-2 c-bg-purple-2-font" style="padding: 10px">Some sample box</div> <code>class="c-bg-purple-2 c-bg-purple-2-font"</code> </div> </div> <div class="tab-pane" id="purple-2_tab_3_content"> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-purple-2">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-purple-2"</code> </div> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-border-1x c-btn-purple-2">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-border-1x c-btn-purple-2"</code> </div> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-border-2x c-btn-purple-2">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-border-2x c-btn-purple-2"</code> </div> </div> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default btn-md c-btn-grey-2 c-btn-bold c-square c-btn-uppercase" data-dismiss="modal">Ok</button> </div> </div> </div> </div> </div> <div class="col-md-2 col-sm-2 col-xs-6"> <div class="c-content-color-demo tooltips" data-original-title="Click to view demos for this color" data-toggle="modal" data-target="#demo_modal_purple-3"> <div class="c-color-view c-bg-purple-3 c-bg-purple-3-font c-font-14 c-font-bold c-font-uppercase"> #ac3773 </div> <div class="c-color-info c-bg-white c-font-14 c-font-sbold c-font-uppercase"> purple-3 </div> </div> <div class="modal fade" id="demo_modal_purple-3"> <div class="modal-dialog modal-lg"> <div class="modal-content c-square"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> <h4 class="modal-title c-font-title c-font-sbold c-font-uppercase">purple-3</h4> </div> <div class="modal-body"> <div class="c-content-tab-1 c-theme c-margin-t-30"> <div class="nav-justified"> <ul class="nav nav-tabs nav-justified c-font-uppercase c-font-bold"> <li class="active"> <a href="#purple-3_tab_1_content" data-toggle="tab">Typography</a> </li> <li> <a href="#purple-3_tab_2_content" data-toggle="tab">Background &amp; Border</a> </li> <li> <a href="#purple-3_tab_3_content" data-toggle="tab">Buttons</a> </li> </ul> <div class="tab-content c-bordered c-padding"> <div class="tab-pane active" id="purple-3_tab_1_content"> <div style="margin: 30px 0;"> <span class="c-font-purple-3 c-font-24">Sample text...</span>&nbsp; <span class="c-font-purple-3 c-font-24 c-font-bold">Sample text...</span>&nbsp; <span class="c-font-purple-3 c-font-24 c-font-bold c-font-uppercase">Sample text...</span> </div> <code>class="c-font-purple-3"</code> </div> <div class="tab-pane" id="purple-3_tab_2_content"> <div style="margin: 30px 0;"> <div class="c-border-purple-3" style="padding: 10px; border: 2px solid #fff;"> Some sample box </div> <code>class="c-border-purple-3"</code> </div> <div style="margin: 30px 0;"> <div class="c-bg-purple-3 c-bg-purple-3-font" style="padding: 10px">Some sample box</div> <code>class="c-bg-purple-3 c-bg-purple-3-font"</code> </div> </div> <div class="tab-pane" id="purple-3_tab_3_content"> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-purple-3">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-purple-3"</code> </div> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-border-1x c-btn-purple-3">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-border-1x c-btn-purple-3"</code> </div> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-border-2x c-btn-purple-3">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-border-2x c-btn-purple-3"</code> </div> </div> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default btn-md c-btn-grey-2 c-btn-bold c-square c-btn-uppercase" data-dismiss="modal">Ok</button> </div> </div> </div> </div> </div> <div class="col-md-2 col-sm-2 col-xs-6"> <div class="c-content-color-demo tooltips" data-original-title="Click to view demos for this color" data-toggle="modal" data-target="#demo_modal_brown"> <div class="c-color-view c-bg-brown c-bg-brown-font c-font-14 c-font-bold c-font-uppercase"> #8a7f68 </div> <div class="c-color-info c-bg-white c-font-14 c-font-sbold c-font-uppercase"> brown </div> </div> <div class="modal fade" id="demo_modal_brown"> <div class="modal-dialog modal-lg"> <div class="modal-content c-square"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> <h4 class="modal-title c-font-title c-font-sbold c-font-uppercase">brown</h4> </div> <div class="modal-body"> <div class="c-content-tab-1 c-theme c-margin-t-30"> <div class="nav-justified"> <ul class="nav nav-tabs nav-justified c-font-uppercase c-font-bold"> <li class="active"> <a href="#brown_tab_1_content" data-toggle="tab">Typography</a> </li> <li> <a href="#brown_tab_2_content" data-toggle="tab">Background &amp; Border</a> </li> <li> <a href="#brown_tab_3_content" data-toggle="tab">Buttons</a> </li> </ul> <div class="tab-content c-bordered c-padding"> <div class="tab-pane active" id="brown_tab_1_content"> <div style="margin: 30px 0;"> <span class="c-font-brown c-font-24">Sample text...</span>&nbsp; <span class="c-font-brown c-font-24 c-font-bold">Sample text...</span>&nbsp; <span class="c-font-brown c-font-24 c-font-bold c-font-uppercase">Sample text...</span> </div> <code>class="c-font-brown"</code> </div> <div class="tab-pane" id="brown_tab_2_content"> <div style="margin: 30px 0;"> <div class="c-border-brown" style="padding: 10px; border: 2px solid #fff;"> Some sample box </div> <code>class="c-border-brown"</code> </div> <div style="margin: 30px 0;"> <div class="c-bg-brown c-bg-brown-font" style="padding: 10px">Some sample box</div> <code>class="c-bg-brown c-bg-brown-font"</code> </div> </div> <div class="tab-pane" id="brown_tab_3_content"> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-brown">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-brown"</code> </div> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-border-1x c-btn-brown">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-border-1x c-btn-brown"</code> </div> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-border-2x c-btn-brown">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-border-2x c-btn-brown"</code> </div> </div> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default btn-md c-btn-grey-2 c-btn-bold c-square c-btn-uppercase" data-dismiss="modal">Ok</button> </div> </div> </div> </div> </div> </div> <div class="row"> <div class="col-md-2 col-sm-2 col-xs-6"> <div class="c-content-color-demo tooltips" data-original-title="Click to view demos for this color" data-toggle="modal" data-target="#demo_modal_brown-1"> <div class="c-color-view c-bg-brown-1 c-bg-brown-1-font c-font-14 c-font-bold c-font-uppercase"> #685e47 </div> <div class="c-color-info c-bg-white c-font-14 c-font-sbold c-font-uppercase"> brown-1 </div> </div> <div class="modal fade" id="demo_modal_brown-1"> <div class="modal-dialog modal-lg"> <div class="modal-content c-square"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> <h4 class="modal-title c-font-title c-font-sbold c-font-uppercase">brown-1</h4> </div> <div class="modal-body"> <div class="c-content-tab-1 c-theme c-margin-t-30"> <div class="nav-justified"> <ul class="nav nav-tabs nav-justified c-font-uppercase c-font-bold"> <li class="active"> <a href="#brown-1_tab_1_content" data-toggle="tab">Typography</a> </li> <li> <a href="#brown-1_tab_2_content" data-toggle="tab">Background &amp; Border</a> </li> <li> <a href="#brown-1_tab_3_content" data-toggle="tab">Buttons</a> </li> </ul> <div class="tab-content c-bordered c-padding"> <div class="tab-pane active" id="brown-1_tab_1_content"> <div style="margin: 30px 0;"> <span class="c-font-brown-1 c-font-24">Sample text...</span>&nbsp; <span class="c-font-brown-1 c-font-24 c-font-bold">Sample text...</span>&nbsp; <span class="c-font-brown-1 c-font-24 c-font-bold c-font-uppercase">Sample text...</span> </div> <code>class="c-font-brown-1"</code> </div> <div class="tab-pane" id="brown-1_tab_2_content"> <div style="margin: 30px 0;"> <div class="c-border-brown-1" style="padding: 10px; border: 2px solid #fff;"> Some sample box </div> <code>class="c-border-brown-1"</code> </div> <div style="margin: 30px 0;"> <div class="c-bg-brown-1 c-bg-brown-1-font" style="padding: 10px">Some sample box</div> <code>class="c-bg-brown-1 c-bg-brown-1-font"</code> </div> </div> <div class="tab-pane" id="brown-1_tab_3_content"> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-brown-1">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-brown-1"</code> </div> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-border-1x c-btn-brown-1">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-border-1x c-btn-brown-1"</code> </div> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-border-2x c-btn-brown-1">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-border-2x c-btn-brown-1"</code> </div> </div> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default btn-md c-btn-grey-2 c-btn-bold c-square c-btn-uppercase" data-dismiss="modal">Ok</button> </div> </div> </div> </div> </div> <div class="col-md-2 col-sm-2 col-xs-6"> <div class="c-content-color-demo tooltips" data-original-title="Click to view demos for this color" data-toggle="modal" data-target="#demo_modal_brown-2"> <div class="c-color-view c-bg-brown-2 c-bg-brown-2-font c-font-14 c-font-bold c-font-uppercase"> #7a6a61 </div> <div class="c-color-info c-bg-white c-font-14 c-font-sbold c-font-uppercase"> brown-2 </div> </div> <div class="modal fade" id="demo_modal_brown-2"> <div class="modal-dialog modal-lg"> <div class="modal-content c-square"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> <h4 class="modal-title c-font-title c-font-sbold c-font-uppercase">brown-2</h4> </div> <div class="modal-body"> <div class="c-content-tab-1 c-theme c-margin-t-30"> <div class="nav-justified"> <ul class="nav nav-tabs nav-justified c-font-uppercase c-font-bold"> <li class="active"> <a href="#brown-2_tab_1_content" data-toggle="tab">Typography</a> </li> <li> <a href="#brown-2_tab_2_content" data-toggle="tab">Background &amp; Border</a> </li> <li> <a href="#brown-2_tab_3_content" data-toggle="tab">Buttons</a> </li> </ul> <div class="tab-content c-bordered c-padding"> <div class="tab-pane active" id="brown-2_tab_1_content"> <div style="margin: 30px 0;"> <span class="c-font-brown-2 c-font-24">Sample text...</span>&nbsp; <span class="c-font-brown-2 c-font-24 c-font-bold">Sample text...</span>&nbsp; <span class="c-font-brown-2 c-font-24 c-font-bold c-font-uppercase">Sample text...</span> </div> <code>class="c-font-brown-2"</code> </div> <div class="tab-pane" id="brown-2_tab_2_content"> <div style="margin: 30px 0;"> <div class="c-border-brown-2" style="padding: 10px; border: 2px solid #fff;"> Some sample box </div> <code>class="c-border-brown-2"</code> </div> <div style="margin: 30px 0;"> <div class="c-bg-brown-2 c-bg-brown-2-font" style="padding: 10px">Some sample box</div> <code>class="c-bg-brown-2 c-bg-brown-2-font"</code> </div> </div> <div class="tab-pane" id="brown-2_tab_3_content"> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-brown-2">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-brown-2"</code> </div> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-border-1x c-btn-brown-2">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-border-1x c-btn-brown-2"</code> </div> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-border-2x c-btn-brown-2">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-border-2x c-btn-brown-2"</code> </div> </div> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default btn-md c-btn-grey-2 c-btn-bold c-square c-btn-uppercase" data-dismiss="modal">Ok</button> </div> </div> </div> </div> </div> <div class="col-md-2 col-sm-2 col-xs-6"> <div class="c-content-color-demo tooltips" data-original-title="Click to view demos for this color" data-toggle="modal" data-target="#demo_modal_brown-3"> <div class="c-color-view c-bg-brown-3 c-bg-brown-3-font c-font-14 c-font-bold c-font-uppercase"> #9d8b81 </div> <div class="c-color-info c-bg-white c-font-14 c-font-sbold c-font-uppercase"> brown-3 </div> </div> <div class="modal fade" id="demo_modal_brown-3"> <div class="modal-dialog modal-lg"> <div class="modal-content c-square"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> <h4 class="modal-title c-font-title c-font-sbold c-font-uppercase">brown-3</h4> </div> <div class="modal-body"> <div class="c-content-tab-1 c-theme c-margin-t-30"> <div class="nav-justified"> <ul class="nav nav-tabs nav-justified c-font-uppercase c-font-bold"> <li class="active"> <a href="#brown-3_tab_1_content" data-toggle="tab">Typography</a> </li> <li> <a href="#brown-3_tab_2_content" data-toggle="tab">Background &amp; Border</a> </li> <li> <a href="#brown-3_tab_3_content" data-toggle="tab">Buttons</a> </li> </ul> <div class="tab-content c-bordered c-padding"> <div class="tab-pane active" id="brown-3_tab_1_content"> <div style="margin: 30px 0;"> <span class="c-font-brown-3 c-font-24">Sample text...</span>&nbsp; <span class="c-font-brown-3 c-font-24 c-font-bold">Sample text...</span>&nbsp; <span class="c-font-brown-3 c-font-24 c-font-bold c-font-uppercase">Sample text...</span> </div> <code>class="c-font-brown-3"</code> </div> <div class="tab-pane" id="brown-3_tab_2_content"> <div style="margin: 30px 0;"> <div class="c-border-brown-3" style="padding: 10px; border: 2px solid #fff;"> Some sample box </div> <code>class="c-border-brown-3"</code> </div> <div style="margin: 30px 0;"> <div class="c-bg-brown-3 c-bg-brown-3-font" style="padding: 10px">Some sample box</div> <code>class="c-bg-brown-3 c-bg-brown-3-font"</code> </div> </div> <div class="tab-pane" id="brown-3_tab_3_content"> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-brown-3">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-brown-3"</code> </div> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-border-1x c-btn-brown-3">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-border-1x c-btn-brown-3"</code> </div> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-border-2x c-btn-brown-3">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-border-2x c-btn-brown-3"</code> </div> </div> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default btn-md c-btn-grey-2 c-btn-bold c-square c-btn-uppercase" data-dismiss="modal">Ok</button> </div> </div> </div> </div> </div> <div class="col-md-2 col-sm-2 col-xs-6"> <div class="c-content-color-demo tooltips" data-original-title="Click to view demos for this color" data-toggle="modal" data-target="#demo_modal_dark"> <div class="c-color-view c-bg-dark c-bg-dark-font c-font-14 c-font-bold c-font-uppercase"> #2f353b </div> <div class="c-color-info c-bg-white c-font-14 c-font-sbold c-font-uppercase"> dark </div> </div> <div class="modal fade" id="demo_modal_dark"> <div class="modal-dialog modal-lg"> <div class="modal-content c-square"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> <h4 class="modal-title c-font-title c-font-sbold c-font-uppercase">dark</h4> </div> <div class="modal-body"> <div class="c-content-tab-1 c-theme c-margin-t-30"> <div class="nav-justified"> <ul class="nav nav-tabs nav-justified c-font-uppercase c-font-bold"> <li class="active"> <a href="#dark_tab_1_content" data-toggle="tab">Typography</a> </li> <li> <a href="#dark_tab_2_content" data-toggle="tab">Background &amp; Border</a> </li> <li> <a href="#dark_tab_3_content" data-toggle="tab">Buttons</a> </li> </ul> <div class="tab-content c-bordered c-padding"> <div class="tab-pane active" id="dark_tab_1_content"> <div style="margin: 30px 0;"> <span class="c-font-dark c-font-24">Sample text...</span>&nbsp; <span class="c-font-dark c-font-24 c-font-bold">Sample text...</span>&nbsp; <span class="c-font-dark c-font-24 c-font-bold c-font-uppercase">Sample text...</span> </div> <code>class="c-font-dark"</code> </div> <div class="tab-pane" id="dark_tab_2_content"> <div style="margin: 30px 0;"> <div class="c-border-dark" style="padding: 10px; border: 2px solid #fff;"> Some sample box </div> <code>class="c-border-dark"</code> </div> <div style="margin: 30px 0;"> <div class="c-bg-dark c-bg-dark-font" style="padding: 10px">Some sample box</div> <code>class="c-bg-dark c-bg-dark-font"</code> </div> </div> <div class="tab-pane" id="dark_tab_3_content"> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-dark">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-dark"</code> </div> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-border-1x c-btn-dark">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-border-1x c-btn-dark"</code> </div> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-border-2x c-btn-dark">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-border-2x c-btn-dark"</code> </div> </div> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default btn-md c-btn-grey-2 c-btn-bold c-square c-btn-uppercase" data-dismiss="modal">Ok</button> </div> </div> </div> </div> </div> <div class="col-md-2 col-sm-2 col-xs-6"> <div class="c-content-color-demo tooltips" data-original-title="Click to view demos for this color" data-toggle="modal" data-target="#demo_modal_dark-1"> <div class="c-color-view c-bg-dark-1 c-bg-dark-1-font c-font-14 c-font-bold c-font-uppercase"> #525e64 </div> <div class="c-color-info c-bg-white c-font-14 c-font-sbold c-font-uppercase"> dark-1 </div> </div> <div class="modal fade" id="demo_modal_dark-1"> <div class="modal-dialog modal-lg"> <div class="modal-content c-square"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> <h4 class="modal-title c-font-title c-font-sbold c-font-uppercase">dark-1</h4> </div> <div class="modal-body"> <div class="c-content-tab-1 c-theme c-margin-t-30"> <div class="nav-justified"> <ul class="nav nav-tabs nav-justified c-font-uppercase c-font-bold"> <li class="active"> <a href="#dark-1_tab_1_content" data-toggle="tab">Typography</a> </li> <li> <a href="#dark-1_tab_2_content" data-toggle="tab">Background &amp; Border</a> </li> <li> <a href="#dark-1_tab_3_content" data-toggle="tab">Buttons</a> </li> </ul> <div class="tab-content c-bordered c-padding"> <div class="tab-pane active" id="dark-1_tab_1_content"> <div style="margin: 30px 0;"> <span class="c-font-dark-1 c-font-24">Sample text...</span>&nbsp; <span class="c-font-dark-1 c-font-24 c-font-bold">Sample text...</span>&nbsp; <span class="c-font-dark-1 c-font-24 c-font-bold c-font-uppercase">Sample text...</span> </div> <code>class="c-font-dark-1"</code> </div> <div class="tab-pane" id="dark-1_tab_2_content"> <div style="margin: 30px 0;"> <div class="c-border-dark-1" style="padding: 10px; border: 2px solid #fff;"> Some sample box </div> <code>class="c-border-dark-1"</code> </div> <div style="margin: 30px 0;"> <div class="c-bg-dark-1 c-bg-dark-1-font" style="padding: 10px">Some sample box</div> <code>class="c-bg-dark-1 c-bg-dark-1-font"</code> </div> </div> <div class="tab-pane" id="dark-1_tab_3_content"> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-dark-1">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-dark-1"</code> </div> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-border-1x c-btn-dark-1">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-border-1x c-btn-dark-1"</code> </div> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-border-2x c-btn-dark-1">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-border-2x c-btn-dark-1"</code> </div> </div> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default btn-md c-btn-grey-2 c-btn-bold c-square c-btn-uppercase" data-dismiss="modal">Ok</button> </div> </div> </div> </div> </div> <div class="col-md-2 col-sm-2 col-xs-6"> <div class="c-content-color-demo tooltips" data-original-title="Click to view demos for this color" data-toggle="modal" data-target="#demo_modal_dark-2"> <div class="c-color-view c-bg-dark-2 c-bg-dark-2-font c-font-14 c-font-bold c-font-uppercase"> #31383c </div> <div class="c-color-info c-bg-white c-font-14 c-font-sbold c-font-uppercase"> dark-2 </div> </div> <div class="modal fade" id="demo_modal_dark-2"> <div class="modal-dialog modal-lg"> <div class="modal-content c-square"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> <h4 class="modal-title c-font-title c-font-sbold c-font-uppercase">dark-2</h4> </div> <div class="modal-body"> <div class="c-content-tab-1 c-theme c-margin-t-30"> <div class="nav-justified"> <ul class="nav nav-tabs nav-justified c-font-uppercase c-font-bold"> <li class="active"> <a href="#dark-2_tab_1_content" data-toggle="tab">Typography</a> </li> <li> <a href="#dark-2_tab_2_content" data-toggle="tab">Background &amp; Border</a> </li> <li> <a href="#dark-2_tab_3_content" data-toggle="tab">Buttons</a> </li> </ul> <div class="tab-content c-bordered c-padding"> <div class="tab-pane active" id="dark-2_tab_1_content"> <div style="margin: 30px 0;"> <span class="c-font-dark-2 c-font-24">Sample text...</span>&nbsp; <span class="c-font-dark-2 c-font-24 c-font-bold">Sample text...</span>&nbsp; <span class="c-font-dark-2 c-font-24 c-font-bold c-font-uppercase">Sample text...</span> </div> <code>class="c-font-dark-2"</code> </div> <div class="tab-pane" id="dark-2_tab_2_content"> <div style="margin: 30px 0;"> <div class="c-border-dark-2" style="padding: 10px; border: 2px solid #fff;"> Some sample box </div> <code>class="c-border-dark-2"</code> </div> <div style="margin: 30px 0;"> <div class="c-bg-dark-2 c-bg-dark-2-font" style="padding: 10px">Some sample box</div> <code>class="c-bg-dark-2 c-bg-dark-2-font"</code> </div> </div> <div class="tab-pane" id="dark-2_tab_3_content"> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-dark-2">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-dark-2"</code> </div> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-border-1x c-btn-dark-2">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-border-1x c-btn-dark-2"</code> </div> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-border-2x c-btn-dark-2">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-border-2x c-btn-dark-2"</code> </div> </div> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default btn-md c-btn-grey-2 c-btn-bold c-square c-btn-uppercase" data-dismiss="modal">Ok</button> </div> </div> </div> </div> </div> </div> <div class="row"> <div class="col-md-2 col-sm-2 col-xs-6"> <div class="c-content-color-demo tooltips" data-original-title="Click to view demos for this color" data-toggle="modal" data-target="#demo_modal_dark-3"> <div class="c-color-view c-bg-dark-3 c-bg-dark-3-font c-font-14 c-font-bold c-font-uppercase"> #41515b </div> <div class="c-color-info c-bg-white c-font-14 c-font-sbold c-font-uppercase"> dark-3 </div> </div> <div class="modal fade" id="demo_modal_dark-3"> <div class="modal-dialog modal-lg"> <div class="modal-content c-square"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> <h4 class="modal-title c-font-title c-font-sbold c-font-uppercase">dark-3</h4> </div> <div class="modal-body"> <div class="c-content-tab-1 c-theme c-margin-t-30"> <div class="nav-justified"> <ul class="nav nav-tabs nav-justified c-font-uppercase c-font-bold"> <li class="active"> <a href="#dark-3_tab_1_content" data-toggle="tab">Typography</a> </li> <li> <a href="#dark-3_tab_2_content" data-toggle="tab">Background &amp; Border</a> </li> <li> <a href="#dark-3_tab_3_content" data-toggle="tab">Buttons</a> </li> </ul> <div class="tab-content c-bordered c-padding"> <div class="tab-pane active" id="dark-3_tab_1_content"> <div style="margin: 30px 0;"> <span class="c-font-dark-3 c-font-24">Sample text...</span>&nbsp; <span class="c-font-dark-3 c-font-24 c-font-bold">Sample text...</span>&nbsp; <span class="c-font-dark-3 c-font-24 c-font-bold c-font-uppercase">Sample text...</span> </div> <code>class="c-font-dark-3"</code> </div> <div class="tab-pane" id="dark-3_tab_2_content"> <div style="margin: 30px 0;"> <div class="c-border-dark-3" style="padding: 10px; border: 2px solid #fff;"> Some sample box </div> <code>class="c-border-dark-3"</code> </div> <div style="margin: 30px 0;"> <div class="c-bg-dark-3 c-bg-dark-3-font" style="padding: 10px">Some sample box</div> <code>class="c-bg-dark-3 c-bg-dark-3-font"</code> </div> </div> <div class="tab-pane" id="dark-3_tab_3_content"> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-dark-3">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-dark-3"</code> </div> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-border-1x c-btn-dark-3">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-border-1x c-btn-dark-3"</code> </div> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-border-2x c-btn-dark-3">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-border-2x c-btn-dark-3"</code> </div> </div> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default btn-md c-btn-grey-2 c-btn-bold c-square c-btn-uppercase" data-dismiss="modal">Ok</button> </div> </div> </div> </div> </div> <div class="col-md-2 col-sm-2 col-xs-6"> <div class="c-content-color-demo tooltips" data-original-title="Click to view demos for this color" data-toggle="modal" data-target="#demo_modal_grey"> <div class="c-color-view c-bg-grey c-bg-grey-font c-font-14 c-font-bold c-font-uppercase"> #eeeeee </div> <div class="c-color-info c-bg-white c-font-14 c-font-sbold c-font-uppercase"> grey </div> </div> <div class="modal fade" id="demo_modal_grey"> <div class="modal-dialog modal-lg"> <div class="modal-content c-square"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> <h4 class="modal-title c-font-title c-font-sbold c-font-uppercase">grey</h4> </div> <div class="modal-body"> <div class="c-content-tab-1 c-theme c-margin-t-30"> <div class="nav-justified"> <ul class="nav nav-tabs nav-justified c-font-uppercase c-font-bold"> <li class="active"> <a href="#grey_tab_1_content" data-toggle="tab">Typography</a> </li> <li> <a href="#grey_tab_2_content" data-toggle="tab">Background &amp; Border</a> </li> <li> <a href="#grey_tab_3_content" data-toggle="tab">Buttons</a> </li> </ul> <div class="tab-content c-bordered c-padding"> <div class="tab-pane active" id="grey_tab_1_content"> <div style="margin: 30px 0;"> <span class="c-font-grey c-font-24">Sample text...</span>&nbsp; <span class="c-font-grey c-font-24 c-font-bold">Sample text...</span>&nbsp; <span class="c-font-grey c-font-24 c-font-bold c-font-uppercase">Sample text...</span> </div> <code>class="c-font-grey"</code> </div> <div class="tab-pane" id="grey_tab_2_content"> <div style="margin: 30px 0;"> <div class="c-border-grey" style="padding: 10px; border: 2px solid #fff;"> Some sample box </div> <code>class="c-border-grey"</code> </div> <div style="margin: 30px 0;"> <div class="c-bg-grey c-bg-grey-font" style="padding: 10px">Some sample box</div> <code>class="c-bg-grey c-bg-grey-font"</code> </div> </div> <div class="tab-pane" id="grey_tab_3_content"> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-grey">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-grey"</code> </div> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-border-1x c-btn-grey">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-border-1x c-btn-grey"</code> </div> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-border-2x c-btn-grey">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-border-2x c-btn-grey"</code> </div> </div> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default btn-md c-btn-grey-2 c-btn-bold c-square c-btn-uppercase" data-dismiss="modal">Ok</button> </div> </div> </div> </div> </div> <div class="col-md-2 col-sm-2 col-xs-6"> <div class="c-content-color-demo tooltips" data-original-title="Click to view demos for this color" data-toggle="modal" data-target="#demo_modal_grey-1"> <div class="c-color-view c-bg-grey-1 c-bg-grey-1-font c-font-14 c-font-bold c-font-uppercase"> #f7f7f7 </div> <div class="c-color-info c-bg-white c-font-14 c-font-sbold c-font-uppercase"> grey-1 </div> </div> <div class="modal fade" id="demo_modal_grey-1"> <div class="modal-dialog modal-lg"> <div class="modal-content c-square"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> <h4 class="modal-title c-font-title c-font-sbold c-font-uppercase">grey-1</h4> </div> <div class="modal-body"> <div class="c-content-tab-1 c-theme c-margin-t-30"> <div class="nav-justified"> <ul class="nav nav-tabs nav-justified c-font-uppercase c-font-bold"> <li class="active"> <a href="#grey-1_tab_1_content" data-toggle="tab">Typography</a> </li> <li> <a href="#grey-1_tab_2_content" data-toggle="tab">Background &amp; Border</a> </li> <li> <a href="#grey-1_tab_3_content" data-toggle="tab">Buttons</a> </li> </ul> <div class="tab-content c-bordered c-padding"> <div class="tab-pane active" id="grey-1_tab_1_content"> <div style="margin: 30px 0;"> <span class="c-font-grey-1 c-font-24">Sample text...</span>&nbsp; <span class="c-font-grey-1 c-font-24 c-font-bold">Sample text...</span>&nbsp; <span class="c-font-grey-1 c-font-24 c-font-bold c-font-uppercase">Sample text...</span> </div> <code>class="c-font-grey-1"</code> </div> <div class="tab-pane" id="grey-1_tab_2_content"> <div style="margin: 30px 0;"> <div class="c-border-grey-1" style="padding: 10px; border: 2px solid #fff;"> Some sample box </div> <code>class="c-border-grey-1"</code> </div> <div style="margin: 30px 0;"> <div class="c-bg-grey-1 c-bg-grey-1-font" style="padding: 10px">Some sample box</div> <code>class="c-bg-grey-1 c-bg-grey-1-font"</code> </div> </div> <div class="tab-pane" id="grey-1_tab_3_content"> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-grey-1">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-grey-1"</code> </div> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-border-1x c-btn-grey-1">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-border-1x c-btn-grey-1"</code> </div> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-border-2x c-btn-grey-1">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-border-2x c-btn-grey-1"</code> </div> </div> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default btn-md c-btn-grey-2 c-btn-bold c-square c-btn-uppercase" data-dismiss="modal">Ok</button> </div> </div> </div> </div> </div> <div class="col-md-2 col-sm-2 col-xs-6"> <div class="c-content-color-demo tooltips" data-original-title="Click to view demos for this color" data-toggle="modal" data-target="#demo_modal_grey-2"> <div class="c-color-view c-bg-grey-2 c-bg-grey-2-font c-font-14 c-font-bold c-font-uppercase"> #677083 </div> <div class="c-color-info c-bg-white c-font-14 c-font-sbold c-font-uppercase"> grey-2 </div> </div> <div class="modal fade" id="demo_modal_grey-2"> <div class="modal-dialog modal-lg"> <div class="modal-content c-square"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> <h4 class="modal-title c-font-title c-font-sbold c-font-uppercase">grey-2</h4> </div> <div class="modal-body"> <div class="c-content-tab-1 c-theme c-margin-t-30"> <div class="nav-justified"> <ul class="nav nav-tabs nav-justified c-font-uppercase c-font-bold"> <li class="active"> <a href="#grey-2_tab_1_content" data-toggle="tab">Typography</a> </li> <li> <a href="#grey-2_tab_2_content" data-toggle="tab">Background &amp; Border</a> </li> <li> <a href="#grey-2_tab_3_content" data-toggle="tab">Buttons</a> </li> </ul> <div class="tab-content c-bordered c-padding"> <div class="tab-pane active" id="grey-2_tab_1_content"> <div style="margin: 30px 0;"> <span class="c-font-grey-2 c-font-24">Sample text...</span>&nbsp; <span class="c-font-grey-2 c-font-24 c-font-bold">Sample text...</span>&nbsp; <span class="c-font-grey-2 c-font-24 c-font-bold c-font-uppercase">Sample text...</span> </div> <code>class="c-font-grey-2"</code> </div> <div class="tab-pane" id="grey-2_tab_2_content"> <div style="margin: 30px 0;"> <div class="c-border-grey-2" style="padding: 10px; border: 2px solid #fff;"> Some sample box </div> <code>class="c-border-grey-2"</code> </div> <div style="margin: 30px 0;"> <div class="c-bg-grey-2 c-bg-grey-2-font" style="padding: 10px">Some sample box</div> <code>class="c-bg-grey-2 c-bg-grey-2-font"</code> </div> </div> <div class="tab-pane" id="grey-2_tab_3_content"> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-grey-2">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-grey-2"</code> </div> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-border-1x c-btn-grey-2">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-border-1x c-btn-grey-2"</code> </div> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-border-2x c-btn-grey-2">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-border-2x c-btn-grey-2"</code> </div> </div> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default btn-md c-btn-grey-2 c-btn-bold c-square c-btn-uppercase" data-dismiss="modal">Ok</button> </div> </div> </div> </div> </div> <div class="col-md-2 col-sm-2 col-xs-6"> <div class="c-content-color-demo tooltips" data-original-title="Click to view demos for this color" data-toggle="modal" data-target="#demo_modal_grey-3"> <div class="c-color-view c-bg-grey-3 c-bg-grey-3-font c-font-14 c-font-bold c-font-uppercase"> #7f8c97 </div> <div class="c-color-info c-bg-white c-font-14 c-font-sbold c-font-uppercase"> grey-3 </div> </div> <div class="modal fade" id="demo_modal_grey-3"> <div class="modal-dialog modal-lg"> <div class="modal-content c-square"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> <h4 class="modal-title c-font-title c-font-sbold c-font-uppercase">grey-3</h4> </div> <div class="modal-body"> <div class="c-content-tab-1 c-theme c-margin-t-30"> <div class="nav-justified"> <ul class="nav nav-tabs nav-justified c-font-uppercase c-font-bold"> <li class="active"> <a href="#grey-3_tab_1_content" data-toggle="tab">Typography</a> </li> <li> <a href="#grey-3_tab_2_content" data-toggle="tab">Background &amp; Border</a> </li> <li> <a href="#grey-3_tab_3_content" data-toggle="tab">Buttons</a> </li> </ul> <div class="tab-content c-bordered c-padding"> <div class="tab-pane active" id="grey-3_tab_1_content"> <div style="margin: 30px 0;"> <span class="c-font-grey-3 c-font-24">Sample text...</span>&nbsp; <span class="c-font-grey-3 c-font-24 c-font-bold">Sample text...</span>&nbsp; <span class="c-font-grey-3 c-font-24 c-font-bold c-font-uppercase">Sample text...</span> </div> <code>class="c-font-grey-3"</code> </div> <div class="tab-pane" id="grey-3_tab_2_content"> <div style="margin: 30px 0;"> <div class="c-border-grey-3" style="padding: 10px; border: 2px solid #fff;"> Some sample box </div> <code>class="c-border-grey-3"</code> </div> <div style="margin: 30px 0;"> <div class="c-bg-grey-3 c-bg-grey-3-font" style="padding: 10px">Some sample box</div> <code>class="c-bg-grey-3 c-bg-grey-3-font"</code> </div> </div> <div class="tab-pane" id="grey-3_tab_3_content"> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-grey-3">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-grey-3"</code> </div> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-border-1x c-btn-grey-3">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-border-1x c-btn-grey-3"</code> </div> <div style="margin: 30px 0;"> <a href="#" class="btn c-btn-bold c-btn-uppercase c-btn-border-2x c-btn-grey-3">Button</a> <div class="clearfix c-margin-b-10"></div> <code>class="c-btn-border-2x c-btn-grey-3"</code> </div> </div> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default btn-md c-btn-grey-2 c-btn-bold c-square c-btn-uppercase" data-dismiss="modal">Ok</button> </div> </div> </div> </div> </div> </div>[/html]
[/nd_container]
 