Best shadow degine using html and css
Wednesday, August 12, 2020
Add Comment
If you are beginner of html and css. Then this code will help you best practices.
HTML
<!-- This is doctype -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>This is title</title>
<link rel="stylesheet" href="card.css" type="text/css" media="all" />
<script src="https://kit.fontawesome.com/6093423242.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="up">
<p>Love to Coding?</p>
</div>
<div class="btn">
<a herf="#"><i class="fa fa-heart"></i></a>
<a herf="#"><i class="fa fa-heart-broken"></i></a>
</div>
<div class="down">
<p class="fan">Happy With fn's club?</p>
</div>
<div class="downbtn">
<a herf="#"><i class="fa fa-laugh-wink"></i></a>
<a herf="#"><i class="fa fa-frown"></i></a>
</div>
</body>
</html>
________________________
CSS
*{
margin: 0;
padding: 0;
}
body{
display: flex;
align-items: center;
justify-content: space-around;
height: 100vh;
width: 100%;
background: #091921;
}
.btn{
height: 100px;
width: 90vw;
position: absolute;
margin-top: 170px;
box-shadow: 5px 5px 7px #040a0d,
-5px -5px 7px #0e2835;
border-radius: 25px;
top: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: space-around;
}
a{
height: 80px;
width: 80px;
border-radius: 50%;
background: #091921;
box-shadow: 8px 8px 16px #040a0d,
-8px -8px 16px #0e2835;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
font-size: 40px;
}
.fa-heart{
color: White;
}
.fa-heart-broken{
color: White;
}
a:hover{
box-shadow: inset 8px 8px 16px #040a0d,
inset -8px -8px 16px #0e2835;
transition: 3s;
}
a:hover .fa-heart{
color: red;
font-size: 50px;
transition: 3s;
text-shadow: 0 0 5px red,
0 0 20px red;
}
a:hover .fa-heart-broken{
color: #00fff1;
font-size: 50px;
transition: 3s;
text-shadow: 0 0 5px #00fff1,
0 0 20px #00fff1;
}
.up{
height: 70px;
width: 90vw;
position: absolute;
margin-top: 60px;
box-shadow: 5px 5px 7px #040a0d,
-5px -5px 7px #0e2835;
border-radius: 25px;
top: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: space-around;
}
p{
font-family: Sans-Serif;
text-transform: uppercase;
font-size: 44px;
color: #ffffff;
animation: animate 20s linear infinite;
}
@keyframes animate{
0%
{
color: #FBC02D;
}
10%
{
color: #00fff1;
}
20%
{
color: #29B6F6;
}
30%
{
color: #18FFFF;
}
40%
{
color: #AEEA00;
}
50%
{
color: #F57F17;
}
60%
{
color: #BF360C;
}
70%
{
color: #F50057;
}
80%
{
color: #AA00FF;
}
90%
{
color: #D50000;
}
100%
{
color: #fff;
}
}
.down{
height: 70px;
width: 90vw;
position: absolute;
margin-top: 330px;
box-shadow: 5px 5px 7px #040a0d,
-5px -5px 7px #0e2835;
border-radius: 25px;
top: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: space-around;
}
.fan{
font-family: Sans-Serif;
text-transform: uppercase;
font-size: 30px;
color: #ffffff;
animation: animate 20s linear infinite;
}
.downbtn{
height: 100px;
width: 90vw;
position: absolute;
margin-top: 444px;
box-shadow: 5px 5px 7px #040a0d,
-5px -5px 7px #0e2835;
border-radius: 25px;
top: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: space-around;
}
a:hover .fa-laugh-wink{
color: #64DD17;
font-size: 50px;
transition: 3s;
text-shadow: 0 0 5px #64DD17,
0 0 20px #64DD17;
}
a:hover .fa-frown{
color: #424242;
font-size: 50px;
transition: 3s;
text-shadow: 0 0 5px #424242,
0 0 20px #424242;
}
.fa-laugh-wink{
color: White;
}
.fa-frown{
color: White;
}
Thanks 💛💛
Related Posts
Subscribe Our Newsletter
0 Comments to "Best shadow degine using html and css"
Post a Comment
Thank you so much!