Simple Product Card using HTML and CSS [Source Code]

Hey, developer today is Day 67 of our 90Projects in 90Days. And today, we are going to Create a Simple Product Card using HTML and CSS.

To run the given code firstly you have to copy the HTML code and run it into your code editor and then create a CSS file and paste the given CSS code in your code's CSS file.

Preview

product card using html and css, add simple product card html css, geekshelp, web development, frontend project with source code


Image Resources: Download Now

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> Product Card </title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <section class="card-container">
        <div class="left"></div>
        <div class="right">
            <p class="tag"> perfume </p>
            <h3 class="product-title"> Gabrielle Essence Eau De Parfum </h3>
            <p class="product-desc"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ea reprehenderit in
                nostrum cupiditate culpa ducimus labore quos! </p>
            <p class="price">$149.99 </p><span class="strike"><strike>$169.99</strike></span>
            <button class="btn">
                Add to cart
            </button>
        </div>
    </section>
</body>

</html>


CSS Code

style.css

@import url('https://fonts.googleapis.com/css2?family=Open+Sans&family=Poppins&family=Roboto:wght@300&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #e65b00;
}

.card-container {
    width: 500px;
    border-radius: 15px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
}

.left {
    background-image: url('./product.jpg');
    background-size: cover;
    width: 50%;
    border-radius: 15px 0px 0px 15px;
    background-repeat: no-repeat;
}

.right {
    padding: 15px;
    background-color: rgb(68, 250, 68);
    width: 50%;
    border-radius: 0px 15px 15px 0px;
}

.tag {
    margin: 10px 0;
    text-transform: uppercase;
    margin-bottom: 1.3rem;
    font-family: 'Roboto', sans-serif;
}

.product-title {
    font-size: 1.6rem;
    font-weight: bold;
    font-family: 'Poppins', sans-serif;
    margin: 20px 0;
}

.product-desc {
    line-height: 18px;
    margin-bottom: 1.3rem;
    font-family: 'Roboto', sans-serif;
}

.price {
    display: inline;
    font-family: 'Poppins', sans-serif;
    font-size: 1.8rem;
    font-weight: bold;
}

.strike {
    display: inline;
    margin-bottom: 1rem;
    font-family: 'Roboto', sans-serif;
}

.btn {
    display: block;
    margin: 1rem auto;
    width: 90%;
    border-radius: 10px;
    border: none;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    padding: 0.5rem;
    transition: all 0.4s;
}

.btn:hover {
    background-color: #e65b00;
    color: #fff;
}

Learn HTML- Learn Now

Learn CSS- Learn Now

Visit our 90Days, 90Projects Page- Visit Now

Post a Comment

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

Top Post Ad

Below Post Ad