learn how to Make login form using HTML CSS – Create sign in form design using HTML and CSS
❤️ SUBSCRIBE: https://goo.gl/tTFmPb

❤️ Complete website Using HTML and CSS
✔️ 8 Complete website step by step
✔️ Source Code Download
✔️ 76 Lectures, 12 Hours Video
✔️ Course Completion certificate
👉 https://easytutorialspro.com/go/course/

In in tutorial you will learn to create a login form in HTML and CSS coding, subscribe easy tutorials channel to watch more videos on website designing tutorials for beginners.

Watch More HTML Website Tutorials:

———————————————-
Full Website Tutorial Stat to End, Watch Here:

https://www.youtube.com/watch?v=99vHH_6F0Ko
———————————————

1) Create Sign in form with Social Login In HTML and CSS
https://youtu.be/pYvVD5DCCr0

2) Particles Js Tutorial
https://youtu.be/Uzpn4n0nk4I

3) Create image gallery in Website using HTML and CSS
https://youtu.be/C1B1Fx3XKOg

4) Create Ecommerce Website – Online Shop
https://youtu.be/Wbc2db82jLQ
————————————-
Best hosting up to 60% off (coupon- EASYTUTORIALS)
👉 https://easytutorialspro.com/go/hostgator/

Affordable hosting up to 91% (coupon- EASYTUTORIALS)
👉 https://easytutorialspro.com/go/hostinger/

My recommended tools and tutorials
👉 https://easytutorialspro.com/
————————————-
Get code of this Tutorial:
http://www.avinashkr.com/blog/create-login-form-in-html-css/

Music Credit
——————–
Title: Miza & Unicorn – Illuminati https://youtu.be/d30bh4x7bgQ

Like This video and Subscribe This Channel “Easy Tutorials”

source

40 Comments

  1. does anyone else have the problem with the css background-size: cover;

    and background-position: center;

    im using vscode and it seems to be wrong i dint really know why,. can someone help me?

  2. <html>

    <head>

    <style>

    .body{

    margin: 0;

    padding: 0;

    background-color: transparent;

    background-size: cover;

    font-family: sans-serif;

    }

    .loginbox{

    width: 320px;

    height: 420px;

    background-color: #000;

    color: #fff;

    top:50;left: 50;

    position: absolute;

    transform: translate(-50%,-50%);

    box-sizing:border-box;

    padding: 70px; 30px;

    }

    .avtar{

    width: 100px;

    height:100px;

    border-radius: 50%;

    position: absolute;

    top:-50px;

    left:calc(50% -50px)

    }

    h1{

    margin:0;

    padding: 0 0 20px;

    text-align: center;

    font-size: 22px;

    }

    .loginbox p{

    margin: 0;

    padding:0;

    font-weight:bold;

    }

    .loginbox input{

    width: 100%;

    margin-bottom: 20px;

    }

    .loginbox input[type="email"],input[type="password"]

    {

    border:none;

    border-bottom: 1px solid #fff;

    background: transparent;

    outline: none;

    height: 40px;

    font-size: 16px;

    }

    .loginbox input[type="submit"]

    {

    border: none;

    outline: none;

    height: 40px;

    background: #fb2525;

    color: #fff;

    font-size: 18px;

    border-radius: 20px;

    }

    .loginbox input[type="submit"]:hover

    {

    cursor: pointer;

    background: #ffc107;

    color: #000;

    }

    .loginbox a{

    text-decoration: none;

    font-size: 12px;

    line-height: 20px;

    color: darkgrey;

    }

    .loginbox a:hover{

    color:#ffc107

    }

    </style>

    </head>

    <body class="body">

    <div class="loginbox">

    <img src="https://ableelite.com/wp-content/uploads/2016/06/avatar_square_blue_512dp.png" alt="avtar" class="avtar">

    <h1>Login</h1>

    <form>

    <p>Email</p>

    <input type="text" name="email" placeholder="Enter Email">

    <p>Password</p>

    <input type="password" name="password" placeholder="Enter Password">

    <input type="submit" value="Login">

    <a href=" ">Forgetpassword</a>

    <a href=" ">Register</a>

    </form>

    </div>

    </body>

    </html>

Leave A Reply

Please enter your comment!
Please enter your name here