Glassmorphism Hero Section using HTML & CSS

Glassmorphism Hero Section using HTML & CSS

Hello developers, today in this blog, you'll learn how to create a Responsive Glassmorphism Hero Section using HTML & CSS.

The Glassmorphism will describe the UI button, this effect is based on the combination of shadow, transparency, and background blur. The glassmorphism effect is made by using the backdrop-filter effect in the CSS code. Glass effect has been used in this hero section. The Glassmorphism is used to emphasize light or dark objects, placed on top of colorful backgrounds.

A hero section is a full-screen section that should consist of a title, a short description, a high-quality image or video, and a link to direct the user to the other page. Hero images are used to catch the visitor's attention and draw them into reading the article on the page. The hero section is a website design term that is used to describe an oversized banner at the center of a website that usually extends full width.

In this blog (Responsive Glassmorphism Hero Section), there is the name of the company at the top left of the card and some horizontal navigation menus like Home, Main Menu, Services, Contact, and Privacy & Policy. There is the title and some description of the company. The CSS media query property is used to make the page responsive.

The source code of this Responsive Glassmorphism Hero Section is given below, if you want the source code of this program, you can copy it. You can use this Responsive Glassmorphism Hero Section with your creativity and can take this project to the next level.

Responsive Glassmorphism Hero Section [Source Code]

To make this website, you would like to make two files: an HTML file & a CSS file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.

<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="UTF-8"> <title> Glassmorphism Hero Section || Learning Robo </title> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <header> <nav class="navbar"> <div class="logo"><a href="#">Learning Robo</a></div> <ul class="menu"> <li><a href="#">Home</a></li> <li><a href="#">Main Menu</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Privacy & Policy</a></li> </ul> <div class="buttons"> <input type="button" value="Subscribe"> </div> </nav> <div class="text-content"> <h2>Welcome to this blog,<br>Enjoy by learning new things</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum facere in nam, officiis aspernatur consectetur aliquid sequi possimus et. Sint.</p> </div><br> <div class="credit">Made with <span style="color:tomato">❤</span> by <a href="https://www.learningrobo.com/">Learning Robo</a></div> </header> </body> </html>
CSS provides style to an HTML page. To make the page attractive and page responsive create a CSS file with the name style.css and remember that you have to make a file with a .css extension.


@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins',sans-serif;
}
body{
  height: 100vh;;
  width: 100%;
  display: flex;
  color: #000;
  background: #7851a9;
}

header{
  height: 85vh;
  width: 90%;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  border-left: 1px solid rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(5px);
  z-index: 12;
  border-radius: 25px;
  margin: auto;
  position: relative;
}
header .navbar{
  margin: auto;
  width: 100%;
  padding: 35px 50px;
  border-radius: 25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.navbar .menu{
  display: flex;
  flex-wrap: wrap;
}
.navbar .logo a{
  text-decoration: none;
  font-size: 22px;
  color: #000;
  font-weight: bold;
  font-weight: 500;
}
.navbar .menu li{
  list-style: none;
  margin: 0 20px;
}
.navbar .menu a{
  color: #000;
  text-decoration: none;
  font-size: 17px;
  font-weight: 500;
  transition: all 0.3s ease;
}
.navbar .menu a:hover{
  color: #f2f2f2;
}
.navbar .buttons input{
  outline: none;
  color: #f2f2f2;
  font-size: 18px;
  font-weight: 500;
  border-radius: 12px;
  padding: 6px 15px;
  border: none;
  margin: 0 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  background-image: linear-gradient( 135deg, #02000a 10%, #532d84 100%);
}
.navbar .buttons input:hover{
  transform: scale(0.97);
}
 header .text-content{
   width: 40%;
   margin: 100px 0 0 50px ;
 }
.text-content h2{
  font-size: 27px;
  font-weight: 600;
}
.text-content p{
  font-size: 15px;
  margin-top: 10px;
}
.credit{
    text-align: center;
    color: #000;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    margin-top: 100px;
  }
  
  .credit a{
    text-decoration: none;
    color:#072f5f;
    font-weight: bold;
  } 

@media (max-width:850px) {
  header .navbar{
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15px 5px;
  }
  .navbar .menu {
    margin: 10px 0 20px 0;
  }
  header .text-content{
    margin: 30px 0 0 20px ;
    width: 70%;
  }
  header .text-content h2{
    font-size: 20px;
  }
}
@media (max-width:410px) {
  header{
    height: 100vh;
    width: 100%;
    border-radius: 0px;
  }
  header .navbar{
    padding: 15px 10px;
}
}

We hope you would like this Responsive Glassmorphism Hero Section using HTML & CSS.

Thank you for reading our blog. If you face any problem in creating this Responsive Glassmorphism Hero Section using HTML & CSS with modern UI, then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.

Thank you
Learning robo team

Post a Comment

Thank you
Learning robo team

Post a Comment (0)

Previous Post Next Post
Learning Robo says...
code copied
Welcome