index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <!-- PAGE TITLE -->
  <title>SBL | Fashion Shop</title>
  <!-- CSS -->
  <link rel="stylesheet" href="css/font-awesome/all.min.css">
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/slick.css">
  <link rel="stylesheet" href="css/slick-theme.css">
  <link rel="stylesheet" href="css/main.css">
</head>
<body>
<!-- HEADER -->
<section id="sbl-header">
<!-- LOGO -->
  <div id="sbl-logo">
    <img src="images/logo.png" height="286" width="79"/>
  </div>
<!-- NAV -->
  <div id="sbl-nav">
    <ul id="sbl-main-menu">
      <li>NEW</li>
      <li>CATEGORIES</li>
      <li>COLLECTION</li>
    </ul>
  </div>
</section>
<!-- WOMAN SPOTLIGHT -->
<section class="sbl-spotlight">
  <div class="sbl-image-box">
    <div class="sbl-image">
      <img src="images/woman.png"/>
    </div>
    <div class="sbl-spotlight-content">
      <div class="sbl-category">WOMAN</div>
      <div class="sbl-main-content">SPRING</div>
      <div class="sbl-sub-content">collection</div>
      <a href="#" class="sbl-btn-view-more">view more</a>
    </div>
  </div>
</section>

<!-- MAN SPOTLIGHT -->
<section class="sbl-spotlight">
  <div class="sbl-image-box">
    <div class="sbl-image">
      <img src="images/man.png"/>
    </div>
    <div class="sbl-spotlight-content">
      <div class="sbl-category">MAN</div>
      <div class="sbl-main-content">APRIL</div>
      <div class="sbl-sub-content">collection</div>
      <a href="#" class="sbl-btn-view-more">view more</a>
    </div>
  </div>
</section>

<!-- DASHED LINE -->
<div id="sbl-dashed-line"></div>

<!-- FEATURE -->
<section id="sbl-feature-title">
  <div class="sbl-title-1">You will</div>
  <div class="sbl-title-2">
    <span>also</span>
    <span class="sbl-love">LOVE</span>
  </div>
</section>
<section class="sbl-feature-list">
  <div class="sbl-feature-slider">
    <div class="sbl-slider-item">
      <div class="sbl-feature-img">
        <img src="images/t-shirt.png"/>
      </div>
      <div class="sbl-item-category">
        man
      </div>
      <div class="sbl-item-title">
        black panther
      </div>
      <div class="sbl-item-price">
        230.000 VNĐ
      </div>
    </div>

    <div class="sbl-slider-item">
      <div class="sbl-feature-img">
        <img src="images/t-shirt.png"/>
      </div>
      <div class="sbl-item-category">
        man
      </div>
      <div class="sbl-item-title">
        black panther
      </div>
      <div class="sbl-item-price">
        230.000 VNĐ
      </div>
    </div>

    <div class="sbl-slider-item">
      <div class="sbl-feature-img">
        <img src="images/t-shirt.png"/>
      </div>
      <div class="sbl-item-category">
        man
      </div>
      <div class="sbl-item-title">
        black panther
      </div>
      <div class="sbl-item-price">
        230.000 VNĐ
      </div>
    </div>

    <div class="sbl-slider-item">
      <div class="sbl-feature-img">
        <img src="images/t-shirt.png"/>
      </div>
      <div class="sbl-item-category">
        man
      </div>
      <div class="sbl-item-title">
        black panther
      </div>
      <div class="sbl-item-price">
        230.000 VNĐ
      </div>
    </div>

    <div class="sbl-slider-item">
      <div class="sbl-feature-img">
        <img src="images/t-shirt.png"/>
      </div>
      <div class="sbl-item-category">
        man
      </div>
      <div class="sbl-item-title">
        black panther
      </div>
      <div class="sbl-item-price">
        230.000 VNĐ
      </div>
    </div>
</section>

<!-- FOOTER -->
<section class="sbl-footer container-fluid">
  <div class="sbl-footer-info row">
    <div class="sbl-footer-newsletter col-md-5">
      <p class="sbl-newsletter-title">Subscribe to newsletter</p>
      <div class="sbl-newsletter-icon">
        <i class="far fa-envelope"></i>
      </div>
    </div>
    <div class="col-md-7 row sbl-footer-others">
      <div class="col-md-4">
        <p class="sbl-footer-others-title">info</p>
        <p class="sbl-footer-others-content">About us</p>
        <p class="sbl-footer-others-content">Contact us</p>
      </div>
      <div class="col-md-4">
        <p class="sbl-footer-others-title">policy</p>
        <p class="sbl-footer-others-content">terms</p>
        <p class="sbl-footer-others-content">privacy</p>
      </div>
      <div class="col-md-4">
        <p class="sbl-footer-others-title">social</p>
        <p class="sbl-footer-others-content">facebook</p>
        <p class="sbl-footer-others-content">instagram</p>
      </div>
    </div>
  </div>
  <!-- DISCOUNT -->
  <div class="sbl-discount">
    <p>and get <span>10%</span>discount cost</p>
  </div>
  <!-- BOTTOM -->
  <div class="sbl-footer-bottom row">
    <div class="sbl-footer-email col-md-5">
      <div class="sbl-email-block">
        <input type="email" placeholder="EMAIL ADDRESS" />
        <button>SUBMIT</button>
      </div>
    </div>
    <div class="sbl-footer-copyright col-md-7">
      <p>© 2019 SBL Fashion Shop</p>
    </div>
  </div>
</section>

<!-- SCRIPT -->
<script src="js/jquery-3.4.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/slick.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>