E commerce website from dribbble

In this example below you will see how to do a E commerce website from dribbble with some HTML / CSS and Javascript

https://dribbble.com/shots/3398095-Places/attachments/741451

Thumbnail
This awesome code was written by -J0hn-, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright -J0hn- ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!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 &copy; 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";
});

Comments