Responsive Login form using HTML and CSS

Hey, developers welcome to Day 41 of our 90Days 90Projects challenge. Anda in Day 41 we are going to create a Responsive Login Page Design in HTML with Source Code Free Download.

So to run the code you just need to copy the HTML and CSS code and run it into your code Editor. 

Preview

login page in html with css code, login page design in html with source code free download, login page in html css code, simple login form in html, login form html code


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 </title>
    <link rel="stylesheet" href="style.css">
</head>

<body>

    <section class="container">

        <h2> Login Form </h2>
        <form action="" class="form">
            <label for="userId"><span> Email or Phone </span></label>
            <input type="text" name="username" id="userId">

            <label for="password"><span> Password </span></label>

            <input type="password" name="username" id="password">

            <button>Login</button>
        </form>

        <p class="newUser">
            Not a member? <span>Signup now</span>
        </p </section>

</body>
</html>


CSS Code

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}

body {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: blueviolet;
}

.container {
    width: 20rem;
    margin: 1rem;
    padding: 2rem 1rem;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    background-color: #fff;
}

.container h2 {
    margin-bottom: 2rem;
}

.container form {
    display: flex;
    flex-direction: column;
}

.container form label {
    width: 100%;
    margin-bottom: 5px;
}

.container form input {
    width: 16rem;
    outline: none;
    padding: 5px 10px;
    margin-bottom: 1rem;
    border: 1px solid rgb(133, 129, 129);
}

button {
    border: none;
    color: #fff;
    margin: 1rem 0;
    font-size: 18px;
    padding: 0.5rem;
    cursor: pointer;
    font-weight: bold;
    border-radius: 5rem;
    background: linear-gradient(to right, red, yellow);
}

.newUser span {
    color: rgb(25, 176, 176);
}

Learn HTML- Learn Now

Learn CSS- Learn Now

Visit our 90Days, 90Projects Page- Visit Now

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.

Top Post Ad

Below Post Ad