"Trip box "
Bootstrap 4.1.1 Snippet by krunb

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
@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;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Now UI Kit PRO

Questions / Comments: