<section class="section-first py-5">
<div class="container">
<div class="row">
<div class="col-lg-8">
<h1 class="mb-3">Explore Travel Locations</h1>
<p class="mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Optio molestias commodi architecto non. Voluptatibus facere molestias a dolores deserunt, velit architecto commodi aspernatur, magni incidunt cumque modi quibusdam! Facilis, consectetur.</p>
</div>
</div>
</div>
</section>
<section class="section-second">
<div class="container">
<div class="row row row-cols-1 row-cols-md-3 g-4">
<div class="col d-flex">
<div class="card">
<img src="https://assets.codepen.io/162656/egypt.jpg" class="card-img-top" alt="Cairo, Egypt">
<div class="card-body d-flex flex-column justify-content-between">
<div>
<h5 class="card-title">Egypt</h5>
<p class="card-text">A place to remember</p>
</div>
<div class="mt-3">
<a href="https://www.experienceegypt.eg/" class="btn btn-info" target="_blank">Discover Egypt</a>
</div>
</div>
</div>
</div>
<div class="col d-flex">
<div class="card">
<img src="https://assets.codepen.io/162656/jordan.jpg" class="card-img-top" alt="Petra, Jordan">
<div class="card-body d-flex flex-column justify-content-between">
<div>
<h5 class="card-title">Jordan</h5>
<p class="card-text">A country of hikers and historians</p>
</div>
<div class="mt-3">
<a href="https://visitjordan.com/" class="btn btn-info" target="_blank">Discover Jordan</a>
</div>
</div>
</div>
</div>
<div class="col d-flex">
<div class="card">
<img src="https://assets.codepen.io/162656/uganda.jpg" class="card-img-top" alt="Impenetrable Forest, Bwindi Impenetrable National Park, Uganda">
<div class="card-body d-flex flex-column justify-content-between">
<div>
<h5 class="card-title">Uganda</h5>
<p class="card-text">The Pearl of Africa</p>
</div>
<div class="mt-3">
<a href="https://www.exploreuganda.com/" class="btn btn-info" target="_blank">Discover Uganda</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="section-third py-5">
<div class="container">
<div class="row">
<div class="col-lg-8">
<h2 class="mb-3">Useful Information</h2>
<p class="mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Optio molestias commodi architecto non. Voluptatibus facere molestias a dolores deserunt, velit architecto commodi aspernatur, magni incidunt cumque modi quibusdam! Facilis, consectetur.</p>
</div>
</div>
</div>
</section>
<footer class="page-footer">
<span>made by </span>
<a href="https://georgemartsoukos.com/" target="_blank">
<img width="24" height="24" src="https://assets.codepen.io/162656/george-martsoukos-small-logo.svg" alt="George Martsoukos logo">
</a>
</footer>
:root {
--bg: #d1e7dd;
}
.section-first {
background: var(--bg);
}
.section-second {
background: linear-gradient(var(--bg) 50%, transparent 50%);
}
/* FOOTER STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.page-footer {
position: fixed;
right: 0;
bottom: 50px;
display: flex;
align-items: center;
padding: 5px;
z-index: 1;
background: white;
}
.page-footer a {
display: flex;
margin-left: 4px;
}
This Pen doesn't use any external JavaScript resources.