-
Notifications
You must be signed in to change notification settings - Fork 52
/
Copy pathindex.html
191 lines (187 loc) · 8.67 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
<!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">
<title>HTML5 e CSS3 - Site One Page</title>
<meta name="description"
content="Aprenda HTML5, CSS3 e técnicas SEO de forma simples, prática e objetiva desenvolvendo passo a passo do zero até a hospedagem um site one page moderno e responsivo.">
<link rel="icon" href="img/favicon.png">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Cabeçalho -->
<header id="inicio">
<div class="Container Flex">
<div id="logo">
<img src="img/logo.png" alt="hal 9000">
</div>
<nav>
<input type="checkbox" id="check">
<label for="check">⚌</label>
<ul>
<li><a href="#inicio">Início</a></li>
<li><a href="#sobre">Sobre</a></li>
<li><a href="#conteudo">Conteúdo</a></li>
<li><a href="#contato">Contato</a></li>
</ul>
</nav>
</div>
</header>
<!-- Destaque -->
<main>
<div class="Container">
<h1>HTML5 e CSS3</h1>
<h2>Você faz. Você vê. Você aprende.</h2>
<a href="https://youtube.com/playlist?list=PLbEOwbQR9lqySIIlPJ-Qwo4f4HSuXVeWk&si=WD8y1YWCcnSZPNHm"
target="_blank" class="Botao">Saiba +</a>
</div>
</main>
<!-- Sobre -->
<section id="sobre">
<div class="Container Flex2">
<div id="destaqueSobre">
<img src="img/html5css3.jpg" alt="html5css3">
</div>
<div id="textoSobre">
<h2>Aprender na prática</h2>
<p>Aprenda HTML5, CSS3 e técnicas de SEO de forma simples, prática e objetiva desenvolvendo passo a
passo do zero até a hospedagem um site One Page moderno e responsivo.</p>
<div class="TopicosSobre Flex2">
<img src="img/html5.png" alt="html5">
<p>HTML5 Semântico</p>
</div>
<div class="TopicosSobre Flex2">
<img src="img/css3.png" alt="css3">
<p>CSS Flexbox</p>
</div>
<div class="TopicosSobre Flex2">
<img src="img/seo.png" alt="seo">
<p>Técnicas de SEO</p>
</div>
</div>
</div>
</section>
<!-- One page -->
<section id="onepage">
<div class="Container Flex3">
<div>
<h2>Site One Page</h2>
<p>Ideal para negócios de pequeno ou médio porte o site One Page é um site onde você inclui todas as
informações que o visitante precisa de forma objetiva e criativa em uma única página.</p>
</div>
<div id="video">
<iframe width="560" height="315" src="https://www.youtube.com/embed/bS720dGvAn8"
title="YouTube video player"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</div>
</div>
</section>
<!-- Wireframe -->
<section id="wireframe">
<div class="Container Flex2">
<div id="textoWire">
<h2>Wireframe</h2>
<p>Wireframe é uma representação visual da estrutura básica de uma página. Ele deve ser feito da maneira
mais simples possível, mostrando apenas o essencial, como uma espécie de rascunho, sem cores ou
imagens. Clique no botão <span>ou escaneie o QR Code </span>para obter o wireframe desta página.</p>
<a href="wireframe.pdf" target="_blank" class="Botao">PDF</a>
</div>
<div id="qrcode">
<img src="img/qrcode.png" alt="qrcode">
</div>
</div>
</section>
<!-- Conteúdo -->
<section id="conteudo">
<div class="Container">
<h2>Conteúdo</h2>
<div class="Cards Flex4">
<div class="Card">
<img src="img/estruturahtml.png" alt="Estrutura html5">
<h3>HTML5</h3>
<p>O html é usado para exibir conteúdo na WEB e a estrutura do documento é dividida em partes
conforme indicado neste cartão.</p>
<a href="https://youtu.be/EUpLb_A8cTI" target="_blank" class="Botao">Saiba +</a>
</div>
<div class="Card">
<img src="img/boxmodel.png" alt="Box model CSS">
<h3>BOX MODEL CSS</h3>
<p>O box model relaciona as propriedades descritas neste cartão para compor a dimensão do elemento.
</p>
<a href="https://youtu.be/dkbs-8ZRzZU" target="_blank" class="Botao">Saiba +</a>
</div>
<div class="Card">
<img src="img/breakpoints.png" alt="breakpoints">
<h3>BREAKPOINTS</h3>
<p>Partindo sempre do smartphone em modo portrait, usamos como referência os valores descritos neste
cartão.</p>
<a href="https://youtu.be/BO-VzBNyEOs" target="_blank" class="Botao">Saiba +</a>
</div>
</div>
<div id="todos">
<a href="https://www.youtube.com/playlist?list=PLbEOwbQR9lqySIIlPJ-Qwo4f4HSuXVeWk"
target="_blank">Conheça todos >></a>
</div>
</div>
</section>
<!-- Rodapé -->
<address>
<div class="Container Flex6">
<div id="contato">
<a href="https://api.whatsapp.com/send?phone=5511012345678" target="_blank">
<img src="img/whatsapp.png" alt="whatsapp" title="Abrir no WhatsApp">
<p>(11) 01234-5678</p>
</a>
<img src="img/fone.png" alt="fone">
<p>(11) 01234-5678</p>
</div>
<div>
<a href="https://goo.gl/maps/mLpzArWKPpWZDgaD7"><img src="img/mapa.png" alt="Mapa" id="iconeMapa"></a>
<img src="img/local.png" alt="local" id="iconeLocal">
<p>Rua Nome da rua, 1234</p>
<p>Nome do bairro</p>
<p>São Paulo - SP</p>
<a href="mailto:seuemail@email.com?subject=HTML5CSS3">
<img src="img/email.png" alt="email" title="Enviar E-mail">
<p>seuemail@email.com</p>
</a>
<p id="dados">👀 Endereço e dados de contato ficticios</p>
</div>
<div id="googleMaps">
<iframe
src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d14631.893034344139!2d-46.56380894999999!3d-23.5334642!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1spt-BR!2sbr!4v1656422745432!5m2!1spt-BR!2sbr"
width="400" height="300" style="border:0;" allowfullscreen="" loading="lazy"
referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
</div>
</address>
<footer>
<div class="Container Flex5">
<div>
<p>©<span id="copyrightYear"></span> - <a href="https://joseassis.com.br/" target="_blank">Professor José de Assis</a></p>
</div>
<div id="social">
<a href="https://www.youtube.com/c/RoboticapraticaBr" target="_blank"><img src="img/youtube.png"
alt="youtube"></a>
<a href="https://www.linkedin.com/in/professorjosedeassis" target="_blank"><img src="img/linkedin.png"
alt="linkedin"></a>
<a href="https://www.facebook.com/professorjosedeassis" target="_blank"><img src="img/facebook.png"
alt="facebook"></a>
<a href="https://www.instagram.com/prof.joseassis/" target="_blank"><img src="img/instagram.png"
alt="instagram"></a>
<a href="https://twitter.com/joseassis" target="_blank"><img src="img/twitter.png" alt="twitter"></a>
</div>
</div>
</footer>
<a href="#inicio" id="topo"><img src="img/topo.png" alt="topo do site"></a>
<script>
// Atualizar automaticamente o ano (footer - copyright)
let ano = document.getElementById("copyrightYear")
let anoAtual = new Date().getFullYear()
ano.textContent = anoAtual
</script>
</body>
</html>