homepage.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Smile School</title>
    <meta name="description" content="Implementing a design with Bootstrap" />
    <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
    <link rel="icon" href="images/favicon.png" type="image/png" />
    <!-- Fonts -->
    <link
      href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,300;0,400;0,700;1,400&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Coiny&display=swap"
      rel="stylesheet"
    />
    <!-- Bootstrap -->
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
      integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
      crossorigin="anonymous"
    />
    <!-- custom style -->
    <link rel="stylesheet" href="styles.css" />
    <!-- jquery -->
    <script
      src="https://code.jquery.com/jquery-3.4.1.min.js"
      integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
      integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
      integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
      crossorigin="anonymous"
    ></script>
    <!-- Icons -->
    <script
      src="https://kit.fontawesome.com/9b597d4a7c.js"
      crossorigin="anonymous"
    ></script>
  </head>
  <body>
    <!-- Header -->
    <nav class="navbar navbar-expand-md bg-transparent fixed-top">
      <div class="container">
        <a class="navbar-brand" href="#"
          ><img
            class="pr-3"
            width="50"
            src="./images/smile_off.png"
            alt="smile-off" /><img
            width="150"
            src="./images/logo.png"
            alt="Smile School  logo"
        /></a>
        <button
          class="navbar-toggler custom-toggler"
          type="button"
          data-toggle="collapse"
          data-target="#navbarNav"
          aria-controls="navbarNav"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
        <div
          class="collapse navbar-collapse justify-content-md-end"
          id="navbarNav"
        >
          <ul class="navbar-nav text-uppercase font-weight-bold">
            <li class="nav-item">
              <a href="courses.html" class="nav-link text-light">Courses</a>
            </li>
            <li class="nav-item">
              <a href="pricing.html" class="nav-link text-light">Pricing</a>
            </li>
            <li class="nav-item">
              <a href="#" class="nav-link text-light">Login</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
    <!-- Hero -->
    <div class="jumbotron jumbotron-fluid mb-0">
      <div class="container text-center text-light mt-5">
        <h1 class="display-1 pt-5 font-weight-bold">Get schooled</h1>
        <p class="lead text-uppercase pb-3 font-weight-bold">
          Simles &emsp;&emsp;Grin &emsp;&emsp;Laugh
        </p>
        <a
          href="#"
          class="btn btn-primary shadow text-uppercase font-weight-bold rounded-pill mb-5"
          role="button"
          >Register for free</a
        >
        <h2 class="text-center mt-5 mb-5 font-weight-light">
          <span class="color-primary font-weight-bold">Learn</span> from the
          pros
        </h2>
        <div class="row d-flex justify-content-around pt-5">
          <div class="card bg-transparent border-0" style="width: 10rem">
            <img
              src="./images/profile_1.jpg"
              class="card-img-top rounded-circle"
              alt="profile male"
            />
            <div class="card-body pl-0 pr-0">
              <h5 class="card-title font-weight-bold">Phillip Massey</h5>
              <h6 class="card-subtitle mb-2 font-italic">
                &laquo; Smile of the year &raquo;
              </h6>
              <p class="card-text font-italic">2018 - 2019</p>
            </div>
          </div>
          <div class="card bg-transparent border-0" style="width: 10rem">
            <img
              src="./images/profile_2.jpg"
              class="card-img-top rounded-circle"
              alt="profile female"
            />
            <div class="card-body pl-0 pr-0">
              <h5 class="card-title font-weight-bold">Nan Lawrence</h5>
              <h6 class="card-subtitle mb-2 font-italic">
                Best &laquo; little smile &raquo;
              </h6>
              <p class="card-text font-italic">2017</p>
            </div>
          </div>
          <div class="card bg-transparent border-0" style="width: 10rem">
            <img
              src="./images/profile_3.jpg"
              class="card-img-top rounded-circle"
              alt="profile male"
            />
            <div class="card-body pl-0 pr-0">
              <h5 class="card-title font-weight-bold">Bruce Walters</h5>
              <h6 class="card-subtitle mb-2 font-italic">
                Best &laquo; friend smile &raquo;
              </h6>
              <p class="card-text font-italic">live performance 2017</p>
            </div>
          </div>
          <div class="card bg-transparent border-0" style="width: 10rem">
            <img
              src="./images/profile_4.jpg"
              class="card-img-top rounded-circle"
              alt="profile male"
            />
            <div class="card-body pl-0 pr-0">
              <h5 class="card-title font-weight-bold">Henry Hughes</h5>
              <h6 class="card-subtitle mb-2 font-italic">
                &laquo; 24 smiles &raquo; winner
              </h6>
              <p class="card-text font-italic">2016 - 2019</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Comments -->
    <div
      id="carouselExampleControls"
      class="carousel slide"
      data-ride="carousel"
    >
      <div class="carousel-inner background-primary text-light">
        <div class="carousel-item active">
          <div class="container pt-5 pb-5">
            <div class="card mb-3 mt-3 background-primary border-0">
              <div class="row no-gutters">
                <div class="col-md-3 text-center">
                  <img
                    src="./images/profile_5.jpg"
                    alt="happy male profile"
                    class="rounded-circle"
                    width="150"
                  />
                </div>
                <div class="col-md-9">
                  <div class="card-body">
                    <p class="card-text">
                      &raquo; Those tutorials are concise and go straight to the
                      point. I can't thinkof a better place to learn smiling.
                      And it's so fun!
                    </p>
                    <p class="card-text font-weight-bold mb-0">Person Name</p>
                    <p class="card-text font-italic">weather presenter</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="carousel-item background-primary text-light">
          <div class="container pt-5 pb-5">
            <div class="card mb-3 mt-3 background-primary border-0">
              <div class="row no-gutters">
                <div class="col-md-3 text-center">
                  <img
                    src="./images/profile_5.jpg"
                    alt="happy male profile"
                    class="rounded-circle"
                    width="150"
                  />
                </div>
                <div class="col-md-9">
                  <div class="card-body">
                    <p class="card-text">
                      &raquo; Those tutorials are concise and go straight to the
                      point. I can't thinkof a better place to learn smiling.
                      And it's so fun!
                    </p>
                    <p class="card-text font-weight-bold mb-0">Person Name</p>
                    <p class="card-text font-italic">weather presenter</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <a
        class="carousel-control-prev"
        href="#carouselExampleControls"
        role="button"
        data-slide="prev"
      >
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a
        class="carousel-control-next"
        href="#carouselExampleControls"
        role="button"
        data-slide="next"
      >
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
    <!-- Popular -->
    <section class="popular">
      <div class="container text-center">
        <h2 class="mt-5 mb-5 font-weight-light">
          Most
          <span class="color-primary font-weight-bold">popular</span> tutorials
        </h2>
      </div>
      <div id="carouselControls" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">
          <div class="carousel-item active">
            <div class="container pt-5 pb-5">
              <div class="row row-cols-1 row-cols-md-2 row-cols-lg-4">
                <div class="col mb-4">
                  <div class="card border-0">
                    <img
                      src="./images/thumbnail_1.jpg"
                      class="card-img-top"
                      alt="smiling male profile"
                    />
                    <div
                      class="card-img-overlay d-flex align-items-start justify-content-center"
                    >
                      <img
                        src="./images/play.png"
                        alt="play button"
                        width="100 px"
                      />
                    </div>
                    <div class="card-body">
                      <h5 class="card-title font-weight-bold">
                        Diagonal Smile
                      </h5>
                      <p class="card-text">
                        Lorem ipsum dolor sit amet consectetur, adipisicing
                        elit.
                      </p>
                      <div
                        class="row d-flex justify-content-start align-items-center mb-2"
                      >
                        <img
                          src="./images/profile_1.jpg"
                          alt="profile male"
                          width="30px"
                          class="rounded-circle ml-3"
                        />
                        <a
                          href="#"
                          class="mb-0 pl-2 color-primary font-weight-bold"
                          >Phillip Massey</a
                        >
                      </div>
                      <div
                        class="row d-flex justify-content-between align-items-center pl-3 pr-3"
                      >
                        <p class="mb-0">
                          <img
                            src="./images/star_on.png"
                            alt="star on"
                            width="20px"
                          />
                          <img
                            src="./images/star_on.png"
                            alt="star on"
                            width="20px"
                          />
                          <img
                            src="./images/star_on.png"
                            alt="star on"
                            width="20px"
                          />
                          <img
                            src="./images/star_on.png"
                            alt="star on"
                            width="20px"
                          />
                          <img
                            src="./images/star_off.png"
                            alt="star off"
                            width="20px"
                          />
                        </p>
                        <p class="mb-0 color-primary">8 min</p>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col mb-4">
                  <div class="card border-0">
                    <img
                      src="./images/thumbnail_2.jpg"
                      class="card-img-top"
                      alt="smiling male profile"
                    />
                    <div
                      class="card-img-overlay d-flex align-items-start justify-content-center"
                    >
                      <img
                        src="./images/play.png"
                        alt="play button"
                        width="100 px"
                      />
                    </div>
                    <div class="card-body">
                      <h5 class="card-title font-weight-bold">Sad Smile</h5>
                      <p class="card-text">
                        Lorem ipsum dolor sit amet consectetur, adipisicing
                        elit.
                      </p>
                      <div
                        class="row d-flex justify-content-start align-items-center mb-2"
                      >
                        <img
                          src="./images/profile_1.jpg"
                          alt="profile"
                          width="30px"
                          class="rounded-circle ml-3"
                        />
                        <a
                          href="#"
                          class="mb-0 pl-2 color-primary font-weight-bold"
                          >Phillip Massey</a
                        >
                      </div>
                      <div
                        class="row d-flex justify-content-between align-items-center pl-3 pr-3"
                      >
                        <p class="mb-0">
                          <img
                            src="./images/star_on.png"
                            alt="star on"
                            width="20px"
                          />
                          <img
                            src="./images/star_on.png"
                            alt="star on"
                            width="20px"
                          />
                          <img
                            src="./images/star_on.png"
                            alt="star on"
                            width="20px"
                          />
                          <img
                            src="./images/star_on.png"
                            alt="star on"
                            width="20px"
                          />
                          <img
                            src="./images/star_off.png"
                            alt="star off"
                            width="20px"
                          />
                        </p>
                        <p class="mb-0 color-primary">8 min</p>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col mb-4">
                  <div class="card border-0">
                    <img
                      src="./images/thumbnail_3.jpg"
                      class="card-img-top"
                      alt="smiling female profile"
                    />
                    <div
                      class="card-img-overlay d-flex align-items-start justify-content-center"
                    >
                      <img
                        src="./images/play.png"
                        alt="play button"
                        width="100 px"
                      />
                    </div>
                    <div class="card-body">
                      <h5 class="card-title font-weight-bold">Natural Smile</h5>
                      <p class="card-text">
                        Lorem ipsum dolor sit amet consectetur, adipisicing
                        elit.
                      </p>
                      <div
                        class="row d-flex justify-content-start align-items-center mb-2"
                      >
                        <img
                          src="./images/profile_1.jpg"
                          alt="profile male"
                          width="30px"
                          class="rounded-circle ml-3"
                        />
                        <a
                          href="#"
                          class="mb-0 pl-2 color-primary font-weight-bold"
                          >Phillip Massey</a
                        >
                      </div>
                      <div
                        class="row d-flex justify-content-between align-items-center pl-3 pr-3"
                      >
                        <p class="mb-0">
                          <img
                            src="./images/star_on.png"
                            alt="star on"
                            width="20px"
                          />
                          <img
                            src="./images/star_on.png"
                            alt="star on"
                            width="20px"
                          />
                          <img
                            src="./images/star_on.png"
                            alt="star on"
                            width="20px"
                          />
                          <img
                            src="./images/star_on.png"
                            alt="star on"
                            width="20px"
                          />
                          <img
                            src="./images/star_off.png"
                            alt="star off"
                            width="20px"
                          />
                        </p>
                        <p class="mb-0 color-primary">8 min</p>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col mb-4">
                  <div class="card border-0">
                    <img
                      src="./images/thumbnail_4.jpg"
                      class="card-img-top"
                      alt="smilling female profile"
                    />
                    <div
                      class="card-img-overlay d-flex align-items-start justify-content-center"
                    >
                      <img
                        src="./images/play.png"
                        alt="play button"
                        width="100 px"
                      />
                    </div>
                    <div class="card-body">
                      <h5 class="card-title font-weight-bold">Happy Smile</h5>
                      <p class="card-text">
                        Lorem ipsum dolor sit amet consectetur, adipisicing
                        elit.
                      </p>
                      <div
                        class="row d-flex justify-content-start align-items-center mb-2"
                      >
                        <img
                          src="./images/profile_1.jpg"
                          alt="profile male"
                          width="30px"
                          class="rounded-circle ml-3"
                        />
                        <a
                          href="#"
                          class="mb-0 pl-2 color-primary font-weight-bold"
                          >Phillip Massey</a
                        >
                      </div>
                      <div
                        class="row d-flex justify-content-between align-items-center pl-3 pr-3"
                      >
                        <p class="mb-0">
                          <img
                            src="./images/star_on.png"
                            alt="star on"
                            width="20px"
                          />
                          <img
                            src="./images/star_on.png"
                            alt="star on"
                            width="20px"
                          />
                          <img
                            src="./images/star_on.png"
                            alt="star on"
                            width="20px"
                          />
                          <img
                            src="./images/star_on.png"
                            alt="star on"
                            width="20px"
                          />
                          <img
                            src="./images/star_off.png"
                            alt="star off"
                            width="20px"
                          />
                        </p>
                        <p class="mb-0 color-primary">8 min</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="carousel-item">
            <div class="container pt-5 pb-5">
              <div class="row row-cols-1 row-cols-md-2 row-cols-lg-4">
                <div class="col mb-4">
                  <div class="card border-0">
                    <img
                      src="./images/thumbnail_1.jpg"
                      class="card-img-top"
                      alt="smiling male profile"
                    />
                    <div
                      class="card-img-overlay d-flex align-items-start justify-content-center"
                    >
                      <img
                        src="./images/play.png"
                        alt="play button"
                        width="100 px"
                      />
                    </div>
                    <div
                      class="card-img-overlay d-flex align-items-start justify-content-center"
                    >
                      <img
                        src="./images/play.png"
                        alt="play button"
                        width="100 px"
                      />
                    </div>
                    <div class="card-body">
                      <h5 class="card-title font-weight-bold">
                        Diagonal Smile
                      </h5>
                      <p class="card-text">
                        Lorem ipsum dolor sit amet consectetur, adipisicing
                        elit.
                      </p>
                      <div
                        class="row d-flex justify-content-start align-items-center mb-2"
                      >
                        <img
                          src="./images/profile_1.jpg"
                          alt="profile male"
                          width="30px"
                          class="rounded-circle ml-3"
                        />
                        <a
                          href="#"
                          class="mb-0 pl-2 color-primary font-weight-bold"
                          >Phillip Massey</a
                        >
                      </div>
                      <div
                        class="row d-flex justify-content-between align-items-center pl-3 pr-3"
                      >
                        <p class="mb-0">
                          <img
                            src="./images/star_on.png"
                            alt="star on"
                            width="20px"
                          />
                          <img
                            src="./images/star_on.png"
                            alt="star on"
                            width="20px"
                          />
                          <img
                            src="./images/star_on.png"
                            alt="star on"
                            width="20px"
                          />
                          <img
                            src="./images/star_on.png"
                            alt="star on"
                            width="20px"
                          />
                          <img
                            src="./images/star_off.png"
                            alt="star off"
                            width="20px"
                          />
                        </p>
                        <p class="mb-0 color-primary">8 min</p>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col mb-4">
                  <div class="card border-0">
                    <img
                      src="./images/thumbnail_2.jpg"
                      class="card-img-top"
                      alt="smiling male profile"
                    />
                    <div
                      class="card-img-overlay d-flex align-items-start justify-content-center"
                    >
                      <img
                        src="./images/play.png"
                        alt="play button"
                        width="100 px"
                      />
                    </div>
                    <div class="card-body">
                      <h5 class="card-title font-weight-bold">Sad Smile</h5>
                      <p class="card-text">
                        Lorem ipsum dolor sit amet consectetur, adipisicing
                        elit.
                      </p>
                      <div
                        class="row d-flex justify-content-start align-items-center mb-2"
                      >
                        <img
                          src="./images/profile_1.jpg"
                          alt="profile male"
                          width="30px"
                          class="rounded-circle ml-3"
                        />
                        <a
                          href="#"
                          class="mb-0 pl-2 color-primary font-weight-bold"
                          >Phillip Massey</a
                        >
                      </div>
                      <div
                        class="row d-flex justify-content-between align-items-center pl-3 pr-3"
                      >
                        <p class="mb-0">
                          <img
                            src="./images/star_on.png"
                            alt="star on"
                            width="20px"
                          />
                          <img
                            src="./images/star_on.png"
                            alt="star on"
                            width="20px"
                          />
                          <img
                            src="./images/star_on.png"
                            alt="star on"
                            width="20px"
                          />
                          <img
                            src="./images/star_on.png"
                            alt="star on"
                            width="20px"
                          />
                          <img
                            src="./images/star_off.png"
                            alt="star off"
                            width="20px"
                          />
                        </p>
                        <p class="mb-0 color-primary">8 min</p>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col mb-4">
                  <div class="card border-0">
                    <img
                      src="./images/thumbnail_3.jpg"
                      class="card-img-top"
                      alt="smiling female profile"
                    />
                    <div
                      class="card-img-overlay d-flex align-items-start justify-content-center"
                    >
                      <img
                        src="./images/play.png"
                        alt="play button"
                        width="100 px"
                      />
                    </div>
                    <div class="card-body">
                      <h5 class="card-title font-weight-bold">Natural Smile</h5>
                      <p class="card-text">
                        Lorem ipsum dolor sit amet consectetur, adipisicing
                        elit.
                      </p>
                      <div
                        class="row d-flex justify-content-start align-items-center mb-2"
                      >
                        <img
                          src="./images/profile_1.jpg"
                          alt="profile male"
                          width="30px"
                          class="rounded-circle ml-3"
                        />
                        <a
                          href="#"
                          class="mb-0 pl-2 color-primary font-weight-bold"
                          >Phillip Massey</a
                        >
                      </div>
                      <div
                        class="row d-flex justify-content-between align-items-center pl-3 pr-3"
                      >
                        <p class="mb-0">
                          <img
                            src="./images/star_on.png"
                            alt="star on"
                            width="20px"
                          />
                          <img
                            src="./images/star_on.png"
                            alt="star on"
                            width="20px"
                          />
                          <img
                            src="./images/star_on.png"
                            alt="star on"
                            width="20px"
                          />
                          <img
                            src="./images/star_on.png"
                            alt="star on"
                            width="20px"
                          />
                          <img
                            src="./images/star_off.png"
                            alt="star off"
                            width="20px"
                          />
                        </p>
                        <p class="mb-0 color-primary">8 min</p>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col mb-4">
                  <div class="card border-0">
                    <img
                      src="./images/thumbnail_4.jpg"
                      class="card-img-top"
                      alt="smiling female profile"
                    />
                    <div
                      class="card-img-overlay d-flex align-items-start justify-content-center"
                    >
                      <img
                        src="./images/play.png"
                        alt="play button"
                        width="100 px"
                      />
                    </div>
                    <div class="card-body">
                      <h5 class="card-title font-weight-bold">Happy Smile</h5>
                      <p class="card-text">
                        Lorem ipsum dolor sit amet consectetur, adipisicing
                        elit.
                      </p>
                      <div
                        class="row d-flex justify-content-start align-items-center mb-2"
                      >
                        <img
                          src="./images/profile_1.jpg"
                          alt="profile male"
                          width="30px"
                          class="rounded-circle ml-3"
                        />
                        <a
                          href="#"
                          class="mb-0 pl-2 color-primary font-weight-bold"
                          >Phillip Massey</a
                        >
                      </div>
                      <div
                        class="row d-flex justify-content-between align-items-center pl-3 pr-3"
                      >
                        <p class="mb-0">
                          <img
                            src="./images/star_on.png"
                            alt="star on"
                            width="20px"
                          />
                          <img
                            src="./images/star_on.png"
                            alt="star on"
                            width="20px"
                          />
                          <img
                            src="./images/star_on.png"
                            alt="star on"
                            width="20px"
                          />
                          <img
                            src="./images/star_on.png"
                            alt="star on"
                            width="20px"
                          />
                          <img
                            src="./images/star_off.png"
                            alt="star off"
                            width="20px"
                          />
                        </p>
                        <p class="mb-0 color-primary">8 min</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <a
          class="carousel-control-prev"
          href="#carouselControls"
          role="button"
          data-slide="prev"
        >
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a
          class="carousel-control-next"
          href="#carouselControls"
          role="button"
          data-slide="next"
        >
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
    </section>
    <!-- Membership -->
    <section class="member background-secondary text-light">
      <div class="container text-center">
        <h2 class="pt-5 pb-5 font-weight-light">
          <span class="color-primary font-weight-bold">Free</span> Membership
        </h2>
        <div class="row row-cols-1 row-cols-md-2 row-cols-lg-4 mb-5">
          <div class="col mb-4">
            <div class="card border-0 bg-transparent">
              <div class="card-body">
                <img
                  src="./images/smile_on.png"
                  alt="smile on"
                  class="mb-4"
                  width="50px"
                />
                <h5 class="card-title font-weight-bold">Diagonal Smile</h5>
                <p class="card-text">
                  Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                </p>
              </div>
            </div>
          </div>
          <div class="col mb-4">
            <div class="card border-0 bg-transparent">
              <div class="card-body">
                <img
                  src="./images/smile_on.png"
                  alt="smile on"
                  class="mb-4"
                  width="50px"
                />
                <h5 class="card-title font-weight-bold">Diagonal Smile</h5>
                <p class="card-text">
                  Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                </p>
              </div>
            </div>
          </div>
          <div class="col mb-4">
            <div class="card border-0 bg-transparent">
              <div class="card-body">
                <img
                  src="./images/smile_on.png"
                  alt="smile on"
                  class="mb-4"
                  width="50px"
                />
                <h5 class="card-title font-weight-bold">Diagonal Smile</h5>
                <p class="card-text">
                  Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                </p>
              </div>
            </div>
          </div>
          <div class="col mb-4">
            <div class="card border-0 bg-transparent">
              <div class="card-body">
                <img
                  src="./images/smile_on.png"
                  alt="smile on"
                  class="mb-4"
                  width="50px"
                />
                <h5 class="card-title font-weight-bold">Diagonal Smile</h5>
                <p class="card-text">
                  Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                </p>
              </div>
            </div>
          </div>
        </div>
        <div class="row d-flex justify-content-center">
          <a
            href="#"
            class="btn btn-primary shadow text-uppercase font-weight-bold rounded-pill mb-5"
            role="button"
            >Register for free</a
          >
        </div>
      </div>
    </section>
    <!-- Videos -->
    <section class="popular">
      <div class="container text-center">
        <h2 class="mt-5 mb-5 font-weight-light">
          <span class="color-primary font-weight-bold">Latests</span> videos
        </h2>
      </div>
      <div
        id="carouselControlVideo"
        class="carousel slide"
        data-ride="carousel"
      >
        <div class="carousel-inner">
          <div class="carousel-item active">
            <div class="container pt-5 pb-5">
              <div class="row row-cols-1 row-cols-md-2 row-cols-lg-4">
                <div class="col mb-4">
                  <div class="card border-0">
                    <img
                      src="./images/thumbnail_1.jpg"
                      class="card-img-top"
                      alt="smiling male profile"
                    />
                    <div
                      class="card-img-overlay d-flex align-items-start justify-content-center"
                    >
                      <img
                        src="./images/play.png"
                        alt="play button"
                        width="100 px"
                      />
                    </div>
                    <div class="card-body">
                      <h5 class="card-title font-weight-bold">
                        Diagonal Smile
                      </h5>
                      <p class="card-text">
                        Lorem ipsum dolor sit amet consectetur, adipisicing
                        elit.
                      </p>
                      <div
                        class="row d-flex justify-content-start align-items-center mb-2"
                      >
                        <img
                          src="./images/profile_1.jpg"
                          alt="profile male"
                          width="30px"
                          class="rounded-circle ml-3"
                        />
                        <a
                          href="#"
                          class="mb-0 pl-2 color-primary font-weight-bold"
                          >Phillip Massey</a
                        >
                      </div>
                      <div
                        class="row d-flex justify-content-between align-items-center pl-3 pr-3"
                      >
                        <p class="mb-0">
                          <img
                            src="./images/star_on.png"
                            alt="star on"
                            width="20px"
                          />
                          <img
                            src="./images/star_on.png"
                            alt="star on"
                            width="20px"
                          />
                          <img
                            src="./images/star_on.png"
                            alt="star on"
                            width="20px"
                          />
                          <img
                            src="./images/star_on.png"
                            alt="star on"
                            width="20px"
                          />
                          <img
                            src="./images/star_off.png"
                            alt="star off"
                            width="20px"
                          />
                        </p>
                        <p class="mb-0 color-primary">8 min</p>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col mb-4">
                  <div class="card border-0">
                    <img
                      src="./images/thumbnail_2.jpg"
                      class="card-img-top"
                      alt="smiling male profile"
                    />
                    <div
                      class="card-img-overlay d-flex align-items-start justify-content-center"
                    >
                      <img
                        src="./images/play.png"
                        alt="play button"
                        width="100 px"
                      />
                    </div>
                    <div class="card-body">
                      <h5 class="card-title font-weight-bold">Sad Smile</h5>
                      <p class="card-text">
                        Lorem ipsum dolor sit amet consectetur, adipisicing
                        elit.
                      </p>
                      <div
                        class="row d-flex justify-content-start align-items-center mb-2"
                      >
                        <img
                          src="./images/profile_1.jpg"
                          alt="male profile"
                          width="30px"
                          class="rounded-circle ml-3"
                        />
                        <a
                          href="#"
                          class="mb-0 pl-2 color-primary font-weight-bold"
                          >Phillip Massey</a
                        >
                      </div>
                      <div
                        class="row d-flex justify-content-between align-items-center pl-3 pr-3"
                      >
                        <p class="mb-0">
                          <img
                            src="./images/star_on.png"
                            alt="star on"
                            width="20px"
                          />
                          <img
                            src="./images/star_on.png"
                            alt="star on"
                            width="20px"
                          />
                          <img
                            src="./images/star_on.png"
                            alt="star on"
                            width="20px"
                          />
                          <img
                            src="./images/star_on.png"
                            alt="star on"
                            width="20px"
                          />
                          <img
                            src="./images/star_off.png"
                            alt="star off"
                            width="20px"
                          />
                        </p>
                        <p class="mb-0 color-primary">8 min</p>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col mb-4">
                  <div class="card border-0">
                    <img
                      src="./images/thumbnail_3.jpg"
                      class="card-img-top"
                      alt="smiling female profile"
                    />
                    <div
                      class="card-img-overlay d-flex align-items-start justify-content-center"
                    >
                      <img
                        src="./images/play.png"
                        alt="play button"
                        width="100 px"
                      />
                    </div>
                    <div class="card-body">
                      <h5 class="card-title font-weight-bold">Natural Smile</h5>
                      <p class="card-text">
                        Lorem ipsum dolor sit amet consectetur, adipisicing
                        elit.
                      </p>
                      <div
                        class="row d-flex justify-content-start align-items-center mb-2"
                      >
                        <img
                          src="./images/profile_1.jpg"
                          alt="male profile"
                          width="30px"
                          class="rounded-circle ml-3"
                        />
                        <a
                          href="#"
                          class="mb-0 pl-2 color-primary font-weight-bold"
                          >Phillip Massey</a
                        >
                      </div>
                      <div
                        class="row d-flex justify-content-between align-items-center pl-3 pr-3"
                      >
                        <p class="mb-0">
                          <img
                            src="./images/star_on.png"
                            alt="star on"
                            width="20px"
                          />
                          <img
                            src="./images/star_on.png"
                            alt="star on"
                            width="20px"
                          />
                          <img
                            src="./images/star_on.png"
                            alt="star on"
                            width="20px"
                          />
                          <img
                            src="./images/star_on.png"
                            alt="star on"
                            width="20px"
                          />
                          <img
                            src="./images/star_off.png"
                            alt="star off"
                            width="20px"
                          />
                        </p>
                        <p class="mb-0 color-primary">8 min</p>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col mb-4">
                  <div class="card border-0">
                    <img
                      src="./images/thumbnail_4.jpg"
                      class="card-img-top"
                      alt="smiling female profile"
                    />
                    <div
                      class="card-img-overlay d-flex align-items-start justify-content-center"
                    >
                      <img
                        src="./images/play.png"
                        alt="play button"
                        width="100 px"
                      />
                    </div>
                    <div class="card-body">
                      <h5 class="card-title font-weight-bold">Happy Smile</h5>
                      <p class="card-text">
                        Lorem ipsum dolor sit amet consectetur, adipisicing
                        elit.
                      </p>
                      <div
                        class="row d-flex justify-content-start align-items-center mb-2"
                      >
                        <img
                          src="./images/profile_1.jpg"
                          alt="male profile"
                          width="30px"
                          class="rounded-circle ml-3"
                        />
                        <a
                          href="#"
                          class="mb-0 pl-2 color-primary font-weight-bold"
                          >Phillip Massey</a
                        >
                      </div>
                      <div
                        class="row d-flex justify-content-between align-items-center pl-3 pr-3"
                      >
                        <p class="mb-0">
                          <img
                            src="./images/star_on.png"
                            alt="star on"
                            width="20px"
                          />
                          <img
                            src="./images/star_on.png"
                            alt="star on"
                            width="20px"
                          />
                          <img
                            src="./images/star_on.png"
                            alt="star on"
                            width="20px"
                          />
                          <img
                            src="./images/star_on.png"
                            alt="star on"
                            width="20px"
                          />
                          <img
                            src="./images/star_off.png"
                            alt="star off"
                            width="20px"
                          />
                        </p>
                        <p class="mb-0 color-primary">8 min</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="carousel-item">
            <div class="container pt-5 pb-5">
              <div class="row row-cols-1 row-cols-md-2 row-cols-lg-4">
                <div class="col mb-4">
                  <div class="card border-0">
                    <img
                      src="./images/thumbnail_1.jpg"
                      class="card-img-top"
                      alt="smiling male profile"
                    />
                    <div
                      class="card-img-overlay d-flex align-items-start justify-content-center"
                    >
                      <img
                        src="./images/play.png"
                        alt="play button"
                        width="100 px"
                      />
                    </div>
                    <div class="card-body">
                      <h5 class="card-title font-weight-bold">
                        Diagonal Smile
                      </h5>
                      <p class="card-text">
                        Lorem ipsum dolor sit amet consectetur, adipisicing
                        elit.
                      </p>
                      <div
                        class="row d-flex justify-content-start align-items-center mb-2"
                      >
                        <img
                          src="./images/profile_1.jpg"
                          alt="male profile"
                          width="30px"
                          class="rounded-circle ml-3"
                        />
                        <a
                          href="#"
                          class="mb-0 pl-2 color-primary font-weight-bold"
                          >Phillip Massey</a
                        >
                      </div>
                      <div
                        class="row d-flex justify-content-between align-items-center pl-3 pr-3"
                      >
                        <p class="mb-0">
                          <img
                            src="./images/star_on.png"
                            alt="star on"
                            width="20px"
                          />
                          <img
                            src="./images/star_on.png"
                            alt="star on"
                            width="20px"
                          />
                          <img
                            src="./images/star_on.png"
                            alt="star on"
                            width="20px"
                          />
                          <img
                            src="./images/star_on.png"
                            alt="star on"
                            width="20px"
                          />
                          <img
                            src="./images/star_off.png"
                            alt="star off"
                            width="20px"
                          />
                        </p>
                        <p class="mb-0 color-primary">8 min</p>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col mb-4">
                  <div class="card border-0">
                    <img
                      src="./images/thumbnail_2.jpg"
                      class="card-img-top"
                      alt="smiling male profile"
                    />
                    <div
                      class="card-img-overlay d-flex align-items-start justify-content-center"
                    >
                      <img
                        src="./images/play.png"
                        alt="play button"
                        width="100 px"
                      />
                    </div>
                    <div class="card-body">
                      <h5 class="card-title font-weight-bold">Sad Smile</h5>
                      <p class="card-text">
                        Lorem ipsum dolor sit amet consectetur, adipisicing
                        elit.
                      </p>
                      <div
                        class="row d-flex justify-content-start align-items-center mb-2"
                      >
                        <img
                          src="./images/profile_1.jpg"
                          alt="male profile"
                          width="30px"
                          class="rounded-circle ml-3"
                        />
                        <a
                          href="#"
                          class="mb-0 pl-2 color-primary font-weight-bold"
                          >Phillip Massey</a
                        >
                      </div>
                      <div
                        class="row d-flex justify-content-between align-items-center pl-3 pr-3"
                      >
                        <p class="mb-0">
                          <img
                            src="./images/star_on.png"
                            alt="star on"
                            width="20px"
                          />
                          <img
                            src="./images/star_on.png"
                            alt="star on"
                            width="20px"
                          />
                          <img
                            src="./images/star_on.png"
                            alt="star on"
                            width="20px"
                          />
                          <img
                            src="./images/star_on.png"
                            alt="star on"
                            width="20px"
                          />
                          <img
                            src="./images/star_off.png"
                            alt="star off"
                            width="20px"
                          />
                        </p>
                        <p class="mb-0 color-primary">8 min</p>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col mb-4">
                  <div class="card border-0">
                    <img
                      src="./images/thumbnail_3.jpg"
                      class="card-img-top"
                      alt="smiling female profile"
                    />
                    <div
                      class="card-img-overlay d-flex align-items-start justify-content-center"
                    >
                      <img
                        src="./images/play.png"
                        alt="play button"
                        width="100 px"
                      />
                    </div>
                    <div class="card-body">
                      <h5 class="card-title font-weight-bold">Natural Smile</h5>
                      <p class="card-text">
                        Lorem ipsum dolor sit amet consectetur, adipisicing
                        elit.
                      </p>
                      <div
                        class="row d-flex justify-content-start align-items-center mb-2"
                      >
                        <img
                          src="./images/profile_1.jpg"
                          alt="male profile"
                          width="30px"
                          class="rounded-circle ml-3"
                        />
                        <a
                          href="#"
                          class="mb-0 pl-2 color-primary font-weight-bold"
                          >Phillip Massey</a
                        >
                      </div>
                      <div
                        class="row d-flex justify-content-between align-items-center pl-3 pr-3"
                      >
                        <p class="mb-0">
                          <img
                            src="./images/star_on.png"
                            alt="star on"
                            width="20px"
                          />
                          <img
                            src="./images/star_on.png"
                            alt="star on"
                            width="20px"
                          />
                          <img
                            src="./images/star_on.png"
                            alt="star on"
                            width="20px"
                          />
                          <img
                            src="./images/star_on.png"
                            alt="star on"
                            width="20px"
                          />
                          <img
                            src="./images/star_off.png"
                            alt="star off"
                            width="20px"
                          />
                        </p>
                        <p class="mb-0 color-primary">8 min</p>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col mb-4">
                  <div class="card border-0">
                    <img
                      src="./images/thumbnail_4.jpg"
                      class="card-img-top"
                      alt="smiling female profile"
                    />
                    <div
                      class="card-img-overlay d-flex align-items-start justify-content-center"
                    >
                      <img
                        src="./images/play.png"
                        alt="play button"
                        width="100 px"
                      />
                    </div>
                    <div class="card-body">
                      <h5 class="card-title font-weight-bold">Happy Smile</h5>
                      <p class="card-text">
                        Lorem ipsum dolor sit amet consectetur, adipisicing
                        elit.
                      </p>
                      <div
                        class="row d-flex justify-content-start align-items-center mb-2"
                      >
                        <img
                          src="./images/profile_1.jpg"
                          alt="male profile"
                          width="30px"
                          class="rounded-circle ml-3"
                        />
                        <a
                          href="#"
                          class="mb-0 pl-2 color-primary font-weight-bold"
                          >Phillip Massey</a
                        >
                      </div>
                      <div
                        class="row d-flex justify-content-between align-items-center pl-3 pr-3"
                      >
                        <p class="mb-0">
                          <img
                            src="./images/star_on.png"
                            alt="star on"
                            width="20px"
                          />
                          <img
                            src="./images/star_on.png"
                            alt="star on"
                            width="20px"
                          />
                          <img
                            src="./images/star_on.png"
                            alt="star on"
                            width="20px"
                          />
                          <img
                            src="./images/star_on.png"
                            alt="star on"
                            width="20px"
                          />
                          <img
                            src="./images/star_off.png"
                            alt="star off"
                            width="20px"
                          />
                        </p>
                        <p class="mb-0 color-primary">8 min</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <a
          class="carousel-control-prev"
          href="#carouselControlVideo"
          role="button"
          data-slide="prev"
        >
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a
          class="carousel-control-next"
          href="#carouselControlVideo"
          role="button"
          data-slide="next"
        >
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
    </section>
    <!-- Footer -->
    <footer class="background-secondary pt-5 pb-5">
      <div
        class="container text-center d-flex justify-content-between mt-5 pb-5"
      >
        <a href=""
          ><img src="./images/smile_off.png" alt="Smile logo" width="40" /><img
            width="150"
            src="./images/logo.png"
            alt="Smile School logo"
            class="pl-3"
        /></a>
        <div class="text-center">
          <!-- Facebook -->
          <a href="#">
            <i class="fab fa-facebook text-light mr-4"> </i>
          </a>
          <!-- Twitter -->
          <a href="#">
            <i class="fab fa-twitter text-light mr-4"> </i>
          </a>
          <!--Instagram-->
          <a href="#">
            <i class="fab fa-instagram text-light"> </i>
          </a>
        </div>
      </div>
      <div class="container">
        <p class="text-light text-center font-weight-light">&copy; smileschool 2021</p>
      </div>
    </footer>
  </body>
</html>