<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - A Pen by Luke Baughan</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<h1>Welcome...</h1>
<p class="lead">Complete the registration form below and click the "Register" button to create an account.</p>
<p>Lorem ipsum dolar sit amet...</p>
<form class="registration">
<fieldset>
<legend>Registration Form</legend>
<p>
<label for="email">Email</label>
<input type="email" name="email" id="email" value="" placeholder="
[email protected]" required />
</p>
<p>
<label for="password">Password</label>
<input type="password" name="password" id="password" placeholder="********" required />
</p>
<p>
<button class="register" onclick="return false;">Register</button>
</p>
</fieldset>
</form>
<!-- partial -->
</body>
</html>
@import url(https://fonts.googleapis.com/css?family=Roboto:100,300,400);
body {
background-color: rgb(29, 31, 32);
border: solid 1px grey;
box-sizing: border-box;
color: whitesmoke;
font-family: 'Roboto', sans-serif;
font-weight: 300;
margin: 10px auto 10px auto;
padding: 20px 20px 40px 20px;
width: 25%;
}
h1 {
border-bottom: solid 1px grey;
}
p {}
p.lead {
font-style: italic;
}
form.registration fieldset {
border: solid 1px grey;
padding: 20px 30px 40px 20px;
}
form.registration fieldset>legend {
border: solid 1px grey;
color: whitesmoke;
padding: 10px;
}
form.registration p {
padding-left: 10px;
}
form.registration label,
form.registration input,
form.registration select {
display: block;
padding: 0;
}
form.registration label {
font-size: 70%;
font-weight: normal;
}
form.registration input,
form.registration select {
background-color: rgb(29, 31, 32);
border: none;
border-bottom: dashed 1px #336633;
color: white;
margin-top: 10px;
width: 100%;
}
form.registration button.register {
background-color: #336633;
border: solid 1px grey;
color: whitesmoke;
cursor: pointer;
display: inline-block;
float: right;
margin-top: 10px;
padding: 10px;
}
form.registration button.register:hover {
background-color: #338833;
color: white;
}