"box"
Bootstrap 3.0.0 Snippet by evarevirus

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <style type="text/css"> .hp_container { clear:both; width:990px; margin:auto; } .hero_promo_wrap { width:990px; min-height:300px; margin:auto; margin-top:10px; margin-bottom:10px; clear:both; } #hpslide_wrapper { width:975px; margin:0; padding:0; margin-left:auto; margin-right:auto; } #hpslide_container { margin:0; padding:0; position:relative; background-color:none; width:975px; height:326px; border:1px solid #252525; } #hpslider { margin:0; padding:0; position:relative; overflow:hidden; width:975px; height:326px; } #hpslider ul { margin:0; padding:0; position:absolute; list-style:none; top:0; left:0; margin-top:0; } #hpslider li { margin:0; padding:0; float:left; width:975px; height:326px; } #hpslider img { margin:0; padding:0; border:none; } .hppagination { margin:0; padding:0; position:absolute; top:15px; left:20px; list-style:none; height:10px; } .hppagination li { float:left; height:15px; width:15px; border-radius:10px; background-color:#eee; margin-right:5px; } .hppagination li:hover, li.current { background-color:#67b1c1; } /* PROMOTIONAL BOXES */ .promo_boxes_container { clear:both; width:975px; margin:auto; height:120px; margin-top:20px; margin-bottom:20px; background-color:#fff; } .promo_boxes_container img { border:none; } .promo_box_1 { margin-right:22px; float:left; } .promo_box_2 { margin-right:23px; float:left; } .promo_box_3 { float:left; } /* HOMEPAGE CATEGORY TABLES */ .cat_table_wrapper { clear:both; width:975px; margin-top:15px; margin-bottom:15px; margin-right:auto; margin-left:auto; } .cat_table_container { background-color:#fff; width:975px; min-height:300px; display:inline-block; margin-right:auto; margin-left:auto; clear:both;/* border-top:10px solid #86A09D; border-bottom:10px solid #86A09D; */ } .top_cat_border { width:990px; background-image: url('//images.duckcovers.com/site/common/patio/gray_bar_bg.png'); background-repeat:repeat-x; background-position:top; } .bottom_cat_border { width:990px; background-image: url('//images.duckcovers.com/site/common/patio/gray_bar_bg.png'); background-repeat:repeat-x; background-position:bottom; } .list { margin:auto; margin-bottom: 10px; width: 975px; } .list th { text-align:left; font-size:22px; color:#00667e; padding-bottom:10px; } .list td { text-align: center; vertical-align: top; background-color:#E8E5D6; border:1px solid #C7C3AA; padding:0 10px 10px 10px; } .list td a { text-transform:captialize; color:#00667e; text-decoration:none; font-size: 12px; } .list img { background:#fff; padding:10px; margin:5px; } </style> <script type="text/javascript" src="//images.duckcovers.com/site/common/splash/slideshow_script.js"></script> <div class="hp_container"> <div class="hero_promo_wrap"> <div id="hpslide_wrapper"> <div id="hpslide_container"> <div style="overflow: hidden;" id="hpslider"> <ul style="left: 0px; width: 3900px;"> <li><a href="/Leica-Microsystems/0-0-0-496/list.aspx?bid=bmb"> <img src="//images.duckcovers.com/site/common/msh/mhub-freeship-hp.png" alt="RV covers Learn More!"></a></li> <li><a href="/Leica-Microsystems/0-0-0-496/list.aspx"> <img src="//images.duckcovers.com/site/common/msh/leica-vp-hp.png" alt="Free Return Shipping"></a></li> <li><a href="/Labomed/0-0-0-497/list.aspx?bid=bmb"> <img src="//images.duckcovers.com/site/common/msh/sigma-vp-hp.png" alt="The Globetroter Series - Learn more about us"></a></li> </ul> </div> <ul id="hppagination" class="hppagination"> <li class="current" onclick="slideshow.pos(0)"> <br> </li> <li class="" onclick="slideshow.pos(1)"> <br> </li> <li class="" onclick="slideshow.pos(2)"> <br> </li> </ul> </div> <!-- close hpslide_container --> </div> <!-- close hpslide_wrapper --> </div> <!-- CLOSE HERO PROMO WRAP --> <script type="text/javascript"> var slideshow=new TINY.slider.slide('slideshow',{ id:'hpslider', auto:10, resume:true, vertical:false, navid:'hppagination', activeclass:'current', position:0, rewind:false, elastic:false }); </script> <div class="promo_boxes_container"> <!--NOTE: regular promo box size: 235x120 | long box size: 460x120 | must have 2 regular and 1 long boxes | arrangement of the boxes won't matter --> <div class="promo_box_1"> <a href="/content/customerservice/info.aspx"><img src="//images.duckcovers.com/site/common/msh/mhub-lowprice-sub.png" alt="Free Shipping on orders over $99"></a> </div> <div class="promo_box_2"> <a href="/content/customerservice/info.aspx"><img src="//images.duckcovers.com/site/common/msh/free-ship-25-sub.png" alt="DuckCovers - Quacktastic furniture covers!"></a> </div> <div class="promo_box_3"> <a href="/content/customerservice/info.aspx"><img src="//images.duckcovers.com/site/common/msh/mhub-norisk-sub.png" alt="Low Price Guarantee"></a></div> </div> </div> <!--NOTE: CATEGORY TABLE ENDS --> <!-- CLOSE HOMEPAGE CONTAINER--> <div style="clear: both;"></div>

Related: See More


Questions / Comments: