<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- displays site properly based on user's device -->

  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@800&display=swap" rel="stylesheet">

  <link rel="stylesheet" href="css/style.css">
  <script src="js/script.js" defer></script>
  <title>Frontend Mentor | Advice generator app</title>

  <!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
  <style>
    .attribution {
      font-size: 11px;
      text-align: center;
    }

    .attribution a {
      color: hsl(228, 45%, 44%);
    }
  </style>
</head>

<body>


  <main>
    <section class="advice__section">
      <header>
        <h1 id="advice__title" class="advice__title">
        </h1>
      </header>
      <blockquote>
        <p id="advice__quote" class="advice__quote">
          “!! LOADING !!”
        </p>
      </blockquote>
      <picture>
        <source srcset="images/pattern-divider-desktop.svg" media="(min-width: 1000px)" />
        <img src="images/pattern-divider-mobile.svg" aria-hidden="true" alt="" class="advice__divider" />
      </picture>
      <button id="advice__button" class="advice__button" aria-label="Retrieve random advice">
        <img src="images/icon-dice.svg" alt="Dice icon" aria-hidden="true">
      </button>
    </section>
  </main>

  <!--
    <footer>
      <div class="attribution">
      Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
      Coded by <a href="#">Your Name Here</a>.
    </div>
  </footer> -->
</body>

</html>