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

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

Unreal Engine Product Showcase: Mesmerizing Video Sequence Render

  4k Image:
Post a Comment
Read more

Cloudflare Is Down Worldwide: What Happened, What It Means & What You Can Do

🌍 Cloudflare Is Down Worldwide: What Happened & Why the Internet Broke Today On 18 November 2025 , the internet experienced one of the largest global outages in years as Cloudflare , the backbone of countless websites and online services, went down unexpectedly. The outage caused millions of websites to become slow, unreachable, or return 5xx internal server errors , leading to widespread disruption across businesses, apps, and essential online platforms. This blog post explains what happened, why the internet broke for many users, and what Cloudflare has officially said so far. What Exactly Happened? Around 4:30 PM IST , reports began flooding social media and outage trackers like Downdetector. Users across India, Europe, the US, and Southeast Asia noticed that: Websites were not loading Requests were timing out Services dependent on Cloudflare CDN or DNS stopped responding APIs hosted through Cloudflare were failing Even some security and protection layers were ...
Post a Comment
Read more