How to create a Forgot Password Page using HTML and CSS





























Hello Developers, We provide you with a dynamic and eye-catching Reset Password Form that uses only HTML and CSS to present your information to you at a glance. This Reset Password Form snippet has been designed with accuracy using HTML and CSS to create a user-friendly and easy-to-use Reset Password Form. It combines HTML and CSS to provide a seamless authentication experience for the user. It includes a single input field for an email id to reset your password, along with subtle placeholders for instructions. This login form snippet improves the user interface and provides secure access to your account. It is completely responsive, so it can be viewed on any device. Your form will always be presented in an organized manner, whether it’s a desktop, laptop, tablet, or smartphone. By using this HTML & CSS Reset Password Form Snippet, you are not only sharing information, but you’re also demonstrating your dedication to professionalism & contemporary web design. In conclusion, use this innovative & creative Reset Password Form to show off & interact with the world.

How to How to create a Forgot Password Page 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="box"> <h1 class="tit">Forgot Password</h1> <p class="para">Forgot your password ? Don't worry we are just here to solve your problem ! Just enter your e-mail address to proceed.</p> <form action="#" method="post"> <input type="email" name="email" id="email" placeholder="Your e-mail address"><br> <button type="submit">Reset my Password</button> </form> <div class="credit">Made with <span>❤ </span>by <a href="https://www.learningrobo.com/">learningrobo</a></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
**/
body {
    font-family: 'Poppins', sans-serif;
    background-color: #ff6e2a;       
}
.box{
    background-color: rgb(18, 18, 18);
    height: 400px;
    width: 600px;
    margin: 130px auto;
    text-align: center;
    border-radius:5px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.tit{
    color: #ff6e2a;
    font-size: 40px;
    padding-top: 50px;
}
.para{
    font-size: 17px;
    padding: 0px 8px;
    color: aliceblue;
}
input{
    padding: 10px;
    width: 460px;
    margin-top: 30px;
    text-align: center;
    font-size: 18px;
    border:2px solid #ff6e2a;
    border-radius:10px;
    background-color:rgb(18, 18, 18);
}
button{
    padding: 10px;
    width: 250px;
    margin-top: 25px;
    background-color: #ff6e2a;
    border: none;
    color: white;
    font-size: 15px;
    border-radius: 5px;
}
@media screen and (max-width:630px) {
    .box{
        width:98%;
    }  
    input{
        width:70%;
    }    
}
.credit a{
    text-decoration: none;
    color: #fff;
    font-weight: 800;
}
.credit{
    color: #fff;
    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 Forgot Password Page Using HTML and CSS.

Thank you for reading our blog. If you face any problem in Creating a Forgot Password Page Using HTML and CSS., then contact us or comment to us. We’ll try to provide a solution to your problem as soon as possible.

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.

Thank you
Learning robo team

إرسال تعليق

Thank you
Learning robo team

Post a Comment (0)

أحدث أقدم
Learning Robo says...
code copied
Welcome