Hello Readers, today in this blog I will create a responsive website with the help of HTML & CSS and this website looks will be in glass morphism UI. Earlier I have shared How to Create a Simple Website using HTML & CSS now it's time to create glassmorphism website.

Simply website means the various collection of the webpages, article, hyperlinks and other various information. Glassmorphism means the type of UI (user interface) design that looks like glass.

As you can see on the given image of this program [Glassmorphism Website Design], on the web page. On the top side, there is on navbar with some logos, hyperlinks, and two-button. Under the navigation menu, there is some text and at the bottom right side.

Responsive Website | Glassmorphism [Source Code]

To copy-paste all the code of this program [Glass Morphism Website Design], first of all, you need to create two files, one is an HTML file and another is a CSS file. After creating these two files you can easily copy-paste the given codes. You can also download all source code directly click on the given "Download Button".

copied button

HTML

      <!DOCTYPE html>
      <html lang="en" dir="ltr">
        <head>
          <meta charset="UTF-8">
          <title>Glass Effect | Spiritual Code</title>
          <link rel="stylesheet" href="style.css">
          <script src="https://kit.fontawesome.com/a076d05399.js"></script>
           <meta name="viewport" content="width=device-width, initial-scale=1.0">
         </head>
      <body>
        <header>
          <nav class="navbar">
            <div class="logo"><a href="https://spiritualcodeofficial.blogspot.com/">Spiritual Code</a></div>
            <ul class="menu">
              <li><a href="https://spiritualcodeofficial.blogspot.com/">Home</a></li>
              <li><a href="https://spiritualcodeofficial.blogspot.com/">Source code</a></li>
              <li><a href="https://spiritualcodeofficial.blogspot.com/">Services</a></li>
              <li><a href="https://spiritualcodeofficial.blogspot.com/">About Us</a></li>
              <li><a href="https://spiritualcodeofficial.blogspot.com/">Contact Us</a></li>
            </ul>
            <div class="buttons">
              <input type="button" value="Login">
              <input type="button" value="Register">
            </div>
          </nav>
          <div class="text-content">
            <h2>Learn To Enjoy,<br>Lorem ipsum e omnis similique, possimus et ipsam esse impedi</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum facere in nam, officiis aspernatur consectetur aliquid sequi possimus et. Sint.</p>
          </div>
          <div class="Author">
            <span class="play">Spiritual Code</span>
          </div>
        </header>
      
      </body>
      </html>

CSS

      @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;
        transition: all 0.3s ease;
      }
      body{
        height: 100vh;;
        width: 100%;
        display: flex;
        background-image: linear-gradient( 
      135deg
      , #310b0d 10%, #3e2f90 100%);
      }
      ::selection{
        color: #f2f2f2;
        background: #f86d8d;
      }
      body::before,
      body::after{
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
      }
      
      
      header{
        height: 85vh;
        width: 90%;
        background: rgba(255, 255, 255, 0.1);
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
        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: 5px;
        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;
        border-bottom: 2px solid rgb(3, 3, 3);
        color: #000;
        font-weight: 500;
      }
      .navbar .menu li{
        list-style: none;
        margin: 0 6px;
      }
      .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: 8px;
        padding: 6px 15px;
        border: 1px solid rgb(236, 214, 214);
        margin: 0 8px;
        cursor: pointer;
        transition: all 0.3s ease;
        background-color: transparent; 
      }
      .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;
      }
      header .Author{
        position: absolute;
        right: 50px;
        bottom: 40px;
      }
      .play-button .play{
        font-size: 18px;
        font-weight: 500;
      }
       .Author .play::before{
         content: '';
         position: absolute;
         height: 3px;
         width: 50px;
         top: 50%;
         transform: translateY(-50%);
         left: -58px;
         background: #000;
       }
      
      @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;
      }
      }

Create attractive Glass Effect Website using HTML and pure CSS

HTML

CSS

Post a Comment

Contact Form