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

Microsoft Chat GPT (AI):

  MICROSOFT  CHAT GPT :   Microsoft’s Bing chatbot is   a   full-fledged AI chatbot   that can do many things   like   ChatGPT:  OPEN A.I YOU CAN USE MICROSOFT BING TO GENERATE TEXT LIKE AN ESSAY OR WRITE POEMS,TO WRITE CODE MUCH LIKE ZDNET  HAS DONE WITH Chat GPT, YOU CAN ASK IT ANY COMPLEX QUESTIONS AND HOLD A CONVERSATION . Microsoft’s Bing chatbot has many features. Here are some of them: Create comparison tables Multi-step web searches Draw text art Date and time conversions Turn web pages into quizzes Bing chatbot can provide real-time answers to questions on Bing and Microsoft Edge we seen nowdays so many exam cracked by chatGPT. So its very helpfull but the dark side is it is also harmfull as well.  
Post a Comment
Read more