Google Logo

HTML
<div class="google-logo"> <div class="hole"></div> </div>
CSS
html, body { background: white; height: 100%; width: 100%; display: flex; justify-content: center; align-items: center; } .google-logo { width: 0; height: 0; border-top: 200px solid #ea4335; border-right: 200px solid #4285f4; border-bottom: 200px solid #34a853; border-left: 200px solid #fbb605; border-radius: 50%; position: relative; } .google-logo:before { content: ''; background: white; width: 240px; height: 240px; position: absolute; top: -120px; left: -120px; border-radius: 50%; } .google-logo:after { content: ''; width: 196px; height: 80px; background: #4285f4; position: absolute; top: -40px; } .google-logo .hole { width: 0; height: 0; border-top: 200px solid transparent; border-right: 200px solid white; border-bottom: 0 solid transparent; border-left: 0 solid transparent; position: absolute; left: 40px; top: -240px; z-index: 100; }
JAVASCRIPT
Expand for more options Login