$gradient: linear-gradient(to right, #DE6262, #FFB88C);
$footer-height: 85px;
header {
clear: both;
padding: 20px;
margin-bottom: 1rem;
background: #DE6262; /* fallback for old browsers */
background: $gradient; /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
color: white;
nav {
a {
color: white;
margin-left: 2rem;
padding-bottom: 3px;
font-weight: bold;
border-bottom-color: rgba(255, 255, 255, 0.3);
&:hover {
border-color: white;
}
}
}
.hero {
clear: both;
text-align: center;
margin-top: 3rem;
margin-bottom: 1rem;
h1 {
text-align: center;
font-size: 2rem;
}
.button {
text-transform: uppercase;
font-size: 1.1rem;
display: inline-block;
background-color: white;
color: #DE6262;
border-radius: 2rem;
padding: 0.75em 2em;
font-weight: 600;
}
}
}
footer {
background: $gradient;
padding-top: 30px;
padding-bottom: 30px;
color: white;
font-weight: bold;
height: $footer-height;
text-align: center;
}