awesome contact page

by dimaslanjaka

HTML

<style amp-custom>
.clear{ clear: both }
div#melcowe{
width:100%;
background: #1c222e !important;
margin: 0 !important;
}
@keyframes rounding{
  0%{transform:rotateY(0deg);}
  10%{transform:rotateY(36deg);}
  20%{transform:rotateY(72deg);}
  30%{transform:rotateY(108deg);}
  40%{transform:rotateY(144deg);}
  50%{transform:rotateY(180deg);}
  60%{transform:rotateY(216deg);}
  70%{transform:rotateY(252deg);}
  80%{transform:rotateY(288deg);}
  90%{transform:rotateY(326deg);}
  100%{transform:rotateY(360deg);}
}
.animation-mail:before{
  display: inline-block;
  animation: rounding 3s infinite;
  content: "\f003";
  font-family:"FontAwesome";
  font-size: inherit;
  margin-right: 5px !important;
  /*text-shadow: 1px 1px 5px #000; */
}
div#kata{
 font-size: 18px;
 font-family: Roboto, sans-serif;
 font-weight: 700;
 color: #9e9a75;
 border: 4px solid #9e9a75;
 border-radius: 5px;
 webkit-border-radius: 4px;
 moz-border-radius: 4px;
 o-border-radius: 4px;
 ms-border-radius: 4px;
 padding: 7px;
 margin: 5px;
 text-align: center;
}
div#autho{
 padding: 7px;
 margin: 10px 5px;
 font-size: inherit;
 text-align: center;
 font-family: Roboto, sans-serif;
 background: #9e9a75 !important;
 color: #f8f8f8;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0px 3px 6px 0px rgba(0, 0, 0, 0.19);}
h2, h3, h4{
 text-shadow: 0 3px 8px #9e9a75, 0 5px 10px #000; 
}
div.form{
  margin: 1em;
  padding: 0.5em;
}
input[type=name].contact-form-name, input[type=email].contact-form-email{
   text-align: center;
   height: 50px;
   width: 100%;
   font-size: 18px;
   font-family: Roboto, sans-serif;
   font-weight: 700;
   color: #9e9a75;
   border: 4px solid #9e9a75;
   border-radius: 4px;
   webkit-border-radius: 4px;
   moz-border-radius: 4px;
   o-border-radius: 4px;
   ms-border-radius: 4px;
   padding: 7px;
   margin: 5px;
   box-sizing: border-box;
   outline: none;
}
input[type=name].contact-form-name:active,...