003-rotating navigation/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
      integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="style.css" />
    <title>Rotating Navigation</title>
  </head>
  <body>
    <div class="container">
      <div class="circle-container">
        <div class="circle">
          <button id="close">
            <i class="fas fa-times"></i>
          </button>
          <button id="open">
            <i class="fas fa-bars"></i>
          </button>
        </div>
      </div>
      <div class="content">
        <h1>Amazing Article</h1>
        <small>John Doe</small>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
          repellendus nostrum harum, quis cupiditate molestiae, voluptates quam
          beatae odit autem incidunt voluptatibus? Provident, suscipit. Iusto
          facere dolorum quis asperiores illo earum vel sit modi dicta nulla?
          Est, odio quibusdam quidem earum magni et placeat voluptate officia
          non inventore eaque optio dolores accusantium similique repudiandae
          alias temporibus quae sequi quam quia sapiente! Dignissimos esse
          possimus numquam laborum nemo minus, sequi doloribus porro quia,
          fugiat aperiam optio dolores? Nemo quia adipisci reiciendis provident?
          Architecto molestias qui a ut placeat, dolorum similique fuga facilis
          modi suscipit perferendis blanditiis temporibus iusto repudiandae
          ipsam officiis.
        </p>
        <h2>My Subtitle</h2>
        <img
          src="https://images.unsplash.com/photo-1610308354580-0108c064a578?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2100&q=80"
        />
        <p>
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Corrupti
          excepturi est odio, veniam earum pariatur unde culpa, libero deserunt
          iure eligendi dolorem aperiam enim deleniti quibusdam omnis
          repudiandae dolor distinctio numquam dicta magni? Harum hic dolorem
          veniam, dolore minima earum blanditiis rerum similique illum quibusdam
          culpa soluta ullam nesciunt repudiandae dolor! Exercitationem
          repellendus, nostrum illo commodi est dignissimos veniam numquam,
          consectetur fugiat doloremque soluta odio enim iusto repudiandae
          tenetur aliquid voluptatem. Deserunt nam praesentium atque.
        </p>
      </div>
    </div>
    <nav>
      <ul>
        <li><i class="fas fa-home"></i> Home</li>
        <li><i class="fas fa-user-alt"></i> About</li>
        <li><i class="fas fa-envelope"></i> Contact</li>
      </ul>
    </nav>
    <script src="script.js"></script>
  </body>
</html>