What is this project? Basically it's a simple CSS product card. You can use it to display information about any product you want to sell. It has 2 CTA's (Call-To-Action) which is the add to cart and buy now buttons.
For this project, paste the code below in your HTML file:
<!-- Created by CodingPorium,2021. Visit https://youtube.com/c/CodingPorium for more tutorials with free source code --><!DOCTYPE html>
<html>
<head>
<title>Cool CSS Product Cards UI using HTML & CSS | CodingPorium</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
box-sizing: border-box;
}
::selection{
color:white;
background: #5f0fff;
}
body{
font-family: poppins;
background-color: #5F0FFF;
text-align: center;
}
.card{
color:black;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
max-width: 300px;
margin:auto;
background-color: white;
text-align: center;
transition:transform 0.5s;
}
.card:hover{
transform:scale(1.1);
}
.price{
color:gray;
font-size: 22px;
}
.card button{
font-family: poppins;
border:none;
outline:0;
padding:12px;
color:black;
background-color:gold;
text-align:center;
cursor:pointer;
font-size:18px;
width:50%;
transition:0.3s;
user-select:none;
}
.card button:hover{
background-color: #bbb;
}
</style>
</head>
<body>
<br>
<br>
<br>
<div class="card">
<img src="https://images.unsplash.com/photo-1515955656352-a1fa3ffcd111?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTZ8fHNob2VzfGVufDB8fDB8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Shoes" style="width:100%;">
<h1>Sport Shoes</h1>
<p class="price">$79.99</p>
<p>Stylish blue shoes with ergonomic design. Installed with soft cotton layers inside and strong shoe soles for all sports activites.</p>
<p><a href="#"><button><i class="fas fa-cart-plus"></i>Go to cart</button></a><a href="#"><button>Buy now!</button></a></p>
</div>
</body>
</html>
And that's all. Thanks for reading and I hope this project was useful.
Do subscribe to our Youtube channel to support us. Till the next one, goodbye!
Post a Comment