<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!--
There are probably many improvements that could be made,
but it's a start on the frontend at least.
-->
<div class="container">
<div class="row">
<h1>contact us</h1>
</div>
<div class="row">
<h4 style="text-align:center">We'd love to hear from you!</h4>
</div>
<div class="row input-container">
<div class="col-xs-12">
<div class="styled-input wide">
<input type="text" required />
<label>Name</label>
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="styled-input">
<input type="text" required />
<label>Email</label>
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="styled-input" style="float:right;">
<input type="text" required />
<label>Phone Number</label>
</div>
</div>
<div class="col-xs-12">
<div class="styled-input wide">
<textarea required></textarea>
<label>Message</label>
</div>
</div>
<div class="col-xs-12">
<div class="btn-lrg submit-btn">Send Message</div>
</div>
</div>
</div>
body {
background-color: #444442;
padding-top: 85px;
}
h1 {
font-family: 'Poppins', sans-serif, 'arial';
font-weight: 600;
font-size: 72px;
color: white;
text-align: center;
}
h4 {
font-family: 'Roboto', sans-serif, 'arial';
font-weight: 400;
font-size: 20px;
color: #9b9b9b;
line-height: 1.5;
}
/* ///// inputs /////*/
input:focus ~ label, textarea:focus ~ label, input:valid ~ label, textarea:valid ~ label {
font-size: 0.75em;
color: #999;
top: -5px;
-webkit-transition: all 0.225s ease;
transition: all 0.225s ease;
}
.styled-input {
float: left;
width: 293px;
margin: 1rem 0;
position: relative;
border-radius: 4px;
}
@media only screen and (max-width: 768px){
.styled-input {
width:100%;
}
}
.styled-input label {
color: #999;
padding: 1.3rem 30px 1rem 30px;
position: absolute;
top: 10px;
left: 0;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
pointer-events: none;
}
.styled-input.wide {
width: 650px;
max-width: 100%;
}
input,
textarea {
padding: 30px;
border: 0;
width: 100%;
font-size: 1rem;
background-color: #2d2d2d;
color: white;
border-radius: 4px;
}
input:focus,
textarea:focus { outline: 0; }
input:focus ~ span,
textarea:focus ~ span {
width: 100%;
-webkit-transition: all 0.075s ease;
transition: all 0.075s ease;
}
textarea {
width: 100%;
min-height: 15em;
}
.input-container {
width: 650px;
max-width: 100%;
margin: 20px auto 25px auto;
}
.submit-btn {
float: right;
padding: 7px 35px;
border-radius: 60px;
display: inline-block;
background-color: #4b8cfb;
color: white;
font-size: 18px;
cursor: pointer;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.06),
0 2px 10px 0 rgba(0,0,0,0.07);
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
}
.submit-btn:hover {
transform: translateY(1px);
box-shadow: 0 1px 1px 0 rgba(0,0,0,0.10),
0 1px 1px 0 rgba(0,0,0,0.09);
}
@media (max-width: 768px) {
.submit-btn {
width:100%;
float: none;
text-align:center;
}
}
input[type=checkbox] + label {
color: #ccc;
font-style: italic;
}
input[type=checkbox]:checked + label {
color: #f00;
font-style: normal;
}
