Create a Simple Product Card using HTML and CSS

Hey, developers welcome to Day 8 of our 90Days 90Projects challenge. And in Day 8 we are going to create an Item Card using HTML and CSS.

So to run the code you just need to copy the HTML and CSS code and run it into your code Editor. 

Preview

HTML Code

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Item Card </title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
        integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>

<body>
    <div class="item-container">
        <div class="item-top">
            <div class="top-left-logo">
                <img src="./logo.png" alt="">
            </div>
            <div class="top-right-cart">
                <i class="fa-solid fa-cart-shopping"></i>
            </div>
        </div>
        <div class="main-item">
            <img src="./item.png" alt="">
        </div>
        <h2 class="item-heading">
            XRay Jr Dark
        </h2>
        <p class="item-description">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit labore quae quaerat eaque.
        </p>
        <ul class="rating">
            <i class="fa-solid fa-star"></i>
            <i class="fa-solid fa-star"></i>
            <i class="fa-solid fa-star"></i>
            <i class="fa-solid fa-star"></i>
            <i class="fa-solid fa-star-half-stroke"></i>
        </ul>
        <p class="item-price"><sup>$</sup>5.00/-</p>
        <button class="item-cart-btn">Add To Cart</button>
    </div>
    <!-- Item Card using HTML and CSS by raju_webdev -->
</body>
</html>

CSS Code

style.css

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&family=Ubuntu&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    background-color: rgb(200, 142, 254);
}

.item-container {
    background-color: #fff;
    width: 20rem;
    margin: 1rem;
    padding: 1rem;
    border-radius: 1rem;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

.item-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top-left-logo {
    width: 60px;
    margin-left: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.top-left-logo img {
    width: 100%;
}

.top-right-cart {
    font-size: 1.4rem;
    margin-right: 1rem;
}

.main-item {
    width: 200px;
    display: block;
    margin: 0 auto;
}

.item-heading {
    text-transform: capitalize;
}

.item-description {
    margin: .5rem 0;
    font-size: .9rem;
    font-weight: 200;
}

.item-price {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 1rem;
}

.item-price sup {
    color: green;
}

.rating i {
    color: rgb(200, 142, 254);
    margin-bottom: 1rem;
}

.item-cart-btn {
    border: none;
    background-color: transparent;
    margin: 0 auto;
    width: 100%;
    border: 1px;
    font-weight: bold;
    padding: .5rem 1rem;
    background-color: rgb(200, 142, 254);
    color: #fff;
    border-radius: 2rem;
    font-size: 1.2rem;
    font-weight: 200;
    position: relative;
    cursor: pointer;
    transition: all .3s linear;
}

.item-cart-btn:hover {
    color: #fff;
    background-color: rgb(160, 110, 206);
}

Learn HTML- Learn Now

Learn CSS- Learn Now

Visit our 90Days 90Projects Page- Visit Now

Post a Comment

1 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.

Top Post Ad

Below Post Ad