Building a simple landing page with Glassmorphism

#html #css #design #firstpost

Recently, there was a competition between my colleague in my workspace to design a food menu with your own ideas and creativity. Though the wirefire was given by my team lead to us.

Wireframe of the food menu

I am a guy which usually only code or slice the site and have no knowledge of design. So I was thinking of doing some research and learn new things from this task so I surf the internet and found about glassmorphism and decided to implement glassmorphism design style. The most defining characteristics of glassmorphism are:

Transparency
Vivid colors to highlight the blurred transparency.
Light border

Glassmorphism design style is pretty easy to achieve for front-end developers. You only need to know about the CSS property backdrop-filter. To create the glassmorphism effect, you should use backdrop-filter: blur().

// HTML code
<div class="wrapper">
 <div class="card"></div>
</div>

//CSS code
* {
  margin: 0;
  padding: 0;
}

.wrapper {
  width: 100%;
  height: 100vh;
  background: linear-gradient(90deg, #ffda3a 6%, #f68b1e 25%, #F14444 45%, #D53567 55%, #9A109A 94%);
  display: flex;
  align-items: center;
  justify-content: center; 
}

.card {
  width: 300px;
  height: 300px;
  background: rgba(255,255,255,0.4);
  backdrop-filter: blur(10px);
  border-radius: 10px;
  border: 2px solid rgba(255,255,255,0.2);  
}

The above code output

The landing page that I designed is shown in the image below and I have also provided the source code of my project below.

The food menu landing design using glassmorphism design style

Link for source code: (https://github.com/sagarmaharjan/hantey/)
Link for github page: (https://sagarmaharjan.github.io/hantey/)

Since this is my first blog post, this post might sound boring. For those who had completed reading this post thank you very much. For those who are out there just thinking that I want to do that blah blah ..... I just wanna say Just do it!!!! hahaha.

Thank you!!!!!!!!!!!!!!!!