<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>E commerce website from dribbble </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<nav id="sideNav">
<button class="fa fa-times" id="close"></button>
<div>
<a href="#">home</a>
<a href="#">mens</a>
<a href="#">womens</a>
<a href="#">goods</a>
<a href="#">brands</a>
<a href="#">blog</a>
<a href="#">about</a>
<a href="#">contact</a>
<a href="#">shipping</a>
</div>
</nav>
<div id="container">
<header>
<nav id="mainNav">
<button class="fa fa-bars open"></button>
<div>
<a href="#"><i class="fa fa-search"></i></a>
<a href="#"><i class="fa fa-shopping-bag"></i></a>
</div>
</nav>
<div class="cta">
<h1>explore farther</h1>
<button>shop now</button>
</div>
</header>
<main>
<section class="row">
<a href="#">
<figure class="col-md-3 col-sm-6">
<img src="https://www.stormykromer.com/images/55210-305_L.png" class="img-fluid"/>
<figcaption>
<a href="#">clothes <i class="fa fa-long-arrow-right"></i></a>
</figcaption>
</figure>
</a>
<a href="#">
<figure class="col-md-3 col-sm-6">
<img src="http://pngimg.com/upload_small/boots/boots_PNG7815.png" class="img-fluid"/>
<figcaption>
<a href="#">shoes <i class="fa fa-long-arrow-right"></i></a>
</figcaption>
</figure>
</a>
<figure class="last col-md-6">
<img src="https://images.pexels.com/photos/106936/pexels-photo-106936.jpeg?h=350&auto=compress&cs=tinysrgb" class="img-fluid"/>
<figcaption>
<h3>15% off<br> all home decor</h3>
<button>shop now</button>
</figcaption>
</figure>
</section>
<!-- <br> -->
<section class="row">
<figure class="col-md-3 col-sm-6">
<img src="http://pngimg.com/uploads/jacket/jacket_PNG8048.png" class="img-fluid"/>
</figure>
<figure class="col-md-3 col-sm-6">
<img src="http://pngimg.com/uploads/glasses/glasses_PNG31.png" class="img-fluid"/>
</figure>
<figure class="col-md-3 col-sm-6">
<img src="https://www.stormykromer.com/images/55210-305_L.png" class="img-fluid"/>
</figure>
<figure class="col-md-3 col-sm-6">
<img src="http://www.wigwam.com/products/images/Product/large/F4274_1_.png" class="img-fluid"/>
</figure>
<button>SHOP NOW</button>
</section>
</main>
<footer>
<ul>
<li>home</li>
<li>mens</li>
<li>womens</li>
<li>goods</li>
<li>brands</li>
<li>blog</li>
</ul>
<p><small>Copyright © 2016</small></p>
</footer>
</div>
<script src="js/index.js"></script>
</body>
</html>
/*Downloaded from https://www.codeseek.co/-J0hn-/e-commerce-website-from-dribbble-vxPPwB */
body {
overflow-x: hidden;
}
#sideNav {
background: #1a1a1a;
width: 0;
height: 100vh;
overflow-x: hidden;
position: fixed;
z-index: 1;
top: 0;
left: 0;
transition: .45s ease;
}
#sideNav #close {
outline: 0;
border: none;
background: none;
color: #737373;
padding: .70em;
font-size: 1.5em;
margin-bottom: .50em;
cursor: pointer;
}
#sideNav #close:hover {
color: white;
}
#sideNav div {
display: flex;
flex-direction: column;
}
#sideNav div a {
text-decoration: none;
color: #737373;
font-weight: bold;
text-transform: uppercase;
padding: .80em 0 .80em 2em;
cursor: pointer;
}
#sideNav div a:nth-child(1n+7) {
text-transform: capitalize;
font-weight: 200;
}
#sideNav div a:hover {
color: white;
}
#container {
background: white;
transition: .45s;
}
#container header {
display: flex;
flex-direction: column;
height: 600px;
background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.3)), url("https://static.pexels.com/photos/4827/nature-forest-trees-fog.jpeg") no-repeat center center;
background-size: cover;
padding: 1em;
}
#container header #mainNav {
display: flex;
justify-content: space-between;
align-items: center;
}
#container header #mainNav .open {
outline: 0;
background: none;
border: 0;
color: rgba(255, 255, 255, 0.7);
font-size: 1.5em;
cursor: pointer;
}
#container header #mainNav .open:hover {
color: #666666;
}
#container header #mainNav .fa-search,
#container header #mainNav .fa-shopping-bag {
margin: .45em;
padding: .60em;
color: rgba(255, 255, 255, 0.7);
}
#container header #mainNav .fa-search:hover,
#container header #mainNav .fa-shopping-bag:hover {
color: #666666;
}
#container header .cta {
text-transform: uppercase;
margin: auto 0;
text-align: center;
color: rgba(255, 255, 255, 0.6);
}
#container header .cta h1 {
letter-spacing: 2px;
margin-bottom: .80em;
}
#container header .cta button {
background: 0;
color: white;
border: solid 3px rgba(255, 255, 255, 0.5);
text-transform: uppercase;
padding: .80em 2em;
font-weight: bold;
}
#container main section figure {
margin: 0;
background: #f0f0f0;
position: relative;
}
#container main section figure img {
padding: 2em;
}
#container main section figure figcaption {
position: absolute;
bottom: 0;
left: 0;
background: white;
padding: 1em 1.5em;
}
#container main section figure figcaption a {
text-decoration: none;
color: black;
text-transform: uppercase;
font-size: .85em;
font-weight: bold;
}
#container main section figure:hover {
background: #e6e6e6;
}
#container main section .last {
padding: 0;
}
#container main section .last img {
padding: 0;
width: 100%;
}
#container main section .last figcaption {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: rgba(0, 0, 0, 0.6);
color: rgba(255, 255, 255, 0.8);
text-transform: uppercase;
text-align: center;
height: 100%;
width: 100%;
}
#container main section .last figcaption button {
background: none;
color: white;
text-transform: uppercase;
padding: .50em 1.2em;
border: solid 2px rgba(255, 255, 255, 0.5);
margin-top: 1em;
cursor: pointer;
}
#container main section:nth-of-type(2) {
margin-bottom: 3em;
}
#container main section:nth-of-type(2) figure {
background: white;
cursor: pointer;
}
#container main section:nth-of-type(2) figure:hover {
background: #e6e6e6;
}
#container main section:nth-of-type(2) button {
font-weight: bold;
border: none;
background: none;
border: solid 2px rgba(0, 0, 0, 0.5);
margin: 1em auto 0;
padding: .50em 1.4em;
cursor: pointer;
}
#container footer {
background: #cccccc;
padding: 2em 0 .70em;
margin: 0;
height: 100%;
}
#container footer ul {
list-style: none;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#container footer ul li {
text-transform: uppercase;
margin: 0 .80em;
padding: .50em;
font-weight: bold;
color: rgba(0, 0, 0, 0.4);
cursor: pointer;
}
#container footer ul li:hover {
color: black;
}
#container footer p {
text-align: center;
color: #8c8c8c;
margin-bottom: auto;
}
@media (max-width: 575px) {
#container {
margin-left: 0;
}
section:nth-of-type(1) figure:nth-of-type(-1n+2) {
padding: 3.5em;
}
section:nth-of-type(2) figure {
padding: 3.6em;
}
}
@media (max-width: 375px) {
footer ul {
flex-direction: column;
align-items: center;
}
}
/*Downloaded from https://www.codeseek.co/-J0hn-/e-commerce-website-from-dribbble-vxPPwB */
var openBtn = document.querySelector(".open");
var closeBtn = document.querySelector("#close");
var container = document.querySelector("#container");
var nav = document.querySelector("#sideNav");
openBtn.addEventListener("click", function(){
nav.style.width = "220px";
// container.style.marginLeft = "220px";
// this.style.display = "none";
});
closeBtn.addEventListener("click", function(){
nav.style.width = "0";
// container.style.marginLeft = "0";
// openBtn.style.display = "block";
});
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
Font Awesome
Twitter Bootstrap
Normalize
