A Pen by J. James Rockhill

Thumbnail
This awesome code was written by rockhill, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright rockhill ©
  • HTML
  • CSS
  • JavaScript
    <div id="nav">
  <div class="wrapper">
    <h2>NOORDZEE</h2>
    <h3>MODEHUIS</h3>
    <hr class="spacer"/>
    <form class="searchbox">
      <input class="searchinput" placeholder="Wat ben je aan zoekt?"/>
      <input class="searchbutton" value="VINDEN" type="submit"/>
    </form>  
    <hr class="spacer"/>
    <ul>
      <li>overhemd</li>
      <li>broek</li>
      <li>jassen</li>
      <li>rokken</li>
      <li>schoenen</li>
      <li>ondergoed</li>
      <li>juwelen</li>
      <li>reukwerk</li>
    </ul>  
    <hr class="spacer"/>
       <div class="control">
           <div class="btn">
             mannen
           </div>
           <div class="btn active">
             Unisex
           </div>
           <div class="btn">
             vrouwen
           </div>
      </div>  
  </div>
</div>

<div id="center">
  <div id="container">
  <div id="demo">
  <ul>
    <li>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/155994/IDNggvx.jpg"></img>
      <div class="deshead">Jouer</div>
      <div class="destype">jurk shirt</div>
      <div class="desprice">120 €</div>
      <div class="descat">overhemd</div>
    </li>
    <li>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/155994/IDNggvx.jpg"</img>
      <div class="deshead">Kleine Tijd</div>
      <div class="destype">trui</div>
      <div class="desprice">160 €</div>
      <div class="descat">overhemd</div>
    </li>  
    <li>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/155994/IDNggvx.jpg"></img>
      <div class="deshead">Frontje</div>
      <div class="destype">jurk shirt</div>
      <div class="desprice">460 €</div>
      <div class="descat">overhemd</div>
    </li>  
    <li>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/155994/IDNggvx.jpg"></img>
      <div class="deshead">RAFREKT</div>
      <div class="destype">jurk shirt</div>
      <div class="desprice">220 €</div>
      <div class="descat">overhemd</div>
    </li>  
    <li>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/155994/IDNggvx.jpg"></img>
      <div class="deshead">Das Hollandisch</div>
      <div class="destype">trui</div>
      <div class="desprice">190 €</div>
      <div class="descat">overhemd</div>
    </li>  
    <li>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/155994/IDNggvx.jpg"></img>
      <div class="deshead">Pierre La Croix</div>
      <div class="destype">trui</div>
      <div class="desprice">210 €</div>
      <div class="descat">overhemd</div>
      <li>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/155994/IDNggvx.jpg"></img>
      <div class="deshead">Van Ryan</div>
      <div class="destype">t-shirt</div>
      <div class="desprice">90 €</div>
      <div class="descat">overhemd</div>
    </li>  
      <li>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/155994/IDNggvx.jpg"></img>
      <div class="deshead">Les Femmes</div>
      <div class="destype">trui</div>
      <div class="desprice">700 €</div>
      <div class="descat">overhemd</div>
    </li>  
      <li>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/155994/IDNggvx.jpg"></img>
      <div class="deshead">Oorsprong</div>
      <div class="destype">jurk shirt</div>
      <div class="desprice">550 €</div>
      <div class="descat">overhemd</div>
    </li>  
    </li>  
  </ul>
  </div>  
  </div>  
</div>

<div id="info">
  <div id="infowrap">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/155994/IDNggvx.jpg"></img>
    <div class="infohead">Oorsprong</div>
    <div class="infotype">jurk shirt</div>
    <div class="infoinfo">De en geworden gebeuren hellende gestookt of ik invallen. Er soorten uitvoer in is betaalt om woonden donkere meestal. Nu hoewel moeite geheel de buizen meende kedona.</div>
    <div class="infoprice">Kopen 550 €</div>
    <form id="colorsel" action="">
    <select name="Color">
    <option value="black">zwart</option>
    <option value="white">wit</option>
    <option value="creme">beige</option>
    <option value="lame">metaalachtig</option>
    </select>
    </form>
    <form id="sizesel" action="">
    <select name="Color">
    <option value="x-small">37</option>
    <option value="small">38</option>
    <option value="medium">39</option>
    <option value="large">40</option>
    <option value="xlarge">41</option>
    <option value="xxlarge">42</option>  
    </select>
    </form>
  </div>
</div>

/*Downloaded from https://www.codeseek.co/rockhill/a-pen-by-j-james-rockhill-Fygrc */
    @import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,700,300,200);

html { 
  height: 100%; 
}

body{
  font: 200 14px Yanone Kaffeesatz,sans-serif;
  color: rgb(30,30,30);
  margin: 0;
  padding: 0;
  height: 100%;
  line-height: 0;
  letter-spacing:1.45;
  text-rendering: optimizeLegibility;
}

h2{
  font-size: 40px;
  font-weight:700;
}

h3{
  font-size: 21px;
  font-weight: 300;
}

.spacer{
  border:none;
  background-color: none;
  margin: 25px 0;
}

#nav{
  background-color:#fff;
  width: 20%;
  height: 100%;
  float: left;
  padding: 15px;
  box-sizing: border-box;
  z-index: 1000;
  box-shadow: 5px 0px 10px rgba(30,30,30,0.6);
  position:relative;
}

#nav .wrapper{
  text-align: right;
  width: 100%;
}

.searchbox{
display: flex;
height: auto;  
}

.searchinput{
width: 75%;
border:none;
border-top:thin dotted rgb(30,30,30);
border-left:thin dotted rgb(30,30,30);
border-bottom:thin dotted rgb(30,30,30);  
box-sizing: border-box;
margin:0;
font: 200 14px Yanone Kaffeesatz,sans-serif; 
padding: 5px 8px;  
}

.searchbutton{
width:25%;  
padding: 5px 3px;
border: none;
background-color: rgb(30,30,30);
color: white;  
box-sizing: border-box;
margin:0;
font: 400 14px Yanone Kaffeesatz,sans-serif; 
}

#center{
  width: 50%;
  height: 100%;
  float: left;
  padding: 15px 15px 15px 0px;
  box-sizing: border-box;
  overflow-y: scroll;
  z-index: 1;
  background-image:url("http://www.myfreetextures.com/wp-content/uploads/2014/10/white-fur-texture.jpg");
  background-attachment:fixed;
  background-position:center;
  background-size:auto;
}

#info{
  background-color:white;
  width: 30%;
  height: 100%;
  float:left;
  padding: 15px;
  box-sizing: border-box;
  z-index: 4;
  box-shadow: -5px 0px 10px rgba(30,30,30,0.6);
}

#nav ul{
  list-style: none;
  line-height: 1.25;
  text-transform: uppercase;
  font-size: 18px;
  font-weight: 300;
}

.control{
  margin: 0 auto;
  width: 100%;
  text-transform: uppercase;
}

.control .btn{
  display: inline-block;
  text-align: right;
  padding: 5px 10px;
  height: 100%;
  width: 100%;
  color: rbg(30,30,30);
  cursor: pointer;
  transition: color .3s ease;
  box-sizing: border-box;
  font: 300 18px Yanone Kaffeesatz,sans-serif; 
}

.control .btn:hover{
  background-color: rgb(30,30,30);
  color: white;
}

.control .btn.active{
  background-color: rgb(30,30,30);
  color: white;
  font: 900 18px Yanone Kaffeesatz,sans-serif; 
}

.control .btn:first-child{
}

.control .btn:last-child{
}

#demo container{
    position: relative;
    width: 100%;
    margin: 0 px;
    box-sizing: border-box;
    clear: both;
    overflow: auto;
    content: '';
    display: block;
}

#demo ul{
  list-style: none;
}

#demo ul li{
  width: 30%;
  display: inline-block;
  box-sizing: border-box;
  margin: 0 15px 15px 0px;
  background-color: #fff;
  text-align: center;
  vertical-align: top;
  height: auto;
  padding: 15px 0px;
}

#demo ul li img{
  width: 100%;
}

.deshead{
  font: 900 24px Yanone Kaffeesatz,sans-serif;
  line-height: 1.3;
}

.destype{
  font: 300 15px Yanone Kaffeesatz,sans-serif;
  line-height: 1;
  text-transform: uppercase;
}

.desprice{
  font: 900 30px Yanone Kaffeesatz,sans-serif;
  line-height: 1.66;
  text-transform: uppercase;
}

.descat{
  font: 300 12px Yanone Kaffeesatz,sans-serif;
  line-height: 1.2;
  text-transform: uppercase;
}

#info img{
  width:100%;
  margin-bottom: 15px;
}

#infowrap{
  padding:15px;
}

.infohead{
  font: 900 32px Yanone Kaffeesatz,sans-serif;
  line-height: 1.3;
}

.infotype{
  font: 300 18px Yanone Kaffeesatz,sans-serif;
  line-height: 1;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.infoprice{
  font: 900 18px Yanone Kaffeesatz,sans-serif;
  text-transform: uppercase;
  text-align: center;
  line-height: 40px;
  padding: 0 18px;
  background-color: rgb(30,30,30);
  color: white;
  display: inline-block;
  float: right;
  margin-top: 30px;
  margin-left: 15px;
}

#colorsel{
  font: 900 18px Yanone Kaffeesatz,sans-serif;
  text-transform: uppercase;
  text-align: center;
  line-height: 40px;
  color: white;
  display: inline-block;
  float: left;
  margin-top: 30px;
}

#sizesel{
  font: 900 18px Yanone Kaffeesatz,sans-serif;
  text-transform: uppercase;
  text-align: center;
  line-height: 40px;
  color: white;
  display: inline-block;
  float: left;
  margin-top: 30px;
  margin-left: 15px;
}

.infoinfo{
  font: 300 18px Yanone Kaffeesatz,sans-serif;
  line-height: 1.33;
}



/*Downloaded from https://www.codeseek.co/rockhill/a-pen-by-j-james-rockhill-Fygrc */
      $('#center')
  .niceScroll({cursorcolor:"rgba(30,30,30,0.8)",cursorborder:"5px solid transparent",cursorwidth:"8px",autohidemode:false});

$('.btn').bind('click', function(){
  $('.btn').each(function(){
    $(this).removeClass('active');
  });
  $(this).addClass('active');
});



Comments