-/index.html at main · Aalexsander/- · 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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="reset.css">
  <link rel="stylesheet" href="stylesheet.css">
  <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=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap" rel="stylesheet">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Explore sem limites</title>
</head>
<body>
  <section class="wrapper">

      <img id="astronaut" src="./assets/astronaut.svg" alt="">
      <div class="titleContainer">
        <div class="slogan">
          <h3>Explore sem limites</h3>
          <p>Porque aprendizado é contínuo</p>
        </div>
        <div class="scroll"><a href="#mainSection" aria-label="click here to scroll to the next section below"><svg width="59" height="105" viewBox="0 0 59 105" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
          <rect x="2" y="2" width="54.587" height="101" rx="27.2935" stroke="#B52184" stroke-width="4"/>
          <path d="M28.8383 30.0042C28.5642 30.0387 28.3621 30.2768 28.3728 30.5528V74.0352L14.8981 62.0558C14.7957 61.9568 14.6582 61.903 14.5157 61.906C14.2928 61.913 14.0978 62.0581 14.0273 62.2695C13.9568 62.4809 14.0258 62.7141 14.2001 62.8532L28.5559 75.614C28.7562 75.7883 29.0537 75.7883 29.2539 75.614L43.6098 62.8532C43.7296 62.7649 43.8071 62.6307 43.823 62.4827C43.839 62.3347 43.7926 62.1867 43.6947 62.0747C43.5968 61.9631 43.4562 61.8971 43.3075 61.8934C43.1588 61.8897 43.0152 61.9486 42.9118 62.0558L29.437 74.0351V30.5528C29.443 30.3966 29.3799 30.2457 29.2649 30.14C29.1496 30.0343 28.9938 29.9846 28.8388 30.0042L28.8383 30.0042Z" fill="#B52184" stroke="#B52184" stroke-width="2.61398"/>
          </svg></a></div>
      </div>

  </section>

  <section class="main" id="mainSection">
    <div class="bio">
      <div class="container">
        <div class="planets">
          <img src="./assets/planets/yellow_planet.svg" alt="">
        </div>
        <div class="container--text--area">
          <h3 class="sectionTitle">Não pare nunca</h3>
          <p>Se você deseja ter sucesso nos estudos, é fundamental que você adote uma mentalidade de "não pare nunca". Estudar de forma consistente e contínua é a chave para o progresso e a conquista de seus objetivos.</p>
        </div>
      </div>
      <div class="container">
        <div class="planets">
          <img src="./assets/planets/blue_planet.svg" alt="">
        </div>
        <div class="container--text--area">
          <h3 class="sectionTitle">Só volta</h3>
          <p>Se você parou ou perdeu o ritmo em alguma atividade ou projeto, saiba que nunca é tarde para recomeçar. Às vezes, as circunstâncias podem mudar, ou podemos nos sentir desmotivados ou sobrecarregados.</p>
        </div>
      </div>
      <div class="container" id="last--container">
        <div class="planets">
          <img src="./assets/planets/pink_planet.svg" alt="">
        </div>
        <div class="container--text--area">
          <h3 class="sectionTitle">Siga seu ritmo</h3>
          <p>Avançar pouco a pouco mantém progresso constante em objetivos, evitando parar ou desistir. Mesmo pequenos passos nos aproximam do destino e motivam a continuidade. Não subestime o poder de cada ação rumo ao objetivo final.</p>
        </div>
      </div>
    </div>
  </section>

  <article>
    <div class="userData">
      <form action="">
        <h3 id="h3Form">Entre em contato</h3>
        <div class="input-container">
          <i class="user-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M15.5926 3.02719C14.6805 2.04234 13.4064 1.5 12.0001 1.5C10.5864 1.5 9.30812 2.03906 8.40015 3.01781C7.48233 4.00734 7.03515 5.35219 7.14015 6.80437C7.34827 9.66937 9.52843 12 12.0001 12C14.4719 12 16.6483 9.66984 16.8597 6.80531C16.9661 5.36625 16.5161 4.02422 15.5926 3.02719Z" fill="#B52184"/>
            <path d="M20.2501 22.5H3.75015C3.53418 22.5028 3.3203 22.4574 3.12407 22.3672C2.92784 22.2769 2.75419 22.1441 2.61577 21.9783C2.31108 21.6141 2.18827 21.1167 2.27921 20.6137C2.67483 18.4191 3.90952 16.5755 5.85015 15.2812C7.57421 14.1323 9.75811 13.5 12.0001 13.5C14.2422 13.5 16.4261 14.1328 18.1501 15.2812C20.0908 16.575 21.3255 18.4186 21.7211 20.6133C21.812 21.1162 21.6892 21.6136 21.3845 21.9778C21.2461 22.1437 21.0725 22.2766 20.8763 22.367C20.6801 22.4573 20.4662 22.5028 20.2501 22.5Z" fill="#B52184"/>
            </svg></i>
          <input name="nome" id="nome" type="text" placeholder="Seu nome" required>
        </div>
        <div class="input-container">
          <i class="at-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M19.1834 5.50781C17.6787 3.86719 15.4568 3 12.7568 3C10.3662 3 8.03648 3.92812 6.20367 5.61562C4.37085 7.30312 3.24585 9.54375 3.03492 11.9344C2.82398 14.3578 3.57398 16.6359 5.14429 18.3516C6.70992 20.0578 8.89429 21 11.3037 21C12.8271 21 13.8162 20.8875 15.3115 20.2641C15.6912 20.1047 15.874 19.6641 15.7146 19.2844C15.5552 18.9047 15.1146 18.7219 14.7349 18.8813C13.4599 19.4156 12.6818 19.5047 11.3084 19.5047C9.32554 19.5047 7.53023 18.7359 6.25523 17.3438C4.97085 15.9422 4.35679 14.0672 4.53492 12.0703C4.90054 7.89844 8.59429 4.50469 12.7662 4.50469C15.0349 4.50469 16.8724 5.20312 18.0865 6.525C19.2396 7.78594 19.7552 9.525 19.5771 11.55C19.4224 13.3031 18.7427 14.1656 18.2037 14.5781C17.688 14.9719 17.1724 15.0563 16.8912 15.0047C16.0615 14.8594 15.6302 14.0437 15.738 12.8344L16.1365 8.32031C16.174 7.90781 15.8693 7.54219 15.4568 7.50937C15.0443 7.47187 14.6787 7.77656 14.6459 8.18906L14.6084 8.61563C13.8959 7.89844 12.949 7.50469 11.9318 7.50469C10.8162 7.50469 9.7521 7.97813 8.93179 8.83594C8.14429 9.65625 7.65679 10.7625 7.55367 11.9391C7.43648 13.2469 7.82554 14.4844 8.60835 15.3422C9.29273 16.0922 10.2396 16.5047 11.2755 16.5047C12.4193 16.5047 13.4974 16.0828 14.3084 15.3234C14.4209 15.2203 14.5287 15.1078 14.6271 14.9906C15.0912 15.8859 15.888 16.35 16.638 16.4859C17.4302 16.6266 18.3584 16.3594 19.1271 15.7734C19.9099 15.1734 20.8802 13.9781 21.0818 11.6859C21.274 9.25313 20.6084 7.06406 19.1834 5.50781ZM11.2568 15C10.638 15 10.099 14.7656 9.69585 14.325C9.19429 13.7766 8.95054 12.9516 9.03023 12.0656C9.18023 10.3453 10.4505 9 11.9177 9C12.5646 9 13.1599 9.2625 13.6005 9.74063C14.1115 10.2984 14.3599 11.0953 14.2849 11.9344C14.0974 14.0484 12.6255 15 11.2568 15Z" fill="#B52184"/>
            </svg>
            </i>
          <input name="email" type="email" placeholder="Email">
        </div>
        <textarea name="message" id="" cols="30" rows="5" placeholder="Digite sua mensagem aqui..." ></textarea>
        <button type="submit" id="submit">Enviar mensagem</button>
      </form>

    </div>
  </article>
  <footer>
    <p class="copyright"> © 2023 - Rocketseat Explorer</p>
  </footer>
</body>
</html>