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
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!
