In this article, we will learn how to recreate the Hashnode Logo using plain HTML/CSS. No JavaScript is involved. Prerequisites Basic Knowledge of HTML/CSS A Code editor like VS Code A web browser like Chrome/Firefox/Edge Analyzing the Logo The Hashnode Logo comes in and themes, and it looks like a tilted square with curved edges and a circle in the center. light dark HTML Code For this project, let's create two files. and . index.html style.css Open VS Code and create the HTML boilerplate by pressing and enter. Then, link the in the head tag. In the body section, let's create two divs; one inside the other as below. ! style.css <div class="blue-square">
  <div class="circle"></div>
</div> The outer div has a class where we will style the outer blue region of the logo, and the inner div has a class where we will style the inner circle of the logo. blue-square circle The entire would look like this: index.html <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>HashNode Logo</title>
  </head>

  <body>
    <div class="blue-square">
      <div class="circle"></div>
    </div>
  </body>
</html> Styling With CSS: In this section, we will style the logo using CSS. Let's make the box-sizing as . Let's remove all the unnecessary margins and paddings that come up with the browser. border-box And finally, let's create a CSS variable to specify the background as black or white for the respective theme. --bgcolor * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  --bgcolor: white;
} Next, let's make our logo centered on the page. Since our is a direct child of the body element. We can use the selector and make the 's inside it centered using the flex property. blue-square body div body {
  background-color: var(--bgcolor);
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
} Here, we have given the property to be the variable . We have made the as to make it a flexbox. Height is set to to take up the entire height of the viewport. background-color --bgcolor display flex 100vh will make the to be centered horizontally and will make the to be centered vertically. justify-content: center div align-items: center div Note: won't work if you don't specify a height property to your element. align-items: center There won't be anything to see on the screen still. Let's move to style the outer part of our logo which is the blue-colored region. Use the selector to style the element. .blue-square .blue-square {
  width: 60px;
  height: 60px;
  background-color: blue;
  border-radius: 20px;
  rotate: 45deg;
} Let's give the outer div a and of and the of . And let's give a of to look more curved. At this point, it would look like a blue square with curved borders as shown below: height width 60px background-color blue border-radius 20px But the actual logo is not just a square but a tilted one. So, let's rotate it by . Add this property to the above selector. 45deg .blue-square {
  /* Other Properties */
  rotate: 45deg;
} Now, it will give us the resemblance of the actual logo. Now, let's move on to design the center circle. But wait, to make the circle centered, we need to make its parent a flexbox and give the and property to . So, here the parent of the is the . Let's add those properties to that. justify-content align-items center circle blue-square .blue-square {
  /* Other Properties */
  display: flex;
  justify-content: center;
  align-items: center;
} Now, let's style the element. Let's give it a background color the same as the variable. Let's give it a and of . To make the div a circle, let's give it a of . It will make the div to be a circle. As simple as that. circle --bgcolor width height 24px border-radius 50% .circle {
  background-color: var(--bgcolor);
  width: 24px;
  height: 24px;
  border-radius: 50%;
} That's it. The Hashnode logo is complete. Try changing the variable between and to see the logo in and modes. --bgcolor black white light dark In Dark Mode: In Light Mode: Disclaimer: This may or may not have the exact aspect ratio or dimensions and other characteristics of the original logo. For legal use of the Hashnode Logo, contact the Hashnode team directly. Conclusion If you found it helpful, please leave a like, and let me know your thoughts in the comments below. You can see the logo in action in the below codepen. https://codepen.io/knirmalkumar/pen/oNPgdgo?embedable=true Also published here

Stop Using State for React Forms, There is a Much Better Way!

How to Design the Hashnode Logo With HTML and CSS

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

A Detailed Guide to the useEffect Hook in React

104 Stories To Learn About Go

105 Stories To Learn About Functional Programming

100+ Free Pluralsight Courses to learn Python, Java, and Spring Boot

10 Websites to Learn JavaScript for Beginners

A Detailed Guide to the useEffect Hook in React

104 Stories To Learn About Go

105 Stories To Learn About Functional Programming

100+ Free Pluralsight Courses to learn Python, Java, and Spring Boot

10 Websites to Learn JavaScript for Beginners

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps