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

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

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

Hello, guys welcome to Code With Random blog, today we will learn How To Create A Instagram Logo In Pure HTML & CSS. We have used the only div in HTML and Rest We Have Done In CSS. 

In CSS We have used: before and: after 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 is used for the box of Instagram and the inner box 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

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



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)
Instagram:  @frontendeverything

1 Comments

Post a Comment

Previous Post Next Post