<!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>