-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
346 lines (346 loc) · 18.1 KB
/
index.html
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
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Desenvolvimento Web</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9"
crossorigin="anonymous"
/>
</head>
<body>
<header class="container-fluid bg-info text-white text-center py-2">
<nav
class="navbar navbar-expand-lg bg-primary-subtle rounded navbar sticky-top"
>
<div class="container-fluid">
<a class="navbar-brand text-info fw-bold fs-3" href="#">Web</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div
class="collapse navbar-collapse justify-content-end"
id="navbarSupportedContent"
>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link fs-5" aria-current="page" href="#">Início</a>
</li>
<li class="nav-item">
<a class="nav-link fs-5" href="#cursos">Cursos</a>
</li>
<li class="nav-item">
<a class="nav-link fs-5" href="#contato">Contato</a>
</li>
</ul>
</div>
</div>
</nav>
<h1 class="fw-bold text-dark-emphasis text-center">
DESENVOLVIMENTO WEB
</h1>
<h2 class="text-dark-emphasis text-center">
Um resumo da história do desenvolvimento web:
</h2>
</header>
<main>
<section
class="container-fluid bg-light font-monospace shadow-sm p-2 mb-5 bg-body-tertiary rounded"
>
<h3 class="fw-bold">
A História do HTML: Navegando pela Evolução da Web
</h3>
<p class="fw-light lh-base font-monospace">
O HTML (HyperText Markup Language) é a base da Web. Criado nos anos 80
por Tim Berners-Lee, permitiu a formatação de documentos online. O
HTML 1.0, simples, veio em 1993, com links. O HTML 2.0, 1995, trouxe
imagens e formulários. O HTML 4.01, 1999, adicionou estilo e frames. O
grande salto veio com o HTML5 nos anos 2000. Semântica, áudio, vídeo e
interatividade melhoraram. A década viu a responsividade para
dispositivos móveis e a ascensão do JavaScript para aplicações
complexas. Hoje, o HTML5 é a base, com constante desenvolvimento pelo
W3C. A história do HTML espelha a evolução da Web, de documentos a uma
plataforma interativa que molda nossa comunicação e vida.
</p>
<a href="https://www.w3schools.com/html/default.asp">HTML</a>
</section>
<section
class="container-fluid bg-left font-monospace shadow-sm p-2 mb-5 bg-body-tertiary rounded"
>
<h3 class="fw-bold">A História Concisa do CSS: Estilo para a Web</h3>
<p class="fw-light lh-base">
O CSS (Cascading Style Sheets) desempenhou um papel vital na evolução
da Web ao separar a formatação do conteúdo das páginas, melhorando a
estética e a consistência visual. Inicialmente introduzido com o CSS1
em meados dos anos 90, permitiu estilos básicos, mas foi com o
lançamento do CSS2 em 1998 que ganhou mais recursos, possibilitando
layouts complexos e efeitos visuais. A década de 2000 trouxe o CSS3,
marcado por animações, gradientes e mídia responsiva, transformando o
CSS em uma ferramenta essencial para criar a estética da Web moderna,
trabalhando em conjunto com HTML e JavaScript.
</p>
<p class="fw-light lh-base">
Hoje, o CSS3 continua a ser a base para a aparência das páginas da
Web, oferecendo uma ampla gama de recursos que permitem designers e
desenvolvedores criar interfaces visualmente atraentes e responsivas
para uma variedade de dispositivos e tamanhos de tela.
</p>
<a href="https://www.w3schools.com/css/default.asp">CSS</a>
</section>
<section
class="container-fluid bg-light font-monospace shadow-sm p-2 mb-5 bg-body-tertiary rounded"
>
<h3 class="fw-bold">A Evolução do JavaScript: Potencializando a Web</h3>
<p class="fw-light lh-base">
JavaScript, surgido em meados dos anos 90, é uma linguagem de
programação vital para a web. Originalmente desenvolvido para
adicionar interatividade a páginas estáticas, sua evolução trouxe
impactos significativos. Nos anos 2000, o AJAX trouxe atualizações de
conteúdo sem recarregar páginas inteiras, impulsionando experiências
mais fluidas. Com a ascensão de frameworks como Angular, React e
Vue.js na década de 2010, o JavaScript possibilitou a construção de
interfaces dinâmicas e complexas. Hoje, JavaScript é uma parte central
na criação de aplicações web modernas, abrangendo tanto o lado do
cliente quanto do servidor por meio do Node.js, contribuindo para a
riqueza e a interatividade da web contemporânea.
</p>
<a href="https://www.w3schools.com/js/default.asp">JavaScript</a>
</section>
<section
class="container-fluid bg-light font-monospace shadow-sm p-2 mb-5 bg-body-tertiary rounded"
>
<h2
id="cursos"
class="card-title text-uppercase font-bold text-center p-2"
>
Cursos online
</h2>
<div class="row row-cols-1 row-cols-md-3 g-4 text-center">
<div class="col">
<div class="card h-100 bg-info-subtle">
<div class="card-body">
<h5 class="card-title text-uppercase font-bold">
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
fill="currentColor"
class="bi bi-filetype-html"
viewBox="0 0 16 16"
>
<path
fill-rule="evenodd"
d="M14 4.5V11h-1V4.5h-2A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v9H2V2a2 2 0 0 1 2-2h5.5L14 4.5Zm-9.736 7.35v3.999h-.791v-1.714H1.79v1.714H1V11.85h.791v1.626h1.682V11.85h.79Zm2.251.662v3.337h-.794v-3.337H4.588v-.662h3.064v.662H6.515Zm2.176 3.337v-2.66h.038l.952 2.159h.516l.946-2.16h.038v2.661h.715V11.85h-.8l-1.14 2.596H9.93L8.79 11.85h-.805v3.999h.706Zm4.71-.674h1.696v.674H12.61V11.85h.79v3.325Z"
/>
</svg>
Curso Completo de HTML: Domine a Linguagem da Web
</h5>
<h1 class="card-subtitle text-muted">R$ 50,00</h1>
<p class="card-text">
<strong>Descrição:</strong> Explore o fascinante mundo da
criação de páginas web com nosso Curso Completo de HTML. Se
você deseja aprender a construir sites incríveis, este é o
curso perfeito para você. HTML (Hypertext Markup Language) é a
base de todas as páginas web e é uma habilidade essencial para
qualquer aspirante a desenvolvedor web, designer ou
empreendedor online.
</p>
</div>
<a
href="#contato"
class="btn btn-primary"
data-bs-toggle="modal"
data-bs-target="#exampleModal"
>Comprar</a
>
<div class="card-footer text-center rounded">
<small class="text-body-secondary">Em até 10x</small>
</div>
</div>
</div>
<div class="col">
<div class="card h-100 bg-info-subtle">
<div class="card-body">
<h5 class="card-title text-uppercase font-bold">
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
fill="currentColor"
class="bi bi-filetype-css"
viewBox="0 0 16 16"
>
<path
fill-rule="evenodd"
d="M14 4.5V14a2 2 0 0 1-2 2h-1v-1h1a1 1 0 0 0 1-1V4.5h-2A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v9H2V2a2 2 0 0 1 2-2h5.5L14 4.5ZM3.397 14.841a1.13 1.13 0 0 0 .401.823c.13.108.289.192.478.252.19.061.411.091.665.091.338 0 .624-.053.859-.158.236-.105.416-.252.539-.44.125-.189.187-.408.187-.656 0-.224-.045-.41-.134-.56a1.001 1.001 0 0 0-.375-.357 2.027 2.027 0 0 0-.566-.21l-.621-.144a.97.97 0 0 1-.404-.176.37.37 0 0 1-.144-.299c0-.156.062-.284.185-.384.125-.101.296-.152.512-.152.143 0 .266.023.37.068a.624.624 0 0 1 .246.181.56.56 0 0 1 .12.258h.75a1.092 1.092 0 0 0-.2-.566 1.21 1.21 0 0 0-.5-.41 1.813 1.813 0 0 0-.78-.152c-.293 0-.551.05-.776.15-.225.099-.4.24-.527.421-.127.182-.19.395-.19.639 0 .201.04.376.122.524.082.149.2.27.352.367.152.095.332.167.539.213l.618.144c.207.049.361.113.463.193a.387.387 0 0 1 .152.326.505.505 0 0 1-.085.29.559.559 0 0 1-.255.193c-.111.047-.249.07-.413.07-.117 0-.223-.013-.32-.04a.838.838 0 0 1-.248-.115.578.578 0 0 1-.255-.384h-.765ZM.806 13.693c0-.248.034-.46.102-.633a.868.868 0 0 1 .302-.399.814.814 0 0 1 .475-.137c.15 0 .283.032.398.097a.7.7 0 0 1 .272.26.85.85 0 0 1 .12.381h.765v-.072a1.33 1.33 0 0 0-.466-.964 1.441 1.441 0 0 0-.489-.272 1.838 1.838 0 0 0-.606-.097c-.356 0-.66.074-.911.223-.25.148-.44.359-.572.632-.13.274-.196.6-.196.979v.498c0 .379.064.704.193.976.131.271.322.48.572.626.25.145.554.217.914.217.293 0 .554-.055.785-.164.23-.11.414-.26.55-.454a1.27 1.27 0 0 0 .226-.674v-.076h-.764a.799.799 0 0 1-.118.363.7.7 0 0 1-.272.25.874.874 0 0 1-.401.087.845.845 0 0 1-.478-.132.833.833 0 0 1-.299-.392 1.699 1.699 0 0 1-.102-.627v-.495ZM6.78 15.29a1.176 1.176 0 0 1-.111-.449h.764a.578.578 0 0 0 .255.384c.07.049.154.087.25.114.095.028.201.041.319.041.164 0 .301-.023.413-.07a.559.559 0 0 0 .255-.193.507.507 0 0 0 .085-.29.387.387 0 0 0-.153-.326c-.101-.08-.256-.144-.463-.193l-.618-.143a1.72 1.72 0 0 1-.539-.214 1 1 0 0 1-.351-.367 1.068 1.068 0 0 1-.123-.524c0-.244.063-.457.19-.639.127-.181.303-.322.527-.422.225-.1.484-.149.777-.149.304 0 .564.05.779.152.217.102.384.239.5.41.12.17.187.359.2.566h-.75a.56.56 0 0 0-.12-.258.624.624 0 0 0-.246-.181.923.923 0 0 0-.37-.068c-.216 0-.387.05-.512.152a.472.472 0 0 0-.184.384c0 .121.047.22.143.3a.97.97 0 0 0 .404.175l.621.143c.217.05.406.12.566.211.16.09.285.21.375.358.09.148.135.335.135.56 0 .247-.063.466-.188.656a1.216 1.216 0 0 1-.539.439c-.234.105-.52.158-.858.158-.254 0-.476-.03-.665-.09a1.404 1.404 0 0 1-.478-.252 1.13 1.13 0 0 1-.29-.375Z"
/>
</svg>
Curso Avançado de CSS: Transforme sua Criatividade em Design
Visualmente Impactante
</h5>
<h1 class="card-subtitle text-muted text-center">R$ 60,00</h1>
<p class="card-text">
<strong>Descrição:</strong> Dê vida às suas ideias de design
com nosso Curso Avançado de CSS. Este curso é projetado para
quem deseja elevar suas habilidades de design web a um nível
superior. O CSS (Cascading Style Sheets) desempenha um papel
crucial na criação de layouts e estilos impressionantes para
sites modernos.
</p>
</div>
<a
href="#contato"
class="btn btn-primary"
data-bs-toggle="modal"
data-bs-target="#exampleModal"
>Comprar</a
>
<div class="card-footer rounded">
<small class="text-body-secondary">Em até 10x</small>
</div>
</div>
</div>
<div class="col">
<div class="card h-100 bg-info-subtle">
<div class="card-body">
<h5 class="card-title text-uppercase font-bold">
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
fill="currentColor"
class="bi bi-filetype-js"
viewBox="0 0 16 16"
>
<path
fill-rule="evenodd"
d="M14 4.5V14a2 2 0 0 1-2 2H8v-1h4a1 1 0 0 0 1-1V4.5h-2A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v9H2V2a2 2 0 0 1 2-2h5.5L14 4.5ZM3.186 15.29a1.176 1.176 0 0 1-.111-.449h.765a.578.578 0 0 0 .255.384c.07.049.153.087.249.114.095.028.202.041.319.041.164 0 .302-.023.413-.07a.559.559 0 0 0 .255-.193.507.507 0 0 0 .085-.29.387.387 0 0 0-.153-.326c-.101-.08-.255-.144-.462-.193l-.619-.143a1.72 1.72 0 0 1-.539-.214 1.001 1.001 0 0 1-.351-.367 1.068 1.068 0 0 1-.123-.524c0-.244.063-.457.19-.639.127-.181.303-.322.528-.422.224-.1.483-.149.776-.149.305 0 .564.05.78.152.216.102.383.239.5.41.12.17.186.359.2.566h-.75a.56.56 0 0 0-.12-.258.624.624 0 0 0-.247-.181.923.923 0 0 0-.369-.068c-.217 0-.388.05-.513.152a.472.472 0 0 0-.184.384c0 .121.048.22.143.3a.97.97 0 0 0 .405.175l.62.143c.218.05.406.12.566.211.16.09.285.21.375.358.09.148.135.335.135.56 0 .247-.063.466-.188.656a1.216 1.216 0 0 1-.539.439c-.234.105-.52.158-.858.158-.254 0-.476-.03-.665-.09a1.404 1.404 0 0 1-.478-.252 1.13 1.13 0 0 1-.29-.375Zm-3.104-.033A1.32 1.32 0 0 1 0 14.791h.765a.576.576 0 0 0 .073.27.499.499 0 0 0 .454.246c.19 0 .33-.055.422-.164.092-.11.138-.265.138-.466v-2.745h.79v2.725c0 .44-.119.774-.357 1.005-.236.23-.564.345-.984.345a1.59 1.59 0 0 1-.569-.094 1.145 1.145 0 0 1-.407-.266 1.14 1.14 0 0 1-.243-.39Z"
/>
</svg>
Curso Abrangente de JavaScript: Desenvolva Aplicações Web
Interativas e Dinâmicas
</h5>
<h1 class="card-subtitle text-muted text-center">R$ 80,00</h1>
<p class="card-text">
<strong>Descrição:</strong> Entre no mundo emocionante do
desenvolvimento web com nosso Curso Abrangente de JavaScript.
Se você deseja criar aplicações web interativas e dinâmicas, o
JavaScript é a chave para desbloquear seu potencial. Aprenda a
linguagem de programação mais amplamente utilizada na web e
comece a construir experiências online impressionantes.
</p>
</div>
<a
href="#contato"
class="btn btn-primary"
data-bs-toggle="modal"
data-bs-target="#exampleModal"
>Comprar</a
>
<div class="card-footer rounded">
<small class="text-body-secondary">Em até 10x</small>
</div>
</div>
</div>
</div>
</section>
<section class="container-fluid bg-light">
<h2 id="contato">Contato</h2>
<form method="GET" action="">
<fieldset>
<legend>Informações Pessoais</legend>
<di class="form-row mb-3">
<label class="form-label" for="nome">Nome</label><br />
<input id="nome" class="form-control" type="text" name="nome" />
</di>
<div class="form-row mb-3">
<label class="form-label" for="sobrenome">Sobrenome</label><br />
<input
id="sobrenome"
class="form-control"
type="text"
name="sobrenome"
/>
</div>
<div class="mb-3">
<label class="form-label" for="email">Email</label><br />
<input
id="email"
class="form-control"
type="email"
name="email"
/>
</div>
<fieldset>
<legend>Quais linguagens você conhece?</legend>
<div class="form-check">
<input
id="html"
type="checkbox"
class="form-check-input"
name="html"
value="Html"
/>
<label class="form-check-label" for="html">HTML</label>
</div>
<div>
<input
id="css"
class="form-check-input"
type="checkbox"
name="css"
value="Css"
/>
<label class="form-check-label" for="css">CSS</label>
</div>
<div>
<input
id="javascript"
class="form-check-input"
type="checkbox"
name="javascript"
value="JavaScript"
/>
<label class="form-check-label" for="reservaVeiculos">
JavaScript
</label>
</div>
</fieldset>
<div class="form-group py-3">
<label for="exampleFormControlTextarea1">Mensagem</label>
<textarea
class="form-control"
id="exampleFormControlTextarea1"
rows="3"
></textarea>
</div>
<input type="submit" value="Enviar" />
</fieldset>
</form>
</section>
</main>
<br />
<footer class="container-fluid bg-dark text-white text-center py-2">
<p>
Copyright 2023 - Desenvolvido por Danilo Melin. Todos os direitos
reservados.
</p>
</footer>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm"
crossorigin="anonymous"
></script>
</body>
</html>