Skip to main content

Html And Css New Style Login Form

 Html And Css Login Form:

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>Login Form Coding Master 24</title>

        <link rel="stylesheet" href="style.css">

        <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>

    </head>

    <body>

        <div class="wrapper">

            <form action="">

                <h1>Login</h1>

                <div class="input-box">

                    <input type="text" placeholder="UserName" required>

                    <i class='bx bxs-user'></i>

                </div>

                <div class="input-box">

                    <input type="text" placeholder="Password" required>

                    <i class='bx bxs-lock-alt' ></i>

                </div>

                <div class="remember-forget">

                    <lable><input type="checkbox"> Remember Me</lable>

                    <a href="#">Fogot Password</a>

                </div>

                <button type="submit" class="btn">Login</button>

                <div class="register-link">

                    <p>Don't have an account <a href="#">Register</a></p>

                    

                </div>

            </form>

        </div>

    </body>

</html>


Style css code:


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


* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

  font-family: "Poppins", sans-serif;

}


body{

    display: flex;

    justify-content: center;

    align-items: center;

    min-height: 100vh;

    background: url('1.jpg') no-repeat;

    background-size: cover;

    background-position: center;

}


.wrapper{

    width: 420px;

    background: transparent;

    border: 2px solid rgba(255, 255, 255, .2);

    backdrop-filter: blur(20px);

    box-shadow: 0 0 10px rgba(0, 0, 0, .2);

    color: #fff;

    border-radius: 10px;

    padding: 30px 40px;

}


.wrapper h1 {

    font-size: 36px;

    text-align: center;

}


.wrapper .input-box {

    position: relative;

    width: 100%;

    height: 50px;

    margin: 30px 0;

}


.input-box input{

    width: 100%;

    height: 100%;

    background: transparent;

    border: none;

    outline: none;

    border: 2px solid rgba(255, 255, 255, .2);

    border-radius: 40px;

    font-size: 16px;

    color: #fff;

    padding: 20px 45px 20px 20px;

}


.input-box input::placeholder {

    color : #fff;

}


.input-box i {

    position: absolute;

    right: 20px;

    top: 50%;

    transform: translatey(-50%);

    font-size: 20px;

}


.wrapper .remember-forget{

 display: flex;

 justify-content: space-between;

 font-size: 14.5px;

 margin: -15px 0 15px;

}


.remember-forget lable input{

    accent-color: #fff;

    margin-right: 3px;

}


.remember-forget a {

    color: #fff;

    text-decoration: none;

}


.remember-forget a:hover{

    text-decoration: underline;

}


.wrapper .btn{

    width: 100%;

    height: 45px;

    background: #fff;

    border: none;

    outline: none;

    border-radius: 40px;

    box-shadow: 0 0 10px rgb(0, 0, 0, .1);

    cursor: pointer;

    font-size: 16px;

    color: #333;

    font-weight: 600;

}


.wrapper .register-link{

    font-size: 14.5px;

    text-align: center;

    margin-top: 20px;

}


.register-link p a {

    color: #fff;

    text-decoration: none;

    font-weight: 600;

}


.register-link p a:hover{

    text-decoration: underline;

}


Output:




Source code and files:

Download


Thanks for visiting...

Labels:

Comments

Post a Comment

Popular posts from this blog

Stable Diffusion WebUI 1.10.1 Full Installation Guide | AUTOMATIC1111 | Windows 11

Stable Diffusion WebUI 1.10.1 Full Installation Guide | AUTOMATIC1111 | Windows 11  Welcome to this step-by-step Stable Diffusion WebUI 1.10.1 installation guide! In this tutorial, we will walk you through the complete setup process on Windows 11 , including downloading and installing Git , setting up Python 3.10.6 , cloning the AUTOMATIC1111 repository , and configuring .gitignore for a clean and efficient installation. By following this guide, you’ll be able to generate AI-generated images using Stable Diffusion with ease. Whether you're new to AI image generation or an experienced user, this guide ensures that your setup is optimized for performance and stability. 🔗 Required Downloads: Before we begin, make sure to download the following tools: ✅ Git for Windows – Download Here ✅ Stable Diffusion WebUI (AUTOMATIC1111) – Download Here ✅ Python 3.10.6 – Download Here 🛠️ Step-by-Step Installation Process 1️⃣ Install Git for Windows Git is required to clone the ...
Post a Comment
Read more

Unreal Engine Product Showcase: Mesmerizing Video Sequence Render

  4k Image:
Post a Comment
Read more

Install TensorFlow on Windows 11: Step-by-Step Guide for CPU & GPU

 --- Installing **TensorFlow on Windows 11** requires setting up system dependencies, configuring Python, and ensuring compatibility with CPU or GPU acceleration. This step-by-step guide provides everything needed to install **TensorFlow 2.10 or lower** on **Windows Native**, including software prerequisites, Microsoft Visual C++ Redistributable installation, Miniconda setup, GPU driver configuration, and verification steps.   ### **System Requirements:**   Before installing TensorFlow, ensure your system meets these requirements:   - **Operating System:** Windows 7 or higher (64-bit)   - **Python Version:** 3.9–3.12   - **pip Version:** 19.0 or higher for Linux and Windows, 20.3 or higher for macOS   - **Microsoft Visual C++ Redistributable:** Required for Windows Native   - **Long Paths Enabled:** Ensure long paths are enabled in Windows settings   For **GPU support**, install:   - **NVIDIA ...
Post a Comment
Read more