<div class="container my-5">
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-lg-4 col-md-12 mb-4">
<!-- Card -->
<div class="card booking-card">
<!-- Card image -->
<div class="view overlay">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Others/water-lily.jpg" alt="Card image cap">
<a href="#!">
<div class="mask rgba-white-slight"></div>
</a>
</div>
<!-- Card content -->
<div class="card-body">
<!-- Title -->
<h4 class="card-title font-weight-bold"><a>Fine Art Pictures Gallery</a></h4>
<!-- Data -->
<ul class="list-unstyled list-inline rating">
<li class="list-inline-item mr-0"><i class="fa fa-star"> </i></li>
<li class="list-inline-item mr-0"><i class="fa fa-star"></i></li>
<li class="list-inline-item mr-0"><i class="fa fa-star"></i></li>
<li class="list-inline-item mr-0"><i class="fa fa-star"></i></li>
<li class="list-inline-item"><i class="fa fa-star-half-o"></i></li>
</ul>
<!-- Text -->
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<hr class="my-4">
<p class="h5 font-weight-bold mb-4">Opening hours</p>
<ul class="list-unstyled d-flex justify-content-start mb-0">
<li>Tuesday - Friday</li>
<li>
<div class="chip ml-3">10:00AM</div>
</li>
<li>
<div class="chip ml-0 mr-0">6:00PM</div>
</li>
</ul>
<ul class="list-unstyled d-flex justify-content-start mb-0">
<li>Saturday - Sunday</li>
<li>
<div class="chip ml-3">9:00AM</div>
</li>
<li>
<div class="chip ml-0 mr-0">7:00PM</div>
</li>
</ul>
<ul class="list-unstyled d-flex justify-content-start mb-0">
<li>Monday</li>
<li>
<div class="chip ml-3">CLOSED</div>
</li>
</ul>
</div>
</div>
<!-- Card -->
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-lg-4 col-md-6 mb-4">
<!-- Card -->
<div class="card sunny-card">
<!-- Card content -->
<div class="card-body">
<!-- Title -->
<h2 class="card-title h1 font-weight-bold">
<i class="fa fa-calendar-check-o"></i> MDB</h2>
<h2 class="card-subtitle font-weight-bold text-right my-5 pb-5">Choose topics <span class="float-right">that interest you</span></h2>
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-md-12 mb-3">
<div class="chip chip-sunny mr-2">
<img src="https://mdbootstrap.com/img/Photos/Avatars/img(21).jpg" alt="Contact Person"> Pets
</div>
<div class="chip chip-sunny mr-2">
<img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-5.jpg" alt="Contact Person"> Makeup
</div>
<div class="chip chip-sunny mr-2">
<img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-12.jpg" alt="Contact Person"> Travels
</div>
<div class="chip chip-raspberry white mr-2">
<i class="fa fa-coffee fa-lg mr-2"></i>Coffee
</div>
<div class="chip chip-raspberry white mr-2">
<i class="fa fa-cutlery fa-lg mr-2"></i>Cooking
</div>
<div class="chip chip-raspberry white mr-2">
<i class="fa fa-cogs fa-lg mr-2"></i>Craft
</div>
<div class="chip chip-orange mr-2">
Science
<i class="close fa fa-times"></i>
</div>
<div class="chip chip-orange mr-2">
Dance
<i class="close fa fa-times"></i>
</div>
<div class="chip chip-orange mr-2">
Medicine
<i class="close fa fa-times"></i>
</div>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
<!-- Button -->
<a href="#" class="btn-floating float-right m-0"><i class="fa fa-check"></i></a>
</div>
</div>
<!-- Card -->
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-lg-4 col-md-6 mb-4">
<!-- Card -->
<div class="card news-card">
<!-- Heading-->
<div class="card-body">
<div class="content">
<div class="right-side-meta">2 h</div>
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(3).jpg" class="rounded-circle avatar-img z-depth-1-half">Tony
</div>
</div>
<!-- Card video-->
<div class="embed-responsive embed-responsive-1by1">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/37pwbUp8t1I" allowfullscreen></iframe>
</div>
<!-- Card content -->
<div class="card-body">
<!-- Social meta-->
<div class="social-meta">
<div>
<div class="chip white-text mr-0">
bboy
<i class="close white-text fa fa-times pr-0"></i>
</div>
<div class="chip white-text mr-0">
breakin
<i class="close white-text fa fa-times pr-0"></i>
</div>
<div class="chip white-text mr-0">
battleoftheyear
<i class="close white-text fa fa-times pr-0"></i>
</div>
</div>
<span><i class="fa fa-heart-o"></i>265 likes</span>
<p><i class="fa fa-comment "></i>89 comments</p>
</div>
<hr>
<!-- Comment input -->
<div class="md-form">
<i class="fa fa-heart-o prefix"></i>
<input placeholder="Add Comment..." type="text" id="form555" class="form-control">
</div>
</div>
<!-- Card content -->
</div>
<!-- Card -->
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
body {
background-color: #eee;
}
.card.sunny-card {
background-color: #feffdf;
}
.card.sunny-card .card-title,
.card.sunny-card .card-subtitle {
color: #ffa952;
}
.card.sunny-card .card-title .fa {
color: #ef5a5a;
}
.card.sunny-card .chip.chip-sunny {
background-color: #ffe79a;
}
.card.sunny-card .chip.chip-raspberry {
color: #ef5a5a;
border: 1px solid #ef5a5a;
}
.card.sunny-card .chip.chip-orange {
background-color: #ffa952;
}
.card.sunny-card .btn-floating {
background-color: #ef5a5a;
}
.card.news-card {
background-color: #0b032d;
color: #ffb997;
}
.card.news-card .md-form .form-control {
border-bottom: 1px solid #ffb997;
color: #ffb997;
}
.card.news-card .md-form input::placeholder {
color: #fff;
}
.card.news-card .md-form input[type=text]:focus:not([readonly]) {
box-shadow: 0 1px 0 0 #ffb997;
border-bottom: 1px solid #ffb997;
}
.card.news-card .md-form .prefix.active,
.card.news-card .content .right-side-meta {
color: #ffb997;
}
.card.news-card .chip {
background-color: #843b62;
}
.card.booking-card {
background-color: #c7f2e3;
}
.card.booking-card .fa {
color: #f7aa00;
}
.card.booking-card .card-body .card-text {
color: #db2d43;
}
.card.card.booking-card .chip {
background-color: #87e5da;
}
.card.booking-card .card-body hr {
border-top: 1px solid #f7aa00;
}