<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Home</title>

    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css"
    />

    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
    />

  </head>
  <body>
    <main>
      <section class="background">
        <header>
          <a href="/"> <h2>AMAD IHSAN</h2></a>
          <nav>
            <ul>
              <li><a href="/">HOME</a></li>
              <li><a href="/work.html">WORK</a></li>
              <li><a href="/about.html">ABOUT</a></li>
              <li><a href="/contact.html">CONTACT</a></li>
            </ul>
          </nav>
          <button class="burger">
            <div class="burger__line"></div>
            <div class="burger__line"></div>
            <div class="burger__line"></div>
          </button>
        </header>
        <span class="overlay"></span>
        <div class="container">
          <h1>AMAD IHSAN</h1>
        </div>
      </section>

      <div class="me-mobile">
        <img src="./assets/amad-phone.jpg" alt="" />
      </div>

      <div class="description">
        <p>
          I'm <b>Amad Ihsan</b>, Developer and Digital Artist, proficient in
          digital creativity, specializing in 2D and 3D design, with expertise
          UI/UX and web developing
        </p>
        <span></span>
      </div>

      <div class="My-Work">
        <h1>WORK</h1>

        <a href="/work.html">
          
          <video src="./assets/All Work Desktop.mp4" type="video/mp4" id="DesktopV" autoplay muted playsinline loop preload="metadata">
          </video>
          <video src="./assets/All Work Mobile.mp4" type="video/mp4" id="MobileV" autoplay muted playsinline loop preload="metadata">
          </video>
          
          <p>SEE ALL MY WORKS</p>
        </a>
      </div>
    </main>

    <aside>
      <div class="social-icon">
        <a
          href="https://www.behance.net/amadmziri1"
          target="_blank"
          rel="noopener noreferrer"
        >
          <i class="bi bi-behance"></i>
        </a>
        <a
          href="https://www.instagram.com/amad.ihsan?igsh=OWhtZWV3cGN5cnN3&utm_source=qr"
          target="_blank"
          rel="noopener noreferrer"
          ><i class="bi bi-instagram"></i>
        </a>
        <a
          href="https://www.linkedin.com/in/amad-ihsan-a870022b3"
          target="_blank"
          rel="noopener noreferrer"
          ><i class="fa-brands fa-linkedin-in"></i>
        </a>
        <a
          href="https://www.tiktok.com/@amad.ihsan?_t=8k5uYhBrOMg&_r=1"
          target="_blank"
          rel="noopener noreferrer"
        >
          <i class="bi bi-tiktok"></i>
        </a>
        <a
          href="mailto:info@amadihsan.com"
          target="_blank"
          rel="noopener noreferrer"
        >
          <i class="fa-solid fa-envelope"></i>
        </a>
      </div>

      <div class="footer">
        <p>© AMAD IHSAN</p>
        <p>2023</p>
      </div>
    </aside>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

  </body>
</html>
