Your Web News in One Place

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
October 27, 2021 12:17 pm GMT

How to Create a Login Form with HTML and CSS in very less time


Hi folks in this tutorial you will be learning about how to create
a beautiful login form with the help of HTML & CSS with snappy animations in it. You will learn basics of html & css as well and this is the best project for beginners. I recommend you to do this project if you are aspiring web developer. All the best do it !!
And feel free to ask doubts !!
Thankyou
Resource Code:
1)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>Document</title>    <link rel="stylesheet" href="style.css"></head><body>    <div class="container">        <form class="form">            <h2 class="form_title">Log in</h2>            <div class="form_div">                <input type="text" class="form_input" placeholder=" ">                <label class="form_label">Username/Email</label>            </div>             <div class="form_div">                <input type="password" class="form_input" placeholder=" ">                <label class="form_label">Password</label>            </div>             <button class="btn">Next</button>             <div class="already1">                    <div> <a href="#">Forgot password</a></div><br>                     <p>New User?<a href="#">Create accunt</a></p>             </div>        </form>    </div></body></html>

2)style.css

*{    margin: 0;    padding: 0;}.container{    display: flex;    position: relative;    top: 50vh;    justify-content: center;    align-items: center;    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;}.form {    position: absolute;    width: 360px;    padding: 4rem 2rem;    border-radius: 1em;    box-shadow: 0 10px 25px rgba(92, 99, 105, .2);    height: 40vh;}.form_title{    font-weight: 400;    margin-bottom: 3rem;    color: #076086;}.form_div{    position: relative;    height: 48px;    margin-bottom: 1.5rem;}.form_input{    position: absolute;    top: 0;    left: 0;    width: 100%;    height: 100%;    font-size: 18px;    border: 1px solid #DADCE0;    border-radius: 0.5rem;    outline: none;    padding-left: 7px;    background: none;    z-index: 1;}.form_label{    position: absolute;    left: 1rem;    top: 0.85rem;    padding: 0 .30rem;    background-color: #fff;    color: #80868B;    font-size: 18px;    transition: .3s;    border-radius: 5px;}.btn{    display: block;    border:2px solid #076086;    border-radius: 0.5rem;    font-size: 20px;    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;    padding: 0.75rem 2rem;    float: right;    color: #076086;    transition: .3s;    cursor: pointer;    background-color: #fff;}.btn:hover {    font-size: 22px;}.form_input:focus + .form_label{    top: -.5rem;    left: 0.8rem;    color: #076086;    font-size: 14px;    font-weight: 400;    z-index: 10;}.form_input:not(:placeholder-shown).form_input:not(:focus) + .form_label {    top: -.5rem;    left: 0.8rem;    font-size: 14px;    font-weight: 400;    z-index: 10;}.form_input:focus{    border: 1.5px solid #076086;}.already1{    position: relative;    float: left;    padding-top: 1px;    padding-left: 10px;    top: 15px;    text-decoration: none;    font-size: 14px;}.already1 a{    text-decoration: none;    font-size: 14px;    color: #076086;}

Original Link: https://dev.to/adwait12345/how-to-create-a-login-form-with-html-and-css-3k1c

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To