<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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="main-wraper bg-grey-2 padd-90"> <div class="container"> <div class="row"> <div class="col-xs-12 col-sm-8 mx-auto"> <div class="second-title"> <!--<h4 class="color-dark-2-light">our directions</h4>--> <h2>Popular Destinations</h2> </div> </div> </div> <div class="tour-item-grid row"> <div class="col-12 col-xs-6 col-sm-6 col-md-4 clear-xs-2 clear-md-3"> <div class="tour-item style-2"> <div class="radius-top"> <img src="https://via.placeholder.com/150" alt=""> <div class="tour-weather">mountains</div> </div> <div class="tour-desc bg-white"> <a href="#" class="c-button bg-green hv-green-o delay-2 small"><span>view more</span></a> <h4><a class="tour-title color-dark-2 link-green" href="#">Alps Mountains</a></h4> <div class="tour-text color-grey-3">Nunc cursus libero purus ac cong.</div> </div> </div> </div> <div class="col-12 col-xs-6 col-sm-6 col-md-4 clear-xs-2 clear-md-3"> <div class="tour-item style-2"> <div class="radius-top"> <img src="https://via.placeholder.com/150" alt=""> <div class="tour-weather">sea tours</div> </div> <div class="tour-desc bg-white"> <a href="#" class="c-button bg-green hv-green-o delay-2 small"><span>view more</span></a> <h4><a class="tour-title color-dark-2 link-green" href="#">monaco city</a></h4> <div class="tour-text color-grey-3">Nunc cursus libero purus ac cong.</div> </div> </div> </div> <div class="col-12 col-xs-6 col-sm-6 col-md-4 clear-xs-2 clear-md-3"> <div class="tour-item style-2"> <div class="radius-top"> <img src="https://via.placeholder.com/150" alt=""> <div class="tour-weather">sea tours</div> </div> <div class="tour-desc bg-white"> <a href="#" class="c-button bg-green hv-green-o delay-2 small"><span>view more</span></a> <h4><a class="tour-title color-dark-2 link-green" href="#">maldivies</a></h4> <div class="tour-text color-grey-3">Nunc cursus libero purus ac cong.</div> </div> </div> </div> <div class="col-12 col-xs-6 col-sm-6 col-md-4 clear-xs-2 clear-md-3"> <div class="tour-item style-2"> <div class="radius-top"> <img src="https://via.placeholder.com/150" alt=""> <div class="tour-weather">sea tours</div> </div> <div class="tour-desc bg-white"> <a href="#" class="c-button bg-green hv-green-o delay-2 small"><span>view more</span></a> <h4><a class="tour-title color-dark-2 link-green" href="#">bora bora</a></h4> <div class="tour-text color-grey-3">Nunc cursus libero purus ac cong.</div> </div> </div> </div> <div class="col-12 col-xs-6 col-sm-6 col-md-4 clear-xs-2 clear-md-3"> <div class="tour-item style-2"> <div class="radius-top"> <img src="https://via.placeholder.com/150" alt=""> <div class="tour-weather">mountains</div> </div> <div class="tour-desc bg-white"> <a href="#" class="c-button bg-green hv-green-o delay-2 small"><span>view more</span></a> <h4><a class="tour-title color-dark-2 link-green" href="#">Carpathian Mountains</a></h4> <div class="tour-text color-grey-3">Nunc cursus libero purus ac cong.</div> </div> </div> </div> <div class="col-12 col-xs-6 col-sm-6 col-md-4 clear-xs-2 clear-md-3"> <div class="tour-item style-2"> <div class="radius-top"> <img src="https://via.placeholder.com/150" alt=""> <div class="tour-weather">sea tours</div> </div> <div class="tour-desc bg-white"> <a href="#" class="c-button bg-green hv-green-o delay-2 small"><span>view more</span></a> <h4><a class="tour-title color-dark-2 link-green" href="#">miami</a></h4> <div class="tour-text color-grey-3">Nunc cursus libero purus ac cong.</div> </div> </div> </div> </div> </div> </div>

.main-wraper { position: relative; width: 100%; overflow: hidden; display: block; } .padd-90 { padding-bottom: 90px; } .bg-grey-2 { background: #f8f8f8; } .second-title { position: relative; text-align: center; padding-top: 110px; padding-bottom: 65px; } .second-title h4 { font-weight: 700; letter-spacing: 2px; margin-bottom: 7px; font-size: 16px; line-height: 22px; text-transform: uppercase; } .color-dark-2-light { color: rgba(34, 34, 34, 0.6); } .second-title>*:last-child { padding-bottom: 0px; } .second-title h2 { padding-bottom: 24px; letter-spacing: 6px; font-size: 32px; line-height: 32px; font-weight: 700; text-transform: uppercase; } .tour-item-grid .tour-item { margin-bottom: 30px; } .tour-item.style-2 { padding: 0; } .tour-item.style-2 .radius-top { -moz-border-radius: 0; border-radius: 0; position: relative; width: 100%; overflow: hidden; } .tour-item.style-2 .tour-weather { font-size: 12px; line-height: 34px; text-transform: uppercase; letter-spacing: 1px; position: absolute; top: 20px; left: 20px; font-weight: 700; color: #222; background: #fff; border-radius: 7px; padding: 0 14px; height: 34px; } .tour-item.style-2 .tour-desc { padding-left: 20px; text-align: left; padding-top: 25px; padding-bottom: 27px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } .tour-item.style-2 .c-button { float: right; border: 2px solid #e4a228; margin-right: 20px; background: #e4a228; text-transform: uppercase; color: #fff; font-weight: 700; text-align: center; } .c-button.small { font-size: 12px; padding: 11px 18px; border-radius: 6px; } .c-button.hv-green-o:hover { background: transparent; color: #e4a228; text-decoration: none; } .tour-desc h4 { font-size: 16px; line-height: 22px; font-weight: 400; text-transform: uppercase; letter-spacing: 1px; } .tour-item.style-2 .tour-title { max-width: 58%; text-align: left; display: inline-block; font-size: 14px; line-height: 18px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 9px; } .tour-item.style-2 .tour-title:hover { color: #e6a630; text-decoration: none; } .tour-item.style-2 .tour-text { max-width: 58%; font-family: 'Open Sans', sans-serif; font-size: 14px; line-height: 18px; font-weight: 400; margin-bottom: 13px; } .color-dark-2 { color: #222; } .radius-top img { width: 100%; height: auto; display: block; } @media screen and (min-width: 481px) { .clear-xs-2:nth-child(2n+1) { clear: both; } }