<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Green Registration Form</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<!--
Green Registration Form, by Xavier Mod
v1.0 1/02/19
Created by Xavier Mod | hi.xavier.mod@gmail.com | 2019
-->
<!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>
<!-- partial -->
</body>
</html>
/*
Green Registration Form, by Xavier Mod
v1.0 1/02/19
Created by Xavier Mod | hi.xavier.mod@gmail.com | 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); */
}
