96. The Art/index.html

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>theArt</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <!-- Navbar -->
    <nav>
      <ul>
        <li><a href="">HuXn</a></li>
      </ul>

      <div class="burger">
        <span></span>
        <span></span>
        <span></span>
      </div>
    </nav>
    <!-- End Navbar -->

    <header>
      <h1 class="main-headings">
        WHAT <br />
        IS CALLED ART?
      </h1>
      <p class="primary-headings">
        Art, also called (to distinguish it from other art forms) visual art, a
        <span class="bg-gray"> visual object or experience </span> consciously
        created through an expression of skill or imagination.
      </p>
    </header>

    <main>
      <img
        src="https://images.unsplash.com/photo-1579783902614-a3fb3927b6a5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=745&q=80"
        class="img"
      />
      <img
        src="https://images.unsplash.com/flagged/photo-1572392640988-ba48d1a74457?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=764&q=80"
        class="img"
      />
      <img
        src="https://images.unsplash.com/photo-1588571590924-433cc2020a12?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80"
        class="img"
      />
      <img
        src="https://images.unsplash.com/photo-1495462911434-be47104d70fa?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=435&q=80"
        class="img"
      />
      <img
        src="https://images.unsplash.com/photo-1579783901586-d88db74b4fe4?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=748&q=80"
        class="img"
      />
      <img
        src="https://images.unsplash.com/photo-1579783901837-c78c2310be05?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=804&q=80"
        class="img"
      />
    </main>

    <section class="section-three">
      <h1 class="main-headings">7 TYPES OF ART</h1>
      <p class="primary-headings">
        The seven different art forms are
        <span class="bg-gray">
          Painting, Sculpture, Literature, Architecture, Theater, Film, and
          Music
        </span>
        . However, back in the day, the seven different art forms were called
        the Liberal Arts, consisting of Grammar, Logic, Rhetoric, Arithmetic,
        Geometry, Astronomy, and Music.
      </p>

      <div class="list">
        <div class="item">
          <h1>PAINTING</h1>
          <img
            src="https://images.unsplash.com/photo-1579965342575-16428a7c8881?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=762&q=80"
          />
        </div>
        <div class="item">
          <h1>SCULPTURE</h1>
          <img
            src="https://images.unsplash.com/photo-1637666505754-7416ebd70cbf?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=435&q=80"
          />
        </div>
        <div class="item">
          <h1>LITERATURE</h1>
          <img
            src="https://images.unsplash.com/photo-1532012197267-da84d127e765?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80"
          />
        </div>
        <div class="item">
          <h1>ARCHITECTURE</h1>
          <img
            src="https://images.unsplash.com/photo-1479839672679-a46483c0e7c8?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2020&q=80"
          />
        </div>
        <div class="item">
          <h1>CINEMA</h1>
          <img
            src="https://images.unsplash.com/photo-1604975701397-6365ccbd028a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=435&q=80"
          />
        </div>
        <div class="item">
          <h1>MUSIC</h1>
          <img
            src="https://images.unsplash.com/photo-1598547535077-26d10ae80496?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=781&q=80"
          />
        </div>
        <div class="item">
          <h1>THEATER</h1>
          <img
            src="https://images.unsplash.com/photo-1578920568769-3c1b145bc9ea?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80"
          />
        </div>
      </div>
    </section>

    <footer>
      <div class="logo-container">
        <h1>Logo</h1>
        <p>
          Lorem Ipsum is simply dummy text of the printing and typesetting
          industry. Lorem Ipsum has been the industry's standard dummy text ever
          since the 1500s.
        </p>
      </div>

      <div class="about-company">
        <div class="container">
          <h1>About</h1>
          <p>News & Blog</p>
          <p>Features</p>
          <p>About Us</p>
        </div>
        <div class="container">
          <h1>Company</h1>
          <p>How We Work?</p>
          <p>Capital</p>
          <p>Security</p>
        </div>
        <div class="container">
          <h1>Support</h1>
          <p>FAQs</p>
          <p>Support</p>
          <p>Contact Us</p>
        </div>
      </div>
    </footer>
  </body>
</html>