Free Clothing Store Website Template

Free Clothing Store Website Template from W3

"W3.CSS Website Templates

We have created some responsive W3.CSS website templates for you to use.

You are free to modify, save, share, and use them in all your projects."

Source Code

<!DOCTYPE html>

<html>

<title>W3.CSS Template</title>

<style>

.w3-sidebar a {font-family: "Roboto", sans-serif}

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

</style>

</div>

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

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

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 class="w3-left">Jeans</p>

</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>

<p>8 items</p>

</div>

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

</div>

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

</div>

</div>

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

</div>

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

</div>

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

</div>

</div>

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

</div>

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

</div>

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

</div>

<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>

</div>

<h4>Contact</h4>

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

</form>

</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="#">Return</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>

<br>

</div>

</footer>

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

</div>

<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>

// Accordion

function myAccFunc() {

var x = document.getElementById("demoAcc");

if (x.className.indexOf("w3-show") == -1) {

x.className += " w3-show";

} else {

x.className = x.className.replace(" w3-show", "");

}

// Click on the "Jeans" link on page load to open the accordion for demo purposes

document.getElementById("myBtn").click();

// Script to open and close sidebar

function w3_open() {

document.getElementById("mySidebar").style.display = "block";

document.getElementById("myOverlay").style.display = "block";

}

function w3_close() {

document.getElementById("mySidebar").style.display = "none";

document.getElementById("myOverlay").style.display = "none";

}

</script>

</body>

</html>

Search This Blog

Free Code Examples