Login Form HTML CSS

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login Form Design</title>
</head>
<body>
    <main class="box">
        <div class="content">
            <span>
                <p>InternPedia.in</p>
            </span>
            <div class="info">
                <p>Learn to code. Interactively. For free.</p>
                <button>
                <span>
                    <i class="fa-solid fa-play" style="color: #ffffff;"></i>
                </span>
                    Watch demo
                </button>
            </div>
        </div>
        <div class="login">
            <div class="message">
                <h3>Join over 25 milion learners from around the globe</h3>
                <p>Perspiciatis laudantium aperiam eum. Repellat quaerat quae provident iusto esse natus soluta, est ipsum amet molestiae.</p>
            </div>
            <form action="#">
                <span class="inputDesign">
                  <svg class="icons" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="#ffffff" d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"/></svg>
                    <input type="email" placeholder="email@email.com">
                </span>    
                <span class="inputDesign">
                    <svg class="icons" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="#ffffff" d="M144 144l0 48 160 0 0-48c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192l0-48C80 64.5 144.5 0 224 0s144 64.5 144 144l0 48 16 0c35.3 0 64 28.7 64 64l0 192c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 256c0-35.3 28.7-64 64-64l16 0z"/></svg>
                    <input type="password" placeholder="*********">
                </span>
            </form>
            <div class="iAgree">
                <input type="checkbox">
                <p>I agree to all statments incudes in 
                    <span style="color:rgb(74, 98, 255); cursor: pointer;">
                        <a href="#">Terms of Use</a>
                    </span>
                </p>
            </div>
            <input class="btn" type="submit" value="Login">

            <div class="otherLogins">
            <p>Or continue with these social profile</p>
            <div class="socialIcons">
                <i class="fab fa-google fa-2x"></i>
                <i class="fab fa-facebook fa-2x"></i>
                <i class="fab fa-twitter fa-2x"></i>
                <i class="fab fa-instagram fa-2x"></i>
            </div>
            <p style="color:rgb(74, 98, 255); cursor: pointer;">
                <a href="#">Create an Account</a>
            </p>
        </div>
        </div>
    </main>

<div style="position: fixed; bottom: 10px; right: 10px; background-color: rgba(255, 255, 255, 0.9); padding: 8px 15px; border-radius: 20px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);">
  Created by 
  <a href="https://www.internpedia.in" style="color: #2980b9; text-decoration: none; font-weight: bold;" target="_blank" rel="dofollow noopener noreferrer">www.internpedia.in</a>
</div>
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

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

a {
    color: inherit;
    text-decoration: none;
}

body {
    min-height: 100dvh;

    display: flex;
    justify-content: center;
    align-items: center;

    background-color: black;

    font-family: "Poppins", sans-serif;
    outline: none;
}

.box {
    width: 850px;
    height: 500px;

    display: flex;
    flex-direction: row;

    border-radius: 5px;
    box-shadow: 12px 10px 10px 2px rgba(12, 12, 12, 0.58);
}

.btn {
    width: 285px;
    height: 40px;

    color: white;
    background-color: rgb(249 85 125);

    border: 0;
    border-radius: 5px;

    cursor: pointer;
    transition-duration: 0.5s;
}

.btn:hover {
    background-color: rgb(70, 33, 255);
}

.content {
    width: 60%;
    height: 100%;
    padding: 30px 80px;

    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 100px;

    background-color: rgb(249 85 125);
    color: white;

    border-radius: 5px;
}

.content span { 
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 15px;

    font-weight: 500;
    
    cursor: pointer;
}

form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

form input {
    height: 35px;
    width: 285px;
    padding: 0 10px;

    background-color: rgb(12, 12, 12, 0.58);

    border: solid 2px rgb(12, 12, 12, 0.58);
    border-radius: 3px;
    color: white;
    outline: 0;
    letter-spacing: 0.7px;
}

form input::placeholder {
    color: rgb(173, 173, 173);
}

.iAgree {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 5px;

    font-size: 11px;
}

.iAgree input {
    cursor: pointer;
}

.icons {
    width: 18px;
}

.info {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.info button {
    width: 140px;
    height: 50px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    background-color: rgb(255, 255, 255);
    color: rgb(0, 0, 0);

    border: 0;
    border-radius: 30px;
    
    cursor: pointer;

    transition-duration: 0.5s;
}

.info button:hover {
    background-color: rgb(0, 0, 0);
    color: rgb(255, 255, 255);
}

.info p{
    font-size: 40px;
    font-weight: 500;

    max-width: 90%;
}

.inputDesign {
    height: 35px;
    width: 285px;
    padding-left: 10px;
    display: flex;
    justify-content: center;
    background-color: rgb(12, 12, 12, 0.58);

    border: 0;
    border-radius: 3px;
}

.login {
    width: 40%;
    height: 100%;
    padding: 30px;

    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 20px;

    background-color: rgb(22 24 28);
    color: white;

    border-radius: 5px;
}

.message {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.message h3 {
    font-weight: 500;
}

.message p {
    font-size: 11px;
    color: rgb(173, 173, 173);
    line-height: 1.5;
}

.otherLogins {
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;

    font-size: 11px;
}

.socialIcons {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 20px;
}

.socialIcons i {
    cursor: pointer;
}

@media (max-width: 900px) {
    .box {
        width: 80%;
    }
    .content {
        display: none;
    }
    .login {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .message {
        width: 280px;
    }
}

// no js required.

Live Preview

Login Form HTML CSS

About Us

#buttons=(Accept !) #days=(20)

Contact form

Login Form HTML CSS

Related Pages

E-Commerce Landing Page

Hacker Typer Terminal Style Webpage

Developer Portfolio Website

Creative Hover Board Designing

Signup and Login Form

Frequently Asked Questions

Content Placeholder

How to make animated navbar

Background Slider

Animated Navigation Menu Bar

#buttons=(Accept !) #days=(20)

Contact form