How to create Instagram Logo Using HTML CSS? | Code With Random

How to create Instagram Logo Using HTML CSS? | Code With Random

Instagram html code main pic

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!


1Create 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. 


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


How to create Instagram Logo Using HTML CSS? | Create Instagram Logo Using Html & CSS only?


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

How to create Instagram Logo Using HTML CSS? | Create Instagram Logo Using Html & CSS only?



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

Instagram coding html

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)


Articles web Stories

1 Comments

Post a Comment

Previous Post Next Post