GLOWING CSS BEAUTIFUL SOCIAL MEDIA ICONS @Dr Tech |HTML| |CSS| |WEBSITE|...

2 HTML And CSS Cooding July 20, 2022

HTML SOURCE CODE

<!DOCTYPE html>

<html>

<head>

<title></title>

<link rel="stylesheet" type="text/css" href="glow.css">

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

</head>

<body>

<div class="container">

<i class="fa fa-apple" id="apple"></i>

<i class="fa fa-twitter" id="twitter"></i>

<i class="fa fa-github-square github" id="github"></i>

<i class="fa fa-facebook-square" id="facebook"></i>

</div>

</body>

</html>

CSS SOURCE CODE

* {

margin: 0;

padding: 0;

}

body {

height: 100vh;

width: 100vw;

background: #18191f;

}

.container {

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

width: 100vw;

}

#apple,

#twitter,

#github,

#facebook {

font-size: 8em;

background-color: #18191f;

color: #fff;

box-shadow: 2px 2px 2px #00000080, 10px 1px 12px #00000080,

2px 2px 10px #00000080, 2px 2px 3px #00000080, inset 2px 2px 10px #00000080,

inset 2px 2px 10px #00000080, inset 2px 2px 10px #00000080,

inset 2px 2px 10px #00000080;

border-radius: 29px;

padding: 11px 19px;

margin: 0 40px;

animation: animate 3s linear infinite;

text-shadow: 0 0 50px red, 0 0 100px red, 0 0 150px red,

0 0 200px red;

}

#twitter {

animation-delay: 0.3s;

}

#facebook {

animation-delay: 0.7s;

}

#github {

animation-delay: 0.1s;}

@keyframes animate {

from {filter: hue-rotate(0deg);}

to {

filter: hue-rotate(360deg);

}

}

Post a Comment

* Please Don't Spam Here. All the Comments are Reviewed by Admin.

AnonymousJuly 25, 2022 at 12:07 AM
GOOD JOB
ReplyDelete
Replies
AnonymousJuly 27, 2022 at 10:33 PM
this is my favorite
ReplyDelete
Replies