How I made Google's Logo using HTML and CSS🚀

Hello Guys, Welcome back to another post of Sai Ansul's Blog. This blog will find How I made Instagram's logo using HTML and CSS.

So let's start,

Here firstly, I'll use Visual Studio Code to run the code.

Then make one .html file and another .css file and link it is using.

Let's Code.png

<link rel="stylesheet" href="file name"

So after linking that, I started coding in a CSS file. I started making the background using five colours, the added border, size, and initials.

As we all know, Google's logo has four colours in its initial letter G:

Red
Yellow
Green
Blue.

So, the HTML code is:

<div id="google"></div>

I have named the div as google.

We need to fix the position, height, width, and padding, then put up the initial.

#google {
    position: relative;
    border-top: 100px solid #EA4335;
    border-right: 100px solid #4285F4;
    border-bottom: 100px solid #34A853;
    border-left: 100px solid #FBBC05;
    border-radius: 50%;
    background-color: #FFFFFF;
    width: 300px;
    height: 300px;
    padding: 0;
    margin: 10vh auto 0;
  }

This is the code for the position, height, width, and padding.

Now the initial letter G with four colours.

#google::before {
    content: "";
    z-index: 100;
    position: absolute;
    top: 50%;
    right: -95px;
    transform: translateY(-50%);
    width: 245px;
    height: 100px;
    background: #4285F4;
  }

  #google::after {
    content: "";
    z-index: 101;
    position: absolute;
    border-top: 200px solid transparent;
    border-right: 200px solid #FFFFFF;
    top: -100px;
    right: -100px;
    width: 0;
    height: 0;
  }

And here you go, this was how to make Google's logo using HTML and CSS.

Let's Code (1).png

This is it for today.

I hope you found it helpful.

If you like my content and want to support my efforts, please like👍🏻, share📲 & subscribe to the newsletter to be get notified whenever I post a new blog.