Create GeeksforGeeks logo using HTML and CSS - GeeksforGeeks

25 Feb, 2021
In this article, we will see how to create a GeeksforGeeks logo using HTML and CSS only.
Step 1: To create the GFG logo, first we take two divs (which are inline) and make circles with them. But the div elements are block-level that’s why we wrap both the divs with a wrapper div and make that div (wrapper) to display flex. Apply border with 10px solid colored green. You will get something like this.
Step 2: Now create a triangle on both the circles using pseudo-element: “after” and absolute position property. After applying the triangle we will get the shape like this.
Here the triangle’s background-colors are yellow, this is just for explanation. Change the background-color of triangles into white.
After applying the white background color into the triangles the result is :
Step 3: Now using the pseudo-element :before and position absolute property, create a square. You can apply this rule to any of the circles. The resulting logo looks like this:
Implementation with code :
Step 1: Create two divs having classes named circle1 and circle2, and wrap them into a parent div having the class named wrapper.
HTML
<div class="wrapper">  <div class="circle1"></div>  <div class="circle2"></div></div>
Now assign the CSS property to the wrapper class.
.wrapper{
   display: flex;
}
And style both the circles 
CSS
.circle1{    height: 100px;    width: 100px;    border: 20px solid green;    border-radius: 100px;    position: relative;}    .circle2{    height: 100px;    width: 100px;    border: 20px solid green;    border-radius: 200px;    position: relative;}
Till now our logo looks like this
Step 2: Add the invisible triangles into both the circles using pseudo-element :after
CSS
.circle1:after{    content: "";    position: absolute;    border-top: 100px solid transparent;    border-left: 140px solid white;    left: -50px;    top: -35px;}    .circle2:after{    content: "";    position: absolute;    border-top: 100px solid transparent;    border-right: 140px solid white;    right: -50px;    top: -35px;}
The resulting logo looks like this –
Step 3: Now add square onto the logo using before pseudo-element (we are not using after (pseudo-element) because we already used it for creating triangle).
CSS
.circle1:before{    content: "";    height: 20px;    width: 276px;    position: absolute;    background: green;    left: -18px;    top: 45px;    z-index: 1;}
The resulting logo is:
HTML
<!DOCTYPE html><html>  <head>    <style>        .wrapper {            display: flex        }          .circle1 {            height: 100px;            width: 100px;            border: 20px solid green;            border-radius: 100px;            position: relative;        }          .circle2 {            height: 100px;            width: 100px;            border: 20px solid green;            border-radius: 200px;            position: relative;        }          .circle1:after {            content: "";            position: absolute;            border-top: 100px solid transparent;            border-left: 140px solid white;            left: -50px;            top: -35px;        }          .circle2:after {            content: "";            position: absolute;            border-top: 100px solid transparent;            border-right: 140px solid white;            right: -50px;            top: -35px;        }          .circle1:before {            content: "";            height: 20px;            width: 276px;            position: absolute;            background: green;            left: -18px;            top: 45px;            z-index: 1;        }    </style></head>  <body>    <div class="wrapper">        <div class="circle1"></div>        <div class="circle2"></div>    </div></body>  </html>
You can see that you are using many properties which are the same for both circles. If we use the same id for both the circles then we can write the common properties into that id and different properties into the classes.
Here is the optimized code for the above logo:
HTML
<!DOCTYPE html><html>  <head>    <style>        .wrapper {            display: flex        }          #circle {            height: 100px;            width: 100px;            border: 20px solid green;            border-radius: 100px;            position: relative;        }          #circle:after {            content: "";            position: absolute;            border-top: 100px solid transparent;            top: -35px;        }          .circle1:after {            border-left: 140px solid white;            left: -50px;            top: -35px;        }          .circle2:after {            border-right: 140px solid white;            right: -50px;        }          .circle1:before {            content: "";            height: 20px;            width: 276px;            position: absolute;            background: green;            left: -18px;            top: 45px;            z-index: 1;        }    </style></head>  <body>    <div class="wrapper">        <div id="circle" class="circle1"></div>        <div id="circle" class="circle2"></div>    </div></body>  </html>
Output:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
CSS-Questions
HTML-Questions
Technical Scripter 2020
CSS
HTML
Technical Scripter
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to set space between the flexbox ?
Design a web page using HTML and CSS
Create a Responsive Navbar using ReactJS
Making a div vertically scrollable using CSS
Form validation using jQuery
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property
How to set input type date in dd-mm-yyyy format using HTML ?
REST API (Introduction)
How to Insert Form Data into Database using PHP ?