Skip to content

Instantly share code, notes, and snippets.

@NSAKGBM16CIA
Created March 7, 2023 21:09
Show Gist options
  • Save NSAKGBM16CIA/4985369ba2b628ef609a059e6e517500 to your computer and use it in GitHub Desktop.
Save NSAKGBM16CIA/4985369ba2b628ef609a059e6e517500 to your computer and use it in GitHub Desktop.
Day 002 - Product Card
<div class="product">
<div class="header">
<div class="back"></div>
</div>
<div class="main">
<div class="left">
<h1>Nook</h1>
<h2>Lounge chair</h2>
<h3>$320.00</h3>
<img src="http://www.design.si.it/wp-content/uploads/2018/02/Sedia-di-design-nordico-legno-polipropilene-e-cuscino-grigio.png" alt="" />
<img src="https://banner2.cleanpng.com/20180403/gce/kisspng-eames-lounge-chair-table-dining-room-furniture-modern-5ac3984e3543e8.8864625415227679502182.jpg"/>
</div>
<div class="right">
<p>Designer Karim Rashid continues to put his signature spin on all genres of design through various collaborations with top-notch companies. Another one to add to the win column is his work with Italian manufacturer Chateau d’Ax.</p>
<p>In stock. <a href="">Buy Extended Warranty</a></p>
<p>
<span class="fa fa-star yellow"></span>
<span class="fa fa-star yellow"></span>
<span class="fa fa-star yellow"></span>
<span class="fa fa-star yellow"></span>
<span class="fa fa-star"></span>
<span>(4.67 - 172 reviews)</span>
</p>
<p class="quantity">QUANTITY <span class="fa fa-angle-left angle"></span><span id="qt">3</span><span class="fa fa-angle-right angle"></span></p>
</div>
</div>
<div class="footer">
<div class="left">
<p id="price">$960.00</p>
</div>
<div class="right">
<p>Add to Cart</p>
</div>
</div>
</div>
const arrows = document.querySelector('.quantity').querySelectorAll('.fa');
const handleChange = (elem)=>{
const qt = document.querySelector('#qt');
const total = document.querySelector('#price');
let value = parseInt(qt.innerText);
let classArr = Array.from(elem.classList);
if(/right/gi.test(classArr)) {
if(value!=9) value++;
else alert('Watch out! We\'ve got a badass over here!');
}
else {
if(value!=1) value--;
else alert('Watch out! We\'ve got a badass over here!');
}
qt.innerText = value;
total.innerText = '$'+(value*320);
}
const product = document.querySelector('.product');
const moveBox = (val)=>{
product.style.mozTransform =
product.style.msTransform =
product.style.webkitTransform =
product.style.transform = 'translateX('+val+'px)';
}
const back = document.querySelector('.back');
const spring = new rebound.SpringSystem();
let animation = spring.createSpring(60,3);
animation.addListener({
onSpringUpdate(spring){
let current = spring.getCurrentValue();
if(current > 1) spring.setEndValue(0);
let val = rebound.MathUtil.mapValueInRange(current,0,1,0,20);
moveBox(val);
}
})
back.addEventListener('click',()=>{
animation.setEndValue(1);
});
const arrArr = Array.from(arrows);
arrArr.forEach(elem=>{
elem.addEventListener('click',()=>{
handleChange(elem);
})
})
<script src="https://unpkg.com/rebound"></script>
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css);
//$senape: #bcbd31;
$senape:rgb(71, 190, 115);
$giallo:rgb(254,203,108);
$cubicBounce:cubic-bezier(0.68, -0.55, 0.265, 1.55);
body{
background:linear-gradient(to top, rgba(100,50,50,0.6), rgba(0,0,0,0.8)),url(https://www.atrafloor.com/app/uploads/2017/01/camo-camouflage-pattern-flooring-grey.jpg);
background-size:cover;
min-height:100vh;
font-family: 'Montserrat', sans-serif;
}
a {
text-decoration:none;
color: #3399ff;
}
#qt{
color:rgb(153,153,153);
}
p{
.fa[class~=angle]{
font-size:1.3rem;
position:relative;
top: 0.15rem;
margin:0 20px;
cursor: pointer;
color:rgb(216,216,216);
transition:all .5s;
&:hover{
color:$senape;
}
}
}
.yellow{
color: $giallo;
}
.product{
height:500px;
width:600px;
background:white;
position:relative;
left:calc(50% - 300px);
margin-top:calc(50vh - 250px);
&.action{
animation: bounce 1s $cubicBounce infinite;
}
.header{
height:40px;
position:relative;
padding:20px;
.back{
position:relative;
width:0px;
height:0px;
border-top: 30px solid $senape;
border-bottom: 30px solid transparent;
border-left: 30px solid $senape;
border-right: 30px solid transparent;
&:before{
content:"←";
position:absolute;
color:rgba(255,255,255,0.9);
font-size:1.3rem;
font-weight:bold;
top:-22px;
left:-22px;
}
}
}
.main{
padding:0 30px;
box-sizing: border-box;
.quantity{
margin-top:40px;
color: #333;
}
h1{
font-size:4.5rem;
-webkit-margin-before: 0;
-webkit-margin-after: 0;
margin: 0 -5px -15px;
color:#232e3a;
}
h2{
color:#999999;
-webkit-margin-before: 0;
-webkit-margin-after: 0;
margin: 0 0;
text-transform:uppercase;
}
h3{
color:#232e3a;
margin:0;
}
img{
max-width:90%;
margin-left:25px;
}
.left,
.right{
width:40%;
padding: 0 calc(5% - 1px);
}
.right{
color:#999;
font-size:.78rem;
line-height: 1.5;
}
}
.footer{
position:absolute;
bottom:0;
padding:5px 40px 5px 0;
width:calc(90% - 40px);
left:10%;
border-top: 1px solid #ccc;
.left{
p:before{
content:"Total Price";
text-transform:uppercase;
font-size:.7rem;
color:black;
position:absolute;
top:-12px;
width:200%;
}
}
p{
color:$senape;
position:relative;
font-size:1.5rem;
}
}
}
.left{
float:left;
}
.right{
float:right;
}
@keyframes bounce{
50%{
transform: translateX(10px);
}
}
@NSAKGBM16CIA
Copy link
Author

forked from codepen to use when making an e-shop

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment