Transparent Form Using only HTML and CSS

 HTML CODE

<!DOCTYPE html>
<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>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="formbox">
        <h1 class="heading">Hello There !</h1>
        <p>Please Login to continue</p>
        <div class="username-box">
            <input class="username" type="text" placeholder="Username">
        </div>

        <div class="password-box">
            <input class= "password"type="password" placeholder="Passoword">
        </div>

        <input class="btn" type="button" value="Login">

    </div>
   
</body>
</html>

CSS CODE

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html{
    font-size: 62.5%;
}

body{
    font-family: sans-serif;
    background: linear-gradient(rgb(0,0,0,0.5), rgb(0,0,0,0.5)), url("./img/mathew-macquarrie-u6OnpbMuZAs-unsplash.jpg");
    height: 100vh;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.formbox{
    /* border: 3px solid white; */
    width: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.formbox h1{
    color: white;
    font-size: 6rem;
    margin-bottom: 2rem;
   
}

.formbox p{
    color: white;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.formbox .username-box, .formbox .password-box{
    overflow: hidden;
    width: 100%;
    font-size: 2.5rem;
    padding: 0.8rem 0rem;
    margin: 0.8rem 0rem;

}

.username-box::after{
    content: " ";
    display: Block;
    border-bottom: 2px solid white;
    width: 200px;
    margin-left: 28rem;
   
}
.password-box::after{
    content: " ";
    display: Block;
    border-bottom: 2px solid white;
    width: 200px;
    margin-left: 28rem;
}

.username-box .username, .password-box .password{
    border: none;
    outline: none;
    background: none;
    color: white;

}



.formbox .btn{
    font-size: 2rem;
    padding: 0.8rem 2rem;
    border-radius: 28px;
    border: 0;
    color: rgb(255, 255, 255);
    background-color: coral;
}

.btn:hover{
    background-color: greenyellow;
    color: rgb(0, 0, 0);
    padding: 2rem 3rem;
    border-radius: 30px;

}

@media(max-width:500px){
    html{
        font-size: 50%;
    }

    .formbox h1{
        font-size: 3.5rem;
    }

    .username-box::after{
        content: " ";
        display: Block;
        border-bottom: 2px solid white;
        width: 200px;
        margin-left: 0.5rem;
       
    }
    .password-box::after{
        content: " ";
        display: Block;
        border-bottom: 2px solid white;
        width: 200px;
        margin-left: 0.5rem;
    }
   
}


@media(max-width:400){
    html{
        font-size: 52%;
    }

    .formbox h1{
        font-size: 3.5rem;
    }

    .username-box::after{
        content: " ";
        display: Block;
        border-bottom: 2px solid white;
        width: 180px;
        margin-left:6rem;
       
    }
    .password-box::after{
        content: " ";
        display: Block;
        border-bottom: 2px solid white;
        width: 180px;
        margin-left:6rem;
    }
   
}



@media(min-width:401px) and (max-width:670px){
    html{
        font-size: 52%;
    }

    .formbox h1{
        font-size: 3.5rem;
    }

    .username-box::after{
        content: " ";
        display: Block;
        border-bottom: 2px solid white;
        width: 180px;
        margin-left:6rem;
       
    }
    .password-box::after{
        content: " ";
        display: Block;
        border-bottom: 2px solid white;
        width: 180px;
        margin-left:6rem;
    }
   
}


@media(min-width:671px) and (max-width:768px){
    html{
        font-size: 52%;
    }

    .formbox h1{
        font-size: 3.5rem;
    }

    .username-box::after{
        content: " ";
        display: Block;
        border-bottom: 2px solid white;
        width: 180px;
        margin-left:10rem;
       
    }
    .password-box::after{
        content: " ";
        display: Block;
        border-bottom: 2px solid white;
        width: 180px;
        margin-left:10rem;
    }
   
}


@media(min-width:769px) and (max-width:900px){
    html{
        font-size: 55%;
    }

    .formbox h1{
        font-size: 3.5rem;
    }

    .username-box::after{
        content: " ";
        display: Block;
        border-bottom: 2px solid white;
        width: 180px;
        margin-left:14rem;
       
    }
    .password-box::after{
        content: " ";
        display: Block;
        border-bottom: 2px solid white;
        width: 180px;
        margin-left:14rem;
    }
   
}

@media(min-width:901px) and (max-width:1000px){
    html{
        font-size: 55%;
    }

    .formbox h1{
        font-size: 3.5rem;
    }

    .username-box::after{
        content: " ";
        display: Block;
        border-bottom: 2px solid white;
        width: 180px;
        margin-left:18rem;
       
    }
    .password-box::after{
        content: " ";
        display: Block;
        border-bottom: 2px solid white;
        width: 180px;
        margin-left:18rem;
    }
   
}

@media(min-width:1001px) and (max-width:1200px){
    html{
        font-size: 55%;
    }

    .formbox h1{
        font-size: 3.5rem;
    }

    .username-box::after{
        content: " ";
        display: Block;
        border-bottom: 2px solid white;
        width: 180px;
        margin-left:22rem;
       
    }
    .password-box::after{
        content: " ";
        display: Block;
        border-bottom: 2px solid white;
        width: 180px;
        margin-left:22rem;
    }
   
}


@media(min-width: 1201px) and (max-width:1300px){
    .formbox h1{
        font-size: 4rem;
    }

    .username-box::after{
        content: " ";
        display: Block;
        border-bottom: 2px solid white;
        width: 180px;
        margin-left:22rem;
       
    }
    .password-box::after{
        content: " ";
        display: Block;
        border-bottom: 2px solid white;
        width: 180px;
        margin-left:22rem;
    }
}


@media (orientation: landscape) and (max-height:500px){
    .background{
        height: 90vmax;
    }
}

Comments

Post a Comment

Popular posts from this blog

Gsap effect on click

 Gsap effect on click   < div class = "item" >     < div class = "circle" ></ div >     < h1 class = "head" >Angela</ h1 >   </ div > Here is the same code, small gsap effect on click; * {     margin: 0 ;     padding: 0 ;     box-sizing: border-box ; } body {     display: flex ;     justify-content: center ;     align-items: center ;     height: 100 vh ;     background-color: rgb ( 10 , 8 , 19 );     color: white ;     font-family: sans-serif ; } .item {     display: flex ;     gap: 1 rem ;     align-items: center ;     cursor: pointer ; } .circle {     height: 20 px ;     width: 20 px ;     background-color: white ;     border-radius: 50 % ; } Javascript; gsap . defaults ({ duration : 0.2 }) const myAnime = gsap . timeline ({ paused...
Read more

Gsap timeline position parameters

 Gsap timeline position parameters In the following timeline code:  let mytimeline = gsap . timeline () mytimeline     . to ( '.box1' ,{ x : 400 , duration : 1 })     . to ( '.box2' ,{ x : 400 , duration : 1 })     . to ( '.box3' ,{ x : 400 , duration : 1 }) normally when animation of box1 completed in 1s then box2 starts and after 1second of box2 animation of box3 starts if the duration of box1 was 5 second then animation of box1 will take 5s to complete and then only animation of box2 starts. For more enhancement the position parameter was introduced Some of the examples of position parameter are: 1. let mytimeline = gsap . timeline () mytimeline     . to ( '.box1' ,{ x : 400 , duration : 1 })     . to ( '.box2' ,{ x : 400 , duration : 1 })     . to ( '.box3' ,{ x : 400 , duration : 1 }, 1 ) On that box 3 there is "1" outside the {} which means that   start exactly at a time of 1 It do...
Read more

Scroll magic javascript

 Scroll magic code Script tags used in html are:     <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.min.js" integrity="sha512-8E3KZoPoZCD+1dgfqhPbejQBnQfBXe8FuwL4z/c8sTrgeDMFEnoyTlH3obB4/fV+6Sg0a0XF+L/6xS4Xx1fUEg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>     <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/debug.addIndicators.min.js" integrity="sha512-RvUydNGlqYJapy0t4AH8hDv/It+zKsv4wOQGb+iOnEfa6NnF2fzjXgRy+FDjSpMfC3sjokNUzsfYZaZ8QAwIxg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>     <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/animation.gsap.min.js" integrity="sha512-5/OHwmQzDSBS0Ous4/hlYoWLHd06/d2r7LdKZQVBXOA6PvOqWVXtdboiLTU7lQTGyVoKVTNkwi0ol4gHGlw5ww==" crossorigin="anonymous" referrerpolicy="no-referre...
Read more