Signup Form

<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>CodePen - Green Registration Form</title> <link rel="stylesheet" href="./style.css"> </head> <body>   <!DOCTYPE html> <html> <head> <title>Form Registration</title> <meta charset="UTF-8"> <link rel="stylesheet" href="css.css"> </head> <body> <div class="container"> <h1 id="main-title">Sign Up</h1> <p id="subtitle">It only takes a minute!</p> <form action=""> <div id="first-name" class="placeholders"> <label id="pl_first_name" for="text" class="">First name</label> <input required id="pl_first_name" type="text" name="firstname" placeholder="Enter your first name..."> </div> <div id="username" class="placeholders"> <label id="pl_username" for="text" class="">Username (up to 8 characters)</label> <input required id="pl_username" type="text" name="username" maxlength="8" placeholder="Enter your username..."> </div> <div id="email" class="placeholders"> <label id="pl_email" for="text" class="">Email</label> <input required id="pl_email" type="email" name="email" placeholder="Enter your email..."> </div> <div id="password" class="placeholders"> <label id="pl_password" for="text" class="">Password</label> <input required id="pl_password" type="password" name="password" maxlength="8" placeholder="Enter your password..."> </div> <div class="terms-conditions"> <input required type="checkbox" name="vehicle1" value="Bike"> <p id="terms-conditions">I have read the terms and conditions of this company and accepted the privacy policy.</p> </div> <br><br> <button onclick="" id="a-submit" href="#">Submit</button> </form> </div> </body> </html>  </body> </html>

/* Green Registration Form, by Xavier Mod v1.0 1/02/19 Created by Xavier Mod | [email protected] | 2019 */ @import url('https://fonts.googleapis.com/css?family=Montserrat:400,700'); * { padding: 0; margin: 0; box-sizing: border-box; } body { background-color: rgb(27, 233, 112); font-family: "Montserrat", sans-serif; } .container { margin: 70px auto; background-color: white; /* border: 2px red solid; */ border-radius: 5px; width: 400px; height: 590px; box-shadow: 2px 3px 10px rgb(184, 184, 184); } /* Sign Up */ #main-title { /* border: 2px red solid; */ text-align: center; font-size: 25px; padding: 30px 30px 10px 30px; font-weight: 700; color: rgb(20, 20, 20); } /* It only takes a minute! */ #subtitle { text-align: center; font-size: 14px; color: rgb(70, 70, 70); } form { /* border: 2px red solid; */ padding: 20px 40px 20px 40px; } .placeholders { /* border: 2px red solid; */ height: 85px; } .placeholders > label { display: block; margin-bottom: 10px; font-size: 12px; /* border: 2px red solid; */ } .placeholders input { /* border: 2px red solid; */ width: 100%; height: 35px; } input::placeholder { font-family: 'Montserrat'; /* border: 2px red solid; */ } .terms-conditions { /* border: 2px red solid; */ } #terms-conditions { display: inline; font-size: 13px; color: black; /* border: 2px red solid; */ } #a-submit { display: block; margin: auto; text-align: center; padding: 10px 30px 10px 30px; font-family: 'Montserrat', 'sans-serif'; border: 1px solid rgb(27, 233, 112); background-color: white; border-radius: 3px; cursor: pointer; width: 100%; font-size: 14px; color: rgb(27, 233, 112); font-weight: 700; -webkit-transition: all 0.43s ease; } #a-submit:hover { border: 1px solid rgb(27, 233, 112); background-color: rgb(27, 233, 112); color: white; width: 50%; /* box-shadow: 2px 3px 10px rgb(211, 211, 211); */ } #a-submit:active { width: 40%; /* box-shadow: 2px 3px 10px rgb(211, 211, 211); */ }

This is another example of a simple signup form, designed using CSS, HTML, and Bootstrap framework 4. The font style has been imported to the code with its URL. The body of the form is given the style of background-color as RGB(27, 233, 112), and font-family as "Montserrat", sans-serif. The signup container is given a background color as white, width as 400px, height as 590px, and box-shadow as 2px 3px 10px RGB(184, 184, 184). The title of the form is displayed with the styles of text-align as center, font-size as 25px, font-weight as 700, and font color as RGB(20, 20, 20), whereas the subtitle is displayed with the styles of font-size as 14px, and font color as RGB(70, 70, 70). The input text field labels are given a font-size of 12px. The fields are given width as 100%, and a height as 35px. The 'Submit' button is given a background color as white, border style as 1px solid RGB(27, 233, 112),width as 100%, and font size as 14px. In a hover event, the button takes a background color of RGB(27, 233, 112, font color as white, and change the width to 50%. Source: https://codepen.io/xaviermod/pen/wNdKyZ

Signup Form

Post Comment or Questions Cancel reply

Several Related Snippets