Coca Cola Card
🔍 Summary of this HTML & CSS Project
This project is a Coca-Cola-themed interactive product card built using HTML and CSS only. It features a sleek, animated design that responds to user interaction (hover).
📦 Components & Features
-
Layout and Centering:
- The entire page has a dark background.
- Content is centered vertically and horizontally using Flexbox.
-
Card Structure (
.card):- A 300x300px container that serves as the base for all elements.
-
Circular Logo Container (. circle):
-
A circular div containing the Coca-Cola logo (
.logo). - On hover, it transitions into a larger red rectangle.
-
A circular div containing the Coca-Cola logo (
-
Content Section (. content):
-
Hidden by default, it includes:
- A title (Coca Cola)
- A short description
- A styled button ("Explore Now")
- Appears with a scale-in animation on hover.
-
Hidden by default, it includes:
-
Bottle Image (
.cola):- Hidden off-screen by default.
- On hover, it slides and rotates into view for dramatic effect.
-
Animation & Transitions:
-
Smooth hover transitions (
scale,rotate,visibility) to make the card interactive and engaging. - Shadows and color changes enhance the visual appeal.
-
Smooth hover transitions (
🧠 Purpose / Use Case
-
This kind of project is ideal for:
- Landing pages
- Product showcases
- Marketing websites
- It demonstrates basic front-end skills: layout, animation, hover effects, and visual design.
✅ Technologies Used
- HTML5
- CSS3 (Flexbox, transitions, transforms, and basic styling)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="card">
<div> class="circle">
<img src="Coca-Cola_logo_white.png" alt=""class="logo">
</div>
<div class="content">
<h2>CocaCola</h2>
<p>Very energitic drink.</p>
<button>Explore Now</button>
</div>
<img src="pngimg.com - coca_cola_PNG8914.png" class="cola" alt="">
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-color: rgb(20, 17, 17);
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.card{
width: 300px;
height: 300px;
}
.card .circle{
height: 300px;
width: 300px;
border-radius: 50%;
background-color: rgb(20, 17, 17);
border: 5px solid red;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
filter: drop-shadow(0 0 30px red);
}
.card .circle img{
width: 260px;
}
.card .content{
visibility: hidden;
position: absolute;
font-size: 35px;
margin-top: 40px;
margin-left: 20px;
font-weight: 300;
padding-top: 20px;
transform: scale(0);
filter: drop-shadow(0 0 8px black);
}
.card:hover .content{
visibility: visible;
transform: scale(1);
transition: 0.5s ease-in;
}
.card .cola{
height: 380px;
position: relative;
left: 330px;
visibility: hidden;
bottom: 90px;
transform: scale(0)rotate(-65deg);
filter: drop-shadow(0 0 10px Black)drop-shadow(0 0 20px rgb(36, 30, 30));
}
.card:hover .cola{
visibility: visible;
transform: scale(1)rotate(15deg);
transition: 0.5s ease-in-out;
}
.card:hover .circle{
width: 500px;
border-radius: 20px;
background-color: red;
transition: 0.5s ease-in-out;
}
.card:hover .logo{
visibility: hidden;
transform: scale(0)rotate(65deg);
transition: 0.5s ease-in-out;
}
.card .content{
display: flex;
justify-self: space-between;
align-items: center;
flex-direction: column;
color: white;
}
.card .content button{
font-size: 20px;
margin-top: 30px;
font-weight: 500;
padding: 5px;
font-family: Arial Black;
border-radius: 25px;
border: none;
}
.card .content button:hover{
background-color: rgb(29, 28, 28);
color: white;
transition: 0.5s;
}
🚀 Conclusion
This Coca-Cola-themed product card is a fun and interactive way to showcase a brand or product using only HTML and CSS. With simple hover effects and modern design elements, you can easily adapt this for other beverages or product promotions. It's lightweight, responsive-ready, and a great beginner project to practice your front-end skills.
0 Comments