dev/index.html

<!DOCTYPE html>
<html>
<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, maximum-scale=1.0, user-scalable=no" />
  <title>Demo Store Homepage</title>
  <link rel="stylesheet" href="js/flickity/flickity.css" media="screen">
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>

  <div id="main">

    <div class="promo-bar">
      <span class="promo-bar-message">
        FREE SHIPPING ON ALL ORDERS OVER $75
      </span>
    </div>

    <header id="store-header">
        <div class="header-store-logo">
          <a href="#"><img src="images/Logo.png" alt="Logo"></a>
        </div>
        <nav class="store-header-nav">
          <span class="menu-toggle">&#9776;</span>
          <ul class="store-header-nav-list">
            <li class="store-header-nav-item">Womens</li>
            <li class="store-header-nav-item">Mens</li>
            <li class="store-header-nav-item">Accessories</li>
            <li class="store-header-nav-item">Sale!</li>
          </ul>
        </nav>
        <a href="#CART" class="cart-link">Cart</a>
    </header>

    <section id="home-hero">
      <div class="hero-carousel">
        <div class="hero-carousel-item">
          <img class="hero-carousel-img img-mobile" src="images/Hero Image 1 Mobile.jpg" alt="Hero Image 1">
          <img class="hero-carousel-img img-desktop" src="images/Hero Image 1.jpg" alt="Hero Image 1">
          <a class="hero-carousel-item-overlay" href="#item">
            <span class="hero-carousel-item-title">Title Goes Here</span>
            <span class="hero-carousel-item-tagline">Tagline will go right here</span>
            <span class="hero-carousel-item-button">SHOP NOW</span>
          </a>
        </div>
        <div class="hero-carousel-item">
          <img class="hero-carousel-img img-mobile" src="images/Hero Image 1 Mobile.jpg" alt="Hero Image 1">
          <img class="hero-carousel-img img-desktop" src="images/Hero Image 1.jpg" alt="Hero Image 1">
          <a class="hero-carousel-item-overlay" href="#item">
            <span class="hero-carousel-item-title">Title Goes Here</span>
            <span class="hero-carousel-item-tagline">Tagline will go right here</span>
            <span class="hero-carousel-item-button">SHOP NOW</span>
          </a>
        </div>
        <div class="hero-carousel-item">
          <img class="hero-carousel-img img-mobile" src="images/Hero Image 1 Mobile.jpg" alt="Hero Image 1">
          <img class="hero-carousel-img img-desktop" src="images/Hero Image 1.jpg" alt="Hero Image 1">
          <a class="hero-carousel-item-overlay" href="#item">
            <span class="hero-carousel-item-title">Title Goes Here</span>
            <span class="hero-carousel-item-tagline">Tagline will go right here</span>
            <span class="hero-carousel-item-button">SHOP NOW</span>
          </a>
        </div>
        <div class="hero-carousel-item">
          <img class="hero-carousel-img img-mobile" src="images/Hero Image 1 Mobile.jpg" alt="Hero Image 1">
          <img class="hero-carousel-img img-desktop" src="images/Hero Image 1.jpg" alt="Hero Image 1">
          <a class="hero-carousel-item-overlay" href="#item">
            <span class="hero-carousel-item-title">Title Goes Here</span>
            <span class="hero-carousel-item-tagline">Tagline will go right here</span>
            <span class="hero-carousel-item-button">SHOP NOW</span>
          </a>
        </div>
      </div>
    </section>

    <section id="collection-grid">
      <ul>
        <li>
          <a href="#GRID-ITEM">
            <img src="images/Womens Image.jpg" alt="">
            <span>Womens</span>
          </a>
        </li>
        <li>
          <a href="#GRID-ITEM">
            <img src="images/Mens Image.jpg" alt="">
            <span>Mens</span>
          </a>
        </li>
        <li>
          <a href="#GRID-ITEM">
            <img class="img-mobile" src="images/Accessories Image Mobile.jpg" alt="">
            <img class="img-desktop" src="images/Accessories Image.jpg" alt="">
            <span>Accessories</span>
          </a>
        </li>
      </ul>
    </section>

    <section id="carousel-products-new-arrivals" class="carousel-products-section">
      <h2 class="carousel-products-heading">New Arrivals</h2>
      <div class="carousel-products">
        <div class="carousel-product">
          <img class="carousel-product-image" src="images/Product Image 1.jpg">
          <span class="carousel-product-title">Product Title</span>
          <span class="carousel-product-type">Women’s T-Shirt</span>
          <span class="carousel-product-price">$19.99</span>
        </div>
        <div class="carousel-product">
          <img class="carousel-product-image" src="images/Product Image 1.jpg">
          <span class="carousel-product-title">Product Title</span>
          <span class="carousel-product-type">Women’s T-Shirt</span>
          <span class="carousel-product-price">$19.99</span>
        </div>
        <div class="carousel-product">
          <img class="carousel-product-image" src="images/Product Image 1.jpg">
          <span class="carousel-product-title">Product Title</span>
          <span class="carousel-product-type">Women’s T-Shirt</span>
          <span class="carousel-product-price">$19.99</span>
        </div>
        <div class="carousel-product">
          <img class="carousel-product-image" src="images/Product Image 1.jpg">
          <span class="carousel-product-title">Product Title</span>
          <span class="carousel-product-type">Women’s T-Shirt</span>
          <span class="carousel-product-price">$19.99</span>
        </div>
        <div class="carousel-product">
          <img class="carousel-product-image" src="images/Product Image 1.jpg">
          <span class="carousel-product-title">Product Title</span>
          <span class="carousel-product-type">Women’s T-Shirt</span>
          <span class="carousel-product-price">$19.99</span>
        </div>
        <div class="carousel-product">
          <img class="carousel-product-image" src="images/Product Image 1.jpg">
          <span class="carousel-product-title">Product Title</span>
          <span class="carousel-product-type">Women’s T-Shirt</span>
          <span class="carousel-product-price">$19.99</span>
        </div>
        <div class="carousel-product">
          <img class="carousel-product-image" src="images/Product Image 1.jpg">
          <span class="carousel-product-title">Product Title</span>
          <span class="carousel-product-type">Women’s T-Shirt</span>
          <span class="carousel-product-price">$19.99</span>
        </div>
        <div class="carousel-product">
          <img class="carousel-product-image" src="images/Product Image 1.jpg">
          <span class="carousel-product-title">Product Title</span>
          <span class="carousel-product-type">Women’s T-Shirt</span>
          <span class="carousel-product-price">$19.99</span>
        </div>
      </div>
    </section>

    <section class="hero-banner">
      <div class="hero-banner-item">
        <img class="hero-banner-img img-mobile" src="images/Hero Image 2 Mobile.jpg" alt="Hero Image 1">
        <img class="hero-banner-img img-desktop" src="images/Hero Image 2.jpg" alt="Hero Image 1">
        <a class="hero-banner-item-overlay" href="#HERO-BANNER">
          <div class="hero-banner-item-title">Title Goes Here</div>
          <div class="hero-banner-item-tagline">Tagline will go right here</div>
          <div class="hero-banner-item-button">SHOP NOW</div>
        </a>
      </div>
    </section>

    <section class="instagram-feed">
      <h2 class="instagram-feed-title">Follow us on Instagram!</h2>
      <div class="instagram-feed-photos">
        <img class="instagram-feed-photo" src="images/Social 1.jpg">
        <img class="instagram-feed-photo" src="images/Social 2.jpg">
        <img class="instagram-feed-photo" src="images/Social 3.jpg">
        <img class="instagram-feed-photo" src="images/Social 4.jpg">
        <img class="instagram-feed-photo" src="images/Social 5.jpg">
      </div>
    </section>

    <section id="subscribe-newsletter">
      <h3 class="subscribe-title">
        Sign up.& stay connected
      </h3>
      <p class="subscribe-details">
        Sign up for the newsletter and get 20% off! Get access to exclusive offers and be the first to know when new stuff drops.
      </p>
      <form action="" class="subscribe-newsletter-form">
        <input class="subscribe-newsletter-form-input-email" type="text" placeholder="Your Email Address">
        <button class="subscribe-newsletter-form-input-subscribe" type="submit">Subscribe</button>
      </form>
    </section>

    <footer id="primary-footer">
      <nav class="store-links-navigation">
        <div class="store-links-group">
          <label for="footer-nav-customer-service" class="store-links-group-title">Customer Service</label>
          <input type="checkbox" id="footer-nav-customer-service" class="store-links-group-toggle" checked="checked">
          <ul class="store-links-list">
            <li class="store-links-item">Accessibility</li>
            <li class="store-links-item">Contact Us</li>
            <li class="store-links-item">Return Policy</li>
            <li class="store-links-item">FAQ</li>
            <li class="store-links-item">Gift Certificates</li>
            <li class="store-links-item">Wishlist</li>
          </ul>
        </div>
        <div class="store-links-group">
          <label for="footer-nav-company" class="store-links-group-title">Company</label>
          <input type="checkbox" id="footer-nav-company" class="store-links-group-toggle">
          <ul class="store-links-list">
            <li class="store-links-item">About Us</li>
            <li class="store-links-item">Careers</li>
            <li class="store-links-item">Press</li>
            <li class="store-links-item">Affiliates</li>
          </ul>
        </div>
      </nav>
      <nav class="store-social-navigation">
        <div class="store-social-navigation-title">Follow Us</div>
        <ul class="store-social-links-list">
          <li class="store-social-links-item">
            <a href="#FACEBOOK"><img src="images/Group 3.png" alt="FaceBook"></a>
          </li>
          <li class="store-social-links-item">
            <a href="#FACEBOOK"><img src="images/Group 8.png" alt="Instagram"></a>
          </li>
          <li class="store-social-links-item">
            <a href="#FACEBOOK"><img src="images/Group 15.png" alt="Twitter"></a>
          </li>
        </ul>
      </nav>
    </footer>
  </div>

  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="js/flickity/flickity.pkgd.min.js"></script>
  <script src="js/scripts.js"></script>

</body>
</html>