HTML
CSS
JS
Result
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Instagram logo using HTML and CSS</title> </head> <body> <div class="logo-main"> <div class="square-div"> <div class="circle-big"></div> <div class="circle-small"></div> </div> </div> </body> </html>
CSS
body { min-height: 100vh; display: grid; place-items: center; } .logo-main { height: 200px; width: 200px; background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); border-radius: 60px; display: flex; align-items: center; justify-content: center; } .square-div { width: 140px; height: 140px; background-color: transparent; border: 12px solid white; border-radius: 45px; display: flex; align-items: center; justify-content: center; position: relative; } .circle-big { height: 60px; width: 60px; background-color: transparent; border: 12px solid white; border-radius: 50%; } .circle-small { width: 15px; height: 15px; background-color: white; border-radius: 50%; position: absolute; top: 15px; right: 15px; }
JS
Instagram logo using HTML and CSS