<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="container"> <div class="row justify-content-center"> <div class="col-lg-4 col-md-6 text-center"> <h1 class="py-5"> Trip box </h1> </div> </div> <div class="row justify-content-center"> <div class="col-lg-4 col-md-6"> <div class="trip-box"> <div class="trip-box-cost"> <h5> 150 <small>R.S</small></h5> </div> <div class="trip-box-body"> <div class="trip-box-pic"> <img src="http://dnet.so/bundlz.sa/content/campaigns/2020-03-29_23-37-12_thumb.png" alt="trip-box-pic"> </div> <div class="trip-box-content"> <a href="trip-details.html"> <h4 class="title"> Edge of The World</h4> </a> <ul class="nav justify-content-between option"> <li class="nav-item"> <a href="#!" class="nav-link"><img src="http://dnet.so/html/bundlz.sa/ar/assets/img/poi_outlined.png" width="20" alt="map"> Riyadh</a> </li> <li> <a href="#!" class="nav-link"><img src="http://dnet.so/html/bundlz.sa/ar/assets/img/spot.png" width="20" alt="map"> Female & Families </a> </li> </ul> <p class="details"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's </p> <h5 class="time"> Apr 5 - Apr 6 (01 Day) </h5> </div> </div> <div class="trip-box-button"> <a href="trip-details.html" class="btn btn-buy"> Buy Now!</a> </div> </div> </div> <div class="col-lg-4 col-md-6"> <div class="trip-box mobile"> <div class="trip-box-cost"> <h5> 150 <small>ريال</small></h5> </div> <div class="trip-box-body"> <div class="trip-box-pic"> <img src="http://dnet.so/bundlz.sa/content/campaigns/2020-03-29_23-37-12_thumb.png" alt="trip-box-pic"> </div> <div class="trip-box-content"> <a href="trip-details.html"> <h4 class="title"> Edge of The World</h4> </a> <ul class="nav justify-content-between option"> <li class="nav-item"> <a href="#!" class="nav-link"><img src="http://dnet.so/html/bundlz.sa/ar/assets/img/poi_outlined.png" width="20" alt="map"> Riyadh</a> </li> <li> <a href="#!" class="nav-link"><img src="http://dnet.so/html/bundlz.sa/ar/assets/img/spot.png" width="20" alt="map"> Female & Families </a> </li> </ul> <p class="details"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's </p> <h5 class="time"> Apr 5 - Apr 6 (01 Day) </h5> </div> </div> <div class="trip-box-button"> <a href="trip-details.html" class="btn btn-buy"> Buy Now!</a> </div> </div> </div> <div class="col-lg-4 col-md-6"> <div class="trip-box rtl"> <div class="trip-box-cost"> <h5> 150 <small>ريال</small></h5> </div> <div class="trip-box-body"> <div class="trip-box-pic"> <img src="http://dnet.so/bundlz.sa/content/campaigns/2020-03-29_23-37-12_thumb.png" alt="trip-box-pic"> </div> <div class="trip-box-content"> <a href="trip-details.html"> <h4 class="title"> رحلة الليالي العربية</h4> </a> <ul class="nav justify-content-between option"> <li class="nav-item"> <a href="#!" class="nav-link"><img src="http://dnet.so/html/bundlz.sa/ar/assets/img/poi_outlined.png" width="20" alt="map"> الرياض</a> </li> <li> <a href="#!" class="nav-link"><img src="http://dnet.so/html/bundlz.sa/ar/assets/img/spot.png" width="20" alt="map"> عائلات واناث </a> </li> </ul> <p class="details"> هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، </p> <h5 class="time"> 5 ابريل - 6 ابريل (1يوم) </h5> </div> </div> <div class="trip-box-button"> <a href="trip-details.html" class="btn btn-buy"> عرض التفاصيل!</a> </div> </div> </div> </div> </div>

@import url('https://fonts.googleapis.com/css?family=Cairo&display=swap'); body{ font-family: 'Cairo', sans-serif; } a, a:hover{ text-decoration: none; } .trip-box{ position: relative; border-radius: 6px; box-shadow: 0 0 15px #eee; background: #fff; margin-bottom: 30px; overflow: hidden; transition: all 0.3s ease; } .trip-box .trip-box-cost{ position: absolute; top: 120px; left: 0; background-color: #EE423D; border-radius: 0 6px 6px 0; color: #FFF; padding: 0.5rem 1rem; z-index:33; margin-bottom: 0; } .trip-box .trip-box-cost small{ font-size: 12px; } .trip-box .trip-box-pic{ width: 100%; height: 200px; overflow: hidden; background-color: #EE423D; transition: all 0.3s ease; } .trip-box .trip-box-pic img{ width: 100%; height: 100%; object-fit: cover; transition: all 0.3s ease; } .trip-box .trip-box-content{ padding: 1rem; } .trip-box .trip-box-content .title{ color: #0D3B60; font-size: 22px; font-weight: 600; transition: all 0.3s ease; } .trip-box .trip-box-content .option .nav-link{ font-size: 14px; color: #ACACAD; } .trip-box .trip-box-content .option .nav-link{ font-size: 14px; color: #ACACAD; padding: 0.5rem 0; } .trip-box .trip-box-content .option .nav-link:hover{ color: #999; } .trip-box .trip-box-content .details{ font-size: 16px; line-height: 1.7; color: #ACACAD; } .trip-box .trip-box-content .time{ font-size: 18px; text-align: center; font-weight: bold; color: #3CD3B6; } .trip-box .trip-box-button{ text-align: center; margin-bottom: 30px; } .trip-box .trip-box-button .btn-buy{ border-radius: 6px; border-color: #EE423D; color: #EE423D; padding: 0.5rem 3rem; font-weight: 600; } .trip-box .trip-box-button .btn-buy:hover{ background-color: #EE423D; color: #fff; } /*---------------- Hover -----------------*/ .trip-box:hover{ transform: translateY(-15px); box-shadow: 0 0 50px #cccccc; } .trip-box:hover .trip-box-pic img{ opacity: 0.6; transform: scale(1.2) rotate(3deg); } .trip-box:hover .trip-box-content .title{ color: #EE423D; } /*-------------------------------- Mobile --------------------------------*/ .mobile.trip-box{ padding: 15px; } .mobile .trip-box-cost{ font-size: 10px; padding: 0px 10px; margin:0; top: 100px; } .mobile .trip-box-body{ display: flex; } .mobile .trip-box-pic{ width: 100px; height: 80px; border-radius: 6px; } .mobile .trip-box-content{ padding: 0 1rem 1rem; } .mobile .trip-box-content .option .nav-link{ font-size: 12px; } .mobile .trip-box-content .details{ display: none; } .mobile .trip-box-content .time{ padding: 1rem 0 0; } .mobile .trip-box-button{ margin-bottom: 0; } .mobile .trip-box-button .btn-buy{ background-color: #EE423D; color: #fff; } /*-------------------------------- RTL Direction --------------------------------*/ body[dir="rtl"], .rtl{ direction: rtl; text-align: right; } body[dir="rtl"] .trip-box .trip-box-cost, .rtl.trip-box .trip-box-cost{ left: auto; right: 0; border-radius: 6px 0 0 6px; } body[dir="rtl"] .trip-box .trip-box-content .nav, .rtl.trip-box .trip-box-content .nav{ padding: 0; } /*-------------------------------- Media Query --------------------------------*/ @media (max-width: 500px) { .trip-box{ padding: 15px; } .trip-box .trip-box-cost{ font-size: 10px; padding: 0px 10px; margin:0; top: 100px; } .trip-box .trip-box-body{ display: flex; } .trip-box .trip-box-pic{ width: 100px; height: 80px; border-radius: 6px; } .trip-box .trip-box-content{ padding: 0 1rem 1rem; } .trip-box .trip-box-content .option .nav-link{ font-size: 12px; } .trip-box .trip-box-content .details{ display: none; } .trip-box .trip-box-content .time{ padding: 1rem 0 0; } .trip-box .trip-box-button{ margin-bottom: 0; } }