diff --git a/ContactForm/contactform.html b/ContactForm/contactform.html new file mode 100644 index 0000000..b8b7299 --- /dev/null +++ b/ContactForm/contactform.html @@ -0,0 +1,37 @@ + + + + + + + + + + +
+

Contact Us

+ +
+
+ + + check +
+ + + +
+ + + check +
+ + +
+
+ + \ No newline at end of file diff --git a/ContactForm/formjs.js b/ContactForm/formjs.js new file mode 100644 index 0000000..2e79ab1 --- /dev/null +++ b/ContactForm/formjs.js @@ -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}); + } + }); +}); diff --git a/ContactForm/styleform.css b/ContactForm/styleform.css new file mode 100644 index 0000000..d6653f7 --- /dev/null +++ b/ContactForm/styleform.css @@ -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; +} +