About
Explore
Events & Classes
Support Us
Join
Sign In
Coding with Rumaysa
View Project Page
Run
Fullscreen
Instagram Logo (Pure CSS!)
HTML
CSS
JS
<!DOCTYPE HTML> <html> <head> <title>Page Title</title> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0,shrink-to-fit=no,width=device-width"> </head> <body> <div class="background"> <div class="inner-square"> <div class="circle"></div> <div class="dot"></div> </div> </div> </body> </html>
.background { width: 450px; height: 450px; left: 50%; top: 50%; position: absolute; transform: translate(-50%,-50%); border-radius: 80px; background: radial-gradient(circle at 30% 107%, #feda77 0%, #feda77 5%, #f55d16 45%, #dd2a7b 60%, #515bd4 90%); } .inner-square { border: 23px solid #ffffff; border-radius: 80px; left: 50%; top: 50%; position: absolute; transform: translate(-50%,-50%); width: 300px; height: 300px; } .circle { border: 23px solid #ffffff; border-radius: 50%; left: 50%; top: 50%; position: absolute; transform: translate(-50%,-50%); width: 120px; height: 120px; } .dot { border-radius: 50%; position: absolute; width: 30px; height: 30px; top: 28px; left: 224px; z-index: 1000; background-color: #ffffff; }
About
Explore
Events & Classes
Support Us
Join
Sign In
