GOOGLE CHROME logo Designing using only

HTML and CSS.

PROGRAM SOURCE CODE :-

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">
    <link rel="stylesheet" type="text/css"
 href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<!-------- Google Chrome Coding ---------->

<div id="main-div">
    <h1>(4) Google Chrome </h1>
    <div id="contain">
    <div id="sm-circle"></div>
    <div id="yellow-part"></div>
    <div id="green-part"></div>
    </div>
</div>
</body>
</html>

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{
    width: 30rem;
    height: 10rem;
    border:.5rem solid blue;
    border-radius: 50%;
    position: relative;
    display: grid;
    place-items:center;
}

#center-div::before{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border:.5rem solid blue;
    border-radius: 50%;
    transform: rotate(60deg);
}

#center-div::after{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border:.5rem solid blue;
    border-radius: 50%;
    transform: rotate(-60deg);
}

#circle{
    width:5rem;
    height: 5rem;
    background-color: blue;
    border-radius: 50%;
}

#main-div h1{
    color: #fff;
    font-family:sans-serif;
    font-size: 3rem;
    text-transform: uppercase;
}

#contain{
    width: 35em;
    height:35rem;
    background-color: brown;
    border-radius: 50%;
    display: flex;
    justify-content:  center;
    align-items: center;
    position: relative;
    overflow:hidden;
}


#sm-circle{
    width: 17rem;
    height: 17rem;
    background-color: blue;
    border-radius: 50%;
    border:1rem solid #fff;
    z-index: 3;
}

#yellow-part{
    position: absolute;
    top:26.5%;
    left: 61.5%;
    width: 100%;
    height: 100%;
    background-color: #ffa801;
    z-index: 2;
    transform: skewX(-30deg);
}

#yellow-part::before{
    content: " ";
    position: absolute;
    top:0;
    left: -5rem;
    width: 100%;
    height: 50%;
    background-color: #ffa801;
    transform: skewX(50deg);
}

#green-part{
    position: absolute;
    top: 15%;
    left: -24rem;
    width: 100%;
    height: 100%;
    background-color: #009432;
    z-index:1;
    transform: skewX(32deg);
}

#green-part::before{
    content: " ";
    position: absolute;
    top: 18rem;
    left: 16rem;
    width: 100%;
    height: 100%;
    background-color: #009432;

}