Hey everyone, welcome back to day 20 of our 30 days of HTML and CSS challenge. Today, we're going to design a modern, elegant product card layout, the kind you see on e-commerce websites. Each card will have a product image, name, short description, price, and an add to cart button, all responsive and stylish. Next, let's move to the body. We'll create a main container that holds all our product cards. Each card will be inside a div with a class of card. Inside the card, we'll add an image, product title, description, price, and a button. This single card will act as our base design. Once we style it, we can easily duplicate it for other products. Let's create two more cards so our layout feels more realistic. You can replace the product images and text with your own later. Perfect. Now we have three product cards ready to style. Let's head into the CSS. We'll start with the body to set our background color and font style. We'll also use flexbox to center everything perfectly on the page. The dark navy background gives a modern, techy feel that works great for product showcases. Next, let's style the container. We'll use flexbox again to position our cards side by side and ensure they wrap on smaller screens. The gap property adds consistent spacing between cards. No need for margins, keeping everything clean and responsive. Now let's bring each card to life. We'll add a dark blue background, rounded corners, and a subtle shadow for depth. On hover, the card will slightly lift up to create an interactive feel. This small hover motion helps the design feel more dynamic and engaging. For the image, we'll make sure it fits neatly at the top of each card and doesn't stretch or distort. Using object-fit cover ensures all product images look consistent, even if their original sizes are different. Let's move to the product text. We'll use clean white for the title and soft gray for the description to create a good contrast. Keeping text spacing balanced helps improve readability, especially when viewers are scrolling through multiple products. First, I'm styling the dot price class. I'm keeping the font size slightly larger than the description text at 1.2 rem, so it immediately stands out to the viewer. I'm also using a bright teal color, which compliments our overall theme and naturally draws the eye without looking too flashy. Next, let's move on to the button design. This is where we add personality to the card. I'm creating a smooth gradient background that blends from number 0D9488 to number 14B8A6, giving a beautiful turquoise flow that pops against our dark navy background. The button has no borders and rounded corners with a 30 pixel radius, making it feel soft, modern, and clickable. Finally, we'll make our design responsive. Using media queries, we'll make sure the cards resize and stack properly on tablets and mobile screens. Now, as you shrink the browser, you'll see the cards neatly adjust and stay centered. Perfect for mobile viewing. And that's it. We just built a modern, responsive product card layout using pure HTML and CSS. You can easily expand this into a product grid or even connect it to a shopping cart in future projects. If you enjoyed this tutorial, don't forget to like, subscribe, and continue the 30 day challenge.
