HTML Content

    <article id="friend" class="page-section bg-info min-vh-100 d-flex flex-column justify-content-center">
      <section class="layout-floater container py-5">
        <div class="row align-items-center justify-content-center">
          <section class="layout-container col-8 col-md-4">
            <img
              id="parachute"
              class="layout-image"
              src="images/floater.svg"
              alt="Floater Image"
            />
          </section>
          <section class="col-10 col-md-6 text-center text-md-left pl-md-5">
            <h1 class="friend-text font-weight-bolder text-warning">
              You've Got a Friend
            </h1>
            <p class="friend-text">
              When you hang with monsters, you've got the best friends in the
              world. Feeling down? They'll make your spirits soar. Stomach
              rumbling? They'll whip you up a satisfying snack. Crave adventure?
              They'll explore the world with you. You're one lucky individual!
            </p>
          </section>
        </div>
      </section>
    </article>

    <article
      id="types"
      class="page-section bg-warning text-center min-vh-100 py-5 d-flex flex-column justify-content-center"
    >
      <header class="container mb-3">
        <h1 class="display-4 text-danger font-weight-lighter mb-5">
          Monster Types
        </h1>
      </header>
      <section class="container">
        <div class="row row-cols-1 row-cols-md-3">
          <section class="col">
            <img
              id="type-horns"
              class="icon layout-icon"
              src="images/icon01.svg"
              style="height: 200px;"
              alt="Icon 01"
            />
            <h3 class="text-danger font-weight-light">Horns</h3>
            <p>
              Horns on monsters likely originated as a means for self-defense.
              However, nowadays they're more commonly used for such routine
              tasks as opening cans, digging in the garden,and flipping burgers
              on the grill.
            </p>
          </section>
          <section id="type-tentacles" class="col">
            <img
              class="icon layout-icon"
              src="images/icon02.svg"
              style="height: 200px;"
              alt="Icon 02"
            />
            <h3 class="text-danger font-weight-light">Tentacles</h3>
            <p class="">
              Monsters with tentacles can mop the floor, cook dinner, and type a
              winning proposal, all while sipping a steaming hot latte. Their
              multitasking ability is a talent many aspire to, but most will
              never achieve.
            </p>
          </section>
          <section id="type-periscope" class="col">
            <img
              class="icon layout-icon"
              src="images/icon03.svg"
              style="height: 200px;"
              alt="Icon 03"
            />
            <h3 class="text-danger font-weight-light">Periscope Eyes</h3>
            <p class="">
              Periscope-eyed monsters can watch a football game in the family
              room, while "keeping an eye" on what's simmering on the stove.
              Many are also astute detectives who find satisfying work in law
              enforcement.
            </p>
          </section>
        </div>
      </section>
    </article>

    <article id="hire" class="page-section">
      <section class="layout-cards container">
        <div class="row row-cols-1 row-cols-md-3 justify-content-center">
          <div class="col">
            <section class="card my-3">
              <img class="layout-image card-img-top img-fluid" src="images/card01.svg" alt="Photo Sample">
              <div class="card-body">
                <h4 class="text-danger font-weight-light">Boo!</h4>
                <p class=" card-text">Hire Spook, and her monster pals, to scare the pants off your family and friends any time of the year. Though
                  she has a heart of gold and would never hurt a living soul, she's full of mischief and loves to haunt.
                  After all, who doesn't love a good adrenaline rush?</p>
              </div>
            </section>
          </div>
          <div class="col">
            <section class="card my-3">
              <img class="layout-image card-img-top img-fluid" src="images/card02.svg" alt="Photo Sample">
              <div class="card-body">
                <h4 class="text-danger font-weight-light">So sweet!</h4>
                <p class=" card-text">Satisfy your sweet tooth with a decadent dessert from Topsy Turvy Cake Design. Their monster bakers will
                  enliven your taste buds with award-winning creations including Upside Down/Inside Out cake and Hornets'
                  Nest muffins.</p>
              </div>
            </section>
            </div>
          <div class="col">
            <section class="card my-3">
              <img class="layout-image card-img-top img-fluid" src="images/card03.svg" alt="Photo Sample">
              <div class="card-body">
                <h4 class="text-danger font-weight-light">Simply magical!</h4>
                <p class=" card-text">Bet you didn't know monsters are talented illusionists. They'll even conjure up a tantalizing 12-course meal
                  and wolf it down before your very eyes. And if you ask nicely, they'll happily share it with you. Just
                  don't expect it to be very filling.</p>
              </div>
            </section>
        </div>
      </section>
    </article>