Today, we’re diving into a fun and refreshing project: designing a Coca-Cola Product Card using just HTML and CSS. Whether you’re new to coding or a seasoned enthusiast, this project is perfect for adding a splash of creativity to your skillset.
We’ll use HTML to build the structure of our product card and CSS to style it with that classic Coca-Cola flair. This hands-on guide is not only simple but also engaging, offering a delightful experience as we recreate the iconic Coca-Cola vibe.
So, are you ready to infuse your coding practice with a hint of sweetness? Let’s get started and create a Coca-Cola Product Card that’s as vibrant and refreshing as the drink itself!
HTML
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CocaCola Product Card - codingstella </title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="card">
<div class="circle" style="--clr: #f40103">
<img src="http://codingstella.com/wp-content/uploads/2024/01/download-14.png" class="logo">
</div>
<div class="content">
<h2>CocoCola</h2>
<p>CocoCola is a refreshing beverage that quenches your thirst and tantalizes your taste buds. </br>Our secret blend of flavors.</p>
<a href="#">Explore More</a>
</div>
<img src="http://codingstella.com/wp-content/uploads/2024/01/download-15.png" class="product_img">
</div>
<!-- partial -->
</body>
</html>CSS
@import url("https://fonts.googleapis.com/css?famiyl=Poppins:200,300,400,500,600,700,800,900&display=swap");
* {
margin: 10;
padding-right: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #151515;
}
.card {
position: relative;
width: 350px;
height: 350px;
display: flex;
justify-content: center;
align-items: center;
transition: 0.5s;
transition-delay: 0.5s;
}
.card:hover {
width: 600px;
transition-delay: 0.5s;
}
.card .circle {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 20px;
display: flex;
justify-content: center;
align-items: center;
}
.card .circle::before {
content: "";
position: absolute;
top: 30;
left: 2;
right: 2;
width: 350px;
height: 350px;
border-radius: 50%;
background: #191919;
border: 8px solid var(--clr);
filter: drop-shadow(0 0 10px var(--clr)) drop-shadow(0 0 60px var(--clr));
transition: 0.5s, background 0.5s;
transition-delay: 0.75s, 1s;
}
.card:hover .circle::before {
transition-delay: 0.5s;
width: 100%;
height: 100%;
border-radius: 20px;
background: var(--clr);
}
.card .circle .logo {
position: relative;
width: 250px;
transition: 0.5s;
transition-delay: 0.5s;
}
.card:hover .circle .logo {
transform: scale(0);
transition-delay: 0s;
}
.card .product_img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0) rotate(315deg);
height: 300px;
transition: 0.5s ease-in-out;
}
.card:hover .product_img {
transition-delay: 0.75s;
top: 25%;
left: 72%;
height: 500px;
transform: translate(-50%, -50%) scale(1) rotate(15deg);
}
.card .content {
position: absolute;
width: 50%;
left: 20%;
padding: 20px 20px 20px 20px;
opacity: 0;
transition: 0.5s;
visibility: hidden;
}
.card:hover .content {
transition-delay: 0.75s;
opacity: 1;
visibility: visible;
left: 20px;
}
.card .content h2 {
color: #fff;
text-transform: uppercase;
font-size: 2.5em;
line-height: 1em;
}
.card .content p {
color: #fff;
}
.card .content a {
position: relative;
color: #111;
background: #fff;
padding: 10px 20px;
border-radius: 10px;
display: inline-block;
text-decoration: none;
font-weight: 600;
margin-top: 10px;
}
