Create Instagram Logo Using HTML CSS (Source Code)

Create Instagram Logo Using HTML CSS (Source Code)

Hello, guys welcome to Code With Random blog, today we will learn about How To Create An Instagram Logo In HTML & CSS. We have used only the div tag in HTML and Rest have been done In CSS. We will use pure CSS to make this logo.

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

100+ Front-end Projects for Web developers (Source Code)

1. Create Two Divs 

 <div class="insta">  
     <div class="innerbox">  
     </div>  
   </div>  

The HTML part is this only! The first div tag with “insta” class is used for the box of Instagram and the child div tag with “innerbox” class is used for borders and circles.

2. Now Jump To CSS | Reset And Centering 

 /* 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.

50+ Front-end Projects With Source Code | Front-end Projects With Source Code

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

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

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

Portfolio Website Using HTML CSS And JAVASCRIPT ( Source Code)

You can try the live example of this project below:

 

Conclusion
In this article, we have learned how to make an Instagram logo using HTML & CSS.
Thanks for showing your Interest I hope Guys You Liked this article learn something so please send your feedback and also follow our Instagram for more content

Written By:  Frontend Everything (Piyush)

Share on:

0 thoughts on “Create Instagram Logo Using HTML CSS (Source Code)”

Leave a Comment