<div class="con">
<div class="card">
<div class="product-display">
<div id="magnify-btn">
<img src="https://image.flaticon.com/icons/svg/70/70376.svg" alt="">
</div>
<img id="product-img" src="https://burst.shopifycdn.com/photos/jacket-in-blues_925x.progressive.jpg" alt="">
</div>
<div class="card-content">
<h1>Two Tone </h1>
<h1>Nylon Jacket</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, aliquam dolor?</p>
<div class="price">
<p>price: </p><h3>$59.00</h3>
</div>
<div class="size-choices">
<h4 class="h4-title">Sizes</h4>
<div class="choices">
<div class="xs">xs</div>
<div class="s">s</div>
<div class="m">m</div>
<div class="l">l</div>
<div class="xl">xl</div>
<div class="xxl">xxl</div>
</div>
<div class="underline"></div>
</div>
<div class="color-choices">
<h4 class="h4-title">Colors</h4>
<div class="choices">
<div class="blue-black">
<div class="blue"></div>
<div class="black"></div>
</div>
<div class="orange-grey">
<div class="orange"></div>
<div class="grey"></div>
</div>
<div class="green-yellow">
<div class="green"></div>
<div class="yellow"></div>
</div>
<div class="red-black">
<div class="red"></div>
<div class="black"></div>
</div>
</div>
<!-- <div class="underline"></div> -->
</div>
<div class="btn-row">
<div id="shopping-cart-btn">
<img src="https://image.flaticon.com/icons/svg/25/25619.svg" alt="">
</div>
<div id="buy-btn">
<h3>Buy</h3>
</div>
</div>
</div>
</div>
</div>* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body {
width: 100%;
height: 100vh;
font-family: 'Teko', sans-serif;
}
// FLEX CENTER X AND Y
.con,
.product-display,
#shopping-cart-btn,
#buy-btn,
.size-choices .choices > * {
display: flex;
justify-content: center;
align-items: center;
}
// POINTER CURSOR
#magnify-btn,
#shopping-cart-btn,
#buy-btn,
.size-choices .choices > * ,
.color-choices .choices {
cursor: pointer;
}
// ANIMATED UNDERLINES
.size-choices, .color-choices {
position: relative;
.underline {
position: absolute;
margin-top: 5px;
width: calc(22px / 2);
height: 3px;
background-color: white;
transition: all ease 0.3s;
}
}
.con {
width: 100%;
height: 100%;
}
.card {
position: relative;
display: flex;
justify-content: flex-start;
min-width: 700px;
width: 700px;
height: 450px;
background: radial-gradient(rgb(50, 50, 50), black);
box-shadow: 0 0 300px rgba(0, 0, 0, 0.3);
h4.h4-title {
text-decoration: underline;
margin-bottom: 5px;
}
.product-display {
position: relative;
width: 55%;
height: 100%;
overflow: hidden;
#magnify-btn {
position: absolute;
top: 0;
right: 0;
width: 15px;
height: 15px;
margin-top: 20px;
margin-right: 20px;
img { height: 100%; }
z-index: 3;
}
img {
width: 185%;
height: auto;
transition: transform ease-out 0.4s;
}
}
.card-content {
display: flex;
flex-direction: column;
justify-content: center;
width: 45%;
padding: 40px;
color: white;
h1 {
font-size: 30px;
}
p {
margin: 20px 0;
font-family: sans-serif;
font-size: 11px;
font-weight: 400;
}
.price {
display: flex;
// border: 1px solid white;
align-items: center;
p {margin-right: 10px;}
}
.size-choices {
display: inline-block;
// border: 1px solid white;
.choices {
display: flex;
flex-direction: row;
align-items: flex-start;
& > * {
width: 22px;
height: 22px;
font-family: sans-serif;
font-size: 11px;
font-weight: 700;
background-color: white;
border-radius: 15px;
margin-right: 10px;
color: black;
}
}
// .underline {
// position: absolute;
// margin-top: 5px;
// width: calc(22px / 2);
// height: 3px;
// background-color: white;
// transition: all ease 0.3s;
// }
}
.color-choices {
display: inline-block;
// flex-direction: column;
margin-top: 20px;
margin-bottom: 40px;
.choices {
display: flex;
justify-content: flex-start;
.blue-black,
.orange-grey ,
.green-yellow,
.red-black {
display: flex;
width: 40px;
height: 15x;
margin-right: 10px;
transition: all ease-out 0.3s;
&:hover {
transform: translateY(-3px);
}
&:last-child {
margin: 0;
}
& > * {
width: 20px;
height: 15px;
}
}
.blue-black {
.blue {background-color: lightblue;}
.black {background-color: black;}
}
.orange-grey {
.orange {background-color: orange;}
.grey {background-color: grey;}
}
.green-yellow {
.green {background-color: green;}
.yellow {background-color: yellow;}
}
.red-black {
.red {background-color: red;}
.black {background-color: black;}
}
}
}
.btn-row {
display: flex;
justify-content: center;
.shopping-cart-btn, .buy-btn {
box-shadow: 0 5px 30px rgba(0, 0, 0, 0.6);
}
#shopping-cart-btn {
width: 40px;
height: 40px;
background-color: white;
border-radius: 40px;
margin-right: 20px;
img {
height: 50%;
width: auto;
}
}
#buy-btn {
padding: 0 40px;
height: 40px;
border-radius: 40px;
background-color: white;
color: black;
}
}
// BTNS HOVER
#shopping-cart-btn,
#buy-btn,
.size-choices .choices > * {
transition: all ease-out 0.3s;
&:hover {
background-color: limegreen;
transform: translateY(-3px);
}
}
}
}console.clear();
const $ = elem => document.querySelector(elem);
const $$ = elems => {
return Array.prototype.slice
.call(document.querySelectorAll(elems));
};
const gbcr = elem => elem.getBoundingClientRect();
// add zoom hover on display
const zoomMod = (() => {
const zoomState = {
zoom: false
};
const magnifyBtn = $('#magnify-btn');
const productDisplay = $('.product-display');
const displayImg = $('#product-img');
let {zoom} = zoomState;
const magnifyMovement = e => {
let {left, height, width} = productDisplay.getBoundingClientRect();
let x = e.clientX - left;
let y = e.clientY;
console.log(x)
displayImg.style.transform =
`translate(${(width-x)*0.6}px, ${(height-y)*0.6}px) scale(2,2)`;
// this needs work
// favors one side
// should have equal symetery
//might have something to do with the scale
};
const magnifyImage = () => {
const productDisplay = $('.product-display');
productDisplay.addEventListener('mousemove', magnifyMovement);
};
magnifyBtn.onclick = e => {
const prevState = zoom;
zoom = !prevState;
zoom ?
(()=> {
displayImg.style.transform = 'translate(0,0) scale(2, 2)';
setTimeout(magnifyImage, 400)
})() :
(()=> {
displayImg.style.transform = 'translate(0,0) scale(1, 1)';
productDisplay.removeEventListener('mousemove', magnifyMovement);
})(); // maybe removeEventListener
};
})();
// selected choices have border or color change to indicate selection
// hover effects
const movingUnderline = (() => {
/*=============== SIZE BTNS ===============*/
const sizeUnderline = $('.size-choices .underline'),
sizeBtns = $$('.size-choices .choices > *');
const btnWidth = a => gbcr(Array.isArray(a) ? a[0] : a).width;
const centerOffset = (btnWidth(sizeBtns) / 2) - (gbcr(sizeUnderline).width / 2) - 1;
sizeUnderline.style.left = centerOffset + 'px';
// needs adjustments
const animSizeBtnsUnderline = e => {
const btn = e.target;
let leftAmt =
sizeBtns.indexOf(btn) *
(btnWidth(sizeBtns) + 10/*margin*/);
sizeUnderline.style.left =
(leftAmt + centerOffset) + 'px';
};
sizeBtns
.map(btn => btn
.addEventListener('click', animSizeBtnsUnderline));
const commentCon = () => {
/*=============== COLOR CHOICE BTNS ===============*/
// const colorUnderline = $('.color-choices .underline'),
// colorBtns = $$('.color-choices .choices > *');
// const colorCenterOffset = (btnWidth(colorBtns) / 2) - (gbcr(colorUnderline).width / 2) - 1;
// colorUnderline.style.left = colorCenterOffset + 'px';
// const animColorUnderline = e => {
// const btn = e.target;
// let leftAmt =
// colorBtns.indexOf(btn) *
// (btnWidth(colorBtns) + 10/*margin*/);
// colorUnderline.style.left =
// (leftAmt + colorCenterOffset) + 'px';
// console.log(colorUnderline.style.left)
// };
// colorBtns
// .map(btn => btn
// .addEventListener('click', animColorUnderline));
};
})();
// possible create a animated alert like a
// checkbox to confirm buy or shopping cart add
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.