<!-- Added Open Sans from Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600,600i,700,700i" rel="stylesheet" type="text/css">
<form class="main-cont" action="#">
<label for="email" class="label">Email*</label>
<input id="email" type="text" required>
<fieldset class="label">
<legend>Plan*</legend>
<input id="plan-free" type="radio" name="plan" required>
<label for="plan-free">Free</label>
<input id="plan-pro" type="radio" name="plan">
<label for="plan-pro">Pro</label>
</fieldset>
<label for="referral" class="label">How did you hear about us?</label>
<input id="referral" type="text">
<br>
<button type="submit" id="sign-up" class="button">
Sign Up
</button>
</form>
body, * {
font-family: 'Open Sans', sans-serif;
box-sizing: border-box;
color: #383838;
}
.main-cont {
display: block;
width: 300px;
padding: 30px;
border-radius: 5px;
margin: auto;
background: #ececec;
}
.label:not(:first-child),
.button {
display: block;
margin-top: 15px;
}
input[type="text"], input[type="password"] {
width: 100%;
padding: 8px 10px;
margin-top: 5px;
border-radius: 5px;
border: solid 1px #c7c7c7;
}
fieldset {
padding: 0;
border: none;
}
.button {
display: inline-block;
padding: 10px 30px;
border: none;
border-radius: 5px;
background-color: #D80000;
font-size: 16px;
font-weight: bold;
color: white;
cursor: pointer;
}
.button:hover, .button:focus {
background-color: #A30000;
}
var btn = document.getElementById('sign-up');
btn.addEventListener('click', function(event) {
event.preventDefault();
alert('You asked to sign up!');
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.