Your Web News in One Place

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
September 20, 2020 03:36 am GMT

google logo with just html & css

So, here's how to create the Google logo with just HTML and CSS.

First, place a div in your html with an id of google.

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

Then, hop into css and input the following code.

#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;}

That should leave you with a circle that has 4 of the Google's color. To turn that into a 'G', input the code below.

#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;}

Voila, you just created the Google logo using only HTML and CSS.


Original Link: https://dev.to/rs9110/google-logo-with-just-html-css-3bmi

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To