"Tour Package Card - Bootstrap 4"
Bootstrap 4.1.1 Snippet by ReeZh

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 ---------->
<!doctype html>
<link href="//stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<div class="container">
<div class="row tours">
<div class="tourcard">
<figure>
<div class="tourpic">
<img width="320" height="180" src="https://placeimg.com/400/225/nature">
<span class="tourcat">Domestic</span>
<span class="tourday hot">2d1n</span>
</div>
<figcaption>
<h3 class="entry-title">
<a href="https://reezhdesign.com">Bandung, Indonesia</a></h3>
<span class="description">Domestic Tour Package 2 Days 1 Night</span>
<span class="tourprice">
<span class="currency">Rp. </span><span class="price">1.500.000</span>
<span> / pax</span>
</span>
</figcaption>
<div class="tourbtn">
<a href="//wa.me/6282127602518" class="btn btn-sm" target="_blank" rel="noreferrer">
<i class="fa fa-whatsapp fa-fw"></i><span>WhatsApp</span>
</a>
<a href="tel:6282127602518" class="btn btn-sm" target="_blank" rel="noreferrer">
<i class="fa fa-phone fa-fw"></i><span>Call Us</span>
</a>
<a href="https://reezhdesign.com/" class="btn btn-sm">
<i class="fa fa-arrow-right fa-fw"></i><span>Read more</span>
</a>
</div>
</figure>
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
a {
color: #363636;
}
.btn {
background: transparent;
margin: 3px;
border: 1px solid #eaeaea;
border-radius: 0px;
}
.btn:hover {
background: #eaeaea;
color: black;
}
.tours {
display: flex;
padding: 0;
flex-flow: row wrap;
align-content: center;
align-items: stretch;
justify-content: center;
}
.tours > .tourcard {
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
background: #fff;
box-shadow: 0 1px 3px rgba(0,0,0,.1);
flex: 0 1 360px;
margin: 15px;
padding: 0;
}
.tours > .tourcard:hover {
background: #fff;
box-shadow: 0 1px 5px rgba(0,0,0,.5);
cursor: pointer;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: