@import url(https://fonts.googleapis.com/css?family=Raleway:300);
.form-wrap {
height: 620px;
position: relative;
background: rgb(86, 207, 143);
background: linear-gradient(346deg, rgba(86, 207, 143, 1) 0%, rgba(5, 182, 186, 1) 47%, rgba(2, 151, 181, 1) 100%);
width: 100%;
}
.align-center {
text-align: center;
}
.row {
margin: -20px 0;
}
.row:after {
content: "";
display: table;
clear: both;
}
.row .col {
padding: 0 20px;
float: left;
box-sizing: border-box;
}
.row .col.x-50 {
width: 50%;
}
.row .col.x-100 {
width: 100%;
}
.content-wrapper {
min-height: 100%;
position: relative;
}
.get-in-touch {
max-width: 650px;
margin: 0 auto;
position: relative;
top: 50%;
background-color: #fff;
transform: translateY(-50%);
padding: 20px 10px 20px 10px;
}
.get-in-touch .title {
text-align: center;
font-family: Raleway, sans-serif;
text-transform: uppercase;
letter-spacing: 3px;
font-size: 36px;
line-height: 48px;
padding-bottom: 48px;
}
.contact-form .form-field {
position: relative;
margin: 32px 0;
}
.contact-form .input-text {
display: block;
width: 100%;
height: 36px;
border-width: 0 0 2px 0;
border-color: #000;
font-family: Raleway, sans-serif;
font-size: 18px;
line-height: 26px;
font-weight: 400;
}
.contact-form .input-text:focus {
outline: none;
}
.contact-form .input-text:focus, .contact-form .input-text.not-empty {
border-color: #ed7a00;
}
.contact-form .input-text:focus + .label, .contact-form .input-text.not-empty + .label {
transform: translateY(-24px);
}
.contact-form .label {
position: absolute;
left: 20px;
bottom: 11px;
font-family: Raleway, sans-serif;
font-size: 18px;
line-height: 26px;
font-weight: 400;
color: #888;
cursor: text;
transition: transform 0.2s ease-in-out;
}
.contact-form .submit-btn {
display: inline-block;
background-color: #000;
color: #fff;
font-family: Raleway, sans-serif;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 16px;
line-height: 24px;
padding: 8px 16px;
border: none;
cursor: pointer;
font-weight: 700;
}
.contact-form .submit-btn:hover {
background-color: #ed7a00;
}
const inputs = document.querySelectorAll('.js-input');
inputs.forEach(input => {
input.addEventListener('keyup', function() {
if (this.value) {
this.classList.add('not-empty');
} else {
this.classList.remove('not-empty');
}
});
});