Created
May 28, 2016 07:54
-
-
Save Diliprocks1986/a024afbb50b4af40cf083cb6055f527d to your computer and use it in GitHub Desktop.
Contact Us Form
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Contact Us Form |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- | |
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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment