Projetos/Imperial Donuts/index.html

<!DOCTYPE html>
<html>
  <head>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Vesper+Libre:wght@500&display=swap" rel="stylesheet">
    <script src="https://kit.fontawesome.com/5b627fdc28.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <title>Imperial Donuts</title>
  </head>
  <body>
    <header>
      <nav>
        <ul>
          <li><a href="#about">About</a></li>
          <li><a href="#donuts">Donuts</a></li>
          <li><a href="#stores">Stores</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </nav>
      <div class="strapline-container">
        <h1 class="main-strapline">Imperial Donuts</h1>
        <h2 class="second-strapline">Delicious, Scrumptious & full of Goodness!</h2>
      </div>
    </header>

    <main>
      <section class="about-section">
        <a name="about"></a>
        <h3 class="section-title">About</h3>
        <div class="about-container">
          <div class="left-box"><p>
            Imperial Donuts is an independently and family run business that specializes in the creation of artisan donuts. Established in early 2014, we have been blows away by the unexpected sucess and popularity of our carefully crafted donuts. Our donuts are freshly prepared each day prior to sun-rise and amongst our most popular include the honey-glazed donut, the jam-filled donut and out ice-glaced donut.
          </p>
            <p>
            Currently we make 117 different types of donuts on a daily-basis and have two stores in the Toronto area, one store in Montreal and one store in Chicago. Definitely pop by one of our locations to try at least one of our donuts but if you can't make it - don't worry! We've recently introduced both a catering service for those special occasions such as weddings & birthday's and have also recently introduced a delivery service for our 'Suprise Donut Collection' box which contains 6 different donut flavours.
          </p>
          </div>
          <div class="right-box">
            <div class="top-row">
              <div class="grid-image-one"></div>
              <div class="grid-image-two"></div>
            </div>
            <div class="bottom-row">
              <div class="grid-image-three"></div>
              <div class="grid-image-four"></div>
            </div>
          </div>
        </div>
      </section>
      <section class="donuts-section">
        <a name="donuts"></a>
        <h3 class="section-title">Donuts</h3>
        <div class="image-container">
          <div class="row-one">
            <div class="grid-item" id="donut-one"></div>
            <div class="grid-item" id="donut-two"></div>
            <div class="grid-item" id="donut-three"></div>
          </div>
          <div class="row-two">
            <div class="grid-item" id="donut-four"></div>
            <div class="grid-item" id="donut-five"></div>
            <div class="grid-item" id="donut-six"></div>
          </div>
          <div class="row-three">
            <div class="grid-item" id="donut-seven"></div>
            <div class="grid-item" id="donut-eight"></div>
            <div class="grid-item" id="donut-nine"></div>
          </div>
        </div>
      </section>
      <section class="stores-section">
        <a name="stores"></a>
        <h3 class="section-title">Stores</h3>
        <div class="stores-container">
          <div class="stores-div">
            <h4>Parkdale, Toronto</h4>
            <p>
              1560 Queen Street West,<br>
              Parkdale,<br>
              Toronto, Ontario
            </p>
          </div>
          <div class="stores-div">
            <h4>Spadina Avenue, Toronto</h4>
            <p>
              400 Richmond Street West, <br/>
              Toronto, Ontario
            </p>
          </div>
          <div class="stores-div">
            <h4>Old Tows, Chicago</h4>
            <p>
              351 West Evergreen Avenue,<br/>
              Old Town, Chicago
            </p>
          </div>
        </div>
      </section>
    </main>

    <footer class="contact-section">
      <a name="contact"></a>
      <h3 class="contact-title">Contact</h3>
      <div>
        <p class="email">
          imperialdonuts@hotmail.com
        </p>
        <div class="social-media-div">
          <div class="social-media-icon">
            <i class="fab fa-instagram fa-3x"></i>
          </div>
          <div class="social-media-icon">
            <i class="fab fa-facebook-square fa-3x"></i>
          </div>
          <div class="social-media-icon">
            <i class="fab fa-twitter-square fa-3x"></i>
          </div>
        </div>
        <p>&copy;ImperialDonuts2020</p>
      </div>
    </footer>

  </body>
</html>