Build A Product Page Using HTML CSS And JavaScript
How To Make Product Page Using HTML CSS And JavaScript
If you want to learn how to create Product Page Using HTML CSS And JavaScript, then you are in the right place.
I will teach about how to make Product Page Using HTML CSS And JavaScript. This Product Page is fully Responsive and has all browser compatibility.
I used HTML, CSS, and JavaScript to create this Product Page. If you follow this tutorial step by step, you will be able to make this Awesome Product Page using HTML, CSS, and JavaScript.
I have more than Four years experience in Frontend(HTML, CSS, and JS). I promise you, I will try to provide you best way to create Product Page using HTML, CSS, and JavaScript.
Create A Product Detail Page Using HTM, CSS, and JavaScript
<!--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============================--> <title>Product Page HTML</title> <!--==CSS==============================--> <link rel="stylesheet" href="css/style.css"/> <!--==Poppins-font=====================--> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"> <!--==Using-Font-Awesome-for-Icons=====--> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"> <!-- Link Swiper's CSS --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css" /> </head> <body> <!--==Product-Page=================================--> <section id="product-page"> <div class="product-details"> <!--**Img*************************--> <div class="product-img"> <!-- Swiper Slider --> <div class="swiper mySwiper"> <div class="swiper-wrapper"> <!--**1******--> <div class="swiper-slide"> <img src="images/1.jpg" /> </div> <!--**2******--> <div class="swiper-slide"> <img src="images/2.jpg" /> </div> <!--**3******--> <div class="swiper-slide"> <img src="images/3.jpg" /> </div> <!--**4******--> <div class="swiper-slide"> <img src="images/1.jpg" /> </div> </div> <!--btns--> <div class="slider-btns"> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> </div> <!--social--> <div class="img-social-bar"> <a href="#"><i class="fa-brands fa-facebook-f"></i></a> <a href="#"><i class="fa-brands fa-instagram"></i></a> <a href="#"><i class="fa-brands fa-twitter"></i></a> <a href="#"><i class="fa-brands fa-youtube"></i></a> </div> </div> <!--**Text************************--> <div class="product-text"> <!--category--> <span class="product-category">Women Clothes & Dresses</span> <h3>ASOS Women Clothe</h3> <span class="product-price">$135.3</span> <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Officiis laboriosam vitae ab aspernatur qui facere a commodi cupiditate praesentium. Aliquam, voluptatem est debitis consequuntur ex autem exercitationem quas dolorem alias? <br/> Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic illo, enim non molestias dolores eos officia minima quidem architecto labore soluta? Expedita officiis voluptas sapiente officia debitis, mollitia eum quia. </p> <!--size--> <div class="product-size-container"> <strong>Select Size:-</strong> <div class="product-size"> <!--xl--> <input type="checkbox" class="s-checkbox" id="s-xl"> <label for="s-xl" class="s-label">XL</label> <!--Small--> <input type="checkbox" class="s-checkbox" id="s-s"> <label for="s-s" class="s-label">S</label> <!--Medium--> <input type="checkbox" class="s-checkbox" id="s-m"> <label for="s-m" class="s-label">M</label> <!--Large--> <input type="checkbox" class="s-checkbox" id="s-l"> <label for="s-l" class="s-label">L</label> </div> </div> <!--btn--> <div class="product-button"> <a href="#" class="add-bag-btn">Add To Bag</a> <a href="#" class="add-wishlist-btn">Add To Wishlist</a> </div> <!--help-btn--> <a href="#" class="help-btn">Need Any Help?</a> </div> </div> </section> <!--==Jquery===========================--> <script src="https://code.jquery.com/jquery-3.6.1.js" integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI=" crossorigin="anonymous"></script> <!-- Swiper JS --> <script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script> <!-- Initialize Swiper --> <script> var swiper = new Swiper(".mySwiper", { slidesPerView: 1, spaceBetween: 10, navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }, breakpoints: { 450: { slidesPerView: 2, spaceBetween: 0, }, 820: { slidesPerView: 1, spaceBetween: 0, }, 1024: { slidesPerView: 2, spaceBetween:0, }, }, }); $('.s-checkbox').on('change', function() { $('.s-checkbox').not(this).prop('checked', false); }); </script> </body> </html>
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: poppins;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
body{
background-color: #f3f3f3;
}
/*==product-page===============================*/
.product-details{
max-width: 1200px;
width: 90%;
display: grid;
grid-template-columns: 1fr 1fr;
margin: 50px auto;
}
.product-img{
width: 100%;
background-color: #e3e3e3;
position: relative;
overflow: hidden;
}
.img-social-bar{
position: absolute;
left: 0px;
top: 0px;
background-color: #ffffff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding:20px 10px;
box-shadow: 2px 16px 30px rgba(0,0,0,0.08);
z-index: 101;
}
.img-social-bar a{
color: #5e5e5e;
margin: 20px 10px;
transition: all ease 0.3s;
}
.img-social-bar a:hover{
color: #181818;
}
.product-text{
background-color: #ffffff;
padding: 60px;
position: relative;
}
.product-text .product-category{
color: #5e5e5e;
font-size: 0.9rem;
}
.product-text h3{
color: #252525;
font-size: 2.4rem;
font-weight: 600;
margin: 10px 0px;
}
.product-text .product-price{
font-size: 1.6rem;
color: #252525;
font-weight: 500;
}
.product-text p{
margin: 30px 0px;
color: #5e5e5e;
letter-spacing: 1px;
font-size: 0.9rem;
}
.product-size-container strong{
color: #252525;
font-size:1rem;
font-weight: 600;
letter-spacing: 2px;
border-bottom: 1px solid #252525;
}
.product-size{
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
margin-top: 20px;
}
.product-size label{
font-size: 1.1rem;
background-color: #f7f7f7;
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
user-select: none;
margin-right:10px;
font-weight: 500;
cursor: pointer;
}
.s-checkbox:checked + .s-label{
background-color: #1f2124;
color: #ffffff;
}
.s-checkbox{
display: none;
}
.product-button{
display: grid;
grid-template-columns: 1fr 1fr;
margin: 30px 0px;
margin-bottom: 20px;
grid-gap: 20px;
}
.product-button a{
width: 100%;
height: 45px;
display: flex;
justify-content: center;
align-items: center;
text-transform: uppercase;
font-weight: 600;
letter-spacing: 0.5px;
font-size: 0.9rem;
border-radius: 4px;
}
.product-button .add-bag-btn{
background-color: #181818;
color: #ffffff;
}
.product-button .add-wishlist-btn{
background-color: #f1f1f1;
color: #252525;
}
.help-btn{
position: absolute;
right: 20px;
bottom: 20px;
color: #181818;
font-size: 0.9rem;
text-decoration: underline;
text-transform: lowercase;
}
.mySwiper{
height: 100%;
width: 100%;
max-width: 100%;
}
.swiper-slide img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: flex !important;
}
.swiper-button-next,
.swiper-button-prev{
position: static !important;
width: 80px !important;
height: 60px !important;
display: flex;
justify-content: center;
align-items: center;
background-color: #ffffff;
}
.swiper-button-next::after,
.swiper-button-prev::after{
color: #181818;
font-size: 1.3rem !important;
font-weight: 600;
}
.slider-btns{
position: absolute;
right: 0px;
bottom: 0px;
z-index: 101;
display: flex;
justify-content: center;
align-items: center;
}
@media(max-width:1024px){
.product-text{
padding: 30px;
}
}
@media(max-width:820px){
.product-details{
grid-template-columns: 1fr;
}
.mySwiper{
max-height: 400px;
}
.product-button{
margin-bottom: 40px;
}
}
@media(max-width:450px){
.product-text h3{
font-size: 1.6rem;
}
.product-button{
grid-template-columns: 1fr;
grid-gap: 10px;
}
}
Comments