Embedded Files
<!DOCTYPE html>
<html>
<title>Anothai Midterm</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/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">
<style>
.w3-sidebar a {font-family: "Roboto", sans-serif}
body,h1,h2,h3,h4,h5,h6,.w3-wide {font-family: "Montserrat", sans-serif;}
</style>
<body class="w3-content" style="max-width:1200px">
<!-- Sidebar/menu -->
<nav class="w3-sidebar w3-bar-block w3-white w3-collapse w3-top" style="z-index:3;width:250px" id="mySidebar">
<div class="w3-container w3-display-container w3-padding-16">
<i onclick="w3_close()" class="fa fa-remove w3-hide-large w3-button w3-display-topright"></i>
<h4 class="w3-wide"><b>Jeans <br>Styles</b></h4>
</div>
<div class="w3-padding-64 w3-large w3-text-grey" style="font-weight:bold">
<!-- Anothai Shirts Link // acctive -->
<a onclick="ShirtsFunc()" href="javascript:void(0)" class="w3-button w3-block w3-dark-gray w3-left-align" id="shirtsBtn">
Shirts <i class="fa fa-caret-down"></i></a>
<div id="ShirtsAcc" class="w3-bar-block w3-hide w3-padding-large w3-medium">
<a href="shirts_m.html" class="w3-bar-item w3-button w3-light-grey"><i class="fa fa-caret-right w3-margin-right"></i>Shirts - Male</a>
<a href="shirts_f.html" class="w3-bar-item w3-button">Shirts - Female</a>
</div>
<!-- Anothai Dresses Link -->
<a onclick="DressesFunc()" href="javascript:void(0)" class="w3-bar-item w3-button" id="dressesBtn">Dresses <i class="fa fa-caret-down"></i></a>
<div id="DressesAcc" class="w3-bar-block w3-hide w3-padding-large w3-medium">
<a href="dresses_shirt.html" class="w3-bar-item w3-button">Shirt Dresses</a>
<a href="dresses_sheath.html" class="w3-bar-item w3-button">Sheath Dresses</a>
</div>
<!-- Anothai Jeans Link -->
<a onclick="JeansFunc()" href="javascript:void(0)" class="w3-bar-item w3-button" id="jeansBtn">
Jeans <i class="fa fa-caret-down"></i>
</a>
<div id="JeansAcc" class="w3-bar-block w3-hide w3-padding-large w3-medium">
<a href="jeans_sk.html" class="w3-bar-item w3-button">Skinny</a>
<a href="jeans_re.html" class="w3-bar-item w3-button">Relaxed</a>
<a href="jeans_bo.html" class="w3-bar-item w3-button">Bootcut</a>
<a href="jeans_st.html" class="w3-bar-item w3-button">Straight</a>
</div>
<!-- Anothai Jackets Link -->
<a onclick="JacketsFunc()" href="javascript:void(0)" class="w3-bar-item w3-button" id="jacketsBtn">Jackets <i class="fa fa-caret-down"></i></a>
<div id="JacketsAcc" class="w3-bar-block w3-hide w3-padding-large w3-medium">
<a href="jacket_m.html" class="w3-bar-item w3-button">Jackets - Male</a>
<a href="jacket_f.html" class="w3-bar-item w3-button">Jackets - Female</a>
</div>
<!-- Anothai Gymwear Link -->
<a onclick="GymwearFunc()" href="javascript:void(0)" class="w3-bar-item w3-button" id="gymwearBtn">Gymwear <i class="fa fa-caret-down"></i></a>
<div id="GymwearAcc" class="w3-bar-block w3-hide w3-padding-large w3-medium">
<a href="gymwear_m.html" class="w3-bar-item w3-button">Gymwear - Male</a>
<a href="gymwear_f.html" class="w3-bar-item w3-button">Gymwear - Female</a>
</div>
<!-- Anothai Blazers Link -->
<a onclick="BlazersFunc()" href="javascript:void(0)" class="w3-bar-item w3-button" id="blazersBtn">Blazers <i class="fa fa-caret-down"></i></a>
<div id="BlazersAcc" class="w3-bar-block w3-hide w3-padding-large w3-medium">
<a href="blazers_m.html" class="w3-bar-item w3-button">Blazers - Male</a>
<a href="blazers_f.html" class="w3-bar-item w3-button">Blazers - Female</a>
</div>
<!-- Anothai Shoes Link -->
<a onclick="ShoesFunc()" href="javascript:void(0)" class="w3-bar-item w3-button" id="shoesBtn">Shoes <i class="fa fa-caret-down"></i></a>
<div id="ShoesAcc" class="w3-bar-block w3-hide w3-padding-large w3-medium">
<a href="shoes_m.html" class="w3-bar-item w3-button">Shoes - Male</a>
<a href="shoes_f.html" class="w3-bar-item w3-button">Shoes - Female</a>
</div>
</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>
<!-- Top menu on small screens -->
<header class="w3-bar w3-top w3-hide-large w3-black w3-xlarge">
<div class="w3-bar-item w3-padding-24 w3-wide">Jeans <br>Styles</div>
<a href="javascript:void(0)" class="w3-bar-item w3-button w3-padding-24 w3-right" onclick="w3_open()"><i class="fa fa-bars"></i></a>
</header>
<!-- Overlay effect when opening sidebar on small screens -->
<div class="w3-overlay w3-hide-large" onclick="w3_close()" style="cursor:pointer" title="close side menu" id="myOverlay"></div>
<!-- !PAGE CONTENT! -->
<div class="w3-main" style="margin-left:250px">
<!-- Push down content on small screens -->
<div class="w3-hide-large" style="margin-top:83px"></div>
<!-- Top header -->
<header class="w3-container w3-xlarge">
<p class="w3-left">Shirts - Male</p>
<p class="w3-right">
<i class="fa fa-shopping-cart w3-margin-right"></i>
<i class="fa fa-search"></i>
</p>
</header>
<!-- Image header -->
<div class="w3-display-container w3-container">
<img src="pic/jeans.jpg" alt="Jeans" style="width:100%">
<div class="w3-display-topleft w3-text-white" style="padding:24px 48px">
<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 2018</h1>
<p><a href="#shirtsM" class="w3-button w3-black w3-padding-large w3-large">BUY NOW</a></p>
<p><h4 class="w3-hide-small">By Anothai Phasukkhan <br/> @ Krirk University</h4></p>
</div>
</div>
<div class="w3-container w3-text-grey" id="shirtsM">
<p>8 items</p>
</div>
<!-- Product grid -->
<div class="w3-row">
<div class="w3-col l3 s6">
<div class="w3-container">
<img src="pic/shirts_m/sm1.jpg" style="width:100%">
<p>Formal Shirts slim fit<br><b>$33.29</b></p>
</div>
<div class="w3-container">
<div class="w3-display-container">
<img src="pic/shirts_m/sm2.jpg" style="width:100%">
<span class="w3-tag w3-display-topleft">Sale</span>
<div class="w3-display-middle w3-display-hover">
<button class="w3-button w3-black">Buy now <i class="fa fa-shopping-cart"></i></button>
</div>
</div>
<p>Shirts slim fit<br><b class="w3-text-red">$19.89</b></p>
</div>
</div>
<div class="w3-col l3 s6">
<div class="w3-container">
<div class="w3-display-container">
<img src="pic/shirts_m/sm3.jpg" style="width:100%">
<span class="w3-tag w3-display-topleft">New</span>
<div class="w3-display-middle w3-display-hover">
<button class="w3-button w3-black">Buy now <i class="fa fa-shopping-cart"></i></button>
</div>
</div>
<p>White Shirts<br><b>$22.88</b></p>
</div>
<div class="w3-container">
<img src="pic/shirts_m/sm4.jpg" style="width:100%">
<p>Jeans Shirts<br><b>$26.66</b></p>
</div>
</div>
<div class="w3-col l3 s6">
<div class="w3-container">
<img src="pic/shirts_m/sm5.jpeg" style="width:100%">
<p>Casual Shirts<br><b>$18.99</b></p>
</div>
<div class="w3-container">
<div class="w3-display-container">
<img src="pic/shirts_m/sm6.jpg" style="width:100%">
<span class="w3-tag w3-display-topleft">Sale</span>
<div class="w3-display-middle w3-display-hover">
<button class="w3-button w3-black">Buy now <i class="fa fa-shopping-cart"></i></button>
</div>
</div>
<p>Blue Shirts<br><b class="w3-text-red">$14.99</b></p>
</div>
</div>
<div class="w3-col l3 s6">
<div class="w3-container">
<img src="pic/shirts_m/sm7.jpeg" style="width:100%">
<p>Two tone Shirts<br><b>$14.99</b></p>
</div>
<div class="w3-container">
<img src="pic/shirts_m/sm8.jpeg" style="width:100%">
<p>Easy care stretch Shirts<br><b>$20.99</b></p>
</div>
</div>
</div>
<!-- Subscribe section -->
<div class="w3-container w3-black w3-padding-32">
<h1>Subscribe</h1>
<p>To get special offers and VIP treatment:</p>
<p><input class="w3-input w3-border" type="text" placeholder="Enter e-mail" style="width:100%"></p>
<button type="button" class="w3-button w3-red w3-margin-bottom">Subscribe</button>
</div>
<!-- Footer -->
<footer class="w3-padding-64 w3-light-grey w3-small w3-center" id="footer">
<div class="w3-row-padding">
<div class="w3-col s4">
<h4>Contact</h4>
<p>Questions? Go ahead.</p>
<form action="/action_page.php" target="_blank">
<p><input class="w3-input w3-border" type="text" placeholder="Name" name="Name" required></p>
<p><input class="w3-input w3-border" type="text" placeholder="Email" name="Email" required></p>
<p><input class="w3-input w3-border" type="text" placeholder="Subject" name="Subject" required></p>
<p><input class="w3-input w3-border" type="text" placeholder="Message" name="Message" required></p>
<button type="submit" class="w3-button w3-block w3-black">Send</button>
</form>
</div>
<div class="w3-col s4">
<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>
<div class="w3-col s4 w3-justify">
<h4>Store</h4>
<p><i class="fa fa-fw fa-map-marker"></i> Anothai @ Krirk University</p>
<p><i class="fa fa-fw fa-phone"></i> 601-40-8819</p>
<p><i class="fa fa-fw fa-envelope"></i> aase7en.081030@gmail.com</p>
<h4>We accept</h4>
<p><i class="fa fa-fw fa-cc-amex"></i> Amex</p>
<p><i class="fa fa-fw fa-credit-card"></i> Credit Card</p>
<br>
<i class="fa fa-facebook-official w3-hover-opacity w3-large"></i>
<i class="fa fa-instagram w3-hover-opacity w3-large"></i>
<i class="fa fa-snapchat w3-hover-opacity w3-large"></i>
<i class="fa fa-pinterest-p w3-hover-opacity w3-large"></i>
<i class="fa fa-twitter w3-hover-opacity w3-large"></i>
<i class="fa fa-linkedin w3-hover-opacity w3-large"></i>
</div>
</div>
</footer>
<div class="w3-black w3-center w3-padding-24">
Powered by - :
<a href="https://sites.google.com/view/aase7en/home" title="Anothai" target="_blank" class="w3-hover-opacity">Anothai Phasukkhan</a>
</div>
<!-- End page content -->
</div>
<!-- Newsletter Modal -->
<div id="newsletter" class="w3-modal">
<div class="w3-modal-content w3-animate-zoom" style="padding:32px">
<div class="w3-container w3-white w3-center">
<i onclick="document.getElementById('newsletter').style.display='none'" class="fa fa-remove w3-right w3-button w3-transparent w3-xxlarge"></i>
<h2 class="w3-wide">NEWSLETTER</h2>
<p>Join our mailing list to receive updates on new arrivals and special offers.</p>
<p><input class="w3-input w3-border" type="text" placeholder="Enter e-mail"></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>
<script>
// Anothai add functions
function JeansFunc() {
var x = document.getElementById("JeansAcc");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}
function DressesFunc() {
var x = document.getElementById("DressesAcc");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}
function ShirtsFunc() {
var x = document.getElementById("ShirtsAcc");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}
function JacketsFunc() {
var x = document.getElementById("JacketsAcc");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}
function GymwearFunc() {
var x = document.getElementById("GymwearAcc");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}
function BlazersFunc() {
var x = document.getElementById("BlazersAcc");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}
function ShoesFunc() {
var x = document.getElementById("ShoesAcc");
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("shirtsBtn").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>
Google Sites
Report abuse