Hello guys today we will learn How to make Instagram logo design in HTML and css
First we need to create two files index.html and style.css then we need to do code for it.
Step:1
Add below code inside index.html
<!DOCTYPE html> <html> <head> <title>Instagram Logo</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="logo-outer"> <div class="insta-icon"> <span></span> </div> </div> </body> </html>
Step:2
Then we need to add code for style.css which code i provide in below screen.
* {
padding: 0;
margin: 0;
}
body {
display: flex;
align-items: center;
justify-content: center;
width: 100vw;
height: 100vh;
}
.insta-icon {
--icon-size:128px;
position: relative;
width: var(--icon-size);
height: var(--icon-size);
background: radial-gradient( circle at 33% 100%,
#f3d373 4%, #f15245 30%,
#d92e7f 62%, #9b36b7 85%, #515ecf);
border-radius: 25%;
}
.insta-icon > span {
width: 12px;
height: 12px;
background: #fff;
display: block;
border-radius: 50%;
position: absolute;
right: 28px;
top: 30px;
}
.insta-icon:after,.insta-icon:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: calc(var(--icon-size)/1.5);
height: calc(var(--icon-size)/1.5);
border: calc(var(--icon-size)/15) solid #fff;
transform: translate(-50%, -50%);
}
.insta-icon:after {
width: calc(var(--icon-size)/3);
height: calc(var(--icon-size)/3);
border-radius: 50%;
}
.insta-icon:before {
border-radius: 25%;
}