intersection-api-demo/index.html at master · isaacpontes/intersection-api-demo · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!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">
  <title>Explore a Natureza</title>

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@1,500&display=swap" rel="stylesheet">

  <link rel="stylesheet" href="index.css">
  <link rel="stylesheet" href="animate-on-scroll.css">
  <script src="animate-on-scroll.js" defer></script>
</head>

<body>
  <main>
    <section>
      <img class="cover-img" src="images/pexels-eberhard-grossgasteiger-1292115.jpg" alt="Capa">
      <h1 class="animate from-top">Explore a Natureza</h1>
    </section>
    <section>
      <img class="animate from-left" src="images/pexels-julie-aagaard-1374064.jpg" alt="">
      <div>
        <h2 class="animate from-right">Viva Novas Experiências</h2>
        <p class="animate from-right">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ea porro molestias repellendus tenetur neque aut
          laudantium magni recusandae consequuntur quasi error, illo non omnis accusamus optio aliquam. Sunt dignissimos
          praesentium animi laudantium quos veritatis debitis voluptatibus sapiente incidunt ullam ex, suscipit, minus
          inventore!</p>
      </div>
    </section>
    <section>
      <div>
        <h2 class="animate from-left">Veja Por Novos Ângulos</h2>
        <p class="animate from-left">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ea porro molestias repellendus tenetur neque aut
          laudantium magni recusandae consequuntur quasi error, illo non omnis accusamus optio aliquam. Sunt dignissimos
          praesentium animi laudantium quos veritatis debitis voluptatibus sapiente incidunt ullam ex, suscipit, minus
          inventore!</p>
        </div>
        <img class="animate from-right" src="images/pexels-jeremy-bishop-2765872.jpg" alt="">
    </section>
    <section>
      <img class="animate from-left" src="images/pexels-dom-gould-325807.jpg" alt="">
      <div>
        <h2 class="animate from-right">Aproveite Cada Momento</h2>
        <p class="animate from-right">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ea porro molestias repellendus tenetur neque aut
          laudantium magni recusandae consequuntur quasi error, illo non omnis accusamus optio aliquam. Sunt dignissimos
          praesentium animi laudantium quos veritatis debitis voluptatibus sapiente incidunt ullam ex, suscipit, minus
          inventore!</p>
      </div>
    </section>
    <section>
      <div>
        <h2 class="animate from-left">Explore Novos Horizontes</h2>
        <p class="animate from-left">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ea porro molestias repellendus tenetur neque aut
          laudantium magni recusandae consequuntur quasi error, illo non omnis accusamus optio aliquam. Sunt dignissimos
          praesentium animi laudantium quos veritatis debitis voluptatibus sapiente incidunt ullam ex, suscipit, minus
          inventore!</p>
        </div>
        <img class="animate from-right" src="images/pexels-tobias-bjørkli-2335126.jpg" alt="">
    </section>
  </main>
  <footer>OneBitCode © 2023</footer>
</body>

</html>