Sign Up Form

Developer
Eric Rogg
Size
2,373 Kb
Views
42,504
  1. Sign Up Form Previews
  2. Sign Up Form HTML Codes
  3. Sign Up Form CSS Codes

How do I make an sign up form?

What is a sign up form? How do you make a sign up form? This script and codes were developed by Eric Rogg on 17 August 2022, Wednesday.

Sign Up Form Previews
IQ Test

Sign Up Form - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Sign Up Form</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>Sign Up Form</h1>
<div class="container"> <h3>New to XXXX? <span class="bold">Sign Up Here:</span></h3> <input class="form-field" placeholder="Name" name="name"> </input> <input class="form-field" placeholder="Email" name="email"> </input> <input class="form-field" type="password" placeholder="Password" name="email"> </input> <p>By creating an account, I accept XXXX's <a href="#">Terms of Service</a> and <a href="#">Privacy Policy.</a></p> <div class="btn"> Sign Up </div>
</div>
</body>
</html>

Sign Up Form - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,700);
body { background:#00b1f6; background: url('http://i.imgur.com/qlRHpZZ.jpg') no-repeat; no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;
}
.container { width:300px; margin-left:auto; margin-right:auto; margin-top:5%;
}
h1, h2, h3 { text-align:center; font-family: "Open Sans", Sans; text-shadow:1px 1px 0px rgba(0, 0, 0, 0.1);
}
h1 { font-weight:300; color: rgba(255, 255, 255, 0.8);
}
h3 { color:#fff; font-weight: 400; font-size: 16px;
}
.bold { font-weight: 700;
}
p { font-family:"Open Sans", Sans; font-size:12px; color: rgba(255, 255, 255, 0.5); text-shadow:1px 1px 0px rgba(0, 0, 0, 0.1);
}
a { color: rgba(255, 255, 255, 0.7); -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; -ms-transition: all 0.2s ease; transition: all 0.2s ease;
}
a:hover { color: rgba(255, 255, 255, 0.9); -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; -ms-transition: all 0.2s ease; transition: all 0.2s ease;
}
.btn { position: relative; display: block; width:120px; margin-top:15px; font-family: "Open Sans", Sans; font-weight:700; color:#fff; text-align:center; padding: 10px 0px; background: #da292b; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0px 3px 0px #9e0b0f; -moz-box-shadow: 0px 3px 0px #9e0b0f; -o-box-shadow: 0px 3px 0px #9e0b0f; -ms-box-shadow: 0px 3px 0px #9e0b0f; box-shadow: 0px 3px 0px #9e0b0f; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; -ms-transition: all 0.2s ease; transition: all 0.2s ease;
}
.btn:hover { background: #e94d4f; cursor: pointer; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; -ms-transition: all 0.2s ease; transition: all 0.2s ease;
}
.btn:active { top: 4px; background: #d44547; cursor: pointer; -webkit-box-shadow: 0px 1px 0px #9e0b0f; -moz-box-shadow: 0px 1px 0px #9e0b0f; -o-box-shadow: 0px 1px 0px #9e0b0f; -ms-box-shadow: 0px 1px 0px #9e0b0f; box-shadow: 0px 1px 0px #9e0b0f;
}
.form-field { width:270px; background: transparent; margin-top:10px; border: 2px solid rgba(255, 255, 255, 0.6); -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; border-radius: 5px; color: rgba(255, 255, 255, 0.7); text-shadow:1px 1px 0px rgba(0, 0, 0, 0.1); box-shadow: 1px 1px 0px rgba(0, 0, 0, 0.1); webkit-box-shadow:1px 1px 0px rgba(0, 0, 0, 0.1); ; -moz-webkit-box-shadow:1px 1px 0px rgba(0, 0, 0, 0.1); ; -ms-webkit-box-shadow:1px 1px 0px rgba(0, 0, 0, 0.1);; -o-webkit-box-shadow:1px 1px 0px rgba(0, 0, 0, 0.1); ; font-family: "Open Sans", Sans; font-style: normal; font-weight: ; padding: 8px 15px; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; -ms-transition: all 0.2s ease; transition: all 0.2s ease;
}
.form-field:hover { border: 2px solid rgba(255, 255, 255, 0.9); -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; border-radius: 5px; color: rgba(255, 255, 255, 0.9); font-family: "Open Sans", Sans; font-style: normal; font-weight: ; padding: 8px 15px; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; -ms-transition: all 0.2s ease; transition: all 0.2s ease;
}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.9);
}
input:-moz-placeholder, textarea:-moz-placeholder { color: rgba(255, 255, 255, 0.9);
}
.form-field:focus { color: rgba(255, 255, 255, 1); border: 2px solid rgba(255, 255, 255, 1); outline:none; }
Sign Up Form - Script Codes
Sign Up Form - Script Codes
Home Page Home
Developer Eric Rogg
Username er40
Uploaded August 17, 2022
Rating 4.5
Size 2,373 Kb
Views 42,504
Do you need developer help for Sign Up Form?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Eric Rogg (er40) Script Codes
Name
Simple List
Tri color loader test
Widget
Collapsing Widget
Cool Radio
Pagination
CSS Google Loader
JQuery Progress Bar22
Casestudy
Header
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!