W3Schools Tryit Editor

<!DOCTYPE html>

<html>
<title>W3.CSS Clothing Store Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/5/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

body,h1,h2,h3,h4,h5,h6,.w3-wide {
  font-family:"Montserrat",sans-serif
}
</style>

<a href="#" class="w3-bar-item w3-button">Shirts</a>
<a href="#" class="w3-bar-item w3-button">Dresses</a>

<a onclick="myAccFunc()"
href="javascript:void(0)"
class="w3-button w3-block w3-white w3-left-align"
id="myBtn">
Jeans <i class="fa fa-caret-down"></i>
</a>

<a href="#"
  class="w3-bar-item w3-button w3-light-grey">
  <i class="fa fa-caret-right w3-margin-right"></i>
  Skinny
  </a>

<a href="#" class="w3-bar-item w3-button">Relaxed</a>
  <a href="#" class="w3-bar-item w3-button">Bootcut</a>
  <a href="#" class="w3-bar-item w3-button">Straight</a>

</div>

<a href="#" class="w3-bar-item w3-button">Jackets</a>
<a href="#" class="w3-bar-item w3-button">Gymwear</a>
<a href="#" class="w3-bar-item w3-button">Blazers</a>
<a href="#" class="w3-bar-item w3-button">Shoes</a>

</div>

<a href="#footer"
class="w3-bar-item w3-button w3-padding">
Contact </a>

<a href="javascript:void(0)"
class="w3-bar-item w3-button w3-padding"
onclick="document.getElementById('newsletter').style.display='block'">
Newsletter </a>

<a href="#footer"
class="w3-bar-item w3-button w3-padding">
Subscribe </a>

</nav>

</header>

<p>Jeans</p>

</header>

<h1 class="w3-jumbo w3-hide-small">
New arrivals
</h1>

<h1 class="w3-hide-large w3-hide-medium">
New arrivals
</h1>

<h1 class="w3-hide-small">
COLLECTION 2016
</h1>

</div>
</div>

<div class="w3-container w3-text-grey" id="jeans">
<p>8 items</p>
</div>

<p>
Ripped Skinny Jeans<br>
<b>$24.99</b>
</p>

</article>

<p>
Mega Ripped Jeans<br>
<b>$19.99</b>
</p>

</article>

</div>

<p>
Mega Ripped Jeans<br>
<b>$19.99</b>
</p>

</article>

<p>
Washed Skinny Jeans<br>
<b>$20.50</b>
</p>

</article>

<p>
Washed Skinny Jeans<br>
<b>$20.50</b>
</p>

</article>

</div>

<p>
Vintage Skinny Jeans<br>
<b class="w3-text-red">$14.99</b>
</p>

</article>

<p>
Vintage Skinny Jeans<br>
<b>$14.99</b>
</p>

</article>

<p>
Ripped Skinny Jeans<br>
<b>$24.99</b>
</p>

</article>

</section>

<h1>Subscribe</h1>

<p>To get special offers and VIP treatment:</p>

<button type="button"
class="w3-button w3-red w3-margin-bottom">
Subscribe </button>

</section>

<div>

<h4>Contact</h4>
<p>Questions? Go ahead.</p>

</form>

</div>

<div>

<h4>About</h4>

<p><a href="#">About us</a></p>
<p><a href="#">We're hiring</a></p>
<p><a href="#">Support</a></p>
<p><a href="#">Find store</a></p>
<p><a href="#">Shipment</a></p>
<p><a href="#">Payment</a></p>
<p><a href="#">Gift card</a></p>
<p><a href="#">Return</a></p>
<p><a href="#">Help</a></p>

</div>

<h4>Store</h4>

<p>
<i class="fa fa-fw fa-map-marker"></i>
Company Name
</p>

<h4>We accept</h4>

<p>
<i class="fa fa-fw fa-credit-card"></i>
Credit Card
</p>

</div>

</footer>

Powered by <a href="https://www.w3schools.com/w3css/default.asp"
title="W3.CSS"
target="_blank"
class="w3-hover-opacity">
w3.css </a>

</div>

</main>

<h2 class="w3-wide">NEWSLETTER</h2>

<p>
Join our mailing list to receive updates on new arrivals
and special offers.
</p>

<button type="button"
class="w3-button w3-padding-large w3-red w3-margin-bottom"
onclick="document.getElementById('newsletter').style.display='none'">
Subscribe </button>

</div>
</div>
</div>

if (x.className.indexOf("w3-show") == -1) {
    x.className += " w3-show";
  } else {
    x.className = x.className.replace(" w3-show","");
  }
}

// Open Jeans accordion on page load
document.getElementById("myBtn").click();

// Open sidebar
function w3_open() {
  document.getElementById("mySidebar").style.display = "block";
  document.getElementById("myOverlay").style.display = "block";
}

// Close sidebar
function w3_close() {
  document.getElementById("mySidebar").style.display = "none";
  document.getElementById("myOverlay").style.display = "none";
}
</script>

</body>
</html>