<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="page-section"> <div class="container"> <div class="row"> <div class="col-md-3"> <div class="sidebar-wrap"> <div class="sidebar-box"> <ul class="list-links"> <a href="#"><li>Agriculture</li></a> <a href="#"><li>Astrology</li></a> <a href="#"><li>Animals & Pets</li></a> <a href="#"><li>ARCHITECTURE</li></a> <a href="#"><li>ART & PHOTOGRAPHY</li></a> <a href="#"><li>AUCTION TEMPLATES</li></a> <a href="#"><li>BEAUTY</li></a> <a href="#"><li>BOOKS</li></a> <a href="#"><li>BUSINESS</li></a> <a href="#"><li>CAFE AND RESTAURANT</li></a> <a href="#"><li>CARS</li></a> <a href="#"><li>CHARITY</li></a> <a href="#"><li>CHRISTMAS TEMPLATES</li></a> <a href="#"><li>COMMUNICATIONS</li></a> <a href="#"><li>COMPUTERS</li></a> <a href="#"><li>DATING</li></a> <a href="#"><li>EDUCATION</li></a> <a href="#"><li>ELECTRONICS</li></a> <a href="#"><li>ENTERTAINMENT</li></a> <a href="#"><li>EXTERIOR DESIGN</li></a> <a href="#"><li>FAMILY</li></a> <a href="#"><li>FASHION</li></a> <a href="#"><li>FOOD & DRINK</li></a> <a href="#"><li>GAMES</li></a> <a href="#"><li>GIFTS</li></a> <a href="#"><li>HOBBIES & CRAFTS</li></a> <a href="#"><li>HOSTING</li></a> <a href="#"><li>HOTELS</li></a> <a href="#"><li>INDUSTRIAL</li></a> <a href="#"><li>INTERIOR & FURNITURE</li></a> <a href="#"><li>INTERNET</li></a> <a href="#"><li>JEWELRY</li></a> <a href="#"><li>LAST ADDED</li></a> <a href="#"><li>LAW</li></a> <a href="#"><li>MAINTENANCE SERVICES</li></a> <a href="#"><li>MEDIA</li></a> <a href="#"><li>MEDICAL</li></a> <a href="#"><li>MILITARY</li></a> <a href="#"><li>MOST POPULAR</li></a> <a href="#"><li>MUSIC</li></a> <a href="#"><li>NIGHT CLUB</li></a> <a href="#"><li>ONLINE CASINO</li></a> <a href="#"><li>PERSONAL PAGES</li></a> <a href="#"><li>POLITICS</li></a> <a href="#"><li>REAL ESTATE</li></a> <a href="#"><li>RELIGIOUS</li></a> <a href="#"><li>SCIENCE</li></a> <a href="#"><li>SECURITY</li></a> <a href="#"><li>SOCIETY & CULTURE</li></a> <a href="#"><li>SOFTWARE</li></a> <a href="#"><li>SPORT</li></a> <a href="#"><li>TRANSPORTATION</li></a> <a href="#"><li>TRAVEL</li></a> <a href="#"><li>WEB DESIGN</li></a> <a href="#"><li>WEDDING</li></a> </ul> </div> </div> </div> <div class="col-md-9"> <div class="content-wrap"> <div class="product-area"> <div class="row text-center"> <div class="col-md-3"> <div class="product-box"> <div class="product-img"> <img class="img-responsive" src="https://images.duckduckgo.com/iu/?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.xKzO5ju99FPL1D2tsChRFAHaHa%26pid%3D15.1&f=1"> </div> <div class="product-name"> <a href=""><h5>Finexpert Financial Advisor</h5></a> <a href=""><h6>HTML</h6></a> </div> </div> </div> <div class="col-md-3"> <div class="product-box"> <div class="product-img"> <img class="img-responsive" src="https://images.duckduckgo.com/iu/?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.xKzO5ju99FPL1D2tsChRFAHaHa%26pid%3D15.1&f=1"> </div> <div class="product-name"> <a href=""><h5>Finexpert Financial Advisor</h5></a> <a href=""><h6>HTML</h6></a> </div> </div> </div> <div class="col-md-3"> <div class="product-box"> <div class="product-img"> <img class="img-responsive" src="https://images.duckduckgo.com/iu/?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.xKzO5ju99FPL1D2tsChRFAHaHa%26pid%3D15.1&f=1"> </div> <div class="product-name"> <a href=""><h5>Finexpert Financial Advisor</h5></a> <a href=""><h6>HTML</h6></a> </div> </div> </div> <div class="col-md-3"> <div class="product-box"> <div class="product-img"> <img class="img-responsive" src="https://images.duckduckgo.com/iu/?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.xKzO5ju99FPL1D2tsChRFAHaHa%26pid%3D15.1&f=1"> </div> <div class="product-name"> <a href=""><h5>Finexpert Financial Advisor</h5></a> <a href=""><h6>HTML</h6></a> </div> </div> </div> </div> </div> <div class="product-area margin-t-15"> <div class="row text-center"> <div class="col-md-3"> <div class="product-box"> <div class="product-img"> <img class="img-responsive" src="https://images.duckduckgo.com/iu/?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.xKzO5ju99FPL1D2tsChRFAHaHa%26pid%3D15.1&f=1"> </div> <div class="product-name"> <a href=""><h5>Finexpert Financial Advisor</h5></a> <a href=""><h6>HTML</h6></a> </div> </div> </div> <div class="col-md-3"> <div class="product-box"> <div class="product-img"> <img class="img-responsive" src="https://images.duckduckgo.com/iu/?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.xKzO5ju99FPL1D2tsChRFAHaHa%26pid%3D15.1&f=1"> </div> <div class="product-name"> <a href=""><h5>Finexpert Financial Advisor</h5></a> <a href=""><h6>HTML</h6></a> </div> </div> </div> <div class="col-md-3"> <div class="product-box"> <div class="product-img"> <img class="img-responsive" src="https://images.duckduckgo.com/iu/?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.xKzO5ju99FPL1D2tsChRFAHaHa%26pid%3D15.1&f=1"> </div> <div class="product-name"> <a href=""><h5>Finexpert Financial Advisor</h5></a> <a href=""><h6>HTML</h6></a> </div> </div> </div> <div class="col-md-3"> <div class="product-box"> <div class="product-img"> <img class="img-responsive" src="https://images.duckduckgo.com/iu/?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.xKzO5ju99FPL1D2tsChRFAHaHa%26pid%3D15.1&f=1"> </div> <div class="product-name"> <a href=""><h5>Finexpert Financial Advisor</h5></a> <a href=""><h6>HTML</h6></a> </div> </div> </div> </div> </div> <div class="product-area margin-t-15"> <div class="row text-center"> <div class="col-md-3"> <div class="product-box"> <div class="product-img"> <img class="img-responsive" src="https://images.duckduckgo.com/iu/?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.xKzO5ju99FPL1D2tsChRFAHaHa%26pid%3D15.1&f=1"> </div> <div class="product-name"> <a href=""><h5>Finexpert Financial Advisor</h5></a> <a href=""><h6>HTML</h6></a> </div> </div> </div> <div class="col-md-3"> <div class="product-box"> <div class="product-img"> <img class="img-responsive" src="https://images.duckduckgo.com/iu/?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.xKzO5ju99FPL1D2tsChRFAHaHa%26pid%3D15.1&f=1"> </div> <div class="product-name"> <a href=""><h5>Finexpert Financial Advisor</h5></a> <a href=""><h6>HTML</h6></a> </div> </div> </div> <div class="col-md-3"> <div class="product-box"> <div class="product-img"> <img class="img-responsive" src="https://images.duckduckgo.com/iu/?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.xKzO5ju99FPL1D2tsChRFAHaHa%26pid%3D15.1&f=1"> </div> <div class="product-name"> <a href=""><h5>Finexpert Financial Advisor</h5></a> <a href=""><h6>HTML</h6></a> </div> </div> </div> <div class="col-md-3"> <div class="product-box"> <div class="product-img"> <img class="img-responsive" src="https://images.duckduckgo.com/iu/?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.xKzO5ju99FPL1D2tsChRFAHaHa%26pid%3D15.1&f=1"> </div> <div class="product-name"> <a href=""><h5>Finexpert Financial Advisor</h5></a> <a href=""><h6>HTML</h6></a> </div> </div> </div> </div> </div> <div class="product-area margin-t-15"> <div class="row text-center"> <div class="col-md-3"> <div class="product-box"> <div class="product-img"> <img class="img-responsive" src="https://images.duckduckgo.com/iu/?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.xKzO5ju99FPL1D2tsChRFAHaHa%26pid%3D15.1&f=1"> </div> <div class="product-name"> <a href=""><h5>Finexpert Financial Advisor</h5></a> <a href=""><h6>HTML</h6></a> </div> </div> </div> <div class="col-md-3"> <div class="product-box"> <div class="product-img"> <img class="img-responsive" src="https://images.duckduckgo.com/iu/?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.xKzO5ju99FPL1D2tsChRFAHaHa%26pid%3D15.1&f=1"> </div> <div class="product-name"> <a href=""><h5>Finexpert Financial Advisor</h5></a> <a href=""><h6>HTML</h6></a> </div> </div> </div> <div class="col-md-3"> <div class="product-box"> <div class="product-img"> <img class="img-responsive" src="https://images.duckduckgo.com/iu/?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.xKzO5ju99FPL1D2tsChRFAHaHa%26pid%3D15.1&f=1"> </div> <div class="product-name"> <a href=""><h5>Finexpert Financial Advisor</h5></a> <a href=""><h6>HTML</h6></a> </div> </div> </div> <div class="col-md-3"> <div class="product-box"> <div class="product-img"> <img class="img-responsive" src="https://images.duckduckgo.com/iu/?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.xKzO5ju99FPL1D2tsChRFAHaHa%26pid%3D15.1&f=1"> </div> <div class="product-name"> <a href=""><h5>Finexpert Financial Advisor</h5></a> <a href=""><h6>HTML</h6></a> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>

body {background:#fff;} hr {border:1px solid red;} h1 {font-size:32px;font-weight:600;} h2{font-size:30px;font-weight:600;} h3{} h4{} h5{} p {line-height:24px;} .margin-t-15 {margin-top:15px;} /********************** PRODUCT CSS ***********/ .product-box {opacity: 0.7;border:1px solid #e2e2e2; min-height:150px; } .product-box:hover {color:#fff;background:#e2e2e2;opacity: 1.0;box-shadow: 1px 4px 4px rgba(0, 0, 0, .5);transition: all .2s;} .product-img img {width:100%;border-radius: 0px; max-height:auto;} .product-img img:hover {opacity: 1.0;} .product-name{padding:10px;} .product-name a {color:#000} .product-name a:hover {} .product-lists ul li a {font-size:14px;color:#dd000;} /*************** CONTENT CSS *************/ .content-wrap {padding:15px;background: #fff; min-height: 50px;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);position: relative;margin-bottom: 30px;-webkit-border-radius: 2px;-moz-border-radius: 2px;-ms-border-radius: 2px; border-radius: 2px;} /******************* SIDEBAR CSS ***************/ .sidebar-wrap {padding:15px 0px 15px 0px;background: #fff; min-height: 50px;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);position: relative;margin-bottom: 30px;-webkit-border-radius: 2px;-moz-border-radius: 2px;-ms-border-radius: 2px; border-radius: 2px;} .list-links li {border-top: 1px dotted #d4d4d4; padding: 4px 10px 4px;border-bottom: 1px dotted #d4d4d4;list-style:none;margin: 0px;} .sidebar-box ul {margin:0px; padding:0px;} .sidebar-box ul a {text-transform:lowercase;font-size:14px; letter-spacing:0px; color:#000;} .sidebar-box li:hover {color:#fff;background:#dd0000; box-shadow: 0px 0px .5px 0px rgba(50, 50, 50, 0.95); } .sidebar-box ul a:hover {list-style:none;text-decoration: none;}