Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added contact form #6

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Added contact form #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 37 additions & 0 deletions ContactForm/contactform.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
<html>
<head>
<link rel="stylesheet" type="text/css" href="styleform.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:300|Roboto:100&display=swap" rel="stylesheet">
<title></title>
<meta content="">
<style></style>
</head>
<body>
<script src="formjs.js"></script>
<section id="hire">
<h1>Contact Us</h1>

<form>
<div class="field name-box">
<input type="text" id="name" placeholder="Who Are You?"/>
<label for="name">Name</label>
<span class="ss-icon">check</span>
</div>

<div class="field email-box">
<input type="text" id="email" placeholder="name@email.com"/>
<label for="email">Email</label>
<span class="ss-icon">check</span>
</div>

<div class="field msg-box">
<input type="text" id="msg" placeholder="Your Message"/>
<label for="msg"> Message</label>
<span class="ss-icon">check</span>
</div>

<input class="button" type="submit" value="Send" />
</form>
</section>
</body>
</html>
42 changes: 42 additions & 0 deletions ContactForm/formjs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
// Input Lock
$('textarea').blur(function () {
$('#hire textarea').each(function () {
$this = $(this);
if ( this.value != '' ) {
$this.addClass('focused');
$('textarea + label + span').css({'opacity': 1});
}
else {
$this.removeClass('focused');
$('textarea + label + span').css({'opacity': 0});
}
});
});

$('#hire .field:first-child input').blur(function () {
$('#hire .field:first-child input').each(function () {
$this = $(this);
if ( this.value != '' ) {
$this.addClass('focused');
$('.field:first-child input + label + span').css({'opacity': 1});
}
else {
$this.removeClass('focused');
$('.field:first-child input + label + span').css({'opacity': 0});
}
});
});

$('#hire .field:nth-child(2) input').blur(function () {
$('#hire .field:nth-child(2) input').each(function () {
$this = $(this);
if ( this.value != '' ) {
$this.addClass('focused');
$('.field:nth-child(2) input + label + span').css({'opacity': 1});
}
else {
$this.removeClass('focused');
$('.field:nth-child(2) input + label + span').css({'opacity': 0});
}
});
});
160 changes: 160 additions & 0 deletions ContactForm/styleform.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,160 @@
@import "modularscale@3.*";
@import "neat@2.*";
@import "bourbon@5.*";
@import "color-schemer";
@import "breakpoint";
@import "susy";
body {
margin: 0;
width: 100%;
height: 100vh;
font-family: "Exo", sans-serif;
color: #fff;
background: linear-gradient(-45deg, #000080, #FFC0CB, #23a6d5, #00255C);
background-size: 400% 400%;
animation: gradientBG 7s ease infinite;
}

@keyframes gradientBG {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}

.container {
width: 100%;
position: absolute;
top: 35%;
text-align: center;
}

body section {
margin: 60px auto 120px;
border-top: 15px solid #313a3d;
text-align: center;
padding: 50px 0 110px;
width: 80%;
max-width: 1100px;
}
body section h1 {
margin-bottom: 40px;
font-size: 4em;
text-transform: uppercase;
font-family: 'Roboto', sans-serif;
font-weight: 100;
}
form {
width: 58.33333%;
margin: 0 auto;
}
form .field {
width: 100%;
position: relative;
margin-bottom: 15px;
}
form .field label {
text-transform: uppercase;
position: absolute;
top: 0;
left: 0;
background: #313a3d;
width: 100%;
padding: 18px 0;
font-size: 1.45em;
letter-spacing: 0.075em;
-webkit-transition: all 333ms ease-in-out;
-moz-transition: all 333ms ease-in-out;
-o-transition: all 333ms ease-in-out;
-ms-transition: all 333ms ease-in-out;
transition: all 333ms ease-in-out;
}
form .field label + span {
font-family: 'Montserrat', sans-serif;
opacity: 0;
color: white;
display: block;
position: absolute;
top: 12px;
left: 7%;
font-size: 2.5em;
text-shadow: 1px 2px 0 #cd6302;
-webkit-transition: all 333ms ease-in-out;
-moz-transition: all 333ms ease-in-out;
-o-transition: all 333ms ease-in-out;
-ms-transition: all 333ms ease-in-out;
transition: all 333ms ease-in-out;
}
form .field input[type="text"], form .field textarea {
border: none;
background: #e8e9ea;
width: 80.5%;
margin: 0;
padding: 18px 0;
padding-left: 19.5%;
color: #313a3d;
font-size: 1.4em;
letter-spacing: 0.05em;
text-transform: uppercase;
}
form .field input[type="text"]#msg, form .field textarea#msg {
height: 60px;
resize: none;
-webkit-transition: all 333ms ease-in-out;
-moz-transition: all 333ms ease-in-out;
-o-transition: all 333ms ease-in-out;
-ms-transition: all 333ms ease-in-out;
transition: all 333ms ease-in-out;
}
form .field input[type="text"]:focus, form .field textarea:focus, form .field input[type="text"].focused, form .field textarea.focused {
outline: none;
}
form .field input[type="text"]:focus#msg, form .field textarea:focus#msg, form .field input[type="text"].focused#msg, form .field textarea.focused#msg {
padding-bottom: 50px;
}
form .field input[type="text"]:focus + label, form .field textarea:focus + label, form .field input[type="text"].focused + label, form .field textarea.focused + label {
width: 100%;
background: #fd9638;
color: #313a3d;
}
form .field input[type="text"].focused + label, form .field textarea.focused + label {
color: #fd9638;
}
form .field:hover label {
width: 18%;
background: #313a3d;
color: white;
}
form input[type="submit"] {
background: #0000b3;
color: white;
-webkit-appearance: none;
border: none;
text-transform: uppercase;
position: relative;
margin-top: 25px;
padding: 13px 50px;
font-size: 1.4em;
letter-spacing: 0.1em;
font-family: 'Lato', sans-serif;
font-weight: 300;
-webkit-transition: all 333ms ease-in-out;
-moz-transition: all 333ms ease-in-out;
-o-transition: all 333ms ease-in-out;
-ms-transition: all 333ms ease-in-out;
transition: all 333ms ease-in-out;
}
form input[type="submit"]:hover {
background: #ffffff;
color: #0000b3;
}
form input[type="submit"]:focus {
outline: none;
background: #cd6302;
}