<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/[Link]">
<!-- Google fonts -->
<link rel="preconnect" href="[Link]
<link rel="preconnect" href="[Link] crossorigin>
<link href="[Link]
family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&family=Poppins:it
al,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,4
00;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<!-- /Google fonts -->
<title>Nontonyook</title>
</head>
<body>
<header>
<div class="interface">
<section class="logo">
<img src="imagem/Logo-mangá.gif" alt="logotipo do site">
</section>
<section class="menu-desktop">
<nav>
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Manga</a></li>
<li><a href="#">Contato</a></li>
</ul>
</nav>
</section>
</div>
</header>
<main>
<section class="home">
<div class="description">
<h2>WEB</h2>
<h1>DESIGN & <br> <span>DEVELOPMENT</span></h1>
<p>Em um dia ensolarado, tarde da manhã, quando a lua cheia era
minguante, tudo era nada diferente do igual. A temperatura alta congelava o vento,
que de desmotivado, motivava-se a soprar sem se por em movimento.</p>
<button>Let's go</button>
</div>
<div class="image-home">
<div class="carousel">
<div class="carousel-track">
<img src="imagem/[Link]" alt="Imagem 1">
<img src="imagem/[Link]" alt="Imagem 2">
<img src="imagem/[Link]" alt="Imagem 3">
<img src="imagem/[Link]" alt="Imagem 3">
<img src="imagem/[Link]" alt="Imagem 3">
</div>
</div>
</div>
</section>
</main>
<script>
// seleciona a faixa do carrossel
const track = [Link]('.carousel-track');
let index = 0; // começa na primeira imagem
function moveCarousel() {
index++; // vai para a próxima imagem
if (index >= [Link]) {
index = 0; // se chegar na última, volta para a primeira
}
// movimenta a faixa inteira
[Link] = `translateX(-${index * 100}%)`;
}
// chama a função a cada 3 segundos
setInterval(moveCarousel, 3000);
</script>
</body>
</html>