<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="login">
<div class="container">
<div class="col-lg-8 col-lg-offset-2">
<h1 class="horizontal">Contact Us</h1>
<form role="form">
<div class="row">
<div class="col-lg-4">
<label class="pulse">Name</label>
<div class="form-group">
<input type="text" name="name" id="ad_soyad" class="form-control" placeholder="">
</div>
</div>
<div class="col-lg-4">
<label class="pulse">Email</label>
<div class="form-group">
<input type="email" name="email" id="email" class="form-control" placeholder="">
</div>
</div>
<div class="col-lg-4">
<label class="pulse">Phone</label>
<div class="form-group">
<input type="tel" name="tel" id="tel" class="form-control" placeholder="">
</div>
</div>
<div class="col-lg-12">
<label class="pulse">Address</label>
<div class="form-group">
<textarea type="text" class="form-control" name="message" rows="5" style="overflow:hidden"></textarea>
</div>
</div>
<div class="col-lg-12">
<button type="submit" class="btn btn-default">
<span>GÖNDER</span>
</button>
</div>
</div>
</form>
</div>
</div>
</div>
@import url('https://fonts.googleapis.com/css?family=Alegreya+Sans:100,300,400,500,800,900');
.login {
font-family: 'Alegreya Sans', sans-serif;
background: #ff9966;
background: -webkit-linear-gradient(to right, #ff9966, #ff5e62);
background: linear-gradient(to right, #ff9966, #ff5e62);
padding: 60px 0px;
}
h1{
font-family: 'Alegreya Sans', sans-serif;
font-weight: 600;
text-transform: uppercase;
text-align: center;
color: #FFF;
margin: 40px 0px;
}
label {
font-weight: 400;
font-size: 15px;
}
.form-control {
background-color: #f5f5f5;
box-shadow: none;
color: #565656;
font-size: 14px;
padding: 30px 10px;
margin-bottom: 30px;
}
.btn {
background: #FFF;
color: #444;
margin: 0 auto;
display: table;
border-radius: 0;
border: 2px solid #FFF;
padding: 10px 40px;
}
.btn:hover {
background: #ff9966;
background: -webkit-linear-gradient(to right, #ff9966, #ff5e62);
background: linear-gradient(to right, #ff9966, #ff5e62);
color: #FFF;
border: 2px solid #FFF;
transition: all 1s ease-in-out;
}
input:focus,
textarea:focus{
background: #FFF;
}
/* Animation */
.horizontal {
animation: horizontal_text 4s ease infinite;
}
@keyframes horizontal_text {
0% { transform:translate(0,0) }
4.41177% { transform:translate(5px,0) }
8.82353% { transform:translate(0,0) }
13.23529% { transform:translate(5px,0) }
17.64706% { transform:translate(0,0) }
22.05882% { transform:translate(5px,0) }
26.47059% { transform:translate(0,0) }
100% { transform:translate(0,0) }
}
.pulse {
animation: pulse_text 4s linear infinite;
}
@keyframes pulse_text {
0% { transform: scale(1.1) }
16.66667% { transform: scale(0.8) }
33.33333% { transform: scale(1.1) }
100% { transform: scale(1.1) }
}
