INSTAGRAM icon Designing using HTML and CSS.

INSTAGRAM ICON DESIGN :-

Hey guy's in this tutorial

we have designed a INSTAGRAM logo . Yes , logo we have designed will not

perfectly match to original but we think no one going to say that your logo is not like

original logo. We request all to execute this web program once it will really joyful

once you got correct result. You will really going happy as you see output in given video.

PROGRAM SOURCE CODE :-

1) HTML coding :

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width,initial-scale=1.0">

    <title>Logo Desgning By Me</title>

    <link rel="stylesheet" type="text/css" href="..\CSS\Logo_Desgining.css">

</head>

<body>

    <div id="main-div">

        <h1>(2) InstaGram</h1>

        <div id="center-div-one">

            <div id="square"></div>

        </div>

    </div>

</body>
</html>

2) CSS coding :

*, 
*::before,
*::after
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html{
    font-size: 62.5%;
}

body{
    overflow-x: hidden;
}

#main-div{
    width: 100vw;
    height:100vh;
    background-color: rgba(0,0,0,0.8);
    display: grid;
    place-items:center;
}

#center-div-one{
    width: 30rem;
    height:30rem;
    border-radius: 6rem;
     background: radial-gradient(circle at 30% 107%, #fdf497 0%,
 #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
     display: grid;
     place-items:center;
}

#square{
    width: 20rem;
    height: 20rem;
    border:1.2rem solid #fff;
    border-radius: 6rem;
    background-color: transparent;
    position: relative;
    display: grid;
    place-items:center;
}

#square::before{
    content: " ";
    width: 10rem;
    height: 10rem;
    border: 1.2rem solid #fff;
    border-radius: 50%;
    position: absolute;
    background-color: transparent;
}

#square::after{
    content: " ";
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background-color: #fff;
    position: absolute;
    top:15%;
    right: 10%;
}

OUTPUT :-

( NOTE : - While executing program you have to replace links of images , audio's or video's in this program by your links. So take care of it ! )