Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid fugit obcaecati ea officiis optio porro quaerat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
<section>
<div class="demo-banner">
<div class="demo-banner-caption-container">
<div class="demo-banner-caption-content">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
</div>
<a href="#" class="btn btn-outline-light btn-large float-end">Learn More</a>
</div>
</div>
</section>
<section>
<div class="container-fluid demo-container-with-cards">
<div class="row cards">
<div class="col-md-4 d-flex justify-content-center mb-4">
<div class="card h-100 demo-card" style="width: 18rem;">
<img src="images/steam-train.jpg" class="card-img-top" alt="Steam Train" />
<div class="card-body">
<h5 class="card-title">Lorem Ipsum</h5>
<p class="card-text">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
<div class="col-md-4 d-flex justify-content-center mb-4">
<div class="card h-100 demo-card" style="width: 18rem;">
<img src="images/banner.jpg" class="card-img-top" alt="Bridge" />
<div class="card-body">
<h5 class="card-title">Lorem Ipsum</h5>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid fugit obcaecati ea officiis optio porro quaerat.</p>
</div>
</div>
</div>
<div class="col-md-4 d-flex justify-content-center mb-4">
<div class="card h-100 demo-card" style="width: 18rem;">
<img src="images/lemurs.jpg" class="card-img-top" alt="Lemurs" />
<div class="card-body">
<h5 class="card-title">Lorem Ipsum</h5>
<p class="card-text">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
</div>
</div>
</div>
</div>
</section>
.demo-banner {
height: 400px;
background-image: url("images/banner.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
padding-top: 6em;
}
.demo-banner-caption-container {
width: 40%;
max-width: 460px;
min-width: 260px;
}
.demo-banner-caption-content {
background-color: rgba(255, 255, 255, 0.6);
padding: 1em;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
margin-bottom: 1em;
}
.demo-banner-caption-content h1 {
font-size: 1.2em;
border-bottom: 1px dashed rgba(255, 255, 255, 0.20);
margin-bottom: 20px;
}
.demo-banner-caption-container .btn {
opacity: .5;
border-radius: 6px;
}
.demo-container-with-cards {
background-image: url("images/bg-spring.jpg");
padding: 4em 1em;
}
.demo-container-with-cards .card-title {
border-bottom: 1px dashed #ececec;
margin-bottom: 20px;
}
.demo-container-with-cards .demo-card {
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}