Bootstrap CSS Framework Landing Page

Summary

This is an mobile first responsive landing page for a website using the bootstrap css framework.

The page has the following:

• Navbar
• Hero section
• Sign up for newsletter
• Cards
• Feature sections
• FAQ section
• Footer

HTML

Here is some sample code. See link to demo below.

<!-- Showcase -->
<section
  class="bg-dark text-light p-5 p-lg-1 pt-lg-5 text-center text-sm-start"
>
  <div class="container">
    <div class="d-sm-flex align-items-center justify-content-between">
      <div>
        <h1>Become a <span class="text-warning">web developer</span></h1>
        <p class="lead my-4">
          We focus on teaching our studunts the fundamentals of the latest and
          reatest technologies to prepare them for their first dev role.
        </p>
        <button
          class="btn btn-primary btn-lg"
          data-bs-toggle="modal"
          data-bs-target="#enroll"
        >
          Start The Enrollment
        </button>
      </div>
      <img
        src="img/showcase.svg"
        alt=""
        class="img-fluid w-50 d-none d-sm-block"
      />
    </div>
  </div>
</section>

<!-- Newsletter -->
<section class="bg-primary text-light p-5">
  <div class="container">
    <div class="d-md-flex justify-content-between align-itms-center">
      <h3 class="mb-3 mb-md-0">Sign Up For Our Newsletter</h3>
      <div class="input-group news-input">
        <input type="text" class="form-control" placeholder="Enter Email" />
        <button class="btn btn-dark btn-lg" type="button">Button</button>
      </div>
    </div>
  </div>
</section>

<!-- Learn Section -->
<section id="learn" class="p-5">
  <div class="container">
    <div class="row align-items-center justify-content-between">
      <div class="col-md">
        <img src="img/fundamentals.svg" class="img-fluid" alt="" />
      </div>
      <div class="col-md p-5">
        <h2>Learn The Fundamentals</h2>
        <p class="lead">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita ut
          minus perferendis velit a facere.
        </p>
        <p>
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolorem in
          quae, aperiam ullam praesentium magni laudantium architecto cumque
          doloribus dolorum, quas expedita tenetur, nemo culpa similique
          voluptatum esse eaque? Blanditiis!
        </p>
        <a href="#" class="btn btn-light mt-3">
          <i class="bi bi-chevron-right"></i>Read More
        </a>
      </div>
    </div>
  </div>
</section>
...

Tech and Tools

• CSS
• HTML
• Bootstrap CSS
• Glitch project

Demo

To preview the layout click the button below which will take you to Glitch.

Open Demo on Glitch