Hello, glad you are here. I am kunaal and today we will see how to make an awesome fully responsive modern looking product listing page. You can see demo below.
Demo
For desktop view see this demo in 0.5x scale
Video Tutorial -
For better explanation. You can watch video tutorial.
If you like the video tutorial. Please consider subscribing my youtube channel.
Let's code
Inside HTML file under <body> tag write
<div class="product">
<div class="product-img">
<img src="img/bag.png" alt="">
<span class="tag">new</span>
</div>
<div class="product-listing">
<div class="content">
<h1 class="name">leather bag</h1>
<p class="info">Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque laborum optio natus quibusdam ea nam odit vitae id unde officia.</p>
<p class="price">$ 299</p>
<div class="btn-and-rating-box">
<div class="rating">
<img src="img/star.png" alt="">
<img src="img/star.png" alt="">
<img src="img/star.png" alt="">
<img src="img/star.png" alt="">
<img src="img/star stroke.png" alt="">
</div>
<button class="btn">buy now</button>
</div>
</div>
</div>
</div>
And CSS
@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@600&family=Roboto:wght@300;400;500;700;900&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
width: 100%;
min-height: 100vh;
position: relative;
display: flex;
justify-content: center;
align-items: center;
background: #966e4f;
font-family: 'roboto', sans-serif;
}
body::before{
content: '';
position: absolute;
left: 0%;
transform: translateX(-50%) skewX(-15deg);
width: 20px;
height: 100%;
background: #966e4f;
border-left: 60px solid #eae3d2;
border-right: 30px solid #eae3d2;
opacity: 0;
animation: slide-in 2s 1.5s forwards 1;
}
@keyframes slide-in{
100%{
opacity: 1;
left: 50%;
}
}
.product{
position: relative;
width: 1000px;
min-width: 350px;
min-height: 500px;
height: auto;
display: flex;
justify-content: center;
align-items: center;
}
.product-img{
width: 40%;
height: 500px;
background: #fff;
position: relative;
opacity: 0;
transform: translateY(-50px);
animation: fade-in 1s forwards 1;
}
.product-img img{
width: 100%;
height: 100%;
object-fit: contain;
user-select: none;
}
.tag{
position: absolute;
top: 20px;
left: -10px;
transform-origin: left;
opacity: 0;
transform: rotate(-90deg);
text-transform: capitalize;
color: #eae3d2;
padding: 5px 10px;
width: 100px;
font-size: 18px;
text-align: center;
background: #292929;
user-select: none;
animation: tag .5s 1s forwards 1;
}
@keyframes tag{
100%{
opacity: 1;
transform: rotate(-20deg);
}
}
.product-listing{
width: 60%;
min-height: 500px;
height: auto;
background: #292929;
padding: 40px;
display: flex;
justify-content: center;
color: #eae3d2;
opacity: 0;
transform: translateY(50px);
animation: fade-in 1s forwards 1;
}
@keyframes fade-in{
100%{
opacity: 1;
transform: translateY(0);
}
}
.name{
font-family: 'dosis';
font-size: 70px;
text-transform: capitalize;
}
.info{
font-size: 18px;
line-height: 30px;
margin: 50px 0;
}
.price{
font-size: 70px;
font-weight: 100;
margin-bottom: 20px;
}
.btn-and-rating-box{
width: 100%;
display: flex;
justify-content: space-between;
}
.rating{
width: fit-content;
display: flex;
justify-content: center;
align-items: center;
}
.rating img{
width: 20px;
height: 20px;
margin: 0 2px;
}
.btn{
background: #eae3d2;
color: #292929;
border: none;
text-transform: capitalize;
font-size: 16px;
padding: 10px 20px;
cursor: pointer;
}
.btn:hover{
background-color: #eedbaf;
}
@media (max-width: 1100px){
body::before{
transform: translateX(-50%) skewX(-5deg);
}
.product{
flex-direction: column;
width: 90%;
margin: 5vh 0;
}
.product-img{
width: 100%;
height: 300px;
}
.product-listing{
width: 100%;
min-height: auto;
}
.name,.price{
font-size: 50px;
}
.info{
font-size: 16px;
}
}
I hope you understood everything. If you have any doubt or you find any mistake that I made or you have any suggestion feel free to ask me in comment.
If you are interested in programming and want to know how I a 15yr old teen do coding make these design. You can follow me on my Instagram. I am also planning to post my game development stuff on Instagram.
Top comments (2)
Not to nitpick, I love the effort people put in articles and explainers, but it's good to also try (and learn people) to keep things semantic. Using better tags like:
Other than that, nice example!
nice!