index.html

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Grumpy Cat and Dog</title>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" />
    <link href="styles/style.css" rel="stylesheet" />
    <script src="scripts/main.js" defer></script>
  </head>

  <body>
    <h1>Grumpy Cat and Dog</h1>
    <img src="images/grumpy-cat.jpg" alt="Grumpy cat" />

    <p>Meet our grumpy little friends - the cat and the dog.</p>
    <ul> <!-- changed to list in the tutorial -->
    <li>These grumpy animals have their own unique personalities.</li>
    <li>Despite their grumpy appearance, they can be quite lovable.</li>
    <li>They are known for their iconic frowns and grouchy expressions.</li>
    </ul>
    
    <p>Despite their grumpy nature, these animals bring joy to many people around the world.</p>
  
    <p>Read more about these grumpy pets on <a href="https://baike.baidu.com/item/%E4%B8%8D%E7%88%BD%E7%8C%AB/5753486">Grumpy Cat</a> 
      and <a href="https://baike.baidu.com/item/%E4%B8%8D%E7%88%BD%E7%8B%97?fromModule=lemma_search-box">Grumpy Dog</a> official websites.</p>

    <p>Remember, even if they look grumpy, they still need love and care!</p>
    
    <!-- Add a button for changing user name -->
    <button onclick="setUserName()">Change User</button>
  </body>
</html>