How to design chrome logo with html and css only

#html #css #webdev

How to design chrome logo with html and css
Is it true that Chrome logo can be designed using html and css besides corel-draw? Of course, it can be done with it. Infact in a very simple way here we go!
Step1: open six div tags so that the first div serve as big container for others while the last is put inside the second to the last div like the following :

<div>
  <div></div>
  <div></div>
  <div></div>
  <div>
    <div></div>
  </div>
</div>

Step2: give each one of them id , chrome for the first div, division1 for the second, division2 for the third, division3 for the fourth, circle for the fifth and center for the six so that it look like the following:

<div id="chrome">
    <div id="division1"></div>
      <div id="division2"></div>
      <div id="division3"></div>
      <div id="circle">
       <div id="center"></div>
      </div>       
    </div>
  </div>

If you run this code it will display noting so we need style tag or css page to write our css code.
Step3: we need to design the container(chrome) that will carry everything with the following codes:

#chrome {
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  height: 210px;
  width: 210px;
  left: 40vw;
  top: 30vh;
}

Step3: we need to design the center by writing the following code:

#center{
  background: #0d6cac;
  height: 90px;
  width: 90px;
  margin-left: -45px; 
  background: #0880b8; 
  margin-top: -45px;
}

Run the code you will see a dull-blue quadrant of a circle i.e quarter of a circle
Step5 : we write the following codes to design the circle too so that we can see two different things.

#circle {
  background: orange;
  height:  104px;
  width: 104px;
  margin-top: -48px;
  margin-left: -47px;
}

Try to run the code again you should see an orange quadrant of circle.
Step6: Now we need to write more code on both center and circle to display them as we can see that the quadrant (orange) is the only one display. So we add the following code:

#center,#circle {
  border-radius: 50%; /* to make circle for each*/
  position: absolute;
  top: 50%;
  left: 50%;}

Run the code again, it should display two circle one inside the other.
step7: Now we need all all the three divisions of the chrome logo to do that we write the below codes for the first division:

#division1 {
  background: #e93c35;
  position: absolute;
  top: 0;
  left: 34px;
  width: 200px;
  height: 60px;
}

Run the codes you should see a red shape closed to semi-circle on the top of the circle.
Step8: we write more code on the division above so that the red could cover one-third of the small circle. So add the following code to your css or style

#division1:after {
  transform: rotate(60deg);
  content: " ";
  background: #e93c35;
  position: absolute;
  top: 0;
  left: -91px;
  width: 200px;
  height: 60px;
}

Run the code you should see a the red covering one-third of the circle. Is that so? Good! We almost done the work.
Step9 : write the following code for division2 just like we did for division one so that it cover one-third also.

/* the second part here*/
#division2 {
  position: absolute;
  top: 131px;
  left: 56px;
  width: 200px;
  height: 65px;
  transform: rotate(120deg);
  background: #fdd901;
}
/*to cover the little white part of second part one-third */
#division2:after {
  position: absolute;
  top: 0;
  left: -91px;
  width: 200px;
  height: 60px;
  transform: rotate(60deg);
  content: " ";
  background: #fdd901;
}

Run the codes you should see two-third of the circle already covered with two different colors now what else? Yes! To do the same thing for the third part
Step10: write the following codes for the third division so that the whole circle will be completed

/* the third division start here*/
 #division3 {
  position: absolute;
  top: 88px;
  left: -74px;
  width: 200px;
  height: 65px;
  transform: rotate(-120deg);
  background: #5bc15b;

}
/*to cover the little white part of second division */
#division3:after {
  position: absolute;
  top: 0;
  left: -91px;
  width: 200px;
  height: 60px;
  transform: rotate(60deg);
  content: " ";
  background: #5bc15b;
}

Run the code and tell me what you see. Boom! It is a chrome like? But there is something you don’t realize, check the real chrome and our design what was that? No! We have color orange where we are supposed to have white, did you notice? Good! Now what do we do? Yeah! Just go to where we design circle and change the orange to white. So that it look like the following:

#circle {
  background: white;
  height:  104px;
  width: 104px;
  margin-top: -48px;
  margin-left: -47px;
}

Now run the code or check these link what do you see? Chrome logooo!

You just design chrome logo with just html and css. you can join me instagram or twitter