"Grid view Box"
Bootstrap 3.0.0 Snippet by sachin6185

<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 ----------> <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i" rel="stylesheet"> <div class="wraper"> <div class="deals-in-flight"> <div class="container"> <div class="grid-wrap"> <div class="deal-grid one"> <div class="info-deal"> <div class="verticle"> <h2>My Title Here</h2> <div class="date-info">posted By : Sachin Kumar kulshreshtha</div> <p>Loren Ipsum is simply dummy text. Lorem Ipsum is simply dummy text of the printing. Loren Ipsum is simply dummy text. Lorem Ipsum is simply dummy text of the printing. </p> <a href="#" class="book-now">Read More</a> </div> </div> <div class="image-deal"><img src="https://www.plusvalleyadventure.com/wp-content/uploads/2017/04/Bhorgiri_To_Bhimashankar.jpg" alt="facebook-like" /> </div> </div> <div class="deal-grid two"> <div class="info-deal"> <div class="verticle"> <h2>My Title Here</h2> <div class="date-info">posted By : Sachin Kumar kulshreshtha</div> <p>Loren Ipsum is simply dummy text. Lorem Ipsum is simply dummy text of the printing. Loren Ipsum is simply dummy text. Lorem Ipsum is simply dummy text of the printing. </p> <a href="#" class="book-now">Read More</a> </div> </div> <div class="image-deal"><img src="https://www.plusvalleyadventure.com/wp-content/uploads/2017/04/Bhorgiri_To_Bhimashankar.jpg" alt="facebook-like" /> </div> </div> <div class="deal-grid three"> <div class="info-deal"> <div class="verticle"> <h2>My Title Here</h2> <div class="date-info">posted By : Sachin Kumar kulshreshtha</div> <p>Loren Ipsum is simply dummy text. Lorem Ipsum is simply dummy text of the printing. Loren Ipsum is simply dummy text. Lorem Ipsum is simply dummy text of the printing. </p> <a href="#" class="book-now">Read More</a> </div> </div> <div class="image-deal"><img src="https://www.plusvalleyadventure.com/wp-content/uploads/2017/04/Bhorgiri_To_Bhimashankar.jpg" alt="facebook-like" /> </div> </div> <div class="deal-grid four"> <div class="info-deal"> <div class="verticle"> <h2>My Title Here</h2> <div class="date-info">posted By : Sachin Kumar kulshreshtha</div> <p>Loren Ipsum is simply dummy text. Lorem Ipsum is simply dummy text of the printing. Loren Ipsum is simply dummy text. Lorem Ipsum is simply dummy text of the printing. </p> <a href="#" class="book-now">Read More</a> </div> </div> <div class="image-deal"><img src="https://www.plusvalleyadventure.com/wp-content/uploads/2017/04/Bhorgiri_To_Bhimashankar.jpg" alt="facebook-like" /> </div> </div> <div class="deal-grid one"> <div class="info-deal"> <div class="verticle"> <h2>My Title Here</h2> <div class="date-info">posted By : Sachin Kumar kulshreshtha</div> <p>Loren Ipsum is simply dummy text. Lorem Ipsum is simply dummy text of the printing. Loren Ipsum is simply dummy text. Lorem Ipsum is simply dummy text of the printing. </p> <a href="#" class="book-now">Read More</a> </div> </div> <div class="image-deal"><img src="https://www.plusvalleyadventure.com/wp-content/uploads/2017/04/Bhorgiri_To_Bhimashankar.jpg" alt="facebook-like" /> </div> </div> <div class="deal-grid two"> <div class="info-deal"> <div class="verticle"> <h2>My Title Here</h2> <div class="date-info">posted By : Sachin Kumar kulshreshtha</div> <p>Loren Ipsum is simply dummy text. Lorem Ipsum is simply dummy text of the printing. Loren Ipsum is simply dummy text. Lorem Ipsum is simply dummy text of the printing. </p> <a href="#" class="book-now">Read More</a> </div> </div> <div class="image-deal"><img src="https://www.plusvalleyadventure.com/wp-content/uploads/2017/04/Bhorgiri_To_Bhimashankar.jpg" alt="facebook-like" /> </div> </div> <div class="deal-grid three"> <div class="info-deal"> <div class="verticle"> <h2>My Title Here</h2> <div class="date-info">posted By : Sachin Kumar kulshreshtha</div> <p>Loren Ipsum is simply dummy text. Lorem Ipsum is simply dummy text of the printing. Loren Ipsum is simply dummy text. Lorem Ipsum is simply dummy text of the printing. </p> <a href="#" class="book-now">Read More</a> </div> </div> <div class="image-deal"><img src="https://www.plusvalleyadventure.com/wp-content/uploads/2017/04/Bhorgiri_To_Bhimashankar.jpg" alt="facebook-like" /> </div> </div> <div class="deal-grid four"> <div class="info-deal"> <div class="verticle"> <h2>My Title Here</h2> <div class="date-info">posted By : Sachin Kumar kulshreshtha</div> <p>Loren Ipsum is simply dummy text. Lorem Ipsum is simply dummy text of the printing. Loren Ipsum is simply dummy text. Lorem Ipsum is simply dummy text of the printing. </p> <a href="#" class="book-now">Read More</a> </div> </div> <div class="image-deal"><img src="https://www.plusvalleyadventure.com/wp-content/uploads/2017/04/Bhorgiri_To_Bhimashankar.jpg" alt="facebook-like" /> </div> </div> <div class="deal-grid one"> <div class="info-deal"> <div class="verticle"> <h2>My Title Here</h2> <div class="date-info">posted By : Sachin Kumar kulshreshtha</div> <p>Loren Ipsum is simply dummy text. Lorem Ipsum is simply dummy text of the printing. Loren Ipsum is simply dummy text. Lorem Ipsum is simply dummy text of the printing. </p> <a href="#" class="book-now">Read More</a> </div> </div> <div class="image-deal"><img src="https://www.plusvalleyadventure.com/wp-content/uploads/2017/04/Bhorgiri_To_Bhimashankar.jpg" alt="facebook-like" /> </div> </div> <div class="deal-grid two"> <div class="info-deal"> <div class="verticle"> <h2>My Title Here</h2> <div class="date-info">posted By : Sachin Kumar kulshreshtha</div> <p>Loren Ipsum is simply dummy text. Lorem Ipsum is simply dummy text of the printing. Loren Ipsum is simply dummy text. Lorem Ipsum is simply dummy text of the printing. </p> <a href="#" class="book-now">Read More</a> </div> </div> <div class="image-deal"><img src="https://www.plusvalleyadventure.com/wp-content/uploads/2017/04/Bhorgiri_To_Bhimashankar.jpg" alt="facebook-like" /> </div> </div> <div class="deal-grid three"> <div class="info-deal"> <div class="verticle"> <h2>My Title Here</h2> <div class="date-info">posted By : Sachin Kumar kulshreshtha</div> <p>Loren Ipsum is simply dummy text. Lorem Ipsum is simply dummy text of the printing. Loren Ipsum is simply dummy text. Lorem Ipsum is simply dummy text of the printing. </p> <a href="#" class="book-now">Read More</a> </div> </div> <div class="image-deal"><img src="https://www.plusvalleyadventure.com/wp-content/uploads/2017/04/Bhorgiri_To_Bhimashankar.jpg" alt="facebook-like" /> </div> </div> <div class="deal-grid four"> <div class="info-deal"> <div class="verticle"> <h2>My Title Here</h2> <div class="date-info">posted By : Sachin Kumar kulshreshtha</div> <p>Loren Ipsum is simply dummy text. Lorem Ipsum is simply dummy text of the printing. Loren Ipsum is simply dummy text. Lorem Ipsum is simply dummy text of the printing. </p> <a href="#" class="book-now">Read More</a> </div> </div> <div class="image-deal"><img src="https://www.plusvalleyadventure.com/wp-content/uploads/2017/04/Bhorgiri_To_Bhimashankar.jpg" alt="facebook-like" /> </div> </div> </div> </div> </div> </div><!-- -end of wraper -->
body {-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing: grayscale;background: transparent ;font-family:"Open Sans";} *{margin:0px;padding:0px;} *{transition: all 0.35s ease; -webkit-transition: all 0.35s ease; -moz-transition: all 0.35s ease; -moz-transition: all 0.35s ease; -ms-transition: all 0.35s ease; -o-transition: all 0.35s ease;} *:focus{outline:none} * {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} img{max-width:100%;} /*deal-grid*/ .grid-wrap{ width: 100%; float: left; margin: 20px 0 ;} .grid-wrap img{float:left;} .right-side-deal { float: left; width: 60%; padding:5px 5px 5px 10px; } .right-side-deal h3{font: 400 15px/24px "Open Sans";margin:0px;} .right-side-deal .price{ font-size: 31px; font-weight: bold; } .right-side-deal .book-now-btn{ font-size: 16px; font-weight: 300; background: #5c6668; text-decoration: none; color: #fff; padding: 5px 10px; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; float: right; margin-top: 5px; } .right-side-deal .book-now-btn:hover{ background: #739c0f;} .right-side-deal .price sup{ font-size:20px; font-weight:400; } .star-rating{width:100%; float:left;margin:5px 0;} .star-rating-trip{width:100%; float:left;margin:5px 0 10px 0;} .star-rating-trip .tp-advicer{margin-right:5px;} .deal-grid{width:50%;float:left;height: 257px;overflow: hidden;border: 1px solid #ccc;} .space{width:100%; float:left;margin:25px 0} .deal-grid .info-deal{width:50%;float:left;background:#F5F5F5;padding: 25px;text-align:center;height: 100%;position: relative;box-shadow: 0 0 5px #000;} .deal-grid .info-deal h2{color:#454f51;font:500 25px/30px "Open Sans";text-transform:uppercase;margin:0px;} .deal-grid .info-deal h2 span{font:500 12px/18px "Open Sans";} .deal-grid .info-deal .date-info{font-size: 10px;text-transform: capitalize;line-height: 25px;margin:5px 0;font-weight: bold;border: 1px dashed #000;} .deal-grid .info-deal p{font: 400 13px/18px "Open Sans";color: #232525;} .deal-grid .info-deal .f-from{ font: 300 12px/18px "Open Sans";color:#5c5c5c;display:block;text-transform:uppercase;margin:6px 0;} .deal-grid .info-deal span.price{ font-weight: bold; display: block; font-size: 29px;} .deal-grid .info-deal span.price sup{ font: 700 12px/16px "Open Sans";} .deal-grid .info-deal a.book-now {background: #5c6668;text-decoration: none;padding: 5px 20px;margin: 5px 0 0 0;display: inline-block;color: #fff;border-radius: 2px;font-weight: 300;} .deal-grid .info-deal a.book-now:hover{background: #739c0f;} .deal-grid .image-deal{width:50%; float:left;position:relative;overflow:hidden} .deal-grid .image-deal img{height:100%;} .deal-grid .image-deal img:hover{transform:scale(1.1)} .deal-grid.three .info-deal{float:right} .deal-grid.four .info-deal{float:right} /*end deal-grid*/

Related: See More


Questions / Comments: