How to make complete transparent responsive website from html, css and java with source code | Masti Programming

Author - Prince
October 26, 2022
0



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 shared an article on my blog. How to create a Responsive Neon Background Design and now I’m going to create a Complete Transparent website with full-screen glassmorphism design. If you are a new visitor, please go to the first article and read it carefully.



In this article, I may tell you how to make a complete full-screen transparent website you can open it in full-screen on any device and you will also find it customized. 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.



( Previous Talk-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 time to source code for free. ) 


Finally, I am making a complete website with all the necessary material. Go and enjoy with code




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.




The 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 an HTML file, a JS file and the other is a the CSS file. After creating these files just copy and paste the code into your file.


HTML 
<!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>Flower Website</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>🌺💐 Flower Website</a>

    <nav class="navbar">
        <a href="#home">home</a>
        <a href="#features">features</a>
        <a href="#products">products</a>
        <a href="#categories">Contact Us</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>Clean <span>Flower</span> for Decoration </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>


<!-- home section ends -->

<!-- features section starts  -->

<section class="features" id="features">

    <h1 class="heading"> our <span>features</span> </h1>

    <div class="box-container">

        <div class="box">
            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQMkcnJkdLZfOTXpxPyQ9saB21kQruewS_b8Q&usqp=CAU" alt="">
            <h3>fresh Flower</h3>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt, earum!</p>
            <a href="#" class="btn">read more</a>
        </div>

        <div class="box">
            <img src="https://cdn.pixabay.com/photo/2022/01/26/22/43/delivery-6970072__340.png" alt="">
            <h3>free delivery</h3>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt, earum!</p>
            <a href="#" class="btn">read more</a>
        </div>

        <div class="box">
            <img src="https://cdn.pixabay.com/photo/2019/06/16/18/28/finance-icons-4278471__340.png" alt="">
            <h3>easy payments</h3>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt, earum!</p>
            <a href="#" class="btn">read more</a>
        </div>


        <div class="box">
            <img src="https://cdn.pixabay.com/photo/2017/02/14/08/11/males-2065244__340.jpg" alt="">
            <h3>More Services</h3>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt, earum!</p>
            <a href="#" class="btn">read more</a>
        </div>

    </div>

</section>

<!-- features section ends -->

<!-- products section starts  -->

<section class="products" id="products">

    <h1 class="heading"> our <span>products</span> </h1>

    <div class="swiper product-slider">

        <div class="swiper-wrapper">

            <div class="swiper-slide box">
                <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQsQfjGKiOwNPeG6T_eNPITbnukynC0-lEVWA&usqp=CAU" alt="">
                <h3>Colorfull Flower</h3>
                
                <div class="price">  $4.99/- - 10.99/- </div>
                <div class="stars">
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star-half-alt"></i>
                </div>
                <a href="#" class="btn">add to cart</a>
            </div>

            <div class="swiper-slide box">
                <img src="https://cdn.pixabay.com/photo/2015/12/04/19/39/delivery-1077037__340.jpg" alt="">
                <h3>fresh Gift</h3>
                <div class="price"> $4.99/- - 10.99/- </div>
                <div class="stars">
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star-half-alt"></i>
                </div>
                <a href="#" class="btn">add to cart</a>
            </div>

            <div class="swiper-slide box">
                <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRhzY70cJciQbG_pt9ucfSjFYi2Wx0-ixY3bA&usqp=CAU" alt="">
                <h3>fresh Beauty</h3>
                <div class="price"> $4.99/- - 10.99/- </div>
                <div class="stars">
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star-half-alt"></i>
                </div>
                <a href="#" class="btn">add to cart</a>
            </div>

            <div class="swiper-slide box">
                <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSGFf1HeBTtduHOKXIWOy5n0xZm4Ypw2DqRCg&usqp=CAU alt="">
                <h3>fresh Rose</h3>
                <div class="price"> $4.99/- - 10.99/- </div>
                <div class="stars">
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star-half-alt"></i>
                </div>
                <a href="#" class="btn">add to cart</a>
            </div>

        </div>

    </div>

    <div class="swiper product-slider">

        <div class="swiper-wrapper">

            <div class="swiper-slide box">
                <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRE0euoo_N_ZiBpXLwbWJZYNFLQwls4xF7OCQ&usqp=CAU" alt="">
                <h3>Lightly Flower</h3>
                <div class="price"> $4.99/- - 10.99/- </div>
                <div class="stars">
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star-half-alt"></i>
                </div>
                <a href="#" class="btn">add to cart</a>
            </div>

            <div class="swiper-slide box">
                <img src="https://cdn.pixabay.com/photo/2015/12/04/19/39/delivery-1077037__340.jpg" alt="">
                <h3>Heart Flower</h3>
                <div class="price"> $4.99/- - 10.99/- </div>
                <div class="stars">
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star-half-alt"></i>
                </div>
                <a href="#" class="btn">add to cart</a>
            </div>

            <div class="swiper-slide box">
                <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6YBGxKKXpsmtSLlQhrJeo9v5hHK_odDoZcw&usqp=CAU" alt="">
                <h3>Stless Flower</h3>
                <div class="price"> $4.99/- - 10.99/- </div>
                <div class="stars">
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star-half-alt"></i>
                </div>
                <a href="#" class="btn">add to cart</a>
            </div>

            <div class="swiper-slide box">
                <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRjD95uPtttux3BmdSf0jtsMMKqimPGCZPTRSfMBSn238P0Yjlm4jxGsuURdcRlpm5wBKw&usqp=CAU" alt="">
                <h3>Gift flowers</h3>
                <div class="price"> $4.99/- - 10.99/- </div>
                <div class="stars">
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star-half-alt"></i>
                </div>
                <a href="#" class="btn">add to cart</a>
            </div>

        </div>

    </div>


</section>

<!-- products section ends -->

<!-- footer section starts  -->

<section class="footer" style="padding: 20px;">

    <div class="box-container">


        <div class="box">
            <h3>quick links</h3>
            <a href="#" class="links"> <i class="fas fa-home"></i> home </a>
            <a href="#" class="links"> <i class="fas fa-arrow-right"></i> features </a>
            <a href="#" class="links"> <i class="fas fa-arrow-right"></i> products </a>
            <a href="#" class="links"> <i class="fas fa-star-half-alt"></i> categories </a>
            <a href="#" class="links"> <i class="fas fa-star"></i> review </a>
            <a href="#" class="links"> <i class="fas fa-blog"></i> blogs </a>
        </div>

        <div class="box">
            <h3>contact info</h3>
            <a href="#" class="links"> <i class="fas fa-phone"></i> +16555-55588 </a>
            <a href="#" class="links"> <i class="fas fa-phone"></i> +8898494893 </a>
            <a href="#" class="links"> <i class="fas fa-envelope"></i> cantact@something.com </a>
            <a href="#" class="links"> <i class="fas fa-map-marker-alt"></i> mumbai, india - 540104 </a>
            <a href="#" class="links"> <i class="fas fa-map-marker-alt"></i> mumbai, india , Ayodhya - 400104 </a>
        </div>

       

        <div class="box">
            <h3>Subscribe Flowers</h3>
            <p>subscribe for desine and flowers</p>
            <input type="email" placeholder="your email" class="email">
            <input type="submit" value="subscribe" class="btn">
            <img src="https://cdn.pixabay.com/photo/2018/05/04/22/45/image-3375234__340.png" class="payment-img" alt="">
        </div>

    </div>

    <div class="credit"> desined by <span> masti programming </span> | all rights reserved </div>

</section>

<!-- footer section ends -->




<!-- js file link  -->
<script src="script.js"></script>

</body>
</html>



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

:root{
    --orange:#001aff;
    --black:#4a39dd8a;
    --light-color:rgb(170, 57, 57);
    --box-shadow:0 .5rem 1.5rem rgba(34, 2, 2, 0.534);
    --box-shadow1:0 .5rem 1.5rem rgba(59, 33, 33, 0.534);
    --border:.2rem solid rgba(36, 4, 4, 0.637);
    --outline:.1rem solid rgba(0, 0, 0, 0.411);
    --outline-hover:.2rem solid var(--black);
    --black1:#46464b8a;
}

*{
    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;
}



/* section{
    padding:2rem 9%;
} */

.heading{
    text-align: center;
    padding:2rem 0;
    padding-bottom: 3rem;
    font-size: 3.5rem;
    color:black;
}

/* our features */
.heading span{
    background: var(--orange);
    color:#fff;
    display: inline-block;
    padding:.5rem 3rem;
    clip-path: polygon(900% 0, 83% 0%, 100% 99%, 10% 900%, 7% 50%, 0% 0%);
}

.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: rgba(0, 0, 0, 0.514);
}

.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(0, 1, 10);
    border-radius: 5px;
    /* background-color: rgb(234, 236, 241); */
    text-align: center;
    border: #342e74;
}


.header .navbar a:hover{
    color:rgb(230, 49, 17);
    
}

.header .navbar a:hover::after{
    color:rgb(230, 49, 17);
    /* width: 100%; */
    transition: 0.3s linear;
}

.header .icons div{
    height: 4.5rem;
    width: 4.5rem;
    line-height: 4.5rem;
    border-radius: .5rem;
    background: rgba(18, 14, 226, 0.384);
    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: 13rem;
}

.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;
}

 .features .box-container{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
    gap:1.5rem;
}
/* body first background */
.features .box-container .box{
    padding:5rem 2rem;
    /* background: rgba(255, 255, 255, 0.966); */
    background: url(/photo1/one_3.png);
    outline: var(--outline);
    outline-offset: -1rem;
    text-align: center;
    box-shadow: var(--box-shadow);
}



.features .box-container .box:hover{
    outline: var(--outline-hover);
    outline-offset: 0rem;
}

.features .box-container .box img{
    margin:1rem 0;
    height: 15rem;
}
/* heading of h3  */
.features .box-container .box h3{
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.8;
    color:rgb(38, 0, 255);
}
/* paragraph tag */
.features .box-container .box p{
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.8;
    color:rgb(0, 26, 255);
    padding:1rem 0;
}
/* product section start */
/* .products .product-slider{
    padding:1rem;
} */

.products .product-slider:first-child{
    margin-bottom: 2rem;
}

.products .product-slider .box{
    /* background: rgba(248, 245, 245, 0.664); */
    background: url(/photo1/one_7.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-radius: .5rem;
    text-align: center;
    padding:3rem 2rem;
    outline-offset: -1rem;
    outline: var(--outline);
    box-shadow: var(--box-shadow);
    transition: .2s linear;
}

.products .product-slider .box:hover{
    outline-offset: 0rem;
    outline: var(--outline-hover);
}

.products .product-slider .box img{
    height:20rem;
}

.products .product-slider .box h3{
    font-size: 2.5rem;
    color:black;
}

.products .product-slider .box .price{
    font-size: 2rem;
    color:var(--light-color);
    padding:.5rem 0;
}

.products .product-slider .box .stars i{
    font-size: 1.7rem;
    color:var(--orange);
    padding:.5rem 0;
}

.footer{
    background: #fff;
}

.footer .box-container{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
    gap:1.5rem;
}

.footer .box-container .box h3{
    font-size: 2.5rem;
    color:black;
    padding:1rem 0;
}

.footer .box-container .box h3 i{
    color:var(--orange);
}

.footer .box-container .box .links{
    display: block;
    font-size: 1.5rem;
    color:var(--light-color);
    padding:1rem 0;
}

.footer .box-container .box .links i{
    color:var(--orange);
    padding-right: .5rem;
}

.footer .box-container .box .links:hover i{
    padding-right: 2rem;
}


.footer .box-container .box p{
    line-height: 1.8;
    font-size: 1.5rem;
    color:var(--light-color);
    padding:1rem 0;
}

.footer .box-container .box .share a{
    height:4rem;
    width:4rem;
    line-height:4rem;
    border-radius: .5rem;
    font-size: 2rem;
    color:var(--black);
    margin-right: .2rem;
    background: #eee;
    text-align: center;
}

.footer .box-container .box .share a:hover{
    background: var(--orange);
    color: #fff;
}

.footer .box-container .box .email{
    width: 100%;
    margin:.7rem 0;
    padding:1rem;
    border-radius: 20px;
    background: #eee;
    font-size: 1.6rem;
    color:blue;
    text-transform: none;
}

.footer .box-container .box .payment-img{
    margin-top: 2rem;
    height: 7rem;
    display: block;
}

.footer .credit{
    text-align: center;
    margin-top: 2rem;
    padding:1rem;
    padding-top: 2.5rem;
    font-size: 2rem;
    color:var(--black);
    border-top: var(--border);
}

.footer .credit span{
    color:blue;
}


/* media queries  */


@media (max-width:768px){

    #menu-btn{
        display: inline-block;
    }

    .header .navbar{
        position: absolute;
        top:110%; right:-110%;
        width:30rem;
        box-shadow: var(--box-shadow);
        border-radius: 100px;
        background: rgba(58, 133, 230, 0.678);
    }

    .header .navbar.active{
        right:2rem;
        transition: .2s linear;
    }

    .header .navbar a{
        font-size: 2rem;
        margin:2rem 2.5rem;
        display: block;
    }

}

@media (max-width:450px){

    html{
        font-size: 50%;
    }

    .heading{
        font-size: 2.5rem;
    }

    .footer{
        text-align: center;
    }

    .footer .box-container .box .payment-img{
        margin: 2rem auto;
    }

}



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');
}



Website 979 KB
https://drive.google.com/file/d/1Dj8d8LY25UtTTyOKfRp4JnaRzHU3XDT2/view?usp=sharing

First of all create an HTML file named index.html and paste the given code into 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 will this code work otherwise it will not work.






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


You might like also:



Third, create a JS file named script.css and paste the given code into 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 will this code work otherwise it will not work.


 

Tags
Prince

Prince

Hello Friends, Our name is Prince we upload daily latest updates news. Welcome all of you to this blog of ours. Information related to education is given on this blog. This blog does not promote any kind of illegal content, this blog is only for education. We will keep on bringing new news daily for you so that you will continue to get knowledge. Thank You

You may like these posts

Show more

Post a Comment

0Comments
Post a Comment (0)

Name

Email *

Message *

Share to other apps
Copy Post Link