<div id='contact'>
  <div class="container">
    <div class="row">
      <div class="col-6">
      </div>
    <div class="col-lg-3 col-md-2 col-sm-8">
  <div id='form' class='animated'>
    <div class="row">
      <div class="col-12">
        <div id='title'>Contact Us</div>
      </div>
    </div>
    <div class='detail'>
    <div class="row">
      <div class="col-12">
    <input id='name' name="firstname" placeholder='Your name' />
    </div>
    </div>
    <div class="row">
      <div class="col-12">
        <input id='email' placeholder='Your email' type='email' />
    </div>
    </div>
    <div class="row">
      <div class="col-12">
        <textarea id='message' placeholder="Type here ..."></textarea>
    
        </div>
    </div>
    <div class="row">
      <div class="col-12">
        <button id='submit' type='submit' onclick='send()' class="animated">Send</button>
  </div>
      </div>
    </div>
    </div>
      </div>
    </div>
  </div>
</div>

html,
body {
  margin: 0;
}

input,
textarea,
button,
div { 
  font-family: 'Copse', serif;
}

#contact {
  color: grey;
  overflow: auto;
  width: 100%;
  background: #fff000 url('https://static.pexels.com/photos/33999/pexels-photo.jpg') no-repeat center;
  background-size:  cover;
  height: 900px;
}

#title {
  font-size: 70px;
}

#form {
  min-width: 500px;
  padding-top: 35%;
}

.detail > .row > .col-12 > input, textarea {
  border: none;
  border-bottom: 3px solid grey;
  background: none;
  width: 400px;
  height: 50px;
  font-size: 20px;
  padding-top: 10px;
  margin-bottom: 10px;
  color: grey;
}

input:focus, textarea:focus {
  outline:none;
  border-bottom: 5px solid grey;
  color: black;
}

.detail > .row > .col-12 > textarea {
  height: 200px;
  resize: none;
}

#submit {
  width: 100px;
  height: 50px;
  border: none;
  color: white;
  background: grey;
  font-size: 20px;
  margin: 0 auto;
  margin-left: calc(200px - 50px);
  cursor: pointer;
}

#submit:hover {
  background-color: green;
}

#submit:focus {
  outline: none;
}

.sent {
  color: green !important;
  background: none !important;
}

/* Spiner */

.spinner {
  width: 40px;
  height: 40px;
  background-color: #333;

  margin: 100px auto;
  -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
  animation: sk-rotateplane 1.2s infinite ease-in-out;
}

@-webkit-keyframes sk-rotateplane {
  0% { -webkit-transform: perspective(120px) }
  50% { -webkit-transform: perspective(120px) rotateY(180deg) }
  100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
}

@keyframes sk-rotateplane {
  0% { 
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) 
  } 50% { 
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) 
  } 100% { 
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}

/* Auto complete background */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
  color: grey;
}

submit = document.getElementsByClass('.detail')[0];
submitForm = new Object();

function send() {
  submit.classList.add(
"zoomOutUp");
  window.setTimeout(sent, 3000);
}

function sent() {
  submitForm = submit.innerHTML;
  submit.innerHTML = "<div>Sent ✓</div>";
  submit.classList.remove("zoomOutUp");
  submit.classList.add("zoomInDown");
  submit.classList.add("sent");
  window.setTimeout(reset, 3000);
}

function reset() {
  submit.innerHTML = submitForm;
  submit.classList.remove("sent");
}