Hello, guys welcome to Code With Random blog, today we will learn about How To Create An Instagram Logo/Icon In HTML and CSS Code. We have used only the div tag in HTML and Rest has been done In CSS. We will use pure CSS to make this logo.
this is an animated Instagram logo using HTML and CSS. Everybody is aware that any software must have an icon to indicate its purpose.
Therefore, Instagram is a social networking platform that enables users to communicate with their friends, family, and other acquaintances. We made the decision to create an animated Instagram logo.
In CSS We have used:: before and:: after pseudo-elements for circles. Hope You will enjoy it!
Instagram Logo Code Html:-
1. Create Two Divs
<div class="insta"><div class="innerbox"></div></div>
The HTML part is this only! The first div tag with the "install" class is used for the box Instagram and the child div tag with the "inner box" class is used for borders and circles.
First, we’ll include a link to our CSS file’s external file in the HTML head section.
Now that we have a link to our logo in the body section, we can arrange our website using the i tag with the id “logo”.
Right now, the output is blank, so we’ll add some temporary material to it to let you understand that we’ve introduced a structure to our webpage.
Instagram Icon Css Code:-
2. Reset And Centering In CSS
/* Css reset */ * { margin: 0; padding: 0; box-sizing: border-box; } /*
centering the insta logo */ body { display: flex; justify-content: center;
align-items: center; width: 100vw; height: 100vh; overflow: hidden; }
We will first do a CSS reset and center our content vertically and horizontally.
3. Customizing Our Logo Box
/* main box of insta */ .insta { width: 150px; height: 150px; background:
radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f
60%, #285aeb 90%); border-radius: 35px; display: grid; place-items: center; }
Now, We will Give Instagram logos, height, width, background, and border-radius.
4. Giving The Logo, Inner Border
/* innerbox in insta box */ .innerbox { width: 120px; height: 120px; border:
10px solid #fff; border-radius: 32px; display: grid; place-items: center;
position: relative; }
We have given our logo the inner border!
5. Circles Of Logo With: before and: after
/* center circle of insta */ .innerbox::before { content: ''; width: 45px;
height: 45px; border: 10px solid #fff; border-radius: 50%; background:
transparent; position: absolute; } /* top right circle of insta */
.innerbox::after { content: ''; width: 10px; height: 10px; border: 2px solid
#fff; border-radius: 50%; background: #fff; position: absolute; top: 8px; right:
10px; }
Lastly, We have to make a small and large circle with the help of: before and: after! And Congratulations! Your Logo Is Ready.
Conclusion
In this article, we have learned how to make an Instagram Logo using HTML and CSS Code. Thanks for showing your Interest I hope Guys You Liked this article and learn something so please send your feedback and also follow our Instagram for more content
Written By: Frontend Everything (Piyush)
Thank You And Happy Learning!!!
Top comments (0)