-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
199 lines (187 loc) · 9.84 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
<!DOCTYPE html>
<html lang="pt-br">
<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">
<meta name="description" content="Site criado com finalidades educacionais
para ensinar HTML5, CSS3 e JavaScript, três tecnologias fundamentais da WEB.">
<meta name="keywords" content="HTML, CSS, JavaScript">
<title>Aprenda HTML5, CSS3 e JavaScript</title>
<!-- - - - - - https://realfavicongenerator.net/ - - - - - -->
<link rel="apple-touch-icon" sizes="180x180" href="img/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="img/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="img/favicon/favicon-16x16.png">
<link rel="manifest" href="img/favicon/site.webmanifest">
<link rel="mask-icon" href="img/favicon/safari-pinned-tab.svg" color="#da532c">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- Cabeçalho - logo e menu -->
<header class="flex-container-row menu">
<img src="img/favicon.png" alt="Logo do site" id="logo">
<ul class="flex-container-row">
<li><a href="#HTML">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">Links úteis</a></li>
</ul>
</header>
<!-- Seção principal - destaque -->
<main id="Destaque" class="flex-container-column">
<h1>Aprenda <em class = "destaqueHTML">HTML5</em>, <em class = "destaqueCSS">CSS3</em> e <em class = "destaqueJS">JavaScript</em></h1>
<h2>Escrever com <em class = "destaqueHTML">semântica</em>!</h2>
<h2>Aplicar <em class = "destaqueCSS">estilos</em> modernos!</h2>
<h2>Obter uma melhor <em class = "destaqueJS">interação</em>!</h2>
</main>
<!-- Seção html5 -->
<section id="HTML" class="flex-container-column">
<div class="flex-container-row">
<img src="img/HTML5.png" alt="Logo do HTML5">
<div class="flex-container-column section-details">
<h2>HTML5</h2>
<h3>A HTML é a linguagem principal da web</h3>
<p>A HTML5 modifica a forma como escrevemos código e organizamos a informação na página.
Seria mais semântica com menos código. Seria mais interatividade sem a necessidade de instalação
de plugins e perda de performance. É a criação de código interoperável, pronto para futuros dispositivos
e que facilita a reutilização da informação de diversas formas.</p>
<a href="https://www.w3schools.com/html/default.asp" target="_blank" class="botao">Saiba mais</a>
</div>
</div>
</section>
<!-- Seção css3 -->
<section id="CSS" class="flex-container-column">
<div class="flex-container-row" id="InverterFlexBox">
<img src="img/CSS3.png" alt="Logo do CSS3">
<div class="flex-container-column section-details">
<h2>CSS3</h2>
<h3>O CSS complementa o HTML</h3>
<p>CSS é uma linguagem de estilo, também conhecida como folhas de estilo em cascata. É usada
para personalização visual de um site. Ou seja, elas servem para otimizar o conteúdo das páginas
e permitir uma apresentação mais amigável para o usuário.</p>
<a href="https://www.w3schools.com/css/default.asp" target="_blank" class="botao">Saiba mais</a>
</div>
</div>
</section>
<!-- Seção JavaScript -->
<section id="JavaScript" class="flex-container-column">
<div class="flex-container-row ">
<img src="img/JS.png" alt="Logo do JavaScript">
<div class="flex-container-column section-details">
<h2>JavaScript</h2>
<h3>Com a HTML e o CSS, o JavaScript é uma das três principais tecnologias da web</h3>
<p>O JavaScript é uma linguagem baseada em protótipos, multi-paradigma e dinâmica, suportando
estilos de orientação a objetos, imperativos e declarativos (como por exemplo a programação funcional).
</p>
<a href="https://www.w3schools.com/js/default.asp" target="_blank" class="botao">Saiba mais</a>
</div>
</div>
</section>
<!-- Seção Links úteis -->
<section id="LinksUteis" class = "flex-container-column">
<h2>Links Úteis</h2>
<div class = "flex-container-row alinharTop">
<div class="listaDeLinks">
<h3>Planejamento</h3>
<ul class = "flex-container-column">
<li class = "flex-container-row">
<img src="img/Figma_icon.png" alt="Logo do Figma">
<a href="https://www.figma.com/" target="_blank" rel="nofollow">Figma</a>
</li>
<li class = "flex-container-row">
<img src="img/Google_icon.png" alt="Logo do Google Fonts">
<a href="https://fonts.google.com/" target="_blank" rel="nofollow">Google Fonts</a>
</li>
<li class = "flex-container-row">
<img src="img/Unicode_icon.png" alt="Logo do unicode.org">
<a href="https://home.unicode.org/" target="_blank" rel="nofollow">unicode.org</a>
</li>
<li class = "flex-container-row">
<img src="img/Realfavicongenerator_icon.png" alt="Logo do Real Favicon Generator">
<a href="https://realfavicongenerator.net/" target="_blank" rel="nofollow">Favicon Generator</a>
</li>
<li class = "flex-container-row">
<img src="img/Bootstrap_icon.png" alt="Logo do Bootstrap">
<a href="https://getbootstrap.com/" target="_blank" rel="nofollow">Bootstrap</a>
</li>
</ul>
</div>
<div class="listaDeLinks">
<h3>Programação</h3>
<ul class = "flex-container-column">
<li>
<img src="img/Git_icon.png" alt="Logo do Git">
<a href="https://git-scm.com/" target="_blank" rel="nofollow">Git</a>
</li>
<li>
<img src="img/Github_icon.png" alt="Logo do Github">
<a href="https://github.com/" target="_blank" rel="nofollow">Github</a>
</li>
<li>
<img src="img/Visual_Studio_Code_icon.png" alt="Logo do Visual Studio Code">
<a href="https://code.visualstudio.com/" target="_blank" rel="nofollow">VS Code</a>
</li>
<li>
<img src="img/Node.js_icon.png" alt="Logo do Node.js">
<a href="https://nodejs.org/en/" target="_blank" rel="nofollow">Node.js</a>
</li>
</ul>
</div>
<div class="listaDeLinks">
<h3>Ajuda</h3>
<ul class = "flex-container-column">
<li >
<img src="img/W3C_Brasil_icon.png" alt="Logo do W3C">
<a href="https://www.w3.org/" target="_blank" rel="nofollow">W3C</a>
</li>
<li>
<img src="img/W3C_icon.png" alt="Logo do W3C">
<a href="https://validator.w3.org/" target="_blank" rel="nofollow">Validador HTML</a>
</li>
<li>
<img src="img/W3C_icon.png" alt="Logo do W3C">
<a href="https://jigsaw.w3.org/css-validator/" target="_blank" rel="nofollow">Validador CSS</a>
</li>
<li>
<img src="img/W3C_Brasil_icon.png" alt="Logo do W3C">
<a href="https://www.w3c.br/" target="_blank" rel="nofollow">W3C Brasil</a>
</li>
<li>
<img src="img/W3Schools_icon.png" alt="Logo do W3schools">
<a href="https://www.w3schools.com/" target="_blank" rel="nofollow">W3schools</a>
</li>
</ul>
</div>
</div>
</section>
<!-- Rodapé - Autor e contatos -->
<footer>
<p>© 2022 - Jobson Tenório do Nascimento</p>
<ul>
<li>
<a href="whatsapp:[email protected]&message" target="_blank" rel="nofollow">
<img src="img/WhatsApp_icon.png" alt="Logo do WhatsApp"></a>
</li>
<li>
<a href="mailto:[email protected]//" target="_blank" rel="nofollow">
<img src="img/Gmail_icon.png" alt=""></a>
</li>
<li>
<a href="https://www.youtube.com/channel/UCe4_fd7PQj2lWTdKxFZ8kbQ" target="_blank" rel="nofollow">
<img src="img/YouTube_icon.png" alt=""></a>
</li>
<li>
<a href="https://www.facebook.com/jobson.tenorio.7/" target="_blank" rel="nofollow">
<img src="img/Facebook_icon.png" alt=""></a>
</li>
<li>
<a href="https://www.instagram.com/jobsontenorio/" target="_blank" rel="nofollow">
<img src="img/Instagram_icon.png" alt=""></a>
</li>
</ul>
</footer>
</body>
</html>