Creating a Product Card with Cart Items
Tags: webdev, javascript, beginners, tutorial
Published: 2024-07-07 09:52:21

Welcome to codeswithpankaj.com! In this tutorial, we will create an interactive product card with cart items using HTML and CSS. This card will have a hover effect that flips the card to reveal more details.

### Step 1: HTML Structure

First, we will set up the basic HTML structure for our product card. Create an HTML file and add the following code:

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Product Card with Cart Items</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="card">
        <div class="card-inner">
            <div class="card-front">
                <img src="shoe.png" alt="Nike Air">
                <h3>Nike Air (Women)<br>Size 7</h3>
                <p>Price £199.99</p>
                <button>Add to basket</button>
            </div>
            <div class="card-back">
                <img src="shoe.png" alt="Nike Air">
                <h3>Details about the product</h3>
                <p>More info about Nike Air</p>
                <button>View More</button>
            </div>
        </div>
    </div>
</body>
</html>
```

### Step 2: CSS Styling

Next, we will style our product card to add the flipping effect. Create a CSS file named `styles.css` and add the following code:

```css
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #000;
    color: #fff;
    font-family: Arial, sans-serif;
}

.card {
    perspective: 1000px;
}

.card-inner {
    position: relative;
    width: 300px;
    height: 400px;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.card:hover .card-inner {
    transform: rotateY(180deg);
}

.card-front, .card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 16px;
}

.card-front {
    background: linear-gradient(45deg, #00c6ff, #0072ff);
}

.card-back {
    background: linear-gradient(45deg, #ff416c, #ff4b2b);
    transform: rotateY(180deg);
}

.card img {
    width: 100px;
    margin-top: 20px;
}

h3, p {
    margin: 10px 0;
}

button {
    margin-top: 20px;
    padding: 10px 20px;
    border: none;
    border-radius: 20px;
    background: #fff;
    color: #000;
    cursor: pointer;
    transition: background 0.3s;
}

button:hover {
    background: #ddd;
}
```

### Step 3: Adding Multiple Cards

To add multiple cards, simply duplicate the card `div` in the HTML file and update the details accordingly. Here's an example with three cards:

```html
<div class="card-container">
    <div class="card">
        <div class="card-inner">
            <div class="card-front">
                <img src="shoe.png" alt="Nike Air">
                <h3>Nike Air (Women)<br>Size 7</h3>
                <p>Price £199.99</p>
                <button>Add to basket</button>
            </div>
            <div class="card-back">
                <img src="shoe.png" alt="Nike Air">
                <h3>Details about the product</h3>
                <p>More info about Nike Air</p>
                <button>View More</button>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-inner">
            <div class="card-front">
                <img src="shoe.png" alt="Nike Air">
                <h3>Nike Air (Men)<br>Size 10</h3>
                <p>Price £99.99</p>
                <button>Add to basket</button>
            </div>
            <div class="card-back">
                <img src="shoe.png" alt="Nike Air">
                <h3>Details about the product</h3>
                <p>More info about Nike Air</p>
                <button>View More</button>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-inner">
            <div class="card-front">
                <img src="shoe.png" alt="Nike Air">
                <h3>Nike Air (Women)<br>Size 8</h3>
                <p>Price £399.99</p>
                <button>Add to basket</button>
            </div>
            <div class="card-back">
                <img src="shoe.png" alt="Nike Air">
                <h3>Details about the product</h3>
                <p>More info about Nike Air</p>
                <button>View More</button>
            </div>
        </div>
    </div>
</div>
```

And update the CSS to center the cards:

```css
.card-container {
    display: flex;
    gap: 20px;
}
```

### Conclusion

You've now created a stylish product card with a flip effect that shows additional information on hover. This tutorial covered the basics of HTML and CSS to achieve this effect. Feel free to customize the design and functionality to fit your needs. Happy coding!

---

For more tutorials and coding tips, visit [codeswithpankaj.com](https://codeswithpankaj.com)