Iconic Login Form Using HTML and CSS

0





























Hello Developers, We provide you with a dynamic and eye-catching Personal portfolio HTML Template using HTML and CSS that presents your information in an easy-to-read format. The Personal Portfolio Html Template is a simple and easy-to-use Personal portfolio HTML that uses HTML and CSS to create a seamless authentication experience for the user. With an HTML/CSS portfolio, you can create pages that are engaging and informative on your website. You can use HTML for content structure and CSS for styling to easily change the layout, fonts, colors, and more. This snippet makes it easy to present your company or personal information in a visually appealing way, fostering a user-friendly experience. This personal portfolio is fully responsive so it can be displayed on any device including desktop, laptop, tablet, or smartphone. By using this HTML & CSS footer design snippet, you're not only sharing information but also showing your dedication to professionalism & contemporary web design. NOTE: We have saved the CSS in a different file and linked it to the Personal portfolio HTML template.

How to make Iconic 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,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"> <h1 class="login">Login</h1> <hr> <form action="#" method="post"> <input type="text" name="user" id="user" placeholder="Username"><br> <input type="password" name="pass" id="pass" placeholder="Password"><br> <h5 class="forg"><a href="#">Forget Password ?</a></h5> <input type="submit" value="Login"><br> </form> <h5 class="not">Not a Member? <a href="#">Signup</a></h5> <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. 


body {
    font-family: 'Quicksand', sans-serif;
    background-color: hotpink;
}
.p1{
    background-color: white;
    height: 480px;
    width: 460px;
    border-radius: 15px;
    text-align: center;
    margin: 100px auto;
}
.login{
    padding: 25px 0px 10px;
}
hr{
    border: 1px solid black;
}
input[type="text"]{
    padding: 10px;
    width: 300px;
    border: none;
    background: transparent;
    border-bottom: 1px solid black;
    outline: none;
    font-size: 15px;
    margin-top: 40px;
}
input[type="password"]{
    padding: 10px;
    width: 300px;
    border: none;
    background: transparent;
    border-bottom: 1px solid black;
    outline: none;
    font-size: 15px;
    margin-top: 20px;
}
.forg{
    margin-right: 190px;
    margin-top: 40px;
    font-size: 15px;
}
a{
    text-decoration: none;
    color: grey;
}
input[type="submit"]{
    border-radius: 30px;
    width: 320px;
    padding: 10px;
    border: 1px solid black;
    font-size: 25px;
}
.not{
    font-size: 15px;
}
@media only screen and (max-width: 630px){
    .p1{
        width:98%;
    }
}
.credit a{
    text-decoration: none;
    color: #000;
    font-weight: 800;
}
.credit{
    color: #000;
    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 Iconic Login Form Using HTML and CSS.

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

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