Posicionando-elementos-com-Flexbox-em-CSS/index.html at main · jonathanppmaia/Posicionando-elementos-com-Flexbox-em-CSS · 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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Flex Turismos</title>
    <link rel="stylesheet" href="./flex-projeto/style.css" />
  </head>
  <body>
    <header>
      <div class="flex-container menu">
        <div><h1>FlexTurismos</h1></div>
        <ul class="list-items">
          <li><a href="#quem-somos">Quem Somos</a></li>
          <li><a href="#servicos">Serviços</a></li>
          <li><a href="#planos">Planos</a></li>
        </ul>
      </div>
    </header>

    <div class="flex-container apresentacao">
      <div class="texto-apresentacao">
        <h1>Flex <br />Turismos</h1>
        <p>O melhor serviço para você!</p>
        <a href="" class="btn">Saiba Mais!</a>
      </div>

      <div class="flex-container">
        <div>
          <img
            src="./flex-projeto/images/0-main.png"
            alt="banner de apresentação"
          />
        </div>
      </div>
    </div>

    <div class="flex-container" id="quem-somos">
      <div>
        <h2>Quem somos</h2>
        <p>
          It is a long established fact that a reader will be distracted by the
          readable content of a page when looking at its layout.
        </p>
        <p>
          The point of using Lorem Ipsum is that it has a more-or-less normal
          distribution of letters, as opposed to using 'Content here, content
          here', making it look like readable English.
        </p>
      </div>
      <div>
        <img
          src="./flex-projeto/images/1-quem-somos.png"
          alt="balcão de atendimento"
        />
      </div>
    </div>
    <div class="container-externo">
      <div class="flex-container" id="servicos">
        <div>
          <h2>Serviços</h2>
        </div>

        <div class="list-servicos">
          <div class="item-servico">
            <div>
              <img src="./flex-projeto/images/icon-2.png" alt="hospedagens" />
            </div>
            <p>Hospedagens</p>
            <a href="#">Comprar Agora</a>
          </div>

          <div class="item-servico">
            <div>
              <img
                src="./flex-projeto/images/icon-1.png"
                alt="pacote de viagens"
              />
            </div>
            <p>Pacotes de viagens</p>
            <a href="#">Comprar Agora</a>
          </div>

          <div class="item-servico">
            <div>
              <img
                src="./flex-projeto/images/icon-3.png"
                alt="roteiros personalizados"
              />
            </div>
            <p>Roteiros personalizados</p>
            <a href="#">Comprar Agora</a>
          </div>
        </div>
      </div>
    </div>

    <div class="flex-container" id="planos">
      <div><h2>Planos</h2></div>

      <div>
        <div class="list-planos">
          <div class="item-plano">
            <h3>Plano 1</h3>
            <br />
            <ul>
              <li>Suporte 24h</li>
              <li>Serviços de quarto</li>
              <li>Guia turístico</li>
            </ul>
            <a href="#" class="btn">Saiba Mais!</a>
          </div>

          <div class="item-plano">
            <h3>Plano 2</h3>
            <br />
            <ul>
              <li>Suporte 24h</li>
              <li>Serviços de quarto</li>
              <li>Guia turístico</li>
              <li>Roteiro de trilhas</li>
            </ul>
            <a href="#" class="btn">Saiba Mais!</a>
          </div>

          <div class="item-plano">
            <h3>Plano 3</h3>
            <br />
            <ul>
              <li>Suporte 24h</li>
              <li>Serviços de quarto</li>
              <li>Guia turístico</li>
              <li>Roteiro de trilhas</li>
              <li>Serviço personalizado</li>
              <li>Área Vip</li>
            </ul>
            <a href="#" class="btn">Saiba Mais!</a>
          </div>
        </div>
      </div>
    </div>

    <footer>
      <div class="flex-container footer">
        <p>&copy; 2022 CSS Flexbox-Dio</p>
        <p>Desenvolvido por: Jonathan Maia</p>
        <p>Orientadora: Karen Santos</p>
      </div>
    </footer>
  </body>
</html>