Responsive Advanced Stylish Box in HTML & CSS | Stylish Box in HTML CSS

In this Article, I have created a Responsive Advanced Stylish Box in HTML & CSS. I hope you will like this Stylish Box.

Namaste!

In this Article, I have created a Responsive Advanced Stylish Box in HTML & CSS. I hope you will like this Stylish Box.

Stylish Box in HTML CSS Youtube Tutorial

Responsive Advanced Stylish Box in HTML & CSS

Step by Step Guide

Step 1 – Put this code in between <body>below code here</body> tags

.html file code

<div class="container">
        <div class="head">
            <span>new</span>
            <span>free</span>
        </div>
        <div class="bodypart">
            
            <img src="download.jpg" alt="">
            <h4>this is heading</h4>
        </div>
        <div class="hrr"></div>
        <div class="footer">
            <a href="#">link</a>
        </div>
    </div>

Step 2 – Put this code in between <style> below code here</style>

.css file code

body{
    display: grid;
    place-items: center;
    height: 100vh;
}
.container{
    border: 1px solid #3377ff25;
    background: #fff;
    border-radius: 27px;
    width: 300px;
    transition: 0.3s ease-in-out;
    
}
.container:hover{
    
    transition: 0.6s ease-in-out;
    transform: translateY(-5px);
    box-shadow: #115ffa28 1px 4px 12px;
}
.hrr{
    height: 1.5px;
    background-color: #3377ff25;
    width: 100%;
    margin:10px 0 ;
}
.head{
    display: flex;
    justify-content: space-between;
}
.head span{
    margin: 16px;
    color: #3378ff;
    background-color: #3377ff25;
    padding: 5px 10px;
    border-radius: 8px;
    text-transform: capitalize;
    
}
h4{
    margin: auto 15px;
    text-transform: capitalize;
}
.bodypart img{
    width: 80px;
    margin: auto 10px;
}
.footer{
    height: 35px;
}
.footer a{
    text-decoration: none;
    margin: 20px 20px;
    color: #3378ff;
    text-transform: capitalize;
    
}
.footer a:hover{
    color: #c22802;
    
}

Thank You!

Share your love
Neeraj Lamba
Neeraj Lamba
Articles: 39

Leave a Reply

Your email address will not be published.

I'm not a robot *Captcha loading...

Website Design Trends in 2022 5 Movies that Programmers Should Watch Best Search Engine for Developers – You.com 06 Free Website Hosting Providers for Developers You should Know Learn Programming while playing games
Secured By miniOrange