Create Responsive Registration Form in HTML & CSS

0





























Hello Developers, We provide you with a dynamic and eye-catching Signup form Card which displays your details at a glance. The Signup form Card Snippet has been designed with accuracy using HTML and CSS. The Signup form Card is an easy-to-use HTML and CSS form that provides a seamless authentication experience to the user. This form Card snippet includes input fields for your name, username, email id, password with slight placeholders to guide you to login. You can also find a Signup button. Not only does this form Card snippet enhance the user interface, but it also provides a secure gateway to easily access your account. It is completely responsive so you can view it on any device. Your form will always be arranged in an orderly manner whether it’s a desktop, laptop, tablet, or a smartphone. By using this HTML & CSS form snippet, not only are you sharing information, but you’re also demonstrating your commitment to professionalism & contemporary web design. All in all, show off and engage with the world using this innovative and creative Signup form Card.

How to Create Responsive Registration 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 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="container"> <div class="child1"> <form> <h2>Sign Up</h2> <label for="fname"></label><br> <input type="text" id="fname" name="fname" placeholder="Name"><br> <label for="lname"></label><br> <input type="text" id="lname" name="lname" placeholder="Username"><br> <label for="email"></label><br> <input type="email" id="email" name="email" placeholder="Email"><br> <label for="password"></label><br> <input type="password" id="password" name="password" placeholder="password"><br> <label for="conpass"></label><br> <input type="password" id="conpass" name="conpass" placeholder="Conform password"><br> <button type="submit" class="s">SignUp</button> </form> </div> <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
**/
*{
    box-sizing: border-box;
}
body{
    margin: 0%;
}
.container{ 
    height:100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
}
.child1{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 620px;
    width: 400px;
}
form{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color:rgb(22, 22, 22);
    height: 620px;
    width: 400px;
    padding:10px 20px;
    border-radius: 15px;
    margin:0px;
}
input[type=text],input[type=email],input[type=password]{
    background-color:rgb(61, 61, 61);
    padding:15px 5px;  
    margin: 0px;
    border-radius:5px;
    width:100%;
    border: none;
    color:#ddd;
}
.child1 button{
    background-color: silver;
    text-align: center;
    padding: 15px;
    width:100%;
    border:none;
    border-radius:5px;
}
.child1 button:hover{
    cursor: pointer;
}
.child1 h2{
    text-align: center;
    color:#ddd;
    font-size:35px;
    font-family: 'Courier New', Courier, monospace;
}
input::placeholder{
    color: #ddd;
}
@media screen and (max-width:630px){
    .child1{
        height:fit-content;
        width:90%;
    }
}
.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 Product Card Using HTML and CSS.

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

Post a Comment

Thank you
Learning robo team

Post a Comment (0)

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