Your Web News in One Place

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
May 15, 2021 09:40 am GMT

Awesome Product Card you have never seen it before

Demo

I suggest you to view the demo in fullscreen view. click on the top right most button to access fullscreen view.

Video tutorial

If you find out article hard to understand. You can watch a video tutorial on youtube.

If you like the tutorial video. Please subscribe my youtube channel. It will really help me.

Let's code.

First we need to create 3 file index.html, style.css, and app.js. After that in HTML file write the basic structure and link all external files.

Now let's start.

In index.html create a div with class .card and inside of that create a div with class .background-overlay and inside of that create a span with class .circle. What we will do is we give .background-overlay element absolute position and make its overflow hidden that's how we can create the half circle without affecting card's overflow property.Now inside .card and outside background-overlay create another div with class .content and inside of that make an h1, p and another h1 and more divs.
The structure at last should look like this.

<div class="card">    <div class="background-overlay">        <span class="circle"></span>    </div>    <div class="content">        <h1 class="product-name">nike fly</h1>        <img src="shoe.png" class="product-img" alt="">        <h1 class="price">$ 199</h1>        <div class="sizes">            <p class="size">5</p>            <p class="size">6</p>            <p class="size active">7</p>            <p class="size">8</p>        </div>        <div class="btn-container">            <button class="btn buy">buy now</button>            <button class="btn cart">add to cart</button>        </div>    </div></div>

after that give some styles.

*{    margin: 0;    padding: 0;    box-sizing: border-box;}body{    width: 100%;    height: 100vh;    min-height: 600px;    overflow: hidden;    display: flex;    justify-content: center;    align-items: center;    background: #c72734;    font-family: 'roboto', sans-serif;}.card{    width: 300px;    height: 450px;    background: #ea2b3b;    border-radius: 20px;    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.25);    position: relative;    padding: 40px 20px;}.background-overlay{    position: absolute;    top: 0;    left: 0;    bottom: 0;    right: 0;    overflow: hidden;    border-radius: 20px;}.circle{    position: absolute;    top: -170px;    left: 50%;    transform: translateX(-50%);    width: 400px;    height: 400px;    border-radius: 50%;    background: #fff;}.content{    position: relative;}.product-name{    text-transform: uppercase;    text-align: center;    color: #000;    font-weight: 400;    font-size: 40px;}.product-img{    width: 270px;    display: flex;    margin: auto;    margin-top: 100px;    transform: rotate(-40deg);    transition: 1s;}.card.active .product-img{    margin-top: 40px;    transform: rotate(-20deg);}.price{    opacity: 0;    transform: translateY(40px);    color: #fff;    font-size: 60px;    font-weight: 400;    margin-top: 20px;    transition: 1s;}.sizes{    opacity: 0;    transform: translateY(40px);    width: 100%;    display: flex;    justify-content: space-between;    align-items: center;    transition: 1s;}.size{    color: #000;    background: #fff;    padding: 15px 20px;    border-radius: 10px;    font-size: 20px;    margin-top: 20px;    font-weight: 400;    transition: 1s;    cursor: pointer;}.size.active,.size:hover{    background: #000;    color: #fff;}.card.active .price,.card.active .sizes{    opacity: 1;    transform: translateY(0);}.card.active .btn-container{    opacity: 1;    transform: translateY(0);    transition: 1s;    transition-delay: 1s;}.btn-container{    opacity: 0;    transform: translateY(40px);    display: block;    position: absolute;    width: calc(100% + 40px);    height: 40px;    bottom: -80px;    left: -20px;    display: flex;    justify-content: space-between;    align-items: center;}.btn{    width: 48%;    height: 100%;    border-radius: 10px;    border: none;    outline: none;    text-transform: capitalize;    font-size: 16px;}.btn.buy{    background-color: #ea2b3b;    color: #fff;}

Our card is done. Now we have to create a overlay div which we can use to toggle .active class of our card.
So in index.html before our .card element create a div with class .overlay.

<div class="overlay"></div>

and give this style

.overlay{    position: absolute;    top: 0;    left: 0;    bottom: 0;    right: 0;    display: none;}

Now add JS to toggle classes.

const card = document.querySelector('.card');const overlay = document.querySelector('.overlay');card.addEventListener('click', () => {    card.classList.add('active');    overlay.style.display = 'block';})overlay.addEventListener('click', () => {    card.classList.remove('active');    overlay.style.display = null;})

Done.If you find this helpful please follow me on devto and also subscribe my youtube channel.

If you are interested in programming and want to know how I am a 15yr old teen make these designs. You can follow me on my instagram. I am planning to post my game development experiments on instagram soon.

Source Code, Download Image Only, My youtube channel, Instagram

If you find any mistake I made or you if you have any doubt feel free to ask me in comment.

Thanks for visiting.


Original Link: https://dev.to/kunaal438/easy-to-make-this-awesome-product-card-css-2cjc

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To