instagram html code

Create Instagram Logo/Icon Using HTML And CSS Code

Create Instagram Logo/Icon Using HTML And CSS Code

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.

50+ HTML, CSS & JavaScript Projects With Source Code

Code byFrontend Everything
Project DownloadLink Available Below
Language usedHTML and CSS
External link / DependenciesYES
ResponsiveYES
Instagram logo Table

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.

Portfolio Website Using HTML CSS And JAVASCRIPT ( Source Code)

Instagram Logo Code Html

In CSS We have used:: before and:: after pseudo-elements for circles. Hope You will enjoy it!

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

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.

Hamburger Menu Using HTML,CSS and JavaScript

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.

Output

Instagram Logo Code Html
 

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!
 
 
Output
 
Instagram Logo Code Html
 

 

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.

Final Output Of Instagram Logo/Icon Using HTML And CSS Code:-

Instagram Logo Code Html
Instagram Logo

Video Output:-

 
 
[su_button id=”download” url=”https://drive.google.com/drive/folders/1uuQmpZlpxsKWduTM0dedjR_DmK8ofLFr?usp=sharing” target=”blank” style=”3d” size=”11″ wide=”yes” center=”yes” icon=”icon: download”]DOWNLOAD CODE NOW[/su_button]
 

Live Preview Of Instagram Logo/Icon Using HTML And CSS Code:-

Restaurant Website Using HTML and CSS

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!!!

Which code editor do you use for this Instagram logo project coding?

I personally recommend using VS Code Studio, it’s very simple and easy to use.

ADVERTISEMENT

is this project responsive or not?

Yes! this project is a responsive project.

ADVERTISEMENT

Do you use any external links to create this project?

Yes!

ADVERTISEMENT



This Post Has One Comment

Leave a Reply