DEV Community

Cover image for ๐Ÿ”ฅ๐Ÿ”ฅ๐Ÿ˜ฎ Fully responsive modern product page. Only Css
Modern Web
Modern Web

Posted on

๐Ÿ”ฅ๐Ÿ”ฅ๐Ÿ˜ฎ Fully responsive modern product page. Only Css

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>
Enter fullscreen mode Exit fullscreen mode

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;
    }
}
Enter fullscreen mode Exit fullscreen mode

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.

Source Code, My youtube Channel, Instagram

Top comments (2)

Collapse
 
nieuwepixels profile image
Nieuwe Pixels

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!

Collapse
 
cristoferk profile image
CristoferK

nice!