HTML Code
<!DOCTYPE html>
<html>
<head>
<title>workingcode.CSS Template</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.workingcode.in.com/workingcodecss/4/workingcode.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">
<style>
.workingcode-sidebar a {font-family: "Roboto", sans-serif}
body,h1,h2,h3,h4,h5,h6,.workingcode-wide {font-family: "Montserrat", sans-serif;}
</style>
</head>
<body class="workingcode-content" style="max-width:1200px">
<!-- Sidebar/menu -->
<nav class="workingcode-sidebar workingcode-bar-block workingcode-white workingcode-collapse workingcode-top" style="z-index:3;width:250px" id="mySidebar">
<div class="workingcode-container workingcode-display-container workingcode-padding-16">
<i onclick="workingcode_close()" class="fa fa-remove workingcode-hide-large workingcode-button workingcode-display-topright"></i>
<h3 class="workingcode-wide"><b>LOGO</b></h3>
</div>
<div class="workingcode-padding-64 workingcode-large workingcode-text-grey" style="font-weight:bold">
<a href="javascript:void(0)" class="workingcode-bar-item workingcode-button">Shirts</a>
<a href="javascript:void(0)" class="workingcode-bar-item workingcode-button">Dresses</a>
<a onclick="myAccFunc()" href="javascript:void(0)" class="workingcode-button workingcode-block workingcode-white workingcode-left-align" id="myBtn">
Jeans <i class="fa fa-caret-down"></i>
</a>
<div id="demoAcc" class="workingcode-bar-block workingcode-hide workingcode-padding-large workingcode-medium">
<a href="javascript:void(0)" class="workingcode-bar-item workingcode-button workingcode-light-grey"><i class="fa fa-caret-right workingcode-margin-right"></i>Skinny</a>
<a href="javascript:void(0)" class="workingcode-bar-item workingcode-button">Relaxed</a>
<a href="javascript:void(0)" class="workingcode-bar-item workingcode-button">Bootcut</a>
<a href="javascript:void(0)" class="workingcode-bar-item workingcode-button">Straight</a>
</div>
<a href="javascript:void(0)" class="workingcode-bar-item workingcode-button">Jackets</a>
<a href="javascript:void(0)" class="workingcode-bar-item workingcode-button">Gymwear</a>
<a href="javascript:void(0)" class="workingcode-bar-item workingcode-button">Blazers</a>
<a href="javascript:void(0)" class="workingcode-bar-item workingcode-button">Shoes</a>
</div>
<a href="javascript:void(0)footer" class="workingcode-bar-item workingcode-button workingcode-padding">Contact</a>
<a href="javascript:void(0)" class="workingcode-bar-item workingcode-button workingcode-padding" onclick="document.getElementById('newsletter').style.display='block'">Newsletter</a>
<a href="javascript:void(0)footer" class="workingcode-bar-item workingcode-button workingcode-padding">Subscribe</a>
</nav>
<!-- Top menu on small screens -->
<header class="workingcode-bar workingcode-top workingcode-hide-large workingcode-black workingcode-xlarge">
<div class="workingcode-bar-item workingcode-padding-24 workingcode-wide">LOGO</div>
<a href="javascript:void(0)" class="workingcode-bar-item workingcode-button workingcode-padding-24 workingcode-right" onclick="workingcode_open()"><i class="fa fa-bars"></i></a>
</header>
<!-- Overlay effect when opening sidebar on small screens -->
<div class="workingcode-overlay workingcode-hide-large" onclick="workingcode_close()" style="cursor:pointer" title="close side menu" id="myOverlay"></div>
<!-- !PAGE CONTENT! -->
<div class="workingcode-main" style="margin-left:250px">
<!-- Push down content on small screens -->
<div class="workingcode-hide-large" style="margin-top:83px"></div>
<!-- Top header -->
<header class="workingcode-container workingcode-xlarge">
<p class="workingcode-left">Jeans</p>
<p class="workingcode-right">
<i class="fa fa-shopping-cart workingcode-margin-right"></i>
<i class="fa fa-search"></i>
</p>
</header>
<!-- Image header -->
<div class="workingcode-display-container workingcode-container">
<img src="https://www.workingcode.in.com/workingcodeimages/jeans.jpg" alt="Jeans" style="width:100%">
<div class="workingcode-display-topleft workingcode-text-white" style="padding:24px 48px">
<h1 class="workingcode-jumbo workingcode-hide-small">New arrivals</h1>
<h1 class="workingcode-hide-large workingcode-hide-medium">New arrivals</h1>
<h1 class="workingcode-hide-small">COLLECTION 2016</h1>
<p><a href="javascript:void(0)jeans" class="workingcode-button workingcode-black workingcode-padding-large workingcode-large">SHOP NOW</a></p>
</div>
</div>
<div class="workingcode-container workingcode-text-grey" id="jeans">
<p>8 items</p>
</div>
<!-- Product grid -->
<div class="workingcode-row workingcode-grayscale">
<div class="workingcode-col l3 s6">
<div class="workingcode-container">
<img src="https://www.workingcode.in.com/workingcodeimages/jeans1.jpg" style="width:100%">
<p>Ripped Skinny Jeans<br><b>$24.99</b></p>
</div>
<div class="workingcode-container">
<img src="https://www.workingcode.in.com/workingcodeimages/jeans2.jpg" style="width:100%">
<p>Mega Ripped Jeans<br><b>$19.99</b></p>
</div>
</div>
<div class="workingcode-col l3 s6">
<div class="workingcode-container">
<div class="workingcode-display-container">
<img src="https://www.workingcode.in.com/workingcodeimages/jeans2.jpg" style="width:100%">
<span class="workingcode-tag workingcode-display-topleft">New</span>
<div class="workingcode-display-middle workingcode-display-hover">
<button class="workingcode-button workingcode-black">Buy now <i class="fa fa-shopping-cart"></i></button>
</div>
</div>
<p>Mega Ripped Jeans<br><b>$19.99</b></p>
</div>
<div class="workingcode-container">
<img src="https://www.workingcode.in.com/workingcodeimages/jeans3.jpg" style="width:100%">
<p>Washed Skinny Jeans<br><b>$20.50</b></p>
</div>
</div>
<div class="workingcode-col l3 s6">
<div class="workingcode-container">
<img src="https://www.workingcode.in.com/workingcodeimages/jeans3.jpg" style="width:100%">
<p>Washed Skinny Jeans<br><b>$20.50</b></p>
</div>
<div class="workingcode-container">
<div class="workingcode-display-container">
<img src="https://www.workingcode.in.com/workingcodeimages/jeans4.jpg" style="width:100%">
<span class="workingcode-tag workingcode-display-topleft">Sale</span>
<div class="workingcode-display-middle workingcode-display-hover">
<button class="workingcode-button workingcode-black">Buy now <i class="fa fa-shopping-cart"></i></button>
</div>
</div>
<p>Vintage Skinny Jeans<br><b class="workingcode-text-red">$14.99</b></p>
</div>
</div>
<div class="workingcode-col l3 s6">
<div class="workingcode-container">
<img src="https://www.workingcode.in.com/workingcodeimages/jeans4.jpg" style="width:100%">
<p>Vintage Skinny Jeans<br><b>$14.99</b></p>
</div>
<div class="workingcode-container">
<img src="https://www.workingcode.in.com/workingcodeimages/jeans1.jpg" style="width:100%">
<p>Ripped Skinny Jeans<br><b>$24.99</b></p>
</div>
</div>
</div>
<!-- Subscribe section -->
<div class="workingcode-container workingcode-black workingcode-padding-32">
<h1>Subscribe</h1>
<p>To get special offers and VIP treatment:</p>
<p><input class="workingcode-input workingcode-border" type="text" placeholder="Enter e-mail" style="width:100%"></p>
<button type="button" class="workingcode-button workingcode-red workingcode-margin-bottom">Subscribe</button>
</div>
<!-- Footer -->
<footer class="workingcode-padding-64 workingcode-light-grey workingcode-small workingcode-center" id="footer">
<div class="workingcode-row-padding">
<div class="workingcode-col s4">
<h4>Contact</h4>
<p>Questions? Go ahead.</p>
<form action="/action_page.php" target="_blank">
<p><input class="workingcode-input workingcode-border" type="text" placeholder="Name" name="Name" required></p>
<p><input class="workingcode-input workingcode-border" type="text" placeholder="Email" name="Email" required></p>
<p><input class="workingcode-input workingcode-border" type="text" placeholder="Subject" name="Subject" required></p>
<p><input class="workingcode-input workingcode-border" type="text" placeholder="Message" name="Message" required></p>
<button type="submit" class="workingcode-button workingcode-block workingcode-black">Send</button>
</form>
</div>
<div class="workingcode-col s4">
<h4>About</h4>
<p><a href="javascript:void(0)">About us</a></p>
<p><a href="javascript:void(0)">We're hiring</a></p>
<p><a href="javascript:void(0)">Support</a></p>
<p><a href="javascript:void(0)">Find store</a></p>
<p><a href="javascript:void(0)">Shipment</a></p>
<p><a href="javascript:void(0)">Payment</a></p>
<p><a href="javascript:void(0)">Gift card</a></p>
<p><a href="javascript:void(0)">Return</a></p>
<p><a href="javascript:void(0)">Help</a></p>
</div>
<div class="workingcode-col s4 workingcode-justify">
<h4>Store</h4>
<p><i class="fa fa-fw fa-map-marker"></i> Workingcode.in</p>
<p><i class="fa fa-fw fa-phone"></i> 0000000</p>
<p><i class="fa fa-fw fa-envelope"></i> xyz</p>
<h4>We accept</h4>
<p><i class="fa fa-fw fa-cc-amex"></i> Card</p>
<p><i class="fa fa-fw fa-credit-card"></i> Credit Card</p>
<br>
<i class="fa fa-facebook-official workingcode-hover-opacity workingcode-large"></i>
<i class="fa fa-instagram workingcode-hover-opacity workingcode-large"></i>
<i class="fa fa-snapchat workingcode-hover-opacity workingcode-large"></i>
<i class="fa fa-pinterest-p workingcode-hover-opacity workingcode-large"></i>
<i class="fa fa-twitter workingcode-hover-opacity workingcode-large"></i>
<i class="fa fa-linkedin workingcode-hover-opacity workingcode-large"></i>
</div>
</div>
</footer>
<div class="workingcode-black workingcode-center workingcode-padding-24">Powered by <a href="https://www.workingcode.in.com/workingcodecss/default.asp" title="workingcode.CSS" target="_blank" class="workingcode-hover-opacity">Workingcode.in</a></div>
<!-- End page content -->
</div>
<!-- Newsletter Modal -->
<div id="newsletter" class="workingcode-modal">
<div class="workingcode-modal-content workingcode-animate-zoom" style="padding:32px">
<div class="workingcode-container workingcode-white workingcode-center">
<i onclick="document.getElementById('newsletter').style.display='none'" class="fa fa-remove workingcode-right workingcode-button workingcode-transparent workingcode-xxlarge"></i>
<h2 class="workingcode-wide">NEWSLETTER</h2>
<p>Join our mailing list to receive updates on new arrivals and special offers.</p>
<p><input class="workingcode-input workingcode-border" type="text" placeholder="Enter e-mail"></p>
<button type="button" class="workingcode-button workingcode-padding-large workingcode-red workingcode-margin-bottom" onclick="document.getElementById('newsletter').style.display='none'">Subscribe</button>
</div>
</div>
</div>
<script>
// Accordion
function myAccFunc() {
var x = document.getElementById("demoAcc");
if (x.className.indexOf("workingcode-show") == -1) {
x.className += " workingcode-show";
} else {
x.className = x.className.replace(" workingcode-show", "");
}
}
// Click on the "Jeans" link on page load to open the accordion for demo purposes
document.getElementById("myBtn").click();
// Open and close sidebar
function workingcode_open() {
document.getElementById("mySidebar").style.display = "block";
document.getElementById("myOverlay").style.display = "block";
}
function workingcode_close() {
document.getElementById("mySidebar").style.display = "none";
document.getElementById("myOverlay").style.display = "none";
}
</script>
</body>
</html>
E-commerce website within the ServiceNow Service Portal
Working Code Edited question October 2, 2024
Sorry, you do not have permission to read comments.