HTML And CSS Create A Nice And Beatiful Login Form

Create a beautiful login form by just using HTML and CSS

Last Update: May 07, 2021

HTML And CSS Create A Nice And Beatiful Login Form

Hello Friend, today we are going to create a beautiful login form with just HTML & CSS.

Well this is a shortest tutorial so far written in Parallel Ninja. We will have just one file only "index.html", without any further ado let's get to it.

index.html

<!--
    Author: Mr Parallel
    Tutorial: HTML And CSS Create A Nice And Beatiful Login Form
    Contact: stetcha@panthera-clan.co.za
-->


<!DOCTYPE html>
<html lang="en">

    <head>
        <title>HTML & CSS Login Form</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"/>
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css">
    </head>

    <body>
        
        <form id="loginForm" method="post">
            <img src="icon.png" alt="logo image" id="logoImage"/>
            <div class="input-group">
                <span class="input-group-addon">
                    <i class="fa fa-envelope"></i>
                </span>
                <input name="user" class="form-control" placeholder="Username" required autofocus/>
            </div>

            <div class="input-group">
                <span class="input-group-addon">
                    <i class="fa fa-lock"></i>
                </span>
                <input type="password" name="pass" class="form-control" placeholder="Password" required/>
            </div>
            <button type="submit" name="login" class="btn btn-danger">
                Sign In <i class="fa fa-sign-in-alt"></i>
            </button>
            <hr />
        </form>
        
    </body>

</html>


<style>
    
    * body{
        font-size: 16px;
        color: #c3c3c3 !important;
        line-height: 1.5;
        margin: 0px;
        padding: 0px;
        font-family: "sans-serif, Arial, Helvetica, sans-serif";
        background: #0D1219;
    }
    
    #loginForm{
        margin: 50px auto;
        max-width: 400px;
        box-shadow: -5px 5px 5px 5px #000;
        padding: 20px;
    }
    #loginForm div[class="input-group"]{
        margin-bottom:25px;
    }
    #loginForm img{
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 25px;
    }

</style>

And well that's it, the outcome will be the image on this tutorial, by the way, do upload your own image on the directory you are working on, and call it "icon.png" or any name, but make sure that the image source corresponds to the image you have.

Source Code: Download Source Code


Thank you for visiting the site


Regards

Mr Parallel