Instagram logo using HTML | CSS
Hello! Let's learn how to make Instagram logo (clone) using Html and Css only.
Please follow the below code and get started 💻.
HTML Code
<body>
<div class="logo">
<div class="inner"></div>
</div>
</body>CSS Code
* {
margin: 0;
padding: 0;
}
body {
min-height: 100vh;
background: #f1f2f3;
display: flex;
}
.logo {
position: relative;
margin: auto;
width: 200px;
height: 200px;
background: linear-gradient(-135deg, #5c4cc6 10%, #d72b75, #f49b3b);
border-radius: 50px;
display: flex;
}
.inner {
position: relative;
margin: auto;
width: 115px;
height: 115px;
border-radius: 40px;
border: 15px solid #fff;
}
.inner::before {
position: absolute;
content: '';
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 48px;
height: 48px;
border: 14px solid #fff;
border-radius: 50%;
}
.inner::after {
position: absolute;
content: '';
top: 1.2rem;
right: .2rem;
transform: translate(-50%, -50%);
width: 16px;
height: 16px;
background: #fff;
border-radius: 50%;
}I hope you find this helpful and interesting. Thank you for visiting my blog.
Code by - AltafAlam Shaikh
Topic covered - pseudo elements, gradients, border-radius in css
Technology used - Html, Css