Today we Will Learn How to Create Pepsi Product Card Using HTML & CSS
Let’s create an interactive Pepsi Product Card using HTML and CSS. This project will showcase a visually stunning and engaging product display that animates when the user hovers over it, adding a dynamic and modern touch to your website. We’ll use HTML to structure the content and CSS to style and animate the card. Let’s dive into building this Interactive Pepsi Product Card.
HTML:
This HTML code sets up a webpage with a card element displaying a Pepsi product. The structure includes:
- A circular container for the Pepsi logo
- An image of a Pepsi can
- A content section with a title, description, and a “Shop Now” button
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Pepsi Product Card</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="card">
<div class="circle">
<img src="image.png" alt="Pepsi Logo" class="logo">
</div>
<img src="image1.png" alt="Pepsi Can" class="product_img">
<div class="content">
<h2>Pepsi</h2>
<p>Pepsi is a cool, refreshing drink that satisfies your thirst and delights your taste buds. Our secret blend of flavors.</p>
<a href="#">Shop Now</a>
</div>
</div>
</body>
</html>CSS
This CSS stylesheet applies a sleek, modern design to the Pepsi product card:
- It uses the Poppins font for a contemporary look
- Sets up a dark background for the page
- Creates a card that expands on hover
- Implements a circular background that transforms on interaction
- Animates the Pepsi logo and product image
- Reveals product information with a smooth transition
@import url("https://fonts.googleapis.com/css?family=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;
--clr: #005cbf;
}
.card {
position: relative;
width: 300px;
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);
transition: 0.5s, background 0.5s;
transition-delay: 0.75s, 1s;
filter: drop-shadow(0 0 10px var(--clr)) drop-shadow(0 0 60px var(--clr));
}
.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: 75%;
height: 530px;
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: #fff;
background: #d52b1e;
padding: 10px 20px;
border-radius: 10px;
display: inline-block;
text-decoration: none;
font-weight: 600;
margin-top: 10px;
}Conclusion:
Creating an Interactive Pepsi Product Card using HTML and CSS has been an exciting and educational journey. By combining HTML for structure and CSS for styling and animations, we’ve learned how to create an engaging product presentation that enhances the overall user experience of a website.
If Your Project is Not Working or Has Any Problem Don’t Worry, Just Click on Below Download Assets File And You Will Be Able To Get Full Control Of Our Projects , Then Customize And Use it For Your Coding Journey. Let the coding adventure begin!
By Downloading this assets You Will Be Able to create an Pepsi Product Card HTML & CSS Which Can Be Used For Several Projects i.e. A Flutter App Using Vs Code or For Android App Using Android Studio And Also For Custom Web Development.
