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.
Responsive Advanced Stylish Box in HTML & CSS Stylish Box in HTML CSS Coding Hindi (2)

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!

Total
0
Shares
Leave a Reply
Previous Post
Best Web Accessibility Tools

Best Web Accessibility Tools as Developer

Next Post

Get Screen Resolution | Screen Size using HTML & JavaScript

Related Posts
Total
0
Share