 |
| Instagram logo using html and css |
In this Article, we will learn about how to create Instagram logo using html and css with source code. Creating Instagram logo using html and css is simple with the given tutorial, which provides a simple step-by-step process to design Instagram logo using html and css. So, let's go and follow the steps carefully.
Steps to create and add Instagram logo using html and css
Here are the Steps to create Instagram logo using html and css as given below :-
1) Creating File on VS CODE :
Open VS Code, Create a new folder and add html and css file.
2) Adding HTML :
Add the .html file in the project folder and give it the name as - index.html.
3) Copy and Paste HTML code :
copy the following code and paste it in index.html file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- CSS Link -->
<link rel="stylesheet" href="style.css" />
<title>Instagram Logo</title>
</head>
<body>
<div id="coloured-part">
<div id="white-circle"></div>
<div class="white-part">
<div id="lense"></div>
</div>
</div>
<div class="text">Instagram</div>
</body>
</html>
4) Adding CSS :
Add the .css file in the project folder and give it the name as - style.css.
5) Copy and Paste CSS code :
copy the following code and paste it in style.css file.
::-webkit-scrollbar{
width: 0;
height: 0;
}
body {
background-color: #000000;
}
#coloured-part {
width: 200px;
height: 200px;
border: none;
background: linear-gradient(
20deg,
#ffdc80 25%,
#fcaf45,
#f77737,
#f56040,
#fd1d1d,
#e1306c,
#c13584,
#833ab4,
#5b51d8,
#405de6
);
border-radius: 40px;
position: relative;
top: 12rem;
left: 13rem;
box-shadow: 0 0 0px #a38d8d, 0 0 0px #405de6, 0 0 70px #833ab4;
}
#white-circle{
width: 20px;
height: 20px;
border-radius: 50px;
background-color: white;
position: relative;
top: 47px;
left: 134px;
}
.white-part {
width: 130px;
height: 130px;
border-radius: 40px;
border: 10px solid white;
position: relative;
top: 6px;
left: 25px;
}
#lense{
width: 60px;
height: 60px;
border-radius: 50px;
border: 10px solid white;
position: relative;
top: 24px;
left: 25px;
}
.text{
font-family: sans-serif;
color: white;
font-size: 70px;
font-weight: bold;
position: relative;
top: 7vh;
left: 27rem;
}
6) Check the Output :
After adding source code to the files, check the output of the project.
Here is the output of Instagram logo design :
About the code -
In this code, we used html to create a structure of the Instagram logo using html and css to design its structure. we created a clone of the instagram logo with giving a css styling to the element.
About the project -
In this project, we've created the Instagram logo using html and css. Instagram logo design is very useful to add on website, so use the given source code to add Instagram logo.
Hope this tutorial will help you to create Instagram logo using html and css easily with source code. if you have any confusion then you can contact with us on our coding community.
Also, checkout our website for more information and join our coding community on telegram to connect with coders.
Tags:
projects