How to Create Login Form Using HTML and CSS

0







Hello Developers, Learning Robo offers a dynamic and visually appealing login form snippet that shows your data at a glance. This login form snippet was created precisely with HTML and CSS. The snippet is a user-friendly login form snippet that combines the strengths of HTML and CSS to provide the user with a seamless authentication experience. This login form snippet provides two input fields for the mail ID and password, with discreet placeholders for orientation. You can use the "Remember me" feature to save your login details, and there is a submit button characterized by a hover effect. This login form snippet not only improves the user interface, but also offers a secure gateway for effortless access to your account. CSS ensures responsive and customizable layout settings for different screen sizes. This login form is fully responsive and ensures a seamless viewing experience on different devices. Whether on a desktop, laptop, tablet or smartphone, your form will always be displayed clearly. With this HTML and CSS registration form snippet, you not only share information, but also demonstrate your commitment to professionalism and modern web design. Show off and interact with the world with this innovative and creative login form snippet. Remark: The CSS is coded in a separate file and linked to the HTML file.

How to create Login Form Using 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"> <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="container"> <div class="container-sub"> <img src="https://cdn.pixabay.com/photo/2018/01/04/14/16/woman-3060784_1280.jpg"> <h1>WELCOME BACK</h1> <h4>Sign in to your account</h4> <form> <input type="email" placeholder="Mail ID" required> <input type="password" placeholder="Password" required><br> <input type="checkbox"><label> Remember Me</label><br> <input type="submit" value="SIGN IN"> </form> <div class="credit">Made with <span style="color:tomato;font-size:20px;">❤ </span>by <a href="https://www.learningrobo.com/">learningrobo</a></div> <!--Check our website Regularly For New Snippets Post--> </div> </div> </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
**/
@import url('https://fonts.googleapis.com/css2?family=Mukta:wght@300&family=Nunito+Sans:opsz,wght@6..12,300&display=swap');
:root{
    --bg:#ffffff;
}
h1,h4{
    margin:0%;
}
*{
    margin:0;
}
body{
    background-image: linear-gradient(30deg,#CEDEBD 50%,#435334 50%);
    font-family: 'Mukta', sans-serif;
}
.container{
    height:100vh;
    max-height:auto;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
}
.container-sub{
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    background-color:var(--bg);
    text-align: center;
    border-radius:10px;
    width:30vw;
    padding:30px 5px 5px 5px;
    animation: 2s ease-out 0s 1 slideInup;
}
@keyframes slideInup {
    0% {
      transform: translatey(100%);
    }
    100% {
      transform: translatey(0);
    }
  }
.container-sub img{
    height:150px;
    width:150px;
    border-radius:50%;
    border:5px solid #CEDEBD;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.container-sub form {
    display: block;
    align-items: center;
    margin-top: 10px;
}
.container-sub form input[type="email"],input[type="password"]{
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
    border: 2px solid #ddd;
    width: 60%;
}
.container-sub label{
    margin-bottom: 10px;
}
.container-sub form input[type="submit"]{
    width:60%;
    height:50px;
    border: none;
    border-radius: 10px;
    background-color: #435334;
    color:var(--bg);
    margin-bottom: 10px;
}
.container-sub form input[type="submit"]:hover{
    cursor: pointer;
    color:black;
    background-color:#CEDEBD ;
    transition:0.5s;
}
@media only screen and (max-width: 1024px){
    .container-sub{
        width: 50vw;
    }
}
@media only screen and (max-width: 630px){
    .container-sub{
        width: 90vw;
    }
    .container-sub img{
        height:100px;
        width:100px;
    }
}
.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;
}
We hope you would like this Login Form using HTML CSS.

Thank you for reading our blog. If you face any problem in Creating a Login Form using HTML 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