-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathProjeto01 (sem Design Responsivo).html
142 lines (106 loc) · 6.28 KB
/
Projeto01 (sem Design Responsivo).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
<!DOCTYPE html>
<html>
<head>
<!-- 'Landing page', foco é vender algo -->
<meta charset="utf-8" />
<link href="css/estilo01(sem Design Responsivo).css" type="text/css" rel="stylesheet" />
<title>O meu Primeiro projeto!</title>
</head>
<body>
<!-- cabeçario -->
<div class="header">
<div class="center">
<img src="imagens/logo.png" />
</div> <!--conteúdo dentro da header (center) -->
</div> <!--Header -->
<!--banner-->
<div class="container-banner">
<div class="center">
<div class="list">
<ul>
<li>Lorem ipsum augue inceptos accumsan, cursus quisque malesuada. </li>
<li>Lorem ipsum augue inceptos accumsan, cursus quisque malesuada. </li>
<li>Lorem ipsum augue inceptos accumsan, cursus quisque malesuada. </li>
<li>Lorem ipsum augue inceptos accumsan, cursus quisque malesuada. </li>
</ul>
</div> <!--lista -->
<div class="form">
<h2>Preencha o formulário e de início a sua
caminhada para virar um webmaster!</h2>
<form>
<div class="input-container">
<span>Nome*</span>
<input type="text" name="nome" required /> </div><!--input-container-->
<div class="input-container">
<span>E-mail*</span>
<input type="text" name="E-mail" required />
</div><!--input-container-->
<div class="input-container">
<span>Telefone*</span>
<input type="text" name="Telefone" required />
</div><!--input-container-->
<div><p>*Campos Obrigatórios.</p></div>
<div class="input-submit-container">
<input type="submit" name="acao" value="Enviar" required />
</div><!--input-submit-container-->
</form>
</div> <!--formulário -->
</div> <!-- center -->
<div><!-- container-banner -->
<!-----------------SEGUNDA PARTE DO SITE---------------------->
<div class="bloco2">
<div class="center">
<h2>Lorem ipsum. </h2>
<p>Lorem ipsum nunc dictumst duis commodo pharetra neque etiam inceptos, nisi magna blandit mi sapien nam tortor maecenas, ipsum lacinia lectus ante faucibus consequat congue curae. molestie eleifend congue fusce himenaeos porttitor eget interdum eleifend vitae in condimentum aliquet, vel ad urna nec feugiat bibendum sed vel nostra inceptos metus. mauris et erat risus id imperdiet orci, mollis pharetra ut curae aliquam quisque sollicitudin, tellus semper aliquam tincidunt libero. </p>
</div><!--center-->
<div class="arrow"></div> <!-- icone -->
</div><!--bloco2-->
<!-----------------TERCEIRA PARTE DO SITE---------------------->
<div class="bloco3">
<div class="center">
<h2>Aprenda com quem está no mercado!</h2>
<div class="section-1">
<!----------------------------1-------------------------------->
<div class="conteudo">
<div><img src="imagens/icon.png" /></div><!-- a imagem -->
<div class="textos">
<h3>Lorem ipsum.</h3>
<p>maecenas, ipsum lacinia lectus ante faucibus consequat congue curae. molestie eleifend congue fusce himenaeos porttitor eget interdum eleifend vitae in condimentum aliquet, vel ad urna nec feugiat bibendum sed vel nostra inceptos metus. mauris et erat risus id imperdiet orci, mollis pharetra ut curae aliquam quisque sollicitudin, tellus semper aliquam tincidunt libero. </p>
</div><!-- textos -->
</div> <!-- conteúdo -->
<!-----------------------------2------------------------------->
<div class="conteudo">
<div><img src="imagens/icon.png" /></div><!-- a imagem -->
<div class="textos">
<h3>Lorem ipsum.</h3>
<p>maecenas, ipsum lacinia lectus ante faucibus consequat congue curae. molestie eleifend congue fusce himenaeos porttitor eget interdum eleifend vitae in condimentum aliquet, vel ad urna nec feugiat bibendum sed vel nostra inceptos metus. mauris et erat risus id imperdiet orci, mollis pharetra ut curae aliquam quisque sollicitudin, tellus semper aliquam tincidunt libero. </p>
</div><!-- textos -->
</div> <!-- conteúdo -->
<!----------------------------3----------------------------->
<div class="conteudo">
<div><img src="imagens/icon.png" /></div><!-- a imagem -->
<div class="textos">
<h3>Lorem ipsum.</h3>
<p>maecenas, ipsum lacinia lectus ante faucibus consequat congue curae. molestie eleifend congue fusce himenaeos porttitor eget interdum eleifend vitae in condimentum aliquet, vel ad urna nec feugiat bibendum sed vel nostra inceptos metus. mauris et erat risus id imperdiet orci, mollis pharetra ut curae aliquam quisque sollicitudin, tellus semper aliquam tincidunt libero. </p>
</div><!-- textos -->
</div> <!-- conteúdo -->
</div> <!-- section-1-->
<div class="clear"></div> <!-- limpando as flutuações causadas pelo float -->
</div> <!--center--- colocada para aplicarmos a largura minima de 1200px construindo um padrão e ,dessa forma, fazer com que o site não 'quebre' como acontecia no bloco 1 e 2 (header e banner/form) -->
</div> <!-- bloco3 -->
<!-- final da pag -->
<div class="rodape">
<p>*Redimensione a tela do seu navegador para perceber que este site não foi feito com o design responsivo, ou seja, ele não se adpta para qualquer tipo de tela!! </p>
<p> *Note isso, caso você esteja acessando pelo seu computador, a necessidade e o surgimento da "scroll barra" na horizontal para ser possível visualizar todo o conteúdo na tela, se for diminuindo as dimensões. Com o seu celular, observe que a tela está distante e é preciso dar "zoom" em várias partes do site para conseguir ver melhor o conteúdo.
Assim, conseguimos facilmente indentificar sites não responsivos. </p>
<p>
*Primeiro projeto, um site dividido em três partes que se relacionam, estruturado por HTML e personalizado com CSS ,dessa forma, perceba que foi feito sem envolver uma linguagem de programação, apenas o uso de codificação. O site é um esquema simples de uma "Landing Page" que tem como objetivo ser um meio de apresentação da proposta de algo, mais comumente utilizada para ser "Vitrine Virtual" de produtos e/ou serviços. </p>
<h4>Obrigado por testar!</h4>
<h4> Shellyda Barbosa </h4>
</div> <!-- rodape -->
</body>
</html>
<!-- observações: <div class="input-submit-container">
<input type="submit" name="acao" value="Enviar" required />
*required = torna o campo obrigatorio
-->