Responsive Login Form using only HTML and CSS

0





























Hello Developers, We provide you with a dynamic and eye-catching Responsive Login Form that shows you how to create Responsive Login Form in HTML CSS that displays your information in an easy to understand way. The snippet is a user-friendly Responsive Login Form snippet that combines the strengths of HTML and CSS to provide the user with seamless authentication. At the top of the snippet, you can add an image and a small note that adds a touch to your form. This snippet contains three input fields for name, email address and password with subtle placeholders for login instructions. You can also find a login button that stands out with a hover effect. This Responsive Login Form snippet not only enhances the user interface but also provides a secure gateway for effortless access to your account. This snippet is fully responsive, so you can display it on any device. Your form will always display clearly, whether it's on a desktop, laptop, tablet or smartphone. This Responsive Login Form has been carefully crafted using HTML and CSS so that you not only share information, but also demonstrate your commitment to professionalism and modern web design. Use this innovative and creative Responsive Login Form to impress and engage with the world.

How to make Responsive Login Form using only HTML and CSS.[Source Code]

To make this website, you would like to make two files: an HTML file, a CSS file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.

<!DOCTYPE html> <html> <head> <title>Form UI design - learningrobo</title> <meta name="description" content="Form UI design - learningrobo"> <meta name="author" content="learningrobo.com"> <meta name="keywords" content="form,responsive,learningrobo.com,html & css projects,project"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="icon" type=image/x-icon href="#"> <link rel="stylesheet" href="style.css"> <meta charset="UTF-8"> </head> <body> <!--Hello Future Developer Thanks for Using learningrobo.com, Share & Support us--> <div class="p1"> <div class="c1"> <img src="https://cdn.pixabay.com/photo/2017/11/10/05/48/user-2935527_1280.png" alt="user icon"> <h3 class="log">Welcome back!</h3> <h3>Welcome Back! We are happy to have you here. it's great to see you again. We hope you had a safe and enjoyable time away.</h3> </div> <div class="c2"> <h3 class="log">Login</h3> <div class="c2c"> <form action="#" method="post"> <br><input type="text" name="name" id="name" placeholder="Name"><br> <input type="email" name="email" id="email" placeholder="Email Address"><br> <input type="password" name="pass" id="pass" placeholder="Password"><br> <h5 class="frog"><a href="#">Forgot Password ?</a></h5> <button type="submit" class="logb">Login</button> <h5>Not a member ? <a href="#">Signup now</a></h5> </form> <div class="credit">Made with <span>❤ </span>by <a href="https://www.learningrobo.com/">learningrobo</a></div> </div> </div> </div> <!--Check our website Regularly For New Snippets Post--> </body> </html>
CSS provides style to an HTML page. To make the page attractive create a CSS file with the name style.css and remember that you have to make a file with a .css extension. 


/** 
Hello Future Developer Thanks for Using learningrobo.com, 
Check our website Regularly For New Snippets Post.

Share & Support us
**/
*{
    box-sizing: border-box;
}
body{
    font-family: 'Poppins', sans-serif;
}
.p1{
    background-color: #DFDCFB;
    height: 600px;
    width: 1000px;
    border-radius: 10px;
    margin: 20px auto;
    padding: 20px;
}
.c1{
    float: left;
    height: 560px;
    width: 460px;
    background-color: #b7b2f4 ;
    border-radius: 10px;
    margin:0px 10px;
    padding: 30px;
    text-align: center;
}
.c2{
    float: left;
    height: 560px;
    width: 460px;
    background-color: #b7b2f4 ;
    margin:0px 10px;
    border-radius: 10px;
    padding: 30px;
    text-align: center;
}
img{
    height: 200px;
    width: 200px;
    border-radius:50%;
    margin:30px 0px 20px 0px;
}
.log{
    font-size: 30px;
}
input,.logb{
    padding: 10px 50px;
    margin: 8px;
    border-radius: 20px;
    border-color: aliceblue;
    border-style: dashed;
}
h5 a{
    font-weight: 600;
}
a{
    text-decoration: none;
    font-weight: 500;
    font-size: 15px;
}
.lob{
    font-size: 20px;
    background-color:azure;
}
.frog{
    text-align: right;
    margin: 0px 30px;
}
@media screen and (max-width:630px) {
    .p1{
        width:98%;
        height:fit-content;
    }
    .c1,.c2{
        width:98%;
        float: none;
        margin:10px auto;
    }
    img{
        height: 150px;
        width: 150px;
    }
    .frog{
        text-align: right;
        margin: 10px 0px;
    }
    input,.logb{
        padding: 10px 40px;
        margin: 8px 8px 8px 0px;
    }
}
.credit a{
    text-decoration: none;
    color: #121212;
    font-weight: 800;
}
.credit{
    color: #121212;
    text-align: center;
    margin-top: 10px;
    font-family: Verdana,Geneva,Tahoma,sans-serif;
}
.credit span{
    color:tomato;
    font-size:20px;
}
We hope you would like this Responsive Login Form using only HTML and CSS.

Thank you for reading our blog. If you face any problem in Creating a Responsive Login Form using only HTML and CSS., then contact us or comment to us. We’ll try to provide a solution to your problem as soon as possible.

Explore

Color picker Word counter Box shadow generator HTML encoder & Decoder online live editor More..
Press The Key ' p ' and say ' read article ' our voice assistant read our article.
In Our older post it doesnot work we working on that.
Tags:

Thank you
Learning robo team

Post a Comment

Thank you
Learning robo team

Post a Comment (0)

Previous Post Next Post
Learning Robo says...
code copied
Welcome