<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 ----------> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous"> <div class="container"> <div class="row"> <div class="col-md-9"> <div class="content-area"> <div class="panel"> <div class="panel-body"> <h3>Lorem Ipsum dress with colorest in the suyzeiz</h3> <div class="row"> <div class="product-page-image"> <div class="col-md-12"> <img class="img-responsive"src="https://ak3.picdn.net/shutterstock/videos/16376863/thumb/5.jpg"> </div> </div> </div> <div class="section-title margin-b-30"> <h4> Product Details:</h4> <p>Powerful dual-core and quad-core Intel processors, more advanced graphics, faster PCIe-based flash storage, superfast memory, and Thunderbolt 2, MacBook Pro with Retina display delivers all the performance you want from a notebook. </p> </div> <div class="product-page-features margin-b-30"> <div class="row"> <div class="col-md-12 section-title"> <h4> Product Features:</h4> </div> <div class="col-md-6"> <ul> <li><i class="fa fa-check"></i> 256GB PCIe flash storage </li> <li><i class="fa fa-check"></i> 256GB PCIe flash storage </li> <li><i class="fa fa-check"></i> 256GB PCIe flash storage </li> <li><i class="fa fa-check"></i> 256GB PCIe flash storage </li> <li><i class="fa fa-check"></i> 256GB PCIe flash storage </li> </ul> </div> <div class="col-md-6"> <ul> <li><i class="fa fa-check"></i> 256GB PCIe flash storage </li> <li><i class="fa fa-check"></i> 256GB PCIe flash storage </li> <li><i class="fa fa-check"></i> 256GB PCIe flash storage </li> <li><i class="fa fa-check"></i> 256GB PCIe flash storage </li> <li><i class="fa fa-check"></i> 256GB PCIe flash storage </li> </ul> </div> </div> </div> <hr> <div class="product-categories"> <ul class="list-inline"> <li><a href="#">Lorem Ipsum</a></li> <li><a href="#">Lorem Ipsum</a></li> <li><a href="#">Lorem Ipsum</a></li> <li><a href="#">Lorem Ipsum</a></li> <li><a href="#">Lorem Ipsum</a></li> <li><a href="#">Lorem Ipsum</a></li> <li><a href="#">Lorem Ipsum</a></li> <li><a href="#">Lorem Ipsum</a></li> <li><a href="#">Lorem Ipsum</a></li> <li><a href="#">Lorem Ipsum</a></li> </ul> </div> <hr> <div class="product-page-action-btn margin-b-30"> <ul class="list-inline"> <li><button type="button" class="btn btn-default">Call Now</button></li> <li><button type="button" class="btn btn-default">Booking</button></li> <li><button type="button" class="btn btn-default">Write Reviews</button></li> <li><button type="button" class="btn btn-default">Report Abuse</button></li> </ul> </div> </div> </div> </div> </div> <div class="col-md-3 "> <div class="sidebar-item-box"> <div class="panel "> <div class="panel-body"> <h3>All Categories</h3> </div> <ul class="sidebar-seller-information"> <li> <div class="media"> <img src="http://radiustheme.com/demo/html/classipost/classipost/img/user/user1.png" alt="user" class="img-responsive pull-left"> <div class="media-body"> <span>Posted By</span> <h4>Mr. Fahim Rahman</h4> </div> </div> </li> <li> <div class="media"> <img src="http://radiustheme.com/demo/html/classipost/classipost/img/user/user2.png" alt="user" class="img-responsive pull-left"> <div class="media-body"> <span>Location</span> <h4>Gulshan, Dhaka</h4> </div> </div> </li> <li> <div class="media"> <img src="http://radiustheme.com/demo/html/classipost/classipost/img/user/user3.png" alt="user" class="img-responsive pull-left"> <div class="media-body"> <span>Contact Number</span> <h4>01612854530</h4> </div> </div> </li> <li> <div class="media"> <img src="http://radiustheme.com/demo/html/classipost/classipost/img/user/user4.png" alt="user" class="img-responsive pull-left"> <div class="media-body"> <span>Want To Live Chat</span> <h4>Chat Now!</h4> </div> </div> </li> <li> <div class="media"> <img src="http://radiustheme.com/demo/html/classipost/classipost/img/user/user5.png" alt="user" class="img-responsive pull-left"> <div class="media-body"> <span>User Type</span> <h4>Verified</h4> </div> </div> </li> </ul> </div> </div> <div class="sidebar-item-box"> <div class="panel "> <div class="panel-body"> <h3>All Categories</h3> <div class="sidebar-instruction"> <ul> <i class="fa fa-check"></i> <li> Pay only after collecting The item</li> <i class="fa fa-check"></i> <li> Check The item before you buy</li> <i class="fa fa-check"></i> <li> Finalize the Price first</li> <i class="fa fa-check"></i> <li> We are not responsible for anything.</li> <i class="fa fa-check"></i> <li> Subscribe at your own risk</li> </ul> </div> </div> </div> </div> </div> </div> </div>

* { -webkit-border-radius: 0 !important; -moz-border-radius: 0 !important; border-radius: 0 !important; } body {background:#e2e2e2;} h4 {font-size: 17px;font-weight: 500;} hr {border-color:#cccccc;} a {text-decoration:none;} a:hover {text-decoration:none;} .margin-t-40 {margin-top:40px;} .margin-b-30 {margin-bottom:30px;} .bg-blue {background:#276bd8;color:#fff!important;} .bg-grey {background:#696969;color:#fff;} .bg-pink {background:#c11543;color:#fff!important;} /************* Sidebar-Instruction ************/ .sidebar-instruction i {margin-top:5px;position: absolute;color:#139e81;} .sidebar-instruction li {padding-left:20px; margin-bottom:10px;} /******** Sidebar Category LINKKK ***************/ .sidebar-category-link li {border-bottom: 1px solid #cccccc; padding: 20px;} /************ Product Page Class ****/ .section-title h4 { position: relative;padding-bottom:10px;} .section-title h4:after { background: #139e81 none repeat scroll 0 0; bottom: 0; content: ""; height: 1px; left: 0; position: absolute; width: 20%; } .product-page-features i {color:#139e81; margin-right:10px;} .product-page-features li {padding-left:25px;margin-bottom: 10px;} /********** Seller Sidebar Class *********/ ul.sidebar-seller-information li span { color: #969696; font-family: 'Roboto', sans-serif; font-weight: 500; } ul.sidebar-seller-information li { border-bottom: 1px solid #cccccc; padding: 15px; } /********* Sidebar Section Class ******/ .sidebar-item-box { margin-bottom: 30px;} ul {list-style: outside none none; margin: 0; padding: 0;} ul.sidebar-category-list li { position: relative; text-transform: capitalize; border-bottom: 1px solid #cccccc; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out; } ul.sidebar-category-list li:hover { background: #139e81; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out; } ul.sidebar-category-list li a { width: 100%; display: inline-block; padding: 11px 10px; color: #444444; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out; } ul.sidebar-category-list li:hover a { color: #ffffff; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out; } ul.sidebar-category-list li a img { margin-right: 15px; display: inline-block; } ul.sidebar-category-list li span { position: absolute; right: 20px; z-index: 1; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); top: 50%; } /****************** Crane Listing View *************/ /****************** Crane Listing View Classes ***********/ .crane-grid-listing {border-bottom:1px solid #e2e2e2; margin-bottom:10px; line-height:24px;} .crane-grid-listing:hover {background:#139e81 ;border:1px solid #139e81;} .crane-grid-listing:hover { color: #ffffff; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out; } .crane-grid-listing :hover a { color: #cccccc; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out; } .crane-image-block {padding:0px;margin:0px;} .crane-grid-listing a {text-decoration:none;} .crane-list-img img {min-height: 180px; overflow: hidden;} .crane-list-content {height: 180px; overflow: hidden; padding-left:5px;} .crane-list-content i {color:#febf00; padding-right:2px;}