<!-- 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">
<div class="main-cont">
<div class="label">Email*</div>
<input type="text">
<div class="label">Plan*</div>
<div>
<input type="radio" name="plan">
<span>Free</span>
<input type="radio" name="plan">
<span>Pro</span>
</div>
<div class="label">How did you hear about us?</div>
<input type="text">
<br>
<div id="sign-up" class="button">
Sign Up
</div>
</div>
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.