Hey there! Today, let’s dive into the world of coding and create a cool Coca-Cola Product Card using only HTML and CSS. This project is designed to be simple and enjoyable, making it suitable for both beginners and coding enthusiasts.
In this tutorial, we’ll use HTML for structuring our product card and CSS for styling, giving it that iconic Coca-Cola aesthetic.
Ready to add a touch of sweetness to your coding journey? Let’s get started and bring that Coca-Cola vibe to our project!
HTML :
The given code is an HTML document that creates a product card for CocaCola. It consists of a card container with a circular shape and a red color. Inside the circle, there is a CocaCola logo. The card also includes a content section with the product name, a description, and a link to explore more. At the bottom of the card, there is an image of the CocaCola product.
<!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 :
The provided CSS code styles a product card for CocaCola. The card has a responsive design with a circular shape, a logo, and a product image. It also includes a content section with the product name, description, and a link to explore more. The card transitions and animates upon hovering, providing an interactive user experience.
@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;
}
Congratulations! We’ve successfully crafted a cool Coca-Cola Product Card using HTML and CSS. I hope you enjoyed this coding journey. Feel free to customize and enhance your project further. Cheers to your coding success!
In case you face any glitches during your project, don’t stress. The source code is at your fingertips. Hit the Download button and commence your coding escapade. Wishing you joyful coding!
2 Comments
It’s a shame you don’t have a donate button! I’d definitely
donate to this excellent blog! I guess for now
i’ll settle for bookmarking and adding your RSS feed to my Google
account. I look forward to new updates and will talk about
this site with my Facebook group. Chat soon!
Bro Add BuymeaCoffee Link at the end of blog, Thanks for commenting 😇