-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
163 lines (160 loc) · 7.95 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
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<title>Site One Page - Workover</title>
<meta name="description"
content="Site one page moderno e responsivo, desenvolvido em curso de html5 e css3 da plataforma Workover">
<link rel="icon" href="img/favicon.png">
</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>Softex / Workover</h2>
<a href="https://www.youtube.com/playlist?list=PLbEOwbQR9lqySIIlPJ-Qwo4f4HSuXVeWk" target="_blank" class="Botao">Saiba mais</a>
</div>
</main>
<!-- Sobre -->
<section id="sobre">
<div class="Container Flex2">
<div id="destaqueSobre">
<img src="img/html5css3.jpg" alt="html5 e css3">
</div>
<div id="textoSobre">
<h2>Aprender na prática</h2>
<p>Aprenda HTML5, CSS3 e SEO de forma simples, prática e objetiva desenvolvendo passo a passo até a hospedagem de um site one page moderno e responsivo.</p>
<div class="topicosSobre Flex2">
<img src="img/html5.png" alt="html5">
<p>HTML5</p>
</div>
<div class="topicosSobre Flex2">
<img src="img/css3.png" alt="css3">
<p>CSS3</p>
</div>
<div class="topicosSobre Flex2">
<img src="img/seo.png" alt="seo">
<p>SEO</p>
</div>
</div>
</div>
</section>
<!-- One page -->
<section id="onepage">
<div class="Container Flex3">
<div class="textoSite">
<h2>One page site</h2>
<p>Ideal para negócios de pequeno ou médio porte o "one page site" é um site onde você inclui todas as informações que você 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; web-share" 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="QR Code">
</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://developer.mozilla.org/en-US/docs/Web/HTML" target="_blank" class="Botao">Saiba mais</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://developer.mozilla.org/en-US/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model" target="_blank" class="Botao">Saiba mais</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://www.w3schools.com/howto/howto_css_media_query_breakpoints.asp" target="_blank" class="Botao">Saiba mais</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=5545999286625" target="_blank">
<img src="./img/whatsapp.png" alt="whatsapp" title="Abrir no Whatsapp">
<p>(45)9.9928-6625</p>
</a>
<img src="./img/fone.png" alt="fone">
<p>(45)9.9928-6625</p>
</div>
<div id="endereco">
<a href="https://goo.gl/maps/FmAX7WsWXs6dpqvb9" target="_blank"><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>Cidade - UF</p>
<a href="mailto:[email protected]?subject=Contato">
<img src="./img/email.png" alt="email" title="Enviar e-mail">
<p>[email protected]</p>
</a>
</div>
<div id="maps">
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d106146.63726114095!2d-53.455676040028784!3d-24.94180411460954!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sbr!4v1692726510638!5m2!1sen!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 id="copy">
<p>2023 © Todos os direitos reservados</p>
</div>
<div id="social">
<a href="https://www.youtube.com/" target="_blank"><img src="./img/youtube.png" alt="youtube"></a>
<a href="https://br.linkedin.com/?original_referer=https%3A%2F%2Fwww.google.com.br%2F" target="_blank"><img src="./img/linkedin.png" alt="linkedin"></a>
<a href="https://pt-br.facebook.com/" target="_blank"><img src="./img/facebook.png" alt="facebook"></a>
<a href="https://www.instagram.com/" target="_blank"><img src="./img/instagram.png" alt="instagram"></a>
<a href="https://twitter.com/i/flow/login?input_flow_data=%7B%22requested_variant%22%3A%22eyJsYW5nIjoicHQifQ%3D%3D%22%7D" 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>
</body>
</html>