281 reads

How to Design the Hashnode Logo With HTML and CSS

by Nirmal KumarFebruary 20th, 2023

Too Long; Didn't Read

In this article, we will see 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 Analysing the LogoThe Hash node Logo comes in `light` and `dark` themes. It looks like a tilted square with curved edges and a circle in the center.

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 light and dark themes, and it looks like a tilted square with curved edges and a circle in the center.

HTML Code

For this project, let's create two files. index.html and style.css.

Open VS Code and create the HTML boilerplate by pressing ! and enter. Then, link the style.css in the head tag. In the body section, let's create two divs; one inside the other as below.

<div class="blue-square">
  <div class="circle"></div>
</div>

The outer div has a class blue-square where we will style the outer blue region of the logo, and the inner div has a class circle where we will style the inner circle of the logo.

The entire index.html would look like this:

<!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 border-box. Let's remove all the unnecessary margins and paddings that come up with the browser.

And finally, let's create a CSS variable --bgcolor to specify the background as black or white for the respective theme.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  --bgcolor: white;
}

Next, let's make our logo centered on the page. Since our blue-square is a direct child of the body element. We can use the body selector and make the div's inside it centered using the flex property.

body {
  background-color: var(--bgcolor);
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
}

Here, we have given the background-color property to be the variable --bgcolor. We have made the display as flex to make it a flexbox. Height is set to 100vh to take up the entire height of the viewport.

justify-content: center will make the div to be centered horizontally and align-items: center will make the div to be centered vertically.

Note: align-items: center won't work if you don't specify a height property to your element.

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 .blue-square selector to style the element.

.blue-square {
  width: 60px;
  height: 60px;
  background-color: blue;
  border-radius: 20px;
  rotate: 45deg;
}

Let's give the outer div a height and width of 60px and the background-color of blue. And let's give a border-radius of 20px to look more curved. At this point, it would look like a blue square with curved borders as shown below:

Square

But the actual logo is not just a square but a tilted one. So, let's rotate it by 45deg. Add this property to the above selector.

.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 justify-content and align-items property to center. So, here the parent of the circle is the blue-square. Let's add those properties to that.

.blue-square {
  /* Other Properties */
  display: flex;
  justify-content: center;
  align-items: center;
}

Now, let's style the circle element. Let's give it a background color the same as the --bgcolor variable. Let's give it a width and height of 24px. To make the div a circle, let's give it a border-radius of 50%. It will make the div to be a circle. As simple as that.

.circle {
  background-color: var(--bgcolor);
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

That's it. The Hashnode logo is complete. Try changing the --bgcolor variable between black and white to see the logo in light and dark modes.

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.

Also published here