A Pen by John

undefined

Inspired by Filip Danisko pen http://codepen.io/fdanisko/pen/VadXXq?editors=0010

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>A Pen by  John</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="item">
  <nav>
    <div class="icon">
  <div class="space top"></div>
  <div class="space middle"></div>
  <div class="space bottom"></div>
</div>
  </nav>
  <h3>Integer nec porttitor</h3>
<!--   <h3 id="price">$35.00</h3>
  <a href="#">free shipping</a> -->
  <div class="img">
    <img src="https://sc01.alicdn.com/kf/HTB1vHGhFpXXXXc6bpXXq6xXFXXX0/220128135/HTB1vHGhFpXXXXc6bpXXq6xXFXXX0.jpg">
  </div><!--img end-->
  <div class="flex">
    <h3 id="price">$35.00</h3>
    <a href="#">free shipping</a>
  </div>
      <p>color</p>
  <div class='color-picker'>
    <div class="border">
      <div class="color black"></div>
    </div>
    <div class="border">
      <div class="color red"></div>
    </div>
    <div class="border">
      <div class="color navy"></div>
    </div>
  </div><!--color-picker end-->
  <p>size</p>
  <div class="size-picker">
    <div class="border size m">m</div>
    <div class="border size l">l</div>
    <div class="border size xl">xl</div>
    <div class="border size xxl">xxl</div>
  </div><!--size-picker end-->
  <div class="amount">
  <a href="#" class="fa fa-minus"></a>
  <span><span id="total"></span> Qty.</span>
  <a href="#" class="fa fa-plus"></a>
</div><!--amount-->
  <a href="#" id="cart-btn"><i class="fa fa-shopping-cart"></i> add to cart</a>
</div><!--item end-->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/-J0hn-/a-pen-by-john-oBBpgq */
@import url("https://fonts.googleapis.com/css?family=Arsenal");
body {
  height: 100%;
  background: linear-gradient(20deg, lightgray, navy);
  font-family: sans-serif;
  display: flex;
  justify-content: center;
}

nav {
  border-bottom: solid 1px lightgray;
  margin-bottom: .50em;
  padding: 0 .60em;
}
nav .icon {
  border: solid 1px transparent;
  cursor: pointer;
  width: 25px;
  height: 30px;
}
nav .icon .top {
  height: 2px;
  background: black;
}
nav .icon .middle {
  height: 2px;
  background: black;
}
nav .icon .bottom {
  height: 2px;
  width: 70%;
  background: black;
}
nav .icon .space {
  margin: .30em 0;
}

.icon:hover .space {
  background: #0096c8;
}

.item {
  background: white;
  padding: .50em 0 .90em 0;
  margin-bottom: 1em;
  width: 340px;
}
.item h3 {
  text-transform: capitalize;
  text-align: center;
  font-family: 'Arsenal', sans-serif;
  font-weight: 200;
  margin: 0;
}
.item #price {
  color: #0096c8;
}
.item a {
  color: gray;
  text-transform: capitalize;
  font-size: .80em;
  display: block;
  text-align: center;
  margin-bottom: .40em;
  transition: .25s;
}
.item a:hover {
  color: #0096c8;
}

.flex {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: 'Arsenal', sans-serif;
  padding: 0 1.5em;
}
.flex h3 {
  font-size: 1.4em;
}

.img {
  overflow: hidden;
  height: 350px;
  margin: .40em auto .80em auto;
  box-shadow: 0 3px 15px 0 gray;
}
.img img {
  width: 100%;
  height: 100%;
}

p {
  width: 60px;
  margin: .8em auto;
  text-align: center;
  color: gray;
  font-size: .90em;
  text-transform: uppercase;
  border-bottom: solid 1px lightgray;
}

.color-picker .border {
  display: flex;
  justify-content: center;
  align-items: center;
}

.color-picker {
  display: flex;
  justify-content: space-around;
  margin: auto;
  width: 120px;
  margin-top: .20em;
}
.color-picker .border {
  position: relative;
  cursor: pointer;
  width: 30px;
  height: 30px;
  background: white;
  border: solid 2px lightgray;
  border-radius: 50%;
}
.color-picker .border .black {
  width: 20px;
  height: 20px;
  background: black;
  border-radius: 50%;
}
.color-picker .border .red {
  width: 20px;
  height: 20px;
  background: red;
  border-radius: 50%;
}
.color-picker .border .navy {
  width: 20px;
  height: 20px;
  background: navy;
  border-radius: 50%;
}

/***************
    SIZE
***************/
.size-picker {
  padding: 0 4em;
  display: flex;
  justify-content: space-around;
  margin: auto;
}

.size-picker .border {
  display: flex;
  justify-content: center;
  align-items: center;
}

.size-picker .border {
  width: 25px;
  height: 25px;
  background: white;
  border: solid 2px lightgray;
  border-radius: 50px;
  color: gray;
  cursor: pointer;
  font-size: .95em;
  padding: .50em;
  text-transform: uppercase;
}
.size-picker .border:hover {
  border-color: gray;
}

.border {
  transition: .25s;
}

.amount a {
  text-decoration: none;
  color: #0096c8;
  padding: 10% 0;
  flex: 1;
}

.amount {
  border: solid 1px lightgray;
  height: 50px;
  width: 200px;
  border-radius: 50px;
  display: flex;
  justify-content: space-around;
  align-items: baseline;
  text-align: center;
  overflow: hidden;
  margin: 2em auto 1em auto;
}

.amount span {
  flex: 2;
  color: #00aac8;
}

/***********
  BUTTON
***********/
#cart-btn {
  text-decoration: none;
  background: #00aac8;
  color: white;
  font-family: sans-serif;
  text-transform: uppercase;
  width: 150px;
  padding: 1em 2em;
  border-radius: 50px;
  display: block;
  margin: auto;
}
#cart-btn:hover {
  opacity: .8;
}

/**************************
SIZE PICKED HIGHLIGHT BORDER
***************************/
.size-picker .border.highlight {
  color: #78aac8;
  border-color: #78aac8;
}

/****************************
COLOR PICKED HIGHLIGHT BORDER
*****************************/
.border.black-border {
  border-color: black;
}

.border.red-border {
  border-color: red;
}

.border.navy-border {
  border-color: navy;
}


/*Downloaded from https://www.codeseek.co/-J0hn-/a-pen-by-john-oBBpgq */

$(document).ready(function(){
  var count = 1;
$('#total').text(count);
  
  function highlightColor(){
    if($(this).hasClass('black')){
      $('.border').removeClass('red-border navy-border');
      $(this).parent().addClass('black-border');
    } else if($(this).hasClass('red')){
      $('.border').removeClass('black-border navy-border');
              $(this).parent().addClass('red-border');
              } else if($(this).hasClass('navy')){
                $('.border').removeClass('red-border black-border');
                        $(this).parent().addClass('navy-border');
                        }
  }
  
  function highlightSize(){
    if($(this).hasClass('m')){
      $(this).prevAll().removeClass('highlight');
      $(this).nextAll().removeClass('highlight');
       $(this).addClass('highlight');
       } else if($(this).hasClass('l')){
                 $(this).prevAll().removeClass('highlight');
                 $(this).nextAll().removeClass('highlight');
                 $(this).addClass('highlight');
                 } else if($(this).hasClass('xl')){
                     $(this).prevAll().removeClass('highlight');
                    $(this).nextAll().removeClass('highlight');
                     $(this).addClass('highlight');
                 } else if($(this).hasClass('xxl')){
                           $(this).prevAll().removeClass('highlight');
                            $(this).nextAll().removeClass('highlight');
                             $(this).addClass('highlight');
                           }
  }
  
  // will highlight to it's corresponding color
  $('.color').on('click',highlightColor);
  
  // shirt size will hightlight when the user clicks
  $('.size').on('click',highlightSize);
  
  // increment/decrement
  $('.amount').on('click', 'a', function(e) {
    e.preventDefault();
    if ($(this).hasClass('fa-plus')) {
      if (count < 10) {
        count++;
        $('#total').text(count);
      }
    } else if ($(this).hasClass('fa-minus')) {
      if (count > 1) {
        count--;
        $('#total').text(count);
      }
    }
  });
});

Comments