<h1>GDS1 Support</h1>
<form class="cf">
  <div class="half left cf">
    <input type="text" id="input-name" placeholder="Name">
    <input type="email" id="input-email" placeholder="Email address">
    <input type="text" id="input-subject" placeholder="Subject">
  </div>
  <div class="half right cf">
    <textarea name="message" type="text" id="input-message" placeholder="Message"></textarea>
  </div>  
  <input type="submit" value="Submit" id="input-submit">
</form>
@import url(https://fonts.googleapis.com/css?family=Merriweather)

$blue: #0068AE
$grey: #BBB
$white: #FFF
$red: #FF3533
$green: #67d270


*
  -moz-box-sizing: border-box
  -webkit-box-sizing: border-box
  box-sizing: border-box
  &:before, &:after
    -moz-box-sizing: border-box
    -webkit-box-sizing: border-box
    box-sizing: border-box

html, body
  background: #f1f1f1
  font-family: 'Merriweather', sans-serif
  padding: 1em

h1
  text-align: center
  color: #a8a8a8
  text-shadow: 1px 1px 0 white

form
  max-width: 600px
  text-align: center
  margin: 20px auto
  input, textarea
    border: 0
    outline: 0
    padding: 1em
    -moz-border-radius: 8px
    -webkit-border-radius: 8px
    border-radius: 8px
    display: block
    width: 100%
    margin-top: 1em
    font-family: 'Merriweather', sans-serif
    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1)
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1)
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1)
    resize: none
  input:focus, textarea:focus
    -moz-box-shadow: 0 0px 2px #e74c3c !important
    -webkit-box-shadow: 0 0px 2px #e74c3c !important
    box-shadow: 0 0px 2px #e74c3c !important
  #input-submit
    color: white
    background: #e74c3c
    cursor: pointer
    &:hover
      -moz-box-shadow: 0 1px 1px 1px rgba(170, 170, 170, 0.6)
      -webkit-box-shadow: 0 1px 1px 1px rgba(170, 170, 170, 0.6)
      box-shadow: 0 1px 1px 1px rgba(170, 170, 170, 0.6)
  textarea
    height: 126px

.half
  float: left
  width: 48%
  margin-bottom: 1em

.right
  width: 50%

.left
  margin-right: 2%

@media (max-width: 480px)
  .half
    width: 100%
    float: none
    margin-bottom: 0

/* Clearfix

.cf
  &:before
    content: " "
    /* 1
    display: table
    /* 2
  &:after
    content: " "
    /* 1
    display: table
    /* 2
    clear: both
View Compiled

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.