Greatly improved contact page

add-license-1
Guuq 5 years ago
parent 327fd95bc4
commit 6452204beb

@ -10,8 +10,35 @@
margin-top: 5%; margin-top: 5%;
} }
.form { .form {
margin: auto; margin: 3rem auto;
width: auto; width: 50%;
position: relative;
border-radius: 7px;
box-shadow: 0px 0px 15px -3px rgba(0,0,0,1);
padding: 1rem;
}
.form h3 {
display: block;
width: 90%;
margin: 0 auto;
margin-bottom: 1rem;
}
.submit {
position: absolute;
width: 6rem;
height: 40px;
right: 2rem;
bottom: 1rem;
}
.dataInput {
width: 90%;
display: block;
background-color: #2d2d33;
margin: 0 auto;
margin-bottom: 2rem;
}
.dataInput:focus {
outline: 0;
} }
.info { .info {
background-color: #18181b; background-color: #18181b;
@ -40,4 +67,7 @@
font-size: 4rem!important; font-size: 4rem!important;
margin-top: 15%!important; margin-top: 15%!important;
} }
.form {
width: 90%!important;
}
} }

@ -18,8 +18,14 @@
<div class="main"> <div class="main">
<h1>Contact opnemen?</h1> <h1>Contact opnemen?</h1>
<div class="form"> <div class="form">
<form action=""> <form action="/thank-you" method="post">
<input type="text"> <h3>*Naam en Achternaam</h3>
<input type="text" class="dataInput input" required name="name" autofocus spellcheck="false">
<h3>*E-mailadres</h3>
<input type="text" class="dataInput input" required name="email" spellcheck="false">
<h3>*Bericht</h3>
<input type="text" class="dataInput input" required name="message" spellcheck="false"><br>
<input type="submit" class="submit button">
</form> </form>
</div> </div>
</div> </div>