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;
}
This is it. You have made Instagram's logo.
You can view the codepen below.
Top comments (0)