Create the hashnode logo with CSS

Create the hashnode logo with CSS

Featured on Hashnode

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>

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.