Designing the Hashnode Logo with HTML and CSS
Tags: html, css, logos, logodesign
Published: 2023-02-17 15:36:08

---
title: Designing the Hashnode Logo with HTML and CSS
published: true
date: 2023-02-17 15:00:11 UTC
tags: html, css, logos, logodesign
canonical_url: https://nirmalkumar.hashnode.dev/designing-the-hashnode-logo-with-html-and-css
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6xwwo3cfec5mazfh2ypm.png
---

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 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 centre.

## 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 centred 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 centred 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 centred 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 be seen 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](https://cdn.hashnode.com/res/hashnode/image/upload/v1676645378656/866130ff-364c-4f72-a7ee-0a9aadeae904.png)

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.

![Tilted Square](https://cdn.hashnode.com/res/hashnode/image/upload/v1676645418522/6ec200d1-421d-494f-937e-1c3dffc4b06a.png)

Now, let's move on to design the center circle. But wait, to make the circle centred, 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:

![Logo Dark Mode](https://cdn.hashnode.com/res/hashnode/image/upload/v1676645239475/00165567-d04a-4b3e-ab5a-21dc2a988000.png)

In Light Mode:

![Logo Light Mode](https://cdn.hashnode.com/res/hashnode/image/upload/v1676645304077/18c146cb-7f5b-4b43-bde2-37fec592c11b.png)

> 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. Follow this space for more such logos in the upcoming days. You can see the logo in action in the below codepen.

{% codepen https://codepen.io/knirmalkumar/pen/oNPgdgo %}