Product UI Design Using HTML CSS JavaScript

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.

You Might Also Like:

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>Class 3</title>
    <link rel="stylesheet" href="css/class3.css">
</head>
<body>
    <div class="container">
        <ul class="thumb">
            <li onmouseover="changrImageSrc('img/shoes1.png')"><img src="img/shoes1.png" alt=""></li>
            <li onmouseover="changrImageSrc('img/shoes2.png')"><img src="img/shoes2.png" alt=""></li>
            <li onmouseover="changrImageSrc('img/shoes3.png')"><img src="img/shoes3.png" alt=""></li>
        </ul>
        <div class="imgBox">
            <h2>Nike Air Zoom</h2>
            <img src="img/shoes1.png" alt="" class="shoesss">
            <ul class="size">
            <span>Size</span>
            <li >7</li>
            <li class="">8</li>
            <li class="">9</li>
            <li class="">10</li>
            </ul>
            <a href="#" class="btn">Add To Cart</a>
        </div>
    </div>
    <script>
        function changrImageSrc(anything){
            document.querySelector('.shoesss').src = anything;

        }
    </script>
</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;
    background-image: linear-gradient(rgba(0, 0, 255, 0.722), rgba(255, 0, 0, 0.853));
}
.container{
    position: relative;
    width: 400px;
    height: 400px;
    /* background: #ee3; */

}
.container .thumb{
    position: absolute;
    transform: translateY(-50%);
    z-index: 1;
    top: 50%;
    /* left: -13%; */
   

}
.container .thumb li{
    width: 100px;
    height: 100px;
    /* background: #00f; */
    margin-top: 10px;
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255,255, 255, 0.2);
    box-shadow: 0 15px 25px rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255, 255, 0.25);
    border-top: 1px solid rgba(255,255, 255, 0.5);
    border: 1px solid rgba(255,255, 255, 0.5);
    border-radius: 20px;
    backdrop-filter: blur(4px);

}
.container .thumb li img{
    width: 90%;
    transition: 0.25s;

}
.container .thumb li:hover img{
    transform: rotate(-35deg);
}
.container .imgBox{
    position:absolute;
    top: 0;
    right: 0;
    width: 350px;
    height: 100%;
    background: rgba(255,255, 255, 0.2);
    box-shadow: 0 15px 25px rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255, 255, 0.25);
    border-top: 1px solid rgba(255,255, 255, 0.5);
    border: 1px solid rgba(255,255, 255, 0.5);
    border-radius: 20px;
    backdrop-filter: blur(4px);
    padding: 60px 20px;
    padding: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}
.container .imgBox h2{
    color: #fff;
    letter-spacing: 1;
}
.container .imgBox img{
    width: 80%;
    transition: 0.25s;

}
.container .imgBox img:hover{
    transform: scale(1.4) rotate(-15deg) translateX(20px);
}
.container .imgBox .size{
    display: flex;
    justify-content: center;
    align-items: center;
}
.container .imgBox .size span{
    color: #efff;
    font-size: 1.2em;
    letter-spacing: 1px ;
    margin-right: 5px;
}
.container .imgBox .size li{
    list-style: none;
    width: 30px;
    height: 30px;
    background: #fff;
    color: #000000;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 5px;
    border-radius: 4px;
    font-weight: 700;
    box-shadow: 0 2px 10px rgba(0,0, 0, 0.1);
    cursor: pointer;
    transition: 0.25s;
}
.container .imgBox .size li:hover{
    transform: translateY(-10px);
}
.container .imgBox .btn{
    position: absolute;
    bottom: -30px;
    background: #fff;
    display: inline-block;
    text-decoration: none;
    padding: 15px 30px;
    border-radius: 30px;
    box-shadow: 0 15px 35px rgba(0,0, 0, 0.1);
    font-weight: 600;
    color: #000000;
    transition: 0.25s;

}
.container .imgBox .btn:hover{
    letter-spacing: 2px;

}

Product Making UI Design Using Html, CSS, JavaScript | Source Code Tamplate

Product UI Design Using HTML CSS 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.

You Might Also Like:

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