<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="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container-fluid">
<div class="row p-0" id="gradient-header">
<div class="col-12 text-center mx-auto p-5">
<div class="f-prime large thirds">
Image Cards with Gradient Content
</div>
<div class="f-second text-light">
Designed by <a href="https://bootsnipp.com/sarwal" target="_blank" class="text-light">sarwal</a>.
Inspired by <a href="https://bootsnipp.com/YvesWassersleben" target="_blank" class="text-light">YvesWassersleben</a>.
Images referenced from <a href="https://pixabay.com/" target="_blank" class="text-light">pixabay</a>.
</div>
</div>
</div>
<div class="row bg-dark p-0">
<div class="col-12 mx-auto p-0">
<div class="row mx-auto p-2">
<div class="col-xl-3 col-lg-3 col-md-6 col-sm-12 col-12 p-2 card">
<div class="thumbnail">
<img src="https://cdn.pixabay.com/photo/2016/12/30/07/59/kitchen-1940174_960_720.jpg">
<div class="caption">
<div class="f-prime sml primes">
Lorem ipsum.
</div>
<div class="f-third text-light">
Lorem ipsum dolor sit amet.
</div>
<hr>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Viverra adipiscing at in tellus integer feugiat scelerisque varius morbi. Augue neque gravida in fermentum et sollicitudin ac. Cursus sit amet dictum sit amet justo donec enim diam.
</p>
<div class="mb-0">
<a href="#link" class="btn btn-card">View More</a>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-3 col-md-6 col-sm-12 col-12 mx-auto p-2 card">
<div class="thumbnail">
<img src="https://cdn.pixabay.com/photo/2016/01/23/23/52/dining-room-1158266_960_720.jpg">
<div class="caption">
<div class="f-prime sml primes">
Lorem ipsum.
</div>
<div class="f-third text-light">
Lorem ipsum dolor sit amet.
</div>
<hr>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Viverra adipiscing at in tellus integer feugiat scelerisque varius morbi. Augue neque gravida in fermentum et sollicitudin ac. Cursus sit amet dictum sit amet justo donec enim diam.
</p>
<div class="mb-0">
<a href="#link" class="btn btn-card">View More</a>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-3 col-md-6 col-sm-12 col-12 mx-auto p-2 card">
<div class="thumbnail">
<img src="https://cdn.pixabay.com/photo/2016/12/30/07/59/kitchen-1940175_960_720.jpg">
<div class="caption">
<div class="f-prime sml primes">
Lorem ipsum.
</div>
<div class="f-third text-light">
Lorem ipsum dolor sit amet.
</div>
<hr>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Viverra adipiscing at in tellus integer feugiat scelerisque varius morbi. Augue neque gravida in fermentum et sollicitudin ac. Cursus sit amet dictum sit amet justo donec enim diam.
</p>
<div class="mb-0">
<a href="#link" class="btn btn-card">View More</a>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-3 col-md-6 col-sm-12 col-12 mx-auto p-2 card">
<div class="thumbnail">
<img src="https://cdn.pixabay.com/photo/2017/08/07/19/04/house-2606823_960_720.jpg">
<div class="caption">
<div class="f-prime sml primes">
Lorem ipsum.
</div>
<div class="f-third text-light">
Lorem ipsum dolor sit amet.
</div>
<hr>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Viverra adipiscing at in tellus integer feugiat scelerisque varius morbi. Augue neque gravida in fermentum et sollicitudin ac. Cursus sit amet dictum sit amet justo donec enim diam.
</p>
<div class="mb-0">
<a href="#link" class="btn btn-card">View More</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
/* Font Imports ************************************************************* */
@import url('https://fonts.googleapis.com/css?family=Oxygen');
/* Gradient Header Styling ************************************************** */
#gradient-header {
background: linear-gradient(110deg, #7C99B4, #161B33);
}
#gradient-footer {
background: linear-gradient(110deg, #161B33, #7C99B4);
}
/* Defining Font Families *************************************************** */
.f-prime {
font-family: 'Oxygen', sans-serif;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
}
.f-second, .f-third {
font-family: 'Oxygen', sans-serif;
font-weight: normal;
}
/* Defining Font Sizing ***************************************************** */
.large {
font-size: 2.5rem;
}
.med {
font-size: 2rem;
}
.sml {
font-size: 1.5rem;
}
/* Defining Font Colors ***************************************************** */
.primes {
color: #172A3A;
}
.seconds {
color: #4C5C68;
}
.thirds {
color: #A0B9BF;
}
/* Card Styling ************************************************************* */
.card {
background-color: transparent;
border: 0px;
}
.card .thumbnail {
background-color: #FFFFFF;
box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.25);
border: 0px;
border-radius: 0px;
padding: 0px;
text-align: center;
}
.card .thumbnail .caption {
background: linear-gradient(45deg, #4C5C68, #A0B9BF);
margin: -20px 20px 20px 20px;
padding: 19px 29px 19px 29px;
position: relative;
border: 0px;
}
.card .thumbnail .caption hr {
border-top: 1px solid rgba(255, 255, 255, 0.25);
margin: 20px 40px;
}
.card .thumbnail .caption p {
font-weight: normal;
font-size: 0.8rem;
color: #FFFFFF;
}
.card .thumbnail .caption .btn-card {
background-color: transparent;
border: 1px solid #FFFFFF;
font-weight: normal;
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 1px;
padding: 0.25rem 1.25rem;
color: #FFFFFF;
transition: 0.5s ease;
border-radius: 0px;
}
.card .thumbnail .caption .btn-card:hover {
background-color: rgba(255, 255, 255, 0.1);
border: 1px solid #FFFFFF;
color: #FFFFFF;
}
.card .thumbnail img {
width: 100%;
height: auto;
}
/* ************************************************************************** */
