Signup form in HTML and CSS

0





























Hello Developers, We provide you with a dynamic and eye-catching Signup form in HTML css that shows your information in a clear and understandable manner. This Signup Form in Snippet is designed with precision with the help of HTML and CSS. This Signup form is a simple and user-friendly Signup form that uses the power of HTML & CSS to provide a seamless authentication experience for the users. This signup form includes username, email address, password, confirm password and some subtle placeholders to guide the user to login a login button. In addition to improving your user interface, this Signup form also provides a secure gateway so that you can easily access your account. It is fully responsive so that you can display it on your desktop, laptop, tablet, and smartphone. So, by using this HTML & CSS form snippet, not only are you sharing information but you’re also demonstrating your commitment to professionalism & modern web design. Note: We have saved the CSS in a different file and connected the HTML file to create the Signup form using the HTML css snippet.

How to make Signup form in 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 Card 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"> <script src="https://kit.fontawesome.com/5d72166fb5.js" crossorigin="anonymous"></script> </head> <body> <!--Hello Future Developer Thanks for Using learningrobo.com, Share & Support us--> <div class="container"> <div class="box"> <div class="top"> <h1>Create Account</h1> </div> <div class="bottom"> <form action="#" method="post" autocomplete="on"novalidate> <h3>UserName</h3> <input type="text" name="name"id="name"placeholder="Insert your user name..."><br> <h3>Email</h3> <input type="email" name="email"id="email"placeholder="hello@example.com"><br> <h3>Password</h3> <input type="password" name="pass" id="pass"placeholder="password..."><br> <h3>Confirm Password</h3> <input type="password" name="pass" id="pass"placeholder="confirm password..."><br><br> <br> <input type="submit" value="Submit"><br> </form> </div> </div> <div class="credit">Made with <span>❤ </span>by <a href="https://www.learningrobo.com/">learningrobo</a></div> </div> <script src="script.js"></script> <!--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{
    background-color:rgb(255,191,0);
}
.container{
    width:100%;
    height:100vh;
    display:flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.box{
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: aliceblue;
    height: 650px;
    width: 450px;
    font-family: 'DM Sans', sans-serif;
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}
.top{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color:gainsboro;
    border:none ;
    height:100px;
    width:100%;
    border-radius:5px 5px 0px 0px;
}
.top h1{
    color: black;
    font-size: 30px;
    font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}
.bottom{
    height:550px;
    width:100%;
}
.bottom h3{
    text-align: left;
    margin-left: 60px;
}
textarea{
    height: 150px;
}
input[type="text"]{
    padding: 10px;
    width: 300px;
    border-radius: 5px;
    border: 1px solid gray;
}
input[type="email"]{
    padding: 10px;
    width: 300px;
    border-radius: 5px;
    border: 1px solid gray;
}    
input[type="password"]{
        padding: 10px;
        width: 300px;
        border-radius: 5px;
        border: 1px solid gray;
}        
input[type="submit"]{
    background-color: orangered;
    width:320px;
    border-radius: 5px;
    border: none;
    padding: 10px;
    font-family: 'Roboto', sans-serif;
    color: white;
    font-size: 17px;
}
input[type="submit"]:hover{
    cursor: pointer;
}
@media screen and (max-width:630px){
    .container{
        padding:20px 0px;
    }
    .box{
        width:98%;
    }
}
.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 Signup form in HTML and CSS.

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

إرسال تعليق

Thank you
Learning robo team

Post a Comment (0)

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