cart.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://unpkg.com/scrollreveal"></script>
    <link rel="stylesheet" href="./css/styles.css" />
    <title>Cart - Exclusive E-Commerce Website</title>
  </head>
  <body>
    <div class="top_nav">
      <div class="container top_nav_container">
        <div class="top_nav_wrapper">
          <p class="tap_nav_p">
            Summer Sale For All Swim Suits And Free Express Delivery - OFF 50%!
          </p>
          <a href="#" class="top_nav_link">SHOP NOW</a>
        </div>
      </div>
    </div>
    <nav class="nav">
      <div class="container nav_container">
        <a href="/index.html" class="nav_logo">EXCLUSIVE</a>
        <ul class="nav_list">
          <li class="nav_item"><a href="/index.html" class="nav_link">Home</a></li>
          <li class="nav_item"><a href="./about.html" class="nav_link">About</a></li>
          <li class="nav_item"><a href="./contact.html" class="nav_link">Contact</a></li>
          <li class="nav_item">
            <a href="./sign-up.html" class="nav_link">Sign up</a>
          </li>
        </ul>
        <div class="nav_items">
          <form action="#" class="nav_form">
            <input
              type="text"
              class="nav_input"
              placeholder="search here...." />
            <img src="./image/search.png" alt="" class="nav_search" />
          </form>
          <img src="./image/heart.png" alt="" class="nav_heart" />
          <a href="/cart.html">
            <img src="./image/cart.png" alt="" class="nav_cart" />
          </a>
        </div>
        <span class="hamburger">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke-width="1.5"
            stroke="currentColor"
            class="w-6 h-6">
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
          </svg>
        </span>
      </div>
    </nav>
    <nav class="mobile_nav mobile_nav_hide">
      <ul class="mobile_nav_list">
        <li class="mobile_nav_item">
          <a href="/" class="mobile_nav_link">Home</a>
        </li>
        <li class="mobile_nav_item">
          <a href="#" class="mobile_nav_link">About</a>
        </li>
        <li class="mobile_nav_item">
          <a href="#" class="mobile_nav_link">Contact</a>
        </li>
        <li class="mobile_nav_item">
          <a href="./sign-up.html" class="mobile_nav_link">Sign Up</a>
        </li>
        <li class="mobile_nav_item">
          <a href="/cart.html" class="mobile_nav_link">Cart</a>
        </li>
      </ul>
    </nav>

    <section class="section">
      <div class="container">
        <div class="cart">
          <div class="cart_header">
            <p class="cart_header_id">Product ID</p>
            <p class="cart_header_title">Product Title</p>
            <p class="cart_header_image">Product Image</p>
            <p class="cart_header_price">Price</p>
            <p class="cart_header_delete">Delete</p>
          </div>
          <div class="cart-items"></div>
        </div>
      </div>
    </section>

    <footer class="footer">
      <div class="container footer_container">
        <div class="footer_item">
          <a href="#" class="footer_logo">Exclusive</a>
          <div class="footer_p">
            Lorem ipsum, dolor sit amet consectetur adipisicing elit.
            Exercitationem fuga harum voluptate?
          </div>
        </div>
        <div class="footer_item">
          <h3 class="footer_item_titl">Support</h3>
          <ul class="footer_list">
            <li class="li footer_list_item">Stockholm, Sweden</li>
            <li class="li footer_list_item">email@gmail.com</li>
            <li class="li footer_list_item">+46 123 456 78</li>
            <li class="li footer_list_item">+46 72 345 67</li>
          </ul>
        </div>
        <div class="footer_item">
          <h3 class="footer_item_titl">Support</h3>
          <ul class="footer_list">
            <li class="li footer_list_item">Account</li>
            <li class="li footer_list_item">Login / Register</li>
            <li class="li footer_list_item">Cart</li>
            <li class="li footer_list_item">Shop</li>
          </ul>
        </div>
        <div class="footer_item">
          <h3 class="footer_item_titl">Support</h3>
          <ul class="footer_list">
            <li class="li footer_list_item">Privacy policy</li>
            <li class="li footer_list_item">Terms of use</li>
            <li class="li footer_list_item">FAQ's</li>
            <li class="li footer_list_item">Contact</li>
          </ul>
        </div>
      </div>
      <div class="footer_bottom">
        <div class="container footer_bottom_container">
          <p class="footer_copy">
            Copyright Exclusive 2023. All right reserved
          </p>
        </div>
      </div>
    </footer>
    <script src="./js/cart.js"></script>
  </body>
</html>