Skip to main content

Login page code with html/css

 TECHNOLOGY GYAN                                                               login page

 Source code for making login page with  html/css:

Using visual studio code 😎😎

step 1.index html

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="index.css">    
  <title>TECHNOLOGY GYAN</title>
</head>
<body>
    <section>
        <div class="form-box">
            <div class="form-value">
                <form action="">
                    <h2>Login</h2>
                    <div class="inputbox">
                        <ion-icon name="mail-outline"></ion-icon>
                        <input type="email" required>
                        <label for="">Email</label>
                    </div>
                    <div class="inputbox">
                        <ion-icon name="lock-closed-outline"></ion-icon>
                        <input type="password" required>
                        <label for="">Password</label>
                    </div>
                    <div class="forget">
                        <label for=""><input type="checkbox">Remember Me  <a href="#">Forget Password</a></label>
                      
                    </div>
                    <button>Log in</button>
                    <div class="register">
                        <p>Don't have a account <a href="#">Register</a></p>
                    </div>
                </form>
            </div>
        </div>
    </section>
    <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
    <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
</body>
</html>

step 2. index.css

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');
*{
    margin: 0;
    padding: 0;
    font-family: 'poppins',sans-serif;
}
section{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    width: 100%;
    background-color: antiquewhite;
    background-position: center;
    background-size: cover;
}
.form-box{
    position: relative;
    width: 400px;
    height: 450px;
    background:pink ;
    border: 2px solid rgba(255,255,255,0.5);
    border-radius: 20px;
    backdrop-filter: blur(15px);
    display: flex;
    justify-content: center;
    align-items: center;
}
h2{
    font-size: 2em;
    color: #fff;
    text-align: center;
}
.inputbox{
    position: relative;
    margin: 30px 0;
    width: 310px;
    border-bottom: 2px solid #fff;
}
.inputbox label{
    position: absolute;
    top: 50%;
    left: 5px;
    transform: translateY(-50%);
    color: #fff;
    font-size: 1em;
    pointer-events: none;
    transition: .5s;
}
input:focus ~ label,
input:valid ~ label{
top: -5px;
}
.inputbox input {
    width: 100%;
    height: 50px;
    background: transparent;
    border: none;
    outline: none;
    font-size: 1em;
    padding:0 35px 0 5px;
    color: #fff;
}
.inputbox ion-icon{
    position: absolute;
    right: 8px;
    color: #fff;
    font-size: 1.2em;
    top: 20px;
}
.forget{
    margin: -15px 0 15px ;
    font-size: .9em;
    color: #fff;
    display: flex;
    justify-content: space-between;  
}

.forget label input{
    margin-right: 3px;
    
}
.forget label a{
    color: #fff;
    text-decoration: none;
}




Labels:
Location: India

Comments

Post a Comment

Popular posts from this blog

kendriya vidyalaya sonpur

 kendriya vidyalaya sonpur : Class 12th students of computer science: 1.Anshu raj 2.Animesh 3.Ganga  4.Rocky 5.Himanshu ABOUT THEM : ANSHU: Studying from class 1st in this vidyalaya and a good scorer student. Sensetive student . ANIMESH: Studying from class 11th but make an good image in all the teachers and he is topper of the class. "Chakrdhari" GANGA: Good student always talking about tatti. good scorer student best frnd of anshu. Sincere student of shyam sir and he is water supplyer of the class "GENGA" ROCKY: Monitor of the class and nowadays he is looking like jhonny bhaiya. Good scorer student. "ROCKY BHI" HIMANSHU: Atankwadi of the class always sleeping in class  good scorer student. "ATANKI" Thanku you written by ANSHU
Post a Comment
Read more

Current and Future uses of VR/AR

USES OF VR/AR: VR Virtual Reality (VR) and Augmented Reality (AR) have been making waves in the world of technology and beyond. Both of these technologies have the potential to transform the way we live, work and interact with the world around us. In this blog, we will explore what VR/AR are, their current and future applications, and the benefits and challenges they present. What is VR/AR ? Virtual Reality (VR) is a technology that immerses users in a simulated world. Users wear a headset that tracks their movements and displays images in front of their eyes, creating the illusion of a three-dimensional environment. VR technology can also incorporate other sensory inputs such as sound and touch, making the experience even more immersive. On the other hand, Augmented Reality (AR) is a technology that enhances the real world with digital information. AR overlays digital information, such as images or text, onto the real world, creating a blended reality experience. AR technology is typi...
1 comment
Read more