Oi boa noite então eu coloquei o positon sticky no meu site e ele não fica fixo na pagina quando eu rolo a mesma!
index.html (1,5,KB)
normalize.css (6,8,KB)
style.css (3,8,KB)
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="normalize.css">
<title>Site Teste</title>
</head>
<body>
<header>
<h1 class="logo">
<img class="foto-logo " src="comercio-eletronico.png" alt=""> Loja Virtual
</h1>
<nav>
<a href="">Sobre</a>
<a href="">Contato</a>
</nav>
</header>
<main>
<img class="foto-computador" src="computador.jpg" alt="">
<h2>
Sobre
</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora sapiente necessitatibus natus rerum, distinctio minus error placeat nisi at pariatur animi voluptatibus nobis eum, asperiores repudiandae quasi! Dicta, exercitationem porro.</p>
</main>
<footer>
<h3>
Contatos
</h3>
<form action="">
<div class="box-form">
<label for="">Nome</label>
<input type="text" name="" id="">
<label for="">Telefone</label>
<input type="tel" name="" id="">
<label for="">Email</label>
<input type="email" name="" id="">
<button>Enviar</button>
</div>
</form>
</footer>
</body>
</html>
header {
background-color: #9eadab;
position: sticky;
align-items: center;
display: flex;
justify-content: space-between;
border-bottom: 1px solid black;
}
a {
text-decoration: none;
color: black;
margin-left: 0%;
margin-right: 1em;
margin-bottom: 39%;
font-size: 33px;
}
a:hover {
color: #657c79;
}
.foto-logo {
width: 24%;
margin-left: 11%;
margin-top: 0%;
margin-bottom: 0%;
}
h2 {
margin-bottom: 5%;
margin-top: 4%;
margin-left: 7%;
font-size: 329%;
}
.foto-computador {
width: 100%;
margin-top: 0%;
margin-bottom: 0%;
}
p {
text-align: center;
margin-top: 4%;
margin-bottom: 12%;
}
h3 {
margin-left: 30%;
}
.box-form {
display: grid;
}
label {
text-align: center;
}