Flight destination bootstrap cards html css
CSS Style Flight destination bootstrap cards
Flight destination bootstrap cards html css exemple.
A beautiful block of flights.
<link rel="stylesheet" href="http://proweblab.xyz/assets/vendor/bootstrap/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Sharp|Material+Icons+Round|Material+Icons+Two+Tone"/>
<link href="https://fonts.googleapis.com/css?family=Cabin:400,500,600,700&subset=latin-ext,vietnamese" rel="stylesheet">
<style>
body {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 1.42857143;
background-color: #D1D1D1;
padding-top: 100px;
}
---------------------------------
.mb15 {
margin-bottom: 15px;
}
.card {
border-radius: 8px;
overflow: hidden;
}
.card .card__img-wrap {
height: 150px;
width: 100%;
border-radius: 8px 8px 0 0;
position: relative;
background-color: #ccc;
overflow: hidden;
}
.card .card__img-wrap img {
min-height: 100%;
min-width: 100%;
}
.card .title-overlay-center {
color: #fff;
}
.card .title-overlay-center {
text-align: center;
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 45%;
}
.h1, h2, h3, h4, h5, h6 {
margin: 0;
font-weight: normal;
}
.h4, h4 {
font-size: 18px;
}
.card-big .card__info {
border-radius: 0 0 6px 6px;
background-color: #fff;
float: left;
width: 100%;
border-bottom: 1px dashed #D1D1D1;
}
.card .card__info {
padding: 15px;
}
.card-big .title-left-wrap {
float: left;
width: 40%;
text-align: left;
}
.card-big .card__info small {
color: #8B8B8B;
}
.card-big .icon-center-wrap {
float: left;
text-align: center;
width: 20%;
}
.card-big .title-right-wrap {
float: left;
width: 40%;
text-align: right;
}
.card-big .card__pricelist {
background-color: #fff;
border-radius: 6px 6px 0 0;
float: left;
width: 100%;
}
.card-big .cost {
float: left;
width: 100%;
padding: 10px 15px;
border-bottom: 1px dashed #F5F5F5;
}
.card-big .logo-wrap {
float: left;
width: 30%;
border: 1px solid #F5F5F5;
border-radius: 8px;
height: 36px;
text-align: center;
}
.card-big .logo-wrap img {
max-height: 34px;
}
.card-big .icon-wrap {
float: left;
width: 35%;
text-align: center;
}
.card-big .icon-wrap i {
display: block;
color: #D1D1D1;
font-size: 18px;
}
.card-big .icon-wrap small {
color: #8B8B8B;
}
.card-big .price-wrap {
float: right;
width: 35%;
text-align: right;
}
.card .price {
color: #113F6D;
font-weight: 600;
font-style: normal;
line-height: normal;
display: block;
font-size: 15px;
padding-bottom: 5px;
}
.card .price .currency {
font-size: 85%;
color: #8B8B8B;
}
.card-big .price-wrap .small {
text-transform: uppercase;
background-color: #EC6F23;
color: #fff;
padding: 3px 5px;
border-radius: 3px;
font-size: 11px;
}
.rotate90 {
transform: rotate(90deg);
}
</style>
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-3 col-xs-12">
<article class="card card-big mb15">
<div class="card__img-wrap">
<img src="https://asfartrip.com/public/upload/top_destinations/FLIGHT-CAI.jpg">
<h4 class="title title-overlay-center">Explore Cairo</h4>
</div>
<div class="card__info">
<div class="title-left-wrap"> <h5>London</h5> <small> LON </small></div>
<span class="icon-center-wrap"><i class="material-icons rotate90"></i></span>
<div class="title-right-wrap"> <h5>Cairo</h5> <small>CAI </small></div>
</div> <!-- card__info // -->
<div class="card__pricelist">
<div class="cost">
<div class="logo-wrap"><img src="https://asfartrip.com/public/assets/images/airline_logo/J9.png"></div>
<div class="icon-wrap"> <i class="material-icons"></i> <small>20-Jan</small> </div>
<div class="price-wrap"><var class="price"><span class="currency">AED</span> 540</var>
<a rel="nofollow" target="_blank" href="" class="small">Book</a></div>
</div><!-- cost // -->
<div class="cost">
<div class="logo-wrap"><img src="https://asfartrip.com/public/assets/images/airline_logo/EK.png"></div>
<div class="icon-wrap"> <i class="material-icons"></i> <small>20-Jan</small> </div>
<div class="price-wrap"><var class="price"><span class="currency">AED</span> 1,150</var>
<a rel="nofollow" target="_blank" href="" class="small">Book</a></div>
</div><!-- cost // -->
<div class="cost">
<div class="logo-wrap"><img src="https://asfartrip.com/public/assets/images/airline_logo/MS.png"></div>
<div class="icon-wrap"> <i class="material-icons"></i> <small>20-Jan</small> </div>
<div class="price-wrap"><var class="price"><span class="currency">AED</span> 1,200</var>
<a rel="nofollow" target="_blank" href="" class="small">Book</a></div>
</div><!-- cost // -->
</div> <!-- card__pricelist // -->
</article> <!-- card // -->
</div><!-- col // -->
<div class="col-sm-6 col-md-3 col-xs-12">
<article class="card card-big mb15">
<div class="card__img-wrap">
<img src="https://asfartrip.com/public/upload/top_destinations/FLIGHT-BKK.jpg">
<h4 class="title title-overlay-center">Explore Bangkok</h4>
</div>
<div class="card__info">
<div class="title-left-wrap"> <h5>London</h5> <small> LON </small></div>
<span class="icon-center-wrap"><i class="material-icons rotate90"></i></span>
<div class="title-right-wrap"> <h5>Bangkok</h5> <small>BKK </small></div>
</div> <!-- card__info // -->
<div class="card__pricelist">
<div class="cost">
<div class="logo-wrap"><img src="https://asfartrip.com/public/assets/images/airline_logo/FZ.png"></div>
<div class="icon-wrap"> <i class="material-icons"></i> <small>14-Mar</small> </div>
<div class="price-wrap"><var class="price"><span class="currency">AED</span> 1,200</var>
<a rel="nofollow" target="_blank" href="" class="small">Book</a></div>
</div><!-- cost // -->
<div class="cost">
<div class="logo-wrap"><img src="https://asfartrip.com/public/assets/images/airline_logo/WY.png"></div>
<div class="icon-wrap"> <i class="material-icons"></i> <small>20-Jan</small> </div>
<div class="price-wrap"><var class="price"><span class="currency">AED</span> 1,250</var>
<a rel="nofollow" target="_blank" href="" class="small">Book</a></div>
</div><!-- cost // -->
<div class="cost">
<div class="logo-wrap"><img src="https://asfartrip.com/public/assets/images/airline_logo/TG.png"></div>
<div class="icon-wrap"> <i class="material-icons"></i> <small>25-Apr</small> </div>
<div class="price-wrap"><var class="price"><span class="currency">AED</span> 1,500</var>
<a rel="nofollow" target="_blank" href="" class="small">Book</a></div>
</div><!-- cost // -->
</div> <!-- card__pricelist // -->
</article> <!-- card // -->
</div><!-- col // -->
<div class="col-sm-6 col-md-3 col-xs-12">
<article class="card card-big mb15">
<div class="card__img-wrap">
<img src="https://asfartrip.com/public/upload/top_destinations/FLIGHT-NYC.jpg">
<h4 class="title title-overlay-center">Explore New York</h4>
</div>
<div class="card__info">
<div class="title-left-wrap"> <h5>London</h5> <small> LON </small></div>
<span class="icon-center-wrap"><i class="material-icons rotate90"></i></span>
<div class="title-right-wrap"> <h5>New York</h5> <small>NYC </small></div>
</div> <!-- card__info // -->
<div class="card__pricelist">
<div class="cost">
<div class="logo-wrap"><img src="https://asfartrip.com/public/assets/images/airline_logo/SU.png"></div>
<div class="icon-wrap"> <i class="material-icons"></i> <small>15-Jun</small> </div>
<div class="price-wrap"><var class="price"><span class="currency">AED</span> 1,500</var>
<a rel="nofollow" target="_blank" href="" class="small">Book</a></div>
</div><!-- cost // -->
<div class="cost">
<div class="logo-wrap"><img src="https://asfartrip.com/public/assets/images/airline_logo/PS.png"></div>
<div class="icon-wrap"> <i class="material-icons"></i> <small>21-Jul</small> </div>
<div class="price-wrap"><var class="price"><span class="currency">AED</span> 1,520</var>
<a rel="nofollow" target="_blank" href="" class="small">Book</a></div>
</div><!-- cost // -->
<div class="cost">
<div class="logo-wrap"><img src="https://asfartrip.com/public/assets/images/airline_logo/EK.png"></div>
<div class="icon-wrap"> <i class="material-icons"></i> <small>29-Nov</small> </div>
<div class="price-wrap"><var class="price"><span class="currency">AED</span> 4,000</var>
<a rel="nofollow" target="_blank" href="" class="small">Book</a></div>
</div><!-- cost // -->
</div> <!-- card__pricelist // -->
</article> <!-- card // -->
</div><!-- col // -->
<div class="col-sm-6 col-md-3 col-xs-12">
<article class="card card-big mb15">
<div class="card__img-wrap">
<img src="https://asfartrip.com/public/upload/top_destinations/FLIGHT-IST.jpg">
<h4 class="title title-overlay-center">Explore Istanbul</h4>
</div>
<div class="card__info">
<div class="title-left-wrap"> <h5>London</h5> <small> LON </small></div>
<span class="icon-center-wrap"><i class="material-icons rotate90"></i></span>
<div class="title-right-wrap"> <h5>Istanbul</h5> <small>IST </small></div>
</div> <!-- card__info // -->
<div class="card__pricelist">
<div class="cost">
<div class="logo-wrap"><img src="https://asfartrip.com/public/assets/images/airline_logo/PC.png"></div>
<div class="icon-wrap"> <i class="material-icons"></i> <small>25-Apr</small> </div>
<div class="price-wrap"><var class="price"><span class="currency">AED</span> 450</var>
<a rel="nofollow" target="_blank" href="" class="small">Book</a></div>
</div><!-- cost // -->
<div class="cost">
<div class="logo-wrap"><img src="https://asfartrip.com/public/assets/images/airline_logo/SV.png"></div>
<div class="icon-wrap"> <i class="material-icons"></i> <small>20-May</small> </div>
<div class="price-wrap"><var class="price"><span class="currency">AED</span> 700</var>
<a rel="nofollow" target="_blank" href="" class="small">Book</a></div>
</div><!-- cost // -->
<div class="cost">
<div class="logo-wrap"><img src="https://asfartrip.com/public/assets/images/airline_logo/FZ.png"></div>
<div class="icon-wrap"> <i class="material-icons"></i> <small>14-Apr</small> </div>
<div class="price-wrap"><var class="price"><span class="currency">AED</span> 900</var>
<a rel="nofollow" target="_blank" href="" class="small">Book</a></div>
</div><!-- cost // -->
</div> <!-- card__pricelist // -->
</article> <!-- card // -->
</div><!-- col // -->
</div>
</div>
Find out about the update of this script first in our telegram channel: https://t.me/proweblabxyz