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?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
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?
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?