Let's make Instagram Logo using HTML & CSS!

#html #css #beginners #codepen

Hello Everyone,
I am posting a Article after a long time so hope you like it!

Today we are going to make Instagram's Logo using HTML and CSS

Let us get started!

1. HTML

<div class="outer">  
    <div class="inner">  
    </div>  
</div>

We have made a div which contains another div with classes outer and inner respectively!

2. CSS

 /* Basic */  
 * {  
   margin: 0;  
   padding: 0;  
   box-sizing: border-box;  
 }   
 body {  
   display: flex;  
   justify-content: center;  
   align-items: center;  
   width: 100vw;  
   height: 100vh;  
   overflow: hidden;  
 }

Above, we used css to make our page look nice. Now let's design the logo.

.outer {  
   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;  
 }  
 /* innerside in outer box */  
 .inner {  
   width: 120px;  
   height: 120px;  
   border: 10px solid #fff;  
   border-radius: 32px;  
   display: grid;  
   place-items: center;  
   position: relative;  
 } 
 /* center circle of logo */  
 .inner::before {  
   content: '';  
   width: 45px;  
   height: 45px;  
   border: 10px solid #fff;  
   border-radius: 50%;  
   background: transparent;  
   position: absolute;  
 }  
 /* top right circle of logo */  
 .inner::after {  
   content: '';  
   width: 10px;  
   height: 10px;  
   border: 2px solid #fff;  
   border-radius: 50%;  
   background: #fff;  
   position: absolute;  
   top: 8px;  
   right: 10px;  
 }