How to make transparent responsive website from html, css and java with source code

Transparent Website

Hello everybody and all coders, Today in this blog you will learn how to create a responsive glassmorphism website with using only HTML , CSS and Java language. Before I have shared an articles on my blog. How to create a Responsive Neon Background Design and now I’m going to create a Transparent website with full screen glassmorphism desine.

In this article, I may tell you how to make a full screen transparent website and you can open it in full screen on any device and you will also find it customised. It is absolutely responsive. If you also want the source code, then you will get it below in this article as well as you do not forget to share this post as well.

Now articles will always be uploaded on this blog, stay with us like this. I have not uploaded anything for a few months, please forgive us for this. You all always stay with us like this, now the post will be daily.

If you have the support of people, then by making this website fully complete, we will provide you the complete material for free. You will get every single code from img to source code for free.

If you like this program (glass morphism with floating label animation) and would like to get the source code below, just copy and paste it into your code editor. You have to scroll down to get the source code. You can use this login form in your HTML pages, websites and projects. It's absolutely free.

Image of Website

Transparent website with Glass morphism animation [source code]

To make this program (glass morphism with floating label animation) first of all, you need to create three files one is html file, JS file and other is css file. After creating these files just copy paste the code in your file.

First of all create an HTML file named index.html and paste the given code in your HTML file. Remember, you'll need to create a file with the .html extension. You can name anything. But it is very important for you to write the .html extension only then this code will work otherwise it will not work.

Copy Code To Clipboard | CodingLab

HTML Code🖱

        <!DOCTYPE html>
        <!-- Desine By Masti Programming | https://mastiprogramming.blogspot.com/ -->
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Fas fa Code</title>
        
            <link rel="stylesheet" href="https://unpkg.com/swiper@7/swiper-bundle.min.css" />
        
            <!-- font awesome cdn link  -->
            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
        
            <!-- custom css file link  -->
            <link rel="stylesheet" href="style.css">
        
        
        
        </head>
        <body>
            
        <!-- header section starts  -->
        
        <header class="header">
        
            <a href="#" class="logo"> <i class="fa fa-laptop-code"></i> LOGO</a>
        
            <nav class="navbar">
                <a href="#home">home</a>
                <a href="#features">features</a>
                <a href="#products">products</a>
                <a href="#categories">categories</a>
                <a href="#review">Feedback</a>
                <a href="https://mastiprogramming.blogspot.com/">blogs</a>
            </nav>
        
            <div class="icons">
                <div class="fas fa-bars" id="menu-btn"></div>
            </div>
        
        </header>
        
        <!-- header section ends -->
        
        <!-- home section starts  -->
        <section class="home" id="home">
        
            <div class="content">
                
                <h3>fas fa <span>icon code</span> for programming </h3>
                <p>this weebsite have more diffrent type of code and easy to use Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eveniet, Desine by Masti Programming</p>
                <a href="https://mastiprogramming.blogspot.com/" class="btn">my blog</a>
            </div>
        
        </section>

        <script src="script.js"></script>

</body>
</html>

CSS Code🖱

        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;600&display=swap');

:root{
    --orange:#ff7800;
    --black:#d7d5e98a;
    --light-color:rgb(63, 50, 50);
    --box-shadow:0 .5rem 1.5rem rgba(34, 2, 2, 0.534);
    --border:.2rem solid rgba(77, 67, 67, 0.1);
    --outline:.1rem solid rgba(0,0,0,.1);
    --outline-hover:.2rem solid var(--black);
}

*{
    font-family: 'Poppins', sans-serif;
    margin:0; padding:0;
    box-sizing: border-box;
    outline: none; border:none;
    text-decoration: none;
    text-transform: capitalize;
    transition: all .2s linear;
}

html{
    font-size: 62.5%;
    overflow-x: hidden;
    scroll-behavior: smooth;
    scroll-padding-top: 7rem;
}


.btn{
  margin-top: 1rem;
  display: inline-block;
  padding:.8rem 3rem;
  font-size: 2.3rem;
  border-radius: 1.9rem;
  border:3px solid ;
  color:white;
  cursor: pointer;
  background: var(--black);
}

.btn:hover{
  background: blue;
  color:rgb(252, 246, 246);
}
/* header logo */
.header{
  position: fixed;
  top:0; left:0; right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding:2rem 9%;
  background:rgba(255, 254, 254, 0.274);
  box-shadow: var(--box-shadow);
  
}

.header .logo{
  font-size: 2.5rem;
  font-weight: bolder;
  color:rgb(255, 0, 0);
}

.header .logo i{
  color:var(--orange);
}

.header .navbar a{
  font-size: 2rem;
  margin:0 2rem;
  color:rgb(255, 255, 255);
  border-radius: 5px;
  border: #342e74;
}

.header .navbar a:hover{
  color:var(--black);
  
}

.header .icons div{
  height: 4.5rem;
  width: 4.5rem;
  line-height: 4.5rem;
  border-radius: .5rem;
  background: rgba(233, 141, 141, 0.39);
  color:var(--black);
  font-size: 2rem;
  margin-left: .3rem;
  cursor: pointer;
  text-align: center;
}

.header .icons div:hover{
  background: var(--black);
  color:#fff;
}

#menu-btn{
  display: none;
}

body{
  /* background:url(/poinsettia.jpg); */
  background-repeat: no-repeat;
  /* background-position: center; */
  background-size: cover;
}

/* full page img */
.home{
  display: flex;
  align-items: center;
  justify-content: center;
  background: url(/rose.jpg)  ;
  background-position: center;
  background-size: cover;
  padding-top: 34rem;
  padding-bottom: 10rem;
}

.home .content{
  text-align: center;
  width:60rem;
}

.home .content h3{
  color:rgb(255, 255, 255);
  font-size: 3rem;
  
}

.home .content h3 span{
  color:rgb(231, 20, 247);
}

.home .content p{
  color:whitesmoke;
  font-size: 1.7rem;
  padding:1rem 0;
  line-height: 1.7;
}


/* media queries  */

@media (max-width:991px){

    html{
        font-size: 55%;
    }

    .header{
        padding:2rem;
    }


    @media (max-width:768px){

      #menu-btn{
          display: inline-block;
      }
  
      /* .header .search-form{
          width:90%;
      } */
  
      .header .navbar{
          position: absolute;
          top:110%; right:-110%;
          width:30rem;
          box-shadow: var(--box-shadow);
          border-radius: .8rem;
          background: rgba(255, 255, 255, 0.11);
      }
  
      .header .navbar.active{
          right:2rem;
          transition: .2s linear;
      }
  
      .header .navbar a{
          font-size: 2rem;
          margin:2rem 2.5rem;
          display: block;
      }
  
  }

Java Code🖱

        let navbar = document.querySelector('.navbar');

document.querySelector('#menu-btn').onclick = () =>{
    navbar.classList.toggle('active');
    searchForm.classList.remove('active');
    shoppingCart.classList.remove('active');
    loginForm.classList.remove('active');
}

window.onscroll = () =>{
    searchForm.classList.remove('active');
    shoppingCart.classList.remove('active');
    loginForm.classList.remove('active');
    navbar.classList.remove('active');
}

You might like also

How to make a neon background with html and css without java script.

Second, create a CSS file named style.css and paste the given code in your CSS file. Remember, you need to create a file with .css extension. You can name anything. But it is very important for you to write the .css extension only then this code will work otherwise it will not work.

Third, create a JS file named script.css and paste the given code in your JS file. Remember, you need to create a file with .js extension. You can name anything. But it is very important for you to write the .js extension only then this code will work otherwise it will not work.

my pc: https://amzn.to/3N47BLe

Wireless Keyboard And Mouse Combo: https://amzn.to/3DnKasO

How to make transparent responsive website from html, css and java with source code

Transparent website with Glass morphism animation [source code]

You might like also

Prince

Post a Comment

How to make glass morpism login form in html and css | Masti Programming

Masti Programming

Contact form

How to make transparent responsive website from html, css and java with source code

Transparent website with Glass morphism animation [source code]

You might like also

Prince

You may like these posts

Post a Comment

Contact form