Good evening! I am developing a one page scroll site, I am currently developing the contact form, but when the page is up to the form the menu is in front of the form. And when I click on the form to try to write it it interprets it as a link. can anybody help me? follow the code.
Thank you!
function goTo(element, speed) {
var href = element.attr('href');
var top = $(href).offset().top;
$("html,body").animate({scrollTop : top}, speed);
}
$(function() {
$("#top a").click(function(e) {
e.preventDefault();
goTo($(this), 900);
});
});*{
margin: 0;
padding: 0;
text-decoration: none;
list-style-type: none;
}
body, html {
height: 100%;
}
header {
background-color: #2d3e50;
width: 100%;
height: 100px;
position: fixed;
}
header .logo {
display: inline;
float: left;
margin-left: 20px;
}
.logo img {
width: 220px;
margin-top: -8px;
}
header nav {
float: right;
}
header nav ul {
list-style-type: none;
text-align: center;
padding-right: 100px;
padding-top: 37px;
}
header nav li {
display: inline;
}
header nav a {
color: #fff;
display: inline;
padding: 0 10px;
text-decoration: none;
font-size: 1.3em;
font-family: 'Roboto', sans-serif;
}
header nav a:hover {
color: #f44336;
}
.content {
height: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
.content:nth-child(2){
background-color: #000;
}
/*formulário de contato*/
.container {
margin-top: 170px;
}
form {
margin: 0 auto;
width: 1000px;
height: 500px;
padding: 1em;
border: 1px solid #CCC;
border-radius: 1em;
}
form div + div {
margin-top: 1em;
}
label {
display: inline-block;
width: 90px;
text-align: right;
}
input, textarea {
font: 1em sans-serif;
width: 500px;
box-sizing: border-box;
border: 1px solid #999;
}
input:focus, textarea:focus {
border-color: #000;
}
textarea {
vertical-align: top;
height: 10em;
}
.button {
padding-left: 90px; /
}
button {
margin-left: .5em;
}<header>
<h1 class="logo"><img src="img/logo-ai-8.png" alt="logotipo"></h1>
<nav id="top">
<ul>
<li><a href="#home">Home</li>
<li><a href="#empresa">Empresa</li>
<li><a href="#portifolio">Portifólio</li>
<li><a href="#contato">Contato</li>
</ul>
</nav>
</header>
<section id="home" class="content">
</section>
<section id="empresa" class="content">
</section>
<section id="portifolio" class="content">
</section>
<section id="contato" class="content">
<div class="contact">
</div>
<div class="container">
<form action="form-contact" method="post">
<div>
<label for="name">Name</label>
<input type="text" id="name" name="user_name">
</div>
<div>
<label for="mail">E-mail</label>
<input type="email" id="mail" name="user_mail">
</div>
<div>
<label for="msg">Message</label>
<textarea id="msg" name="user_message"></textarea>
</div>
<div class="button">
<button type="submit">Send your message</button>
</div>
</div>
</form>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script><scripttype="text/javascript" src="js/main.js"></script>
</body>
</html>