Codecademy - 16th Exercise (HTML - MY WEBSITE STYLE GUIDE)

<!DOCTYPE html>
<html>

  <!-- HEAD -->
  <head>
    <title>My Website Style Guide</title>
    <link href="./styles.css" type="text/css" rel="stylesheet">
    <!-- Importing 2 Google Fonts: Nunito Sans and Poppins -->
    <link href="https://fonts.googleapis.com/css?family=Nunito+Sans|Poppins&display=swap" rel="stylesheet">
  </head>


  <!-- BODY -->
  <body>

    <!-- Header section -->
    <header>
      <h1>My Website Style Guide - Design Options</h1>
    </header>

    <!-- Main Section -->
    <main>

      <!-- 1. Colors -->
      <section class="colors">
        <h2>Colors</h2>
        <div class="cool-blue">
          <p>Cool Blue</p>
          <p>#2d5dcc</p>
        </div>
        <div class="pink">
          <p>Pink</p>
          <p>#d957d9</p>
        </div>
        <div class="mint-green">
          <p>Mint Green</p>
          <p>#4fe0b0</p>
        </div>
        <div class="beige">
          <p>Beige</p>
          <p>#efd9ca</p>
        </div>
      </section>

      <!-- 2. Fonts -->
      <section class="fonts">
        <h2>Fonts</h2>
        <div class="source-code-pro">
          <p class="underline">Source Code Pro</p>
          <p>The quick brown fox jumps over the lazy dog.</p>
          <p><strong>The quick brown fox jumps over the lazy dog.</strong></p>
          <p><em>The quick brown fox jumps over the lazy dog.</em></p>
        </div>
        <div class="nunito-sans">
          <p class="underline">Nunito Sans</p>
          <p>The quick brown fox jumps over the lazy dog.</p>
          <p><strong>The quick brown fox jumps over the lazy dog.</strong></p>
          <p><em>The quick brown fox jumps over the lazy dog.</em></p>
        </div>
        <div class="poppins">
          <p class="underline">Poppins</p>
          <p>The quick brown fox jumps over the lazy dog.</p>
          <p><strong>The quick brown fox jumps over the lazy dog.</strong></p>
          <p><em>The quick brown fox jumps over the lazy dog.</em></p>
        </div>
      </section>

      <!-- 3. Text Styles -->
      <section class="text-styles">
        <h2>Text Styles</h2>
        <div class="h1">
          <h1>H1: Main page heading</h1>
          <ul>
            <li>Font-weight: 700 (bold)</li>
            <li>Font-size: 26px</li>
            <li>Font-family: Nunito Sans</li>
          </ul>
        </div>
        <div class="h2">
          <h2>H2: Subheading</h2>
          <ul>
            <li>Font-weight: 500</li>
            <li>Font-size: 18px</li>
            <li>Font-family: Poppins</li>
          </ul>
        </div>
        <div class="p">
          <p>p: Paragraph Text</p>
          <ul>
            <li>Font-weight: 400 (regular)</li>
            <li>Font-size: 14px</li>
            <li>Font-family: Poppins</li>
          </ul>
        </div>
      </section>

    </main>

    <footer>
      <h3>Made By: Thomas Boufikos<h3>
      <h3>e-mail: <a href="https://accounts.google.com/ServiceLogin/signinchooser?service=mail&passive=true&rm=false&continue=https%3A%2F%2Fmail.google.com%2Fmail%2F&ss=1&scc=1&ltmpl=default&ltmplcache=2&emr=1&osid=1&flowName=GlifWebSignIn&flowEntry=ServiceLogin" target="_blank">thomasboufikos@gmail.com</a></h3>
    </footer>

  </body>


</html>