<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-second {
  background: linear-gradient(transparent 50%, var(--bg) 50%);
}

.section-third {
  background: var(--bg);
}

/* 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;
}