Create animated profile with html and css
Animated profile using html and css
Code 👇🏻
<!doctype html>
<html>
<head>
<style>
body {background-color:#767676 ;}
h1 {
font-weight: bold;}
.twitter {
position: absolute;
padding-left: 100px;}
.instagram {
position: absolute;
padding-left: 800px;}
.facebook {
position: absolute;
padding-left: 450px;}
.name {
font-size: 50px;
margin-top: 35%;
animation-name: moving;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-direction: alternate-reverse;}
@keyframes moving {
from {padding-left: 5px;}
to {padding-left: 600px;} }
.profile {
width: 500px;
height: 500px;
display: block;
background-position: center;
border: 8px solid red;
border-style: ridge;
border-radius: 100%;
margin-left: auto;
margin-right: auto;
animation-name: move;
animation-iteration-count: infinite;
animation-direction: alternate-reverse;
animation-duration: 4s;}
@keyframes move {
0% {border: 1px solid yellow; box-shadow: 10px 10px 400px #B907E6;}
25% {border: 10px solid grey;box-shadow: 10px 10px 400px #0790E6;}
50% {border: 2px solid blue;box-shadow: 10px 10px 400px #07E627;}
75% {border: 16px solid #8CF302; box-shadow: 10px 10px 400px yellow;}
100%{border: 5px solid green;box-shadow: 10px 10px 400px #FA6B00;} }
</style>
</head>
<body>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<img class="profile" src="https://4.bp.blogspot.com/-ZYNYlTf0E-I/WJdUqObrruI/AAAAAAAAEXQ/qQu6p7rtsrAooWpVV-dIv05-H_WBoyLNgCPcBGAYYCw/s1600/IMG_4554web">
<h1 class="name"> ㅤ </redx<span style="color:#CF0000">cyber</span><span style="color:black;">></span></h1>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<a class="twitter" href="https://twitter.com/redxcyber"><img alt="svgImg" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjBweCIgeT0iMHB4Igp3aWR0aD0iMzAiIGhlaWdodD0iMzAiCnZpZXdCb3g9IjAgMCAzMCAzMCIKc3R5bGU9IiBmaWxsOiMwMDAwMDA7Ij4gICAgPHBhdGggZD0iTTI4LDYuOTM3Yy0wLjk1NywwLjQyNS0xLjk4NSwwLjcxMS0zLjA2NCwwLjg0YzEuMTAyLTAuNjYsMS45NDctMS43MDUsMi4zNDUtMi45NTFjLTEuMDMsMC42MTEtMi4xNzIsMS4wNTUtMy4zODgsMS4yOTUgYy0wLjk3My0xLjAzNy0yLjM1OS0xLjY4NS0zLjg5My0xLjY4NWMtMi45NDYsMC01LjMzNCwyLjM4OS01LjMzNCw1LjMzNGMwLDAuNDE4LDAuMDQ4LDAuODI2LDAuMTM4LDEuMjE1IGMtNC40MzMtMC4yMjItOC4zNjMtMi4zNDYtMTAuOTk1LTUuNTc0QzMuMzUxLDYuMTk5LDMuMDg4LDcuMTE1LDMuMDg4LDguMDk0YzAsMS44NSwwLjk0MSwzLjQ4MywyLjM3Miw0LjQzOSBjLTAuODc0LTAuMDI4LTEuNjk3LTAuMjY4LTIuNDE2LTAuNjY3YzAsMC4wMjMsMCwwLjA0NCwwLDAuMDY3YzAsMi41ODUsMS44MzgsNC43NDEsNC4yNzksNS4yMyBjLTAuNDQ3LDAuMTIyLTAuOTE5LDAuMTg3LTEuNDA2LDAuMTg3Yy0wLjM0MywwLTAuNjc4LTAuMDM0LTEuMDAzLTAuMDk1YzAuNjc5LDIuMTE5LDIuNjQ5LDMuNjYyLDQuOTgzLDMuNzA1IGMtMS44MjUsMS40MzEtNC4xMjUsMi4yODQtNi42MjUsMi4yODRjLTAuNDMsMC0wLjg1NS0wLjAyNS0xLjI3My0wLjA3NWMyLjM2MSwxLjUxMyw1LjE2NCwyLjM5Niw4LjE3NywyLjM5NiBjOS44MTIsMCwxNS4xNzYtOC4xMjgsMTUuMTc2LTE1LjE3N2MwLTAuMjMxLTAuMDA1LTAuNDYxLTAuMDE1LTAuNjlDMjYuMzgsOC45NDUsMjcuMjg1LDguMDA2LDI4LDYuOTM3eiI+PC9wYXRoPjwvc3ZnPg=="></a>
<a class="instagram" href="https://instagram.com/pranav__chandel"><img alt="svgImg" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjBweCIgeT0iMHB4Igp3aWR0aD0iMzAiIGhlaWdodD0iMzAiCnZpZXdCb3g9IjAgMCAzMCAzMCIKc3R5bGU9IiBmaWxsOiMwMDAwMDA7Ij4gICAgPHBhdGggZD0iTSA5Ljk5ODA0NjkgMyBDIDYuMTM5MDQ2OSAzIDMgNi4xNDE5NTMxIDMgMTAuMDAxOTUzIEwgMyAyMC4wMDE5NTMgQyAzIDIzLjg2MDk1MyA2LjE0MTk1MzEgMjcgMTAuMDAxOTUzIDI3IEwgMjAuMDAxOTUzIDI3IEMgMjMuODYwOTUzIDI3IDI3IDIzLjg1ODA0NyAyNyAxOS45OTgwNDcgTCAyNyA5Ljk5ODA0NjkgQyAyNyA2LjEzOTA0NjkgMjMuODU4MDQ3IDMgMTkuOTk4MDQ3IDMgTCA5Ljk5ODA0NjkgMyB6IE0gMjIgNyBDIDIyLjU1MiA3IDIzIDcuNDQ4IDIzIDggQyAyMyA4LjU1MiAyMi41NTIgOSAyMiA5IEMgMjEuNDQ4IDkgMjEgOC41NTIgMjEgOCBDIDIxIDcuNDQ4IDIxLjQ0OCA3IDIyIDcgeiBNIDE1IDkgQyAxOC4zMDkgOSAyMSAxMS42OTEgMjEgMTUgQyAyMSAxOC4zMDkgMTguMzA5IDIxIDE1IDIxIEMgMTEuNjkxIDIxIDkgMTguMzA5IDkgMTUgQyA5IDExLjY5MSAxMS42OTEgOSAxNSA5IHogTSAxNSAxMSBBIDQgNCAwIDAgMCAxMSAxNSBBIDQgNCAwIDAgMCAxNSAxOSBBIDQgNCAwIDAgMCAxOSAxNSBBIDQgNCAwIDAgMCAxNSAxMSB6Ij48L3BhdGg+PC9zdmc+"></a>
<a class="facebook" href="https://www.facebook.com/profile.php?id=100025025958695"> <img alt="svgImg" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjBweCIgeT0iMHB4Igp3aWR0aD0iMzAiIGhlaWdodD0iMzAiCnZpZXdCb3g9IjAgMCAzMCAzMCIKc3R5bGU9IiBmaWxsOiMwMDAwMDA7Ij4gICAgPHBhdGggZD0iTTE1LDNDOC4zNzMsMywzLDguMzczLDMsMTVjMCw2LjAxNiw0LjQzMiwxMC45ODQsMTAuMjA2LDExLjg1MlYxOC4xOGgtMi45Njl2LTMuMTU0aDIuOTY5di0yLjA5OWMwLTMuNDc1LDEuNjkzLTUsNC41ODEtNSBjMS4zODMsMCwyLjExNSwwLjEwMywyLjQ2MSwwLjE0OXYyLjc1M2gtMS45N2MtMS4yMjYsMC0xLjY1NCwxLjE2My0xLjY1NCwyLjQ3M3YxLjcyNGgzLjU5M0wxOS43MywxOC4xOGgtMy4xMDZ2OC42OTcgQzIyLjQ4MSwyNi4wODMsMjcsMjEuMDc1LDI3LDE1QzI3LDguMzczLDIxLjYyNywzLDE1LDN6Ij48L3BhdGg+PC9zdmc+"></a>
<details>
<br>
<br>
<br>
<summary style="margin-top:25%;font-size:50px;font-weight:bold;text-align:center;"> CLICK ME</summary>
<h1 style="color:#D00303;text-align:center;"> hey guys 👋</h1>
<h1 style="color:#8702B7;text-align:center;"> thank you for running my code ♥️ </h1>
<h1 style="color:#0210A6;text-align:center;"> i hope that you like this program 🤗 </h1>
<h1 style="color:black;text-align:center;"> plz give me a star 🌟 </h1>
</details>
</body>
</html>
