Hello Guys, In this article or video we will see Instagram Logo Using Only HTML & CSS. You will use this Instagram Logo Using Only HTML & CSS on your website freely. If you learn How to Create this amazing Logo so watch my video from YouTube or bellow. And you wish to learn more amazing HTML, CSS and JavaScript Effect or Tutorial so Subscribe my YouTube Channel Pure Coding and Stay with this website.
Watch Video
--------------------
Source Code
--------------------
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Instagram Logo Using Only HTML & CSS - Pure Coding</title>
</head>
<body>
<div class="instagram_logo">
<div class="square">
</div>
</div>
</body>
</html>
CSS:
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,
200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,
600;1,700;1,800;1,900&display=swap');
* {
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
}
html, body {
width: 100%;
min-height: 100%;
display: grid;
place-items: center;
}
.instagram_logo {
width: 300px;
height: 300px;
background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%,
#fd5949 45%,#d6249f 60%,#285AEB 90%);
box-shadow: 0 0 5px rgba(0, 0, 0, .5);
border-radius: 40px;
display: grid;
place-items: center;
}
.instagram_logo .square {
width: 60%;
height: 60%;
background: transparent;
border: 20px solid #FFF;
border-radius: 40px;
position: relative;
display: grid;
place-items: center;
}
.instagram_logo .square::before {
content: "";
position: absolute;
width: 40%;
height: 40%;
background: transparent;
border: 20px solid #FFF;
border-radius: 50%;
}
.instagram_logo .square::after {
content: "";
position: absolute;
width: 14%;
height: 14%;
background: #FFF;
border-radius: 50%;
top: 15px;
right: 15px;
}
Post a Comment