Cards can be a convenient means of displaying content that includes various objects, such as the tile, buttons, icons, etc... Designed to adapt to your content. It can include any type of custom element. It can be anything from business cards, and informative cards to even analytics cards, but the main point here is that adding a card on any site will instantly add that innovative and creative touch, there is certainly no denying that cards can be beneficial in more than one way.
On this day, we going to make a card like the below image with our source code included.
You might like
1. Making Multiple Carousels Per Page: https://reanfullstack.blogspot.com/2022/12/multiple-carousel-in-html-css-and.html
2. Making Burger Shop: https://reanfullstack.blogspot.com/2022/12/sticky-navigation-bar-in-html-css-with.html
First of all, you need a picture with no background before you make this shop card because it'll not affect our code and looks clean with the pretty theme.
Let's start
1. You need to create an HTML file and paste this starting section to the file
HTML START SECTION
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shop card</title>
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.2/font/bootstrap-icons.css">
</head>
<body>
<script src="./main.js"></script>
</body>
</html>2. And then copy and paste this HTML code paste in your file
HTML Markup
<div class="card">
<div class="con-img">
<img class="img" src="./shoes.png" alt="picture 1">
<img class="bg" src="./shoes.png" alt="picture 2">
</div>
<div class="con-star">
<i class="bi bi-star"></i>
</div>
<div class="con-text">
<h3>Training shoes</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
</div>
<div class="con-price">
120.22$
</div>
<div class="con-btn">
<button onclick="handleAdd(event)" class="add">Add to card</button>
<div class="con-input-btns">
<button onclick="plusLess(event, 'less')" class="less">
<i class="bi bi-dash"></i>
</button>
<input type="text" value="1">
<button onclick="plusLess(event, 'plus')" class="plus">
<i class="bi bi-plus"></i>
</button>
</div>
</div>
</div>After doing HTML you got like this
3. Paste this CSS code to your CSS file and go on to the next step
CSS Markup
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.card{
box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, .05);
padding: 15px;
border-radius: 35px;
width: 260px;
min-width: 260px;
position: relative;
margin: 0px 15px;
background-color: #fff;
scroll-snap-align: center;
transition: all .25s #fff;
border: 2px solid #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.add-active{
box-shadow: 0px 10px 30px 0px rgba(254, 160, 26, .2);
}
.add-active .add{
display: none;
}
.add-active .con-img img:not(.bg){
transform: scale(1.1);
}
.add-active .con-input-btns{
display: flex;
}
.con-star{
position: absolute;
right: 0;
top: 0;
margin: 30px;
font-size: 1.2rem;
}
.con-img{
width: 100%;
display: flex;
align-items: center;
justify-content: center;
height: 200px;
border-radius: 30px;
background-color: #f5f5f5;
}
.con-img img{
width: 250px;
z-index: 20;
transition: all .25s ease;
}
.con-img .bg{
position: absolute;
transform: translate(10px, 30px);
z-index: 10;
filter: blur(2px);
opacity: .4;
}
.con-text{
width: 100%;
padding: 10px 0px;
opacity: .7;
font-size: .8rem;
}
.con-text h3{
padding: 5px 0px;
}
.con-price{
width: 100%;
text-align: center;
font-weight: bold;
padding: 10px;
font-size: 1.1rem;
padding-top: 0;
}
.add{
width: 100%;
padding: 15px;
background: linear-gradient(130deg, #fdc527 0%, #fea01a 100%);
border: 0px;
border-radius: 20px;
color: #fff;
font-weight: bold;
font-size: 1rem;
cursor: pointer;
}
.con-input-btns {
display: flex;
align-items: center;
justify-content: center;
display: none;
}
.con-input-btns input{
padding: 10px;
flex: 1;
width: calc(100% - 100px);
height: 49px;
border: 0px;
border-bottom: 2px solid #f5f5f5;
text-align: center;
font-size: 1.3rem;
border-radius: 25px;
}
.con-input-btns button{
padding: 10px;
min-width: 49px;
height: 49px;
border: 0px;
border-radius: 20px;
background: linear-gradient(130deg, #fdc527 0%, #fea01a 100%);
color: #fff;
font-size: 1.4rem;
display: flex;
align-items: center;
justify-content: center;
transition: all .25s ease;
cursor: pointer;
}
Ok the last step is pasting this JavaScript code to your js file.
Javascript Markup
function handleAdd(event){
const card = event.target.closest('.card')
card.classList.add('add-active')
}
function plusLess(event, type){
const card = event.target.closest('.card')
const input = card.querySelector('input')
let oldVal = Number(input.value)
if(type == 'less'){
if(oldVal == 1){
card.classList.remove('add-active')
return
}
input.value = oldVal -= 1
}else{
input.value = oldVal += 1
}
}You done
