Login Form using HTML and CSS

Hey, developers welcome to Day 7 of our 90Days 90Projects challenge. And in Day 7 we are going to create a Login Form using HTML and CSS.

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

Preview

HTML Code

index.html

<!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">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
        integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>

<body>
    <div class="container">
        <h2 class="t-center">Login</h2>
        <form action="">
            <div class="inputDiv">
                <label for="name" class="username">Username</label>
                <div class="userArea">
                    <i class="fa-solid fa-user"></i><input type="text" name="name" id="name"
                        placeholder="Type your username">
                </div>
                <hr>
            </div>
            <div class="inputDiv">
                <label for="password" class="username">Password</label>
                <div class="userArea">
                    <i class="fa-solid fa-key"></i><input type="password" name="password" id="password"
                        placeholder="Type your password">
                </div>
                <hr>
            </div>

            <span class="forgotPassword">Forgot password?</span>
            <button class="btn">Login</button>
            <div class="formBottom">
                <p>Or Sign Up using</p>
                <ul class="flexUl">
                    <a href="https://www.faceboook.com" target="_blank">
                        <li><i class="fa-brands fa-facebook-f"></i></li>
                    </a>
                    <a href="https://www.twitter.com" target="_blank">
                        <li><i class="fa-brands fa-twitter"></i></li>
                    </a>
                    <a href="https://www.google.com" target="_blank">
                        <li><i class="fa-brands fa-google"></i></li>
                    </a>
                </ul>
                <p class="signUp">Or Sign Up using</p>
                <p id="signUp">SIGN UP</p>
            </div>
        </form>
    </div>
    <!-- Login Form using HTML and CSS by raju_webdev -->
</body>
</html>

CSS Code

style.css

@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;500;700&display=swap');

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

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

.container {
    background-color: white;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 1rem 3rem;
    border-radius: .5rem;
}

.container form {
    display: flex;
    justify-content: center;
    flex-direction: column;
    position: relative;
}

.container h2 {
    font-size: 1.5rem;
    margin: 2rem;
}

.container form input {
    font-weight: lighter;
    border: none;
}

input:focus {
    outline: none;
}

.container form .username {
    margin-bottom: .7rem;
}

.container form i {
    font-size: 1rem;
    margin-right: 0.5rem;
}

.container form input {
    font-size: 1rem;
}

.userArea {
    margin-bottom: .7rem;
}

.container form .forgotPassword {
    position: absolute;
    right: 0rem;
    cursor: pointer;
    bottom: 17rem;
    color: rgb(113, 119, 124);
    font-size: .8rem;
}

.inputDiv {
    display: flex;
    flex-direction: column;
    padding-bottom: .8rem;
}

.formBottom {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.formBottom ul {
    margin-bottom: 3rem;
}

.formBottom p {
    margin-bottom: .5rem;
    font-size: .8rem;
}

.flexUl {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.flexUl a {
    text-decoration: none;
}

.flexUl li {
    list-style: none;
}

.flexUl li i {
    height: 35px;
    width: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.fa-brands {
    margin-top: 1rem;
    cursor: pointer;
    color: white;
    padding: 0.5rem;
    border-radius: 50%;
}

.fa-google {
    background-color: orangered;
}

.fa-twitter {
    background-color: rgb(43, 71, 228);
}

.fa-facebook-f {
    background-color: darkblue;
}


/* Utility Classes */
.t-center {
    text-align: center;
}

.btn {
    border: none;
    border-radius: 0.8rem;
    cursor: pointer;
    padding: 0.7rem 0.8rem;
    background: linear-gradient(to right, #8d68c5, #e34494);
    margin-top: 2rem;
    margin-bottom: 3rem;
    color: #fff;
}

#signUp {
    font-size: 1rem;
    cursor: pointer;
}

#signUp:hover {
    color: #8d68c5;
}

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