<!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);
}
}
});
});