<div class="container-fluid" id="content">
<h2 class="text-center" style="margin-bottom:1em;">
Product Card
</h2>
<div class="row">
<!-- card #1 -->
<div class="col">
<div class="card c-card-product" style="width: 18rem;">
<img src="https://mmc.tirto.id/image/otf/500x0/2017/09/05/Borobudur--ISTOCK_ratio-16x9.jpg" class="card-img-top" alt="card image">
<div class="card-body">
<h5 class="card-title">
Borobudur trip
</h5>
<p class="card-text text-capitalize">
<span class="c-card-date mt-3 mb-3">
<i class="far fa-calendar-alt pr-2"></i>
3 Days 2 Night
</span>
<span class="c-card-dest">
<i class="fas fa-map-marker-alt pr-2"></i>
yogyakarta - magelang
</span>
</p>
<a href="#" class="btn btn-primary btn-block o-btn--primary">
packages detail
</a>
</div>
</div>
</div>
<!-- card #1 end -->
<!-- card #2 -->
<div class="col">
<div class="card c-card-img" style="width: 18rem;">
<img src="https://blogmedia.evbstatic.com/wp-content/uploads/wpmulti/sites/8/2018/01/15155312/iStock-667709450.jpg" class="card-img-top" alt="card image" style="z-index:0;">
<span class="o-title">
Event Name #1
</span>
<a href="#" class="btn btn-primary btn-block o-btn--primary">
packages detail
</a>
</div>
</div>
<!-- card #2 end -->
<!-- card #3 -->
<div class="col"></div>
<!-- card #3 end -->
</div>
</div>
@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700");
:root {
background-color: cornflowerblue;
padding: 2em;
--primary-color: #039ea5;
--secondary-color: #be8c2c;
--primary-text-color: #fafafa;
}
$color--primary: #039ea5;
body {
background-color: #fafafa;
font-family: "Roboto", sans-serif;
border-radius: 10px;
}
#content {
padding: 20px;
color: #212121;
background-color: #fafafa;
border-radius: 10px;
}
/* card styling */
.c-card-product {
min-height: 350px;
max-height: 400px;
border-radius: 15px;
border: 0px;
background: #fff;
filter: drop-shadow(0px 20px 20px rgba(0, 0, 0, 0.16));
.card-img-top {
max-height: 250px;
border-radius: 15px;
}
.card-body {
color: #212121;
}
.card-body h5 {
text-transform: capitalize;
}
.c-card-date {
display: block;
}
.c-card-dest {
display: block;
}
}
.c-card-img{
width:250px;
max-height:350px;
border-radius: 15px;
border: 0px;
filter: drop-shadow(0px 20px 20px rgba(0, 0, 0, 0.16));
.card-img-top{
min-height:350px;
border-radius:10px;
z-index:0;
object-fit: cover;
}
.o-title{
z-index:1;
padding: 50px 25px;
margin-top:-150px;
font-size:1.3em;
font-weight:500;
color: #fafafa;
}
.o-btn--primary{
z-index:1;
margin-top: -40px;
width:90%;
margin-left:5%;
}
}
@mixin btn($shadow) {
background-color: $color--primary;
text-transform: uppercase;
font-weight: 500;
letter-spacing: 2px;
min-height: 45px;
padding-top: 10px;
border-radius: 5px;
border: 0px;
box-shadow: $shadow;
}
.o-btn--primary {
@include btn(none);
&:hover {
@include btn(0px 5px 5px rgba(3, 158, 165, 0.16));
transform: translateY(-1px);
background-color: lighten($color--primary, 2%);
}
&:active {
background-color: darken($color--primary, 10%) !important;
border-color: transparent !important;
}
&:focus {
box-shadow: none !important;
}
}
View Compiled
