Create the hashnode logo with CSS

Hello beautiful people ! In this short article, I will show you how to create hashnode's full brand logo with HTML and CSS.

Add the following markup in your HTML.

<div class="container">
      <div id="diamond">
        <div id="circle"></div>
      </div>
      <p>hashnode</p>
</div>

hashode's logo resembles a diamond shape with rounded corners.

Now let's create a diamond shape with rounded corners using CSS.

#diamond {
  width: 50px;
  height: 50px;
  background-color: #2963ff;
  border-radius: 15px;
  transform: rotate(45deg);
}

Use a flex-box to align the shape and text on the same line.

.container {
  display: flex;
  align-items: center;
}

The CSS above gives the following result -

Now let's create a circle.

#circle {
  width: 20px;
  height: 20px;
  background-color: #fff;
  border-radius: 50%;
}

The circle must now be centered in diamond shape.

#diamond {
    ... 
    display: flex;
    align-items: center;
    justify-content: center;
}

Import the Inter font in the CSS file. Set font family Inter to the <p> element.

 p {
   font-family: "Inter", sans-serif;
  }

Voila, you just created hashnode's full brand logo using HTML and CSS.

Codepen -

Thanks for reading ! Happy Coding.