Flight destination bootstrap cards html css

CSS Style Flight destination bootstrap cards

Flight destination bootstrap cards html css
Flight destination bootstrap cards html css

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&amp;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