Product UI Design Using HTML CSS

Ever wondered how websites are built? Well, HTML, CSS and JavaScript are the tools used to create many of the products you use everyday.

What can you create with HTML, CSS, and JavaScript? The possibilities are truly endless!

From web applications to dynamic sites and more, you can design some amazing products using these three languages.

Show us what awesome things you have created with HTML, CSS, and JavaScript!

Need to create a modern e-commerce website with HTML, CSS, and JavaScript?

You’re in luck! With the right know-how, you can make it happen.

The process is easy but it requires dedication and patience.

NOTE: IMAGE SOURCE IS WWW.PEPSI.COM

Source Code :

HTML Code:

<!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 UI</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="card">
        <div class="circle"></div>
        <div class="content">
            <h2>Pepsi Cola</h2>
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eius, nesciunt ab? Nam, eligendi quasi eum commodi doloremque laboriosam dolor eius. </p>
            <a href="#">Buy Now</a>
        </div>
        <img src="img/1 (2).png" alt="">
    </div>
</body>
</html>

CSS Code:

 

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');



*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}
.card{
    position: relative;
    width: 600px;
    height: 350px;
    /* background: #ccc; */
    border-radius: 20px;
    display: flex;
    align-items: center;
    transition: 0.5s;

}
.card .circle{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    overflow: hidden;
}
.card .circle::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ff0004;
    clip-path: circle(120px at center);
    transition: 0.5s;
}
.card:hover .circle:before{
    background: #1100ff;
    clip-path: circle(400px at center);
}
.card img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 300px;
    pointer-events: none;
    transition: 0.5s;

}
.card:hover img{
    left: 72%;
    height: 500px;

}
.card .content{
    position: relative;
    width: 50%;
    left: 20%;
    padding: 20px 20px 20px 40px;
    transition: 0.4s;
    opacity: 0;
    visibility: hidden;
}
.card:hover .content{
    left: 0;
    opacity: 1;
    visibility: visible;
}
.card .content h2{
    color: #fff;
    text-transform: uppercase;
    font-size: 2em;
    line-height: 1em;
    margin-bottom: 5px;

}
.card .content p{
    color: #fff;

}
.card .content a{
    position: relative;
    color: #fff;
    padding: 10px 20px;
    border-radius: 10px;
    background: #fff;
    color: #111;
    margin-top: 10px;
    display: inline-block;
    text-decoration: none;
    font-weight: 700;

}
@media (max-width:991px) {
    .card{
        width: auto;
        max-width: 350px;
        align-items: flex-start;
    }
    .card:hover{
        height: 600px;

    }
    .card .content{
        width: 100%;
        left: 0;
        padding: 30px;

    }
    .card:hover img{
        top: 70%;
        left: 50%;
        height: 300px;

    }
}
@media (max-width:420px){
    .card .content{
     
        padding: 20px;

    }
}

Responsive Product UI Design Using Only Html, CSS | Source Code

Product UI Design Using HTML CSS

Need to create a modern e-commerce website with HTML, CSS, and JavaScript?

You’re in luck! With the right know-how, you can make it happen.

You Might Also Like:

NOTE: IMAGE SOURCE IS WWW.PEPSI.COM

Post a Comment

Learn HTML in 7 Days: A Beginner's Guide to Creating Websites

Ludo Display UI Design Using Only HTML CSS | With Source Code

Categories

Latest Posts

Popular Posts

Contact Form