como eu fasso pra quando eu clicar em alguma li do meu site tipo o contato, automaticamente ao inves de ir para outra pagina rolar para baixo onde esta o contato?
como eu fasso pra quando eu clicar em alguma li do meu site tipo o contato, automaticamente ao inves de ir para outra pagina rolar para baixo onde esta o contato?
hoje, com a Alura e o Google Gemini
Você deve atribuir uma ID no local que deseja se posicionar, e depois chamar o link com esta id dentro.
Por exemplo, em uma barra de navegação em um header você tem os links HOME - SOBRE - CONTATO.
Você deseja abrir logo abaixo do conteúdo da home ao clicar no link, então você declara um ID na section ou div do SOBRE. No header, voce cria o link SOBRE apontando para o ID SOBRE - ao invés de usar um link externo.
não entendi!
a parte de criar um id eu entedi mais eu aponto esse id na tag ?
Oi, Geovane, tudo bem?
Dá pra fazer isso que você quer de forma simples, somente com o html. Vamos lá:
<style>
main{
height: 100rem; /*somente utilizei esse estilo no main para criar um espaço e você vizualizar o efeito de clicar no link e ser levado a sessão de contato*/
}
</style>
<body>
<nav>
<ul>
<li><a href="#panel-contato">Contato</a></li>
</ul>
</nav>
<main>
</main>
<footer>
<section id="panel-contato">
INFOS DE CONTATO
</section>
</footer>
</body>
</html>Dentro da tag li na tag a, que indica um link, adicionei à propriedade href com um data-target (algo como um alvo no seu html) que quando clicado será direcionado a sessão que deseja, no caso, a sessão contato. E para que haja essa relação, na sessão contato precisará ter um idcom o mesmo valor que foi adicionado no campo href. Assim, quando clicar no link Contato, o usuário será levado para sessão Contato mais abaixo.
Qualquer dúvida, é só falar!
olha só que aconteceu com o site!
<!DOCTYPE html>
<html lang="en">
<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">
<title>portifólio-Geovane</title>
</head>
<body>
<header>
<div class="cabeçalho">
<h1>About</h1>
<nav>
<ul>
<div class="listas">
<li class="primeiro"><a href="#about">About</a></li>
<li class="segundo"><a href="#projetos">Projetos</a></li>
<li class="terceiro"><a href="#contato">Contato</a></li>
</div>
</ul>
</nav>
</div>
</header>
<main>
<section id="about">
<div class="sobre-mim">
<img src="foto.png">
<p class="quem-sou">Meu nome é Geovane tenho 25 anos, estudo linguagem de programação <br> na escola online alura e gosto de tecnologia em geral. <br> Tenho conhecimento em html e css e estou estudando java script e web responsivo. <br> Procuro estágio na
área e será muito bom fazer parte da sua equipe. <br> Se quizer saber um pouco mais sobre meu trabalho <br> ou bater um bom papo entre em contato logo abaixo!</p>
</div>
</section>
<section id="projetos">
<h2>Projetos</h2>
<p class="p-projetos">Por enquanto só tenho o meu proprio portifólio!</p>
</section>
<section id="contato">
<h3>Contato</h3>
<nav>
<ul>
<div class="social-midia">
<li class="whatsapp">
<a href="https://web.whatsapp.com/"><img src="whatsapp.png.png"></a>
</li>
<li class="linkedin">
<a href="https://www.linkedin.com/in/geovaneferreira10/"><img src="linkedin.png.png"></a>
</li>
<li class="email">
<a href=""><img src="email.png.png"></a>
</li>
</div>
</ul>
</nav>
</section>
</main>
</body>
</html>body {
background-color: #e6e6e6;
}
.cabeçalho {
display: flex;
align-items: center;
justify-content: space-between;
}
li {
display: inline-block;
margin: 8px;
font-size: 36px;
}
.quem-sou {
margin: 288px 22px;
position: relative;
font-size: 25px;
}
.p-projetos {
margin: 901px -65px;
font-size: 28px;
}
main {
display: flex;
}
a {
color: black;
}
.listas {
margin: 8px;
}
h1 {
margin: 46px 69px;
font-size: 60px;
}
h2 {
margin: 768px -299px;
font-size: 60px;
}
h3 {
margin: 996px -312px;
font-size: 60px;
align-items: center;
}
img {
margin: 143px 1143px;
position: absolute;
width: 423px;
}
.primeiro :hover {
font-size: 29px;
}
.segundo :hover {
font-size: 29px;
}
.terceiro :hover {
font-size: 29px;
}
.whatsapp {
margin: 9px 458px;
}
.linkedin {
margin: 9px 8px;
}
.email {
margin: 9px 458px;
}
.social-midia {
position: absolute;
margin: 909px -1864px;
}Oi, Geovane, tudo bem?
Vi que você aplicou a configuração somente em about, aplique nas demais, em projetos e contato, para ter o mesmo efeito da sessão about.
Oi mais como eu fasso isso?