<html>
<body>
<footer>
<div class="row">
<div class="twelve columns">
<div id="flip" class="f-btn"><span>Contact Me »</span></div>
<ul id="foot-social">
<li>
<a href="https://www.facebook.com/codreev" title="Facebook">
<svg id="icon-facebook" viewBox="0 0 1024 1024">
<path class="path1" d="M870.4 51.2h-716.8c-56.32 0-102.4 46.080-102.4 102.4v716.8c0 56.371 46.080 102.4 102.4 102.4h358.4v-358.4h-102.4v-126.72h102.4v-104.96c0-110.797 62.054-188.621 192.819-188.621l92.314 0.102v133.376h-61.286c-50.893 0-70.246 38.195-70.246 73.626v86.528h131.482l-29.082 126.669h-102.4v358.4h204.8c56.32 0 102.4-46.029 102.4-102.4v-716.8c0-56.32-46.080-102.4-102.4-102.4z"></path>
</svg>
</a>
</li>
<li>
<a href="https://twitter.com/creeves_" title="Twitter">
<svg id="icon-twitter" viewBox="0 0 1024 1024">
<path class="path1" d="M886.579 319.795c0.41 8.294 0.563 16.691 0.563 24.986 0 255.488-194.406 549.99-549.888 549.99-109.21 0-210.739-32-296.294-86.886 15.155 1.792 30.515 2.714 46.080 2.714 90.624 0 173.926-30.925 240.026-82.688-84.531-1.587-155.955-57.395-180.531-134.195 11.776 2.202 23.91 3.379 36.352 3.379 17.664 0 34.765-2.304 50.944-6.707-88.422-17.818-155.034-95.898-155.034-189.594 0-0.819 0-1.587 0-2.406 26.061 14.49 55.91 23.194 87.552 24.218-51.866-34.714-86.016-93.798-86.016-160.922 0-35.379 9.523-68.608 26.214-97.178 95.283 116.992 237.773 193.894 398.387 201.984-3.277-14.182-4.966-28.877-4.966-44.083 0-106.701 86.477-193.178 193.229-193.178 55.603 0 105.83 23.398 141.107 60.979 43.981-8.704 85.35-24.781 122.726-46.899-14.438 45.107-45.107 82.995-84.992 106.906 39.117-4.71 76.288-15.002 111.002-30.413-25.907 38.81-58.675 72.806-96.461 99.994z"></path>
</svg>
</a>
</li>
<li>
<a href="https://ca.linkedin.com/pub/cody-reeves/59/54/5a8" title="Linkedin">
<svg id="icon-linkedin" viewBox="0 0 1024 1024">
<path class="path1" d="M256 153.6c0 54.374-36.352 101.171-102.451 101.171-62.208 0-102.349-44.134-102.349-98.509 0-55.808 38.912-105.062 102.4-105.062s101.171 46.592 102.4 102.4zM51.2 972.8v-665.6h204.8v665.6h-204.8z"></path>
<path class="path2" d="M358.4 534.733c0-79.104-2.611-145.203-5.222-202.291h184.013l9.114 88.218h3.891c25.907-41.523 89.395-102.4 195.686-102.4 129.638 0 226.918 86.784 226.918 273.51v381.030h-204.8v-351.283c0-81.613-31.078-143.872-102.4-143.872-54.374 0-81.613 44.032-95.898 80.333-5.222 13.005-6.502 31.13-6.502 49.306v365.517h-204.8v-438.067z"></path>
</svg>
</a>
</li>
<li>
<a href="https://instagram.com/codreev/" title="Instagram">
<svg id="icon-instagram" viewBox="0 0 1024 1024">
<path class="path1" d="M870.4 51.2h-716.8c-56.32 0-102.4 46.080-102.4 102.4v716.8c0 56.371 46.080 102.4 102.4 102.4h716.8c56.32 0 102.4-46.029 102.4-102.4v-716.8c0-56.32-46.080-102.4-102.4-102.4zM511.181 794.778c156.621 0 283.546-127.027 283.546-283.597 0-17.306-2.202-33.997-5.274-50.381h80.947v369.459c0 19.558-15.872 35.328-35.482 35.328h-645.837c-19.61 0-35.482-15.77-35.482-35.328v-369.459h79.309c-3.123 16.384-5.325 33.075-5.325 50.381 0 156.621 127.027 283.597 283.597 283.597zM333.978 511.181c0-97.894 79.36-177.203 177.254-177.203 97.843 0 177.254 79.309 177.254 177.203s-79.411 177.254-177.254 177.254c-97.946 0-177.254-79.36-177.254-177.254zM834.918 307.2h-82.688c-19.558 0-35.43-15.974-35.43-35.43v-82.79c0-19.558 15.872-35.379 35.379-35.379h82.688c19.661 0 35.533 15.821 35.533 35.379v82.739c0 19.507-15.872 35.482-35.482 35.482z"></path>
</svg>
</a>
</li>
<li>
<a href="https://www.behance.net/codyreeves" title="Behance">
<svg id="icon-behance" viewBox="0 0 1024 1024">
<path class="path1" d="M413.286 476.211c0 0 96.87-7.526 96.87-125.901 0-118.528-79.258-176.179-179.712-176.179h-330.445v661.811h330.445c0 0 201.779 6.605 201.779-195.379-0.051-0.051 8.755-164.352-118.938-164.352zM145.613 291.686h184.832c0 0 44.954 0 44.954 68.813 0 68.915-26.419 78.899-56.422 78.899h-173.363v-147.712zM321.075 718.285h-175.462v-176.896h184.832c0 0 66.97-0.922 66.97 90.88 0 77.414-50.022 85.453-76.339 86.016zM801.229 342.426c-244.275 0-244.070 254.31-244.070 254.31s-16.691 252.979 244.070 252.979c0 0 217.242 13.005 217.242-175.974h-111.718c0 0 3.686 71.219-101.786 71.219 0 0-111.821 7.782-111.821-115.2h328.858c0.051-0.051 36.301-287.334-220.774-287.334zM900.608 541.389h-208.589c0 0 13.619-101.99 111.718-101.99s96.87 101.99 96.87 101.99zM926.566 212.992h-261.99v81.613h261.99v-81.613z"></path>
</svg>
</a>
</li>
<li>
<a href="https://codepen.io/CR-Design/" class="codepen" title="CodePen">
<svg viewBox="0 0 450 450">
<path d="M427 201.9c-0.6-4.2-2.9-8-6.4-10.3L264.2 87.3c-4.9-3.3-11.4-3.3-16.3 0L91.4 191.6c-4 2.7-6.5 7.4-6.5 12.2v104.3c0 4.8 2.5 9.6 6.5 12.2l156.4 104.3c4.9 3.3 11.4 3.3 16.3 0L420.6 320.4c4-2.6 6.6-7.4 6.6-12.2V203.9C427.1 203.2 427.1 202.6 427 201.9 427 201.7 427.1 202.6 427 201.9zM270.7 127.1l115.2 76.8 -51.5 34.4 -63.8-42.7V127.1zM241.3 127.1v68.6l-63.8 42.7 -51.5-34.4L241.3 127.1zM114.3 231.4l36.8 24.6 -36.8 24.6V231.4zM241.3 384.9L126.1 308.1l51.5-34.4 63.8 42.6V384.9zM256 290.8l-52-34.8 52-34.8 52 34.8L256 290.8zM270.7 384.9V316.3l63.8-42.6 51.5 34.4L270.7 384.9zM397.7 280.6l-36.8-24.6 36.8-24.6V280.6z"
/>
</svg>
</a>
</li>
</ul>
<br>
<div id="panel">
<p>Please contact me for any questions, comments or inquiries.</p>
<div class="con-form">
<form action="contact.php" id="form" method="post" name="form">
<input name="client" placeholder="Your Name" type="text" value="" required pattern="[A-Za-z-0-9]+\s[A-Za-z-'0-9]+" title="firstname lastname">
<input name="email" placeholder="Your Email" type="email" value="" required>
<textarea name="comment" placeholder="Your Comments Here..." id="comment"></textarea>
<input class="o-btn" type="Submit" value="Submit">
</form>
</div>
</div>
</div>
</div>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</body>
</html>
body,
footer {
background: #2B3A42;
}
#panel,
#flip {
padding: 5px;
text-align: center;
margin: 0 auto;
}
#panel {
display: none;
background: #2B3A42;
}
/*Buttton*/
.f-btn {
display: block;
font-weight: 600;
text-transform: uppercase;
text-decoration: none;
color: #fff;
border: 6px solid #FF530D;
overflow: hidden;
transition: color .5s ease-in-out;
border-radius: 4px;
text-align: center;
width: 200px;
cursor: pointer;
}
.f-btn span {
font-family: "sofia-pro", sans-serif;
display: block;
position: relative;
z-index: 1;
padding: 5% 35px;
}
.f-btn span:before {
display: block;
position: absolute;
top: -20%;
right: 0;
bottom: 0;
left: -20%;
z-index: -1;
content: '';
width: 140%;
height: 140%;
border-radius: 40px;
background: #FF530D;
opacity: 0;
transform: translate(-100%) rotateY(90deg) scale(0.5);
transition: opacity 0.3s ease-in, transform 1s;
}
.f-btn:hover {
color: #2B3A42;
}
.f-btn:hover span:before {
opacity: 1;
transform: translate(0) rotate(0deg) scale(1.4);
}
/*form*/
.con-form {
margin: 0 auto;
width: 30%;
text-align: center;
}
footer p {
text-align: center;
color: #EFEFEF;
font-size: 2rem;
}
input,
textarea {
margin: 1% 0 0 0;
}
footer ul {
list-style-type: none;
text-align: center;
margin: 0 auto;
width: 80%;
padding: 0 10% 0 10%;
}
footer li {
display: inline-block;
width: 3%;
position: relative;
list-style-type: none;
fill: #EFEFEF;
text-align: center;
}
#icon-behance {
fill: #EFEFEF;
}
.codepen {
fill: #EFEFEF;
}
footer li:hover {
fill: #FF530D;
}
#foot-social li {
padding: 2% 2% 0 2%;
cursor: pointer;
list-style-type: none;
}
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
font-family: "sofia-pro", sans-serif;
width: 100%;
margin: 0 auto;
height: 38px;
position: relative;
margin: 0 0 0 0;
color: #fff;
text-align: center;
font-size: 11px;
font-weight: 600;
line-height: 0px;
letter-spacing: .1rem;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
background-color: transparent;
border-radius: 4px;
border: 6px solid #FF530D;
cursor: pointer;
box-sizing: border-box;
}
.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
color: #2B3A42;
background: #FF530D;
outline: 0;
}
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
font-family: "sofia-pro", sans-serif;
height: 38px;
width: 100%;
padding: 6px 10px 6px 10px;
/* The 6px vertically centers text on FF, ignored by Webkit */
background-color: #D1D1D1;
border: 1px solid #D1D1D1;
border-radius: 4px;
box-shadow: none;
box-sizing: border-box;
}
/* Removes awkward default styles on some inputs for iOS */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
textarea {
min-height: 65px;
padding-top: 6px;
padding-bottom: 6px;
width: 100%;
}
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
border: 1px solid #FF530D;
outline: 0;
background: #fff;
}
$(function(){
$("#flip").click(function(e){
e.preventDefault();
$("#panel").slideToggle();
$('html, body').animate({
scrollTop: 10000
}, 2500);
});
});