Edit on
<header>
  <nav>
    <ul id="breadcrumbs">
      <li><a href="#">Home</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">Email</a></li>
    </ul>
    <input type="checkbox" id="dropdown_button">
    <label for="dropdown_button">Display Dropdown</label>
    <ul id="dropdown">
      <li><a href="#">About Us</a></li>
      <li><a href="#">Products</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
  <h1>Contact the Team</h1>
</header>
<section>
  <h2>We'd Love to Hear From You</h2>
  <p>Do you have any lingering questions or comments? Fill out this brief form, and we'll get back to you within a business day. If you need a quicker reply, consider beginning a free trial of our <a href="#">consulting service</a>.</p>
  <form>
    <span class="legend">Tell us about yourself.</span>
    <div class="flexparent">
      <div>
        <input type="text" name="name" id="name" required>
        <label for="text">Your Name</label>
      </div>
      <div>
        <input type="text" name="email" id="email" required>
        <label for="text">Your Email</label>
      </div>
    </div>
    <div class="flexparent">
      <div>
        <span class="legend">To what do we owe the pleasure?</span>
        <input type="radio" name="reason" id="reason_inquiry" value="inquiry">
        <label for="reason_inquiry">Products or Services Inquiry</label> <br>
        <input type="radio" name="reason" id="reason_support" value="support">
        <label for="reason_support">Technical Questions</label> <br>
        <input type="radio" name="reason" id="reason_other" value="other">
        <label for="reason_other">Other Reasons</label>
      </div>
      <div>
        <span class="legend">How should we get in touch?</span>
        <input type="checkbox" name="contact" id="contact_phone" value="phone">
        <label for="contact_phone">Telephone</label> <br>
        <input type="checkbox" name="contact" id="contact_email" value="email">
        <label for="contact_email">Email</label> <br>
        <input type="checkbox" name="contact" id="contact_person" value="person">
        <label for="contact_person">In-Person</label>
      </div>
    </div>
    <span class="legend">How happy are you today?</span>
    <div class="flexparent">
      <div>
        <input type="range" name="oranges" min="0" max="12" step="1" value="4">
      </div>
    </div>
    <span class="legend">Now, what's on your mind?</span>
    <textarea></textarea>
    <div class="submission">
      <input type="reset" value="Start Over">
      <input type="submit" value="Submit">
    </div>
  </form>
</section>
$blue: #3498db;
$dark_blue: #2980b9;
$turquoise: #1abc9c;
$dark_turquoise: #16a085;
$title_fonts: 'Raleway', Arial, sans-serif;
$body_fonts: 'Open Sans', Arial, sans-serif;
$icons_font: 'FontAwesome';
$hamburger_icon: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAjCAQAAAC00HvSAAAAAmJLR0QA/4ePzL8AAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfeDAkBEyl+h8a9AAAADGlUWHRDb21tZW50AAAAAAC8rrKZAAAALUlEQVRIx2NgGAUjCjAimP//k6wZrpuJOq5hGo2Q0eQ3mvxGwWjyGwWjgEgAAK1nBhDSfijYAAAAAElFTkSuQmCC');

* {
  box-sizing: border-box;
}

body {
  background-color: #ccc;
  font-family: $body_fonts;
  font-size: 15px;
  font-weight: 300;
  color: #444;
}

h1, h2, h3 {
  font-family: $title_fonts;
}

h1 {
  color: #fff;
  font-size: 35px;
}

h2 {
  font-size: 22px;
  margin-bottom: 20px;
}

h3 {
  font-size: 18px;
  margin-bottom: 20px;
}

header {
  position: relative;
  height: 200px;
  margin-bottom: -75px;
  background-color: $blue;
  padding: 60px 20px 0 20px;
  color: #fff;
  a {
    color: #fff;
    text-decoration: none;
  }
  a:hover {
    text-decoration: underline;
  }
  nav {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 35px;
    background-color: $dark_blue;
  }
  #breadcrumbs li {
    display: inline;
    font-size: 18px;
    line-height: 35px;
    margin-left: 10px;
    &:first-of-type {
      margin-left: 20px;
    }
    &:not(:first-of-type)::before {
      content: '>';
      padding-right: 10px;
    }
  }
  #dropdown_button {
    display: none;
  }
  label[for="dropdown_button"] {
    font-size: 0;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 35px;
    height: 35px;
    cursor: pointer;
    background: $hamburger_icon;
  }
  #dropdown_button:checked {
    ~ #dropdown {
      height: 35px * 4;
    }
    + label {
      background-color: darken($dark_blue, 10%);
    }
  }
  #dropdown {
    position: absolute;
    top: 35px;
    right: 0;
    width: 200px;
    height: 0;
    overflow: hidden;
    background: $dark_blue;
    z-index: +1;
    transition: height 0.5s ease;
    box-shadow: 0 5px 10px rgba(0,0,0,0.5);
    li a {
      display: block;
      height: 35px;
      line-height: 35px;
      padding: 0 10px;
    }
    li a:hover {
      text-decoration: none;
      background: darken($dark_blue, 10%);
    }
  }
}

section {
  position: relative;
  background-color: #fff;
  width: 70%;
  min-width: 700px;
  margin: 0 auto 50px auto;
  padding: 35px 50px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.5);
  p {
    margin-bottom: 10px;
    text-align: justify;
    line-height: 18px;
  }
  a {
    color: $dark_blue;
  }
  a:hover {
    color: $blue;
    text-decoration: none;
  }
}

.legend {
  display: block;
  margin-top: 20px;
  font-weight: bold;
}

.flexparent > div > .legend {
  margin-top: 0;
  margin-left: -10px;
  margin-bottom: 10px;
}

.flexparent {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  > div {
    position: relative;
    display: inline;
    flex: 1 1 auto;
    padding: 10px;
    width: 30%;
  }
}

.submission {
  text-align: right;
  margin-top: 10px;
}

section input[type="text"] {
  outline: none !important;
  width: 100%;
  border: none;
  border-bottom: 1px solid #444;
  margin-top: 10px;
  transition: border 0.5s ease;
  + label {
    position: absolute;
    top: 20px;
    left: 10px;
    pointer-events: none;
    transition: top 0.5s ease,
      font-size 0.5s ease,
      color 0.5s ease;
  }
  &:focus {
    border-bottom: 2px solid $turquoise;
  }
  &:focus + label {
    top: 8px;
    font-size: 10px;
    color: darken($dark_turquoise, 10%);
  }
  &:valid + label {
    top: 8px;
    font-size: 10px;
  }
}

section input[type="radio"], section input[type="checkbox"] {
  display: none;
}

section input[type="radio"] + label::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid #444;
  margin-right: 10px;
  margin-top: 5px;
  background-color: $turquoise;
  box-shadow: 0 0 0 8px #fff inset;
  transition: box-shadow 0.5s ease;
}

section input[type="radio"]:checked + label::before {
  box-shadow: 0 0 0 2px #fff inset;
}

section input[type="checkbox"] + label::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 20%;
  border: 1px solid #444;
  margin-right: 10px;
  margin-top: 5px;
  background-color: $turquoise;
  box-shadow: 0 0 0 8px #fff inset;
  transition: box-shadow 0.5s ease;
}

section input[type="checkbox"]:checked + label::before {
  box-shadow: 0 0 0 1px #fff inset;
}

section input[type="checkbox"]:checked + label::after {
  position: absolute;
  left: 11px;
  color: #fff;
  content: '\f00c';
  font-family: $icons_font;
  font-size: 15px;
  line-height: 12px;
  margin-top: 6px;
}

section input[type="radio"] + label, section input[type="checkbox"] + label {
  &:hover, &:focus, &:active {
    color: $dark_turquoise;
  }
  &:hover::before, &:focus::before, &:active::before {
    border: 1px solid $dark_turquoise;
  }
}

section textarea {
  width: 100%;
  height: 100px;
  margin-top: 10px;
  border: none;
  border: 1px solid rgba(0,0,0,0.2);
  outline: none !important;
  transition: border 0.5s ease;
  &:focus {
    border: 1px solid rgba(0,0,0,0.2);
    border-bottom: 2px solid $turquoise;
  }
}

section input[type="reset"], section input[type="submit"] {
  outline: none !important;
  background: #ccc;
  border: none;
  height: 35px;
  width: 100px;
  margin-left: 20px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2),
    0 0 0 20px #fff inset;
  transition: box-shadow 0.5s ease;
}

section input[type="reset"]:active, section input[type="submit"]:active {
  box-shadow: 0 5px 10px rgba(0,0,0,0.2);
  border-bottom: 2px solid $turquoise;
}

section input[type="range"] {
  width: 100%;
  -webkit-appearance: none;
  outline: none !important;
  overflow: hidden;
  &::-webkit-slider-runnable-track {
    height: 12px;
    border: none;
    background: linear-gradient(to bottom, transparent 5px, #ccc 5px, #ccc 7px, transparent 7px);
  }
  &::-moz-range-track {
    height: 12px;
    border: none;
    background: linear-gradient(to bottom, transparent 5px, #ccc 5px, #ccc 7px, transparent 7px);
  }
  &::-ms-track {
    height: 12px;
    border: none;
    background: linear-gradient(to bottom, transparent 5px, #ccc 5px, #ccc 7px, transparent 7px);
  }
  &::-webkit-slider-thumb {
    -webkit-appearance: none;
    z-index: +2;
    width: 10px;
    height: 10px;
    margin: 1px;
    border-radius: 50%;
    border: none;
    background: $turquoise;
  }
  &::-moz-range-thumb {
    z-index: +2;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    background: $turquoise;
  }
  &::-ms-thumb {
    z-index: +2;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    background: $turquoise;
  }
  &::-ms-fill-lower {
    height: 12px;
    background: linear-gradient(to bottom, transparent 5px, $turquoise 5px, $turquoise 7px, transparent 7px);
  }
  &:hover, &:active, &:focus {
    &::-webkit-slider-runnable-track {
      background: linear-gradient(to bottom, transparent 5px, #aaa 5px, #aaa 7px, transparent 7px);
    }
    &::-moz-range-track {
      background: linear-gradient(to bottom, transparent 5px, #aaa 5px, #aaa 7px, transparent 7px);
    }
    &::-ms-track {
      background: linear-gradient(to bottom, transparent 5px, #aaa 5px, #aaa 7px, transparent 7px);
    }
    &::-webkit-slider-thumb {
      width: 12px;
      height: 12px;
      margin: 0;
    }
    &::-moz-range-thumb {
      width: 12px;
      height: 12px;
      margin: 0;
    }
    &::-ms-thumb {
      width: 12px;
      height: 12px;
      margin: 0;
    }
  }
}

@media(max-width: 700px) {
  body {
    background: #fff;
  }
  section {
    width: 100%;
    min-width: 400px;
    box-shadow: none;
  }
}

@media(max-width: 600px) {
  section {
    padding: 35px 20px;
  }
}

@media(max-width: 400px) {
  header { 
    padding: 45px 10px;
    height: 160px;
    h1 {
      font-size: 25px;
    }
  }
  section { 
    
    p {
      display: none;
    }
  }
  .flexparent {
    display: block;
    > div {
      display: block;
      width: 100%;
    }
  }
}
View Compiled
Rerun