├── 1_HTML ├── form.html ├── form_attr.html ├── html_logo.png ├── html_semantico.html ├── index.html ├── listas_nao_ordenadas.html ├── listas_ordenadas.html ├── meta_tags.html └── table.html ├── 2_CSS ├── background.html ├── boxmodel.html ├── float.html ├── fontes.html ├── img │ ├── css_icon.png │ ├── html_icon.png │ ├── js_icon.png │ └── por-do-sol.jpg ├── index.html ├── positions.html ├── styles.css ├── unidades.html └── units.html ├── 3_PROJETO_PAGINA_TRIBUTO ├── CONCLUIDO │ ├── img │ │ ├── silvio.jpg │ │ └── silvio2.jpg │ ├── index.html │ └── styles.css ├── css │ └── styles.css ├── img │ ├── silvio.jpg │ └── silvio2.jpg └── index.html ├── 4_PROJETO_FORMULARIO ├── CONCLUIDO │ ├── css │ │ └── styles.css │ └── index.html ├── css │ └── styles.css └── index.html ├── 5_PROJETO_PAGINA_AGENCIA ├── CONCLUIDO │ ├── css │ │ ├── reset.css │ │ └── styles.css │ ├── img │ │ ├── capa.jpg │ │ ├── capa2.jpg │ │ └── rodape.jpg │ └── index.html ├── css │ ├── reset.css │ └── styles.css ├── img │ ├── capa.jpg │ ├── capa2.jpg │ └── rodape.jpg └── index.html ├── 6_PROJETO_GOOGLE ├── CONCLUIDO │ ├── css │ │ └── styles.css │ ├── img │ │ ├── favicon.ico │ │ └── google_logo.png │ └── index.html ├── css │ └── styles.css ├── img │ ├── favicon.ico │ └── google_logo.png └── index.html └── 7_PROJETO_PAGINA_DE_CONTATO ├── arquivos.rar ├── arquivos ├── arquivos.rar ├── css │ └── styles.css ├── img │ └── project_bg.jpg └── index.html └── ref ├── css └── styles.css ├── img └── project_bg.jpg └── index.html /1_HTML/form.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Listas Ordenadas 5 | 6 | 7 |
8 | 9 |
10 |
11 | Eu tenho um carro 12 |
13 |
14 | Data de nascimento 15 |
16 |
17 | Masculino 18 | Feminino 19 | Outro 20 |
21 |
22 | 23 |
24 |
25 | 26 |
27 |
28 | 29 |
30 | 31 | -------------------------------------------------------------------------------- /1_HTML/form_attr.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Listas Ordenadas 5 | 6 | 7 |
8 | 9 |

10 | 11 |

12 | 13 |

14 | 15 |

16 | 17 |

18 | 19 |

20 | 21 |
22 | 23 | -------------------------------------------------------------------------------- /1_HTML/html_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusbattisti/curso_html_css_o_inicio/12245abfc4fc54fffe1c3e85f39b5cbb328ed9ce/1_HTML/html_logo.png -------------------------------------------------------------------------------- /1_HTML/html_semantico.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Título 5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 17 |
18 |
19 | 20 |

Título principal

21 |

Explicando o conteúdo da página

22 |
23 |
24 | 25 |

Título do post

26 |

Descrição do post

27 |

Título do post

28 |

Descrição do post

29 |

Título do post

30 |

Descrição do post

31 |
32 | 35 | 40 | 41 | -------------------------------------------------------------------------------- /1_HTML/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Primeiro HTML 5 | 6 | 7 | 8 |

Hello World!

9 |

Este é o meu primeiro parágrafo

10 |

Este link vai para o Google!

11 | Logo do HTML 12 | Logo do CSS 13 | Logo do JavaScript 14 | 15 | -------------------------------------------------------------------------------- /1_HTML/listas_nao_ordenadas.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Listas Ordenadas 5 | 6 | 7 | 14 | 21 | 28 | 35 | 36 | -------------------------------------------------------------------------------- /1_HTML/listas_ordenadas.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Listas Ordenadas 5 | 6 | 7 |
    8 |
  1. Arroz
    2. 9 |
  2. Feijão
    3. 10 |
  3. Batata
    4. 11 |
  4. Alface
    5. 12 |
13 |
    14 |
  1. BMW
    2. 15 |
  2. Fiat
    3. 16 |
  3. Audi
    4. 17 |
  4. VW
    5. 18 |
19 | 20 | -------------------------------------------------------------------------------- /1_HTML/meta_tags.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Título 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /1_HTML/table.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Tabela 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 |
Estoque de roupas
Nome produtoTamanhoCor
CamisaPAzul
Calça42Vermelha
JaquetaGPreta
30 | 31 | -------------------------------------------------------------------------------- /2_CSS/background.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Backgrounds CSS 5 | 6 | 7 | 8 |
9 | Arquivo de fontes 10 |
11 |
12 |

Este é o reino dos backgrounds

13 |
14 | 15 | -------------------------------------------------------------------------------- /2_CSS/boxmodel.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Box Model 5 | 6 | 7 | 8 | 9 |
10 |

Parágrafo 1

11 |

Parágrafo 2

12 |

Parágrafo 3

13 |
14 |
15 |

Parágrafo 1

16 |

Parágrafo 2

17 |

Parágrafo 3

18 |
19 | 20 | -------------------------------------------------------------------------------- /2_CSS/float.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Float 5 | 6 | 7 | 8 | 9 |
10 |
11 | 12 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mattis scelerisque nisl non posuere. Pellentesque sit amet quam ut urna pellentesque gravida. Aenean posuere sagittis lacus, ut interdum est sagittis a. Curabitur tortor orci, maximus sed tristique ac, auctor ac elit.

13 |
14 |
15 | 16 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mattis scelerisque nisl non posuere. Pellentesque sit amet quam ut urna pellentesque gravida. Aenean posuere sagittis lacus, ut interdum est sagittis a. Curabitur tortor orci, maximus sed tristique ac, auctor ac elit.

17 |
18 |
19 | 20 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mattis scelerisque nisl non posuere. Pellentesque sit amet quam ut urna pellentesque gravida. Aenean posuere sagittis lacus, ut interdum est sagittis a. Curabitur tortor orci, maximus sed tristique ac, auctor ac elit.

21 |
22 |
23 |

Este vai flutar para a direita

24 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mattis scelerisque nisl non posuere. Pellentesque sit amet quam ut urna pellentesque gravida. Aenean posuere sagittis lacus, ut interdum est sagittis a. Curabitur tortor orci, maximus sed tristique ac, auctor ac elit.

25 |
26 |
27 | 28 | -------------------------------------------------------------------------------- /2_CSS/fontes.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Fontes CSS 5 | 6 | 7 | 8 |
9 |

Aqui é sobre as famílias

10 |

Aqui é sobre as famílias

11 |

Aqui é sobre as famílias

12 |

Aqui é sobre as famílias

13 |

Aqui é sobre os styles

14 |

Aqui é sobre os styles

15 |

Aqui é sobre os weights

16 |

Aqui é sobre os variants

17 |
18 | 19 | -------------------------------------------------------------------------------- /2_CSS/img/css_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusbattisti/curso_html_css_o_inicio/12245abfc4fc54fffe1c3e85f39b5cbb328ed9ce/2_CSS/img/css_icon.png -------------------------------------------------------------------------------- /2_CSS/img/html_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusbattisti/curso_html_css_o_inicio/12245abfc4fc54fffe1c3e85f39b5cbb328ed9ce/2_CSS/img/html_icon.png -------------------------------------------------------------------------------- /2_CSS/img/js_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusbattisti/curso_html_css_o_inicio/12245abfc4fc54fffe1c3e85f39b5cbb328ed9ce/2_CSS/img/js_icon.png -------------------------------------------------------------------------------- /2_CSS/img/por-do-sol.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusbattisti/curso_html_css_o_inicio/12245abfc4fc54fffe1c3e85f39b5cbb328ed9ce/2_CSS/img/por-do-sol.jpg -------------------------------------------------------------------------------- /2_CSS/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Aulas de CSS 5 | 6 | 7 | 8 | 9 |
10 | Para os backgrounds 11 |
12 |

Título principal

13 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt dui sapien, at consequat quam interdum eu. In pretium porta felis sit amet pulvinar. Morbi et facilisis quam, ut suscipit metus. Aliquam erat volutpat. Sed vitae erat ante. Pellentesque imperdiet erat ac mi molestie ultrices. Vestibulum ut libero in elit aliquam semper non in mauris. Etiam pulvinar nunc quis metus dignissim ultricies. Donec imperdiet enim nec tempus interdum. Pellentesque dapibus, urna vel facilisis malesuada, nulla diam aliquam metus, nec blandit sapien nisi vel lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

14 |

Este é o segundo título!

15 |

Este é o ID

16 |

Algum texto 1

17 |

Algum texto 2

18 |

Algum texto 3

19 |
20 |

Este é específico

21 |

Este é mais específico

22 |

Este é muito mais específico

23 |
24 |
25 |

Nome da cor

26 |

Hexadecimal

27 |

RGBA

28 |
29 | 30 | -------------------------------------------------------------------------------- /2_CSS/positions.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Positions 5 | 6 | 7 | 8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 | 18 | -------------------------------------------------------------------------------- /2_CSS/styles.css: -------------------------------------------------------------------------------- 1 | h1 { 2 | color: red; 3 | } 4 | 5 | p { 6 | color: blue; 7 | } 8 | 9 | h2 { 10 | color: green; 11 | text-align: center; 12 | font-size: 50px; 13 | } 14 | 15 | /* Este é um comentário */ 16 | 17 | /* 18 | Este 19 | é 20 | um 21 | comentário 22 | */ 23 | 24 | /* Classes e ids */ 25 | 26 | .p-texto { 27 | color: lightgreen; 28 | } 29 | 30 | #titulo-app { 31 | color: purple; 32 | font-size: 40px; 33 | } 34 | 35 | /* Especifidade */ 36 | 37 | div p { 38 | color: red; 39 | } 40 | 41 | .p-dentro-da-div { 42 | color: blue; 43 | } 44 | 45 | #p-super-especifico { 46 | color: green; 47 | } 48 | 49 | /* Cores */ 50 | 51 | .nome { 52 | color: orange; 53 | } 54 | 55 | .hexa { 56 | color: #6a40c4; 57 | } 58 | 59 | .rgba { 60 | color: rgba(17, 197, 214, 1); 61 | font-size: 40px; 62 | } 63 | 64 | /* Backgrounds */ 65 | 66 | .div-background { 67 | background-image: url('img/por-do-sol.jpg'); 68 | height: 300px; 69 | } 70 | 71 | .titulo-background { 72 | text-align: center; 73 | background-color: #000; 74 | color: #FFF; 75 | } 76 | 77 | /* Fontes */ 78 | 79 | .family { 80 | color: #000; 81 | font-size: 40px; 82 | } 83 | 84 | .family.serif { 85 | color: green; 86 | } 87 | 88 | .serif { 89 | font-family: "times new roman"; 90 | } 91 | 92 | .sans-serif { 93 | font-family: arial; 94 | } 95 | 96 | .monospace { 97 | font-family: "Courier New"; 98 | } 99 | 100 | .italic { 101 | font-style: italic; 102 | } 103 | 104 | .oblique { 105 | font-style: oblique; 106 | } 107 | 108 | .bold { 109 | font-weight: bold; 110 | } 111 | 112 | .variant { 113 | font-variant: small-caps; 114 | } 115 | 116 | /* Box model */ 117 | 118 | body { 119 | margin: 0; 120 | } 121 | 122 | .boxmodel { 123 | width: 200px; 124 | height: 200px; 125 | background-color: red; 126 | /* geral */ 127 | /*padding: 20px;*/ 128 | /* especifico */ 129 | /* 130 | padding-top: 30px; 131 | padding-left: 10px; 132 | padding-right: 20px; 133 | padding-bottom: 5px; 134 | */ 135 | /* especifico agrupado */ 136 | /* padding: 30px 20px 5px 10px; */ 137 | /* especifico agrupado 3 medidas - top, right-left, bottom */ 138 | /* padding: 30px 20px 5px; */ 139 | /* especifico agrupado 2 medidas - top -bottom, right - left */ 140 | padding: 30px 20px; 141 | border: 3px solid #000; 142 | border-width: 5px 10px 2px 10px; 143 | /*border-left: 5px dotted blue; 144 | border-right-style: double;*/ 145 | border-width: 20px 10px; 146 | border-radius: 15px; 147 | /* margin: 50px; 148 | margin: 5px 10px 10px 7px;*/ 149 | margin: 100px; 150 | /*display: none;*/ 151 | /* display: inline; 152 | display: inline-block;*/ 153 | display: block; 154 | } 155 | 156 | .paragrafo-box { 157 | color: #000; 158 | margin: 0; 159 | } 160 | 161 | /* Positions */ 162 | /* static - flow no HTML, não é alterado por top, left, right e bottom */ 163 | /* relative - flow no HTML, ela é alterada pelo top, left, right e bottom */ 164 | /* fixed - posiciona em qualquer lugar da tela, e é posicionada em relação ao HTML */ 165 | /* absolute - posiciona em qualquer lugar, e ela respeita o elemento antecessor */ 166 | /* sticky - esta no flow do HTML, porém ao passar o scroll ela funciona como fixed */ 167 | 168 | .div-position { 169 | width: 500px; 170 | height: 500px; 171 | background-color: red; 172 | border-bottom: 2px dotted black; 173 | } 174 | 175 | .static { 176 | position: static; 177 | } 178 | 179 | .relative { 180 | position: relative; 181 | background-color: blue; 182 | top: 100px; 183 | left: 50px; 184 | } 185 | 186 | 187 | .mini-div { 188 | height: 50px; 189 | width: 50px; 190 | top: 50px; 191 | left: 100px; 192 | } 193 | 194 | .absolute { 195 | position: absolute; 196 | background-color: purple; 197 | right: 0; 198 | top: 0; 199 | } 200 | 201 | 202 | 203 | .fixed { 204 | position: fixed; 205 | height: 200px; 206 | background-color: yellow; 207 | bottom: 0; 208 | right: 0; 209 | } 210 | 211 | .sticky { 212 | position: sticky; 213 | background-color: gray; 214 | top: 0px; 215 | } 216 | 217 | /* Float */ 218 | 219 | .container { 220 | padding: 50px; 221 | } 222 | 223 | .div-float { 224 | overflow: auto; 225 | } 226 | 227 | .img-float { 228 | width: 200px; 229 | height: 200px; 230 | float: left; 231 | } 232 | 233 | .float-right { 234 | float: right; 235 | } 236 | 237 | .p-float { 238 | color: #000; 239 | } 240 | 241 | .clear { 242 | clear: both; 243 | } 244 | 245 | div p { 246 | color: #000; 247 | } 248 | 249 | /* Units */ 250 | 251 | .pixel-1 { 252 | background-color: red; 253 | width: 100px; 254 | height: 100px; 255 | } 256 | 257 | .pixel-2 { 258 | background-color: blue; 259 | width: 500px; 260 | height: 50px; 261 | } 262 | 263 | .pai-porcentagem { 264 | height: 500px; 265 | width: 500px; 266 | background-color: #000; 267 | } 268 | 269 | .porcentagem-1 { 270 | width: 50%; 271 | height: 50%; 272 | background-color: yellow; 273 | } 274 | 275 | .porcentagem-2 { 276 | width: 50%; 277 | height: 50%; 278 | background-color: #000; 279 | } 280 | 281 | .pai-em { 282 | font-size: 50px; 283 | } 284 | 285 | .em-1 { 286 | width: .5em; 287 | height: .5em; 288 | background-color: purple; 289 | } 290 | 291 | html { 292 | font-size: 20px; 293 | } 294 | 295 | .rem-1 { 296 | width: 1rem; 297 | height: 1rem; 298 | background-color: blue; 299 | } 300 | 301 | .rem-2 { 302 | font-size: 2rem; 303 | } -------------------------------------------------------------------------------- /2_CSS/unidades.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Unidades 5 | 6 | 7 | 8 | 9 |

Unidades

10 | 11 | -------------------------------------------------------------------------------- /2_CSS/units.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Backgrounds CSS 5 | 6 | 7 | 8 |
9 |

Medidas em pixel

10 |
11 |
12 |
13 |
14 |

Medidas em %

15 |
16 |
17 |
18 |
19 |
20 |

Medidas em em

21 |
22 |
23 |
24 |

Medidas em rem

25 |
26 |
27 | 28 | -------------------------------------------------------------------------------- /3_PROJETO_PAGINA_TRIBUTO/CONCLUIDO/img/silvio.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusbattisti/curso_html_css_o_inicio/12245abfc4fc54fffe1c3e85f39b5cbb328ed9ce/3_PROJETO_PAGINA_TRIBUTO/CONCLUIDO/img/silvio.jpg -------------------------------------------------------------------------------- /3_PROJETO_PAGINA_TRIBUTO/CONCLUIDO/img/silvio2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusbattisti/curso_html_css_o_inicio/12245abfc4fc54fffe1c3e85f39b5cbb328ed9ce/3_PROJETO_PAGINA_TRIBUTO/CONCLUIDO/img/silvio2.jpg -------------------------------------------------------------------------------- /3_PROJETO_PAGINA_TRIBUTO/CONCLUIDO/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Tributo a Silvio Santos 5 | 6 | 7 | 8 | 9 |
10 | 11 |
12 |

Silvio Santos

13 |

Um revolucionário apresentador brasileiro.

14 |
15 | 16 |
17 |
18 | silvio santos rindo 19 |
Silvio encanta todos com seu carisma
20 |
21 |
22 | 23 |
24 |

Um pouco de sua história...

25 |

Silvio nasceu em 1930, começou a trabalhar como camelô com 14 anos, e foi trabalhando que aprendeu a negociar e a expor sua voz.

26 |

Foi convidado a ser locutor na Rádio Guanabara, mas não ficou por lá muito tempo, pois como camelô ganhava mais.

27 |

Depois de servir ao exército, criou uma maneira de tornar as viagens mais dinâmicas nas embarcações que iam do Rio de Janeiro à Niterói: criou um serviço de alto falantes para anunciar os produtos negociados. Posteriormente, entrou para o ramo de shows e sorteios de loterias.

28 |

Em 1962 começo a sua carreira na televisão, com o programa "Vamos Brincar de Forca", transmitido pela TV Paulista.

29 |

Passou pela Rede Tupi e Rede Record, nesta, conseguiu 50% das ações da TV. Mas o grande empreendimento de Silvio Santos seria o SBT - Sistema Brasileiro de Televisão, canal próprio, onde apresentaria o seu tradicional Programa "Silvio Santos" e venderia outros produtos, como o Baú da Felicidade, empresa de venda de carnês e sorteios.

30 |
31 | 32 |
33 |
"Quem quer dinheiro?"
34 |

Silvio Santos

35 |
36 | 37 |
38 |

Curiosidades de Silvio Santos:

39 | 46 |
47 | 48 |
49 |
"Qual ser humano que vai progredir se ele não recebe um estímulo?"
50 |

Silvio Santos

51 |
52 | 53 |
54 |
55 | silvio santos no palco 56 |
Silvio Santos e seu auditório
57 |
58 |
59 | 60 |
61 |

Biografia

62 |

Você pode conhecer mais sobre o Silvio comprando sua biografia 63 | aqui! 64 |

65 |
66 |
67 | 68 | -------------------------------------------------------------------------------- /3_PROJETO_PAGINA_TRIBUTO/CONCLUIDO/styles.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-family: Helvetica; 3 | background-color: #DDD; 4 | } 5 | 6 | .container { 7 | max-width: 1200px; 8 | margin-left: auto; 9 | margin-right: auto; 10 | position: relative; 11 | padding: 20px 50px; 12 | margin: 50px; 13 | background-color: #FFF; 14 | } 15 | 16 | .destaque { 17 | font-weight: bold; 18 | } 19 | 20 | /* cabeçalho */ 21 | 22 | .cabecalho { 23 | text-align: center; 24 | } 25 | 26 | .titulo-principal { 27 | font-size: 40px; 28 | } 29 | 30 | .paragrafo-principal { 31 | font-style: italic; 32 | } 33 | 34 | /* corpo do site */ 35 | 36 | .img-destaque { 37 | text-align: center; 38 | margin-top: 30px; 39 | } 40 | 41 | /* biografia container */ 42 | 43 | .biografia-container { 44 | padding: 25px 0; 45 | margin: 25px 0; 46 | border-top: 1px dashed #DDD; 47 | border-bottom: 1px dashed #DDD; 48 | } 49 | 50 | /* citações */ 51 | 52 | .frase-container { 53 | background-color: #DDD; 54 | padding: 30px; 55 | } 56 | 57 | .frase-container blockquote { 58 | font-weight: 600; 59 | font-size: 30px; 60 | } 61 | 62 | .frase-container p { 63 | font-style: italic; 64 | } 65 | 66 | /* curiosidades */ 67 | 68 | .curiosidades-container { 69 | padding: 25px 0; 70 | margin: 25px 0; 71 | border-top: 1px dashed #DDD; 72 | border-bottom: 1px dashed #DDD; 73 | } 74 | 75 | .curiosidades-container li { 76 | height: 30px; 77 | } -------------------------------------------------------------------------------- /3_PROJETO_PAGINA_TRIBUTO/css/styles.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-family: Helvetica; 3 | background-color: #DDD; 4 | } 5 | 6 | .container { 7 | max-width: 1200px; 8 | position: relative; 9 | margin-left: auto; 10 | margin-right: auto; 11 | padding: 20px 50px; 12 | margin: 50px; 13 | background-color: #FFF; 14 | } 15 | 16 | .destaque { 17 | font-weight: bold; 18 | } 19 | 20 | /* cabecalho */ 21 | 22 | .cabecalho { 23 | text-align: center; 24 | } 25 | 26 | .titulo-principal { 27 | font-size: 40px; 28 | } 29 | 30 | .paragrafo-principal { 31 | font-style: italic; 32 | } 33 | 34 | /* corpo do site */ 35 | 36 | .img-destaque { 37 | text-align: center; 38 | margin-top: 30px; 39 | } 40 | 41 | /* biografia container */ 42 | 43 | .biografia-container { 44 | padding: 25px 0; 45 | margin: 25px 0; 46 | border-top: 1px dashed #DDD; 47 | border-bottom: 1px dashed #DDD; 48 | } 49 | 50 | /* citações */ 51 | 52 | .frase-container { 53 | background-color: #DDD; 54 | padding: 30px; 55 | } 56 | 57 | .frase-container blockquote { 58 | font-weight: 600; 59 | font-size: 30px; 60 | } 61 | 62 | .frase-container p { 63 | font-style: italic; 64 | } 65 | 66 | /* curiosidades */ 67 | 68 | .curiosidades-container { 69 | padding: 25px 0; 70 | margin: 25px 0; 71 | border-top: 1px dashed #DDD; 72 | border-bottom: 1px dashed #DDD; 73 | } 74 | 75 | .curiosidades-container li { 76 | height: 30px; 77 | } -------------------------------------------------------------------------------- /3_PROJETO_PAGINA_TRIBUTO/img/silvio.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusbattisti/curso_html_css_o_inicio/12245abfc4fc54fffe1c3e85f39b5cbb328ed9ce/3_PROJETO_PAGINA_TRIBUTO/img/silvio.jpg -------------------------------------------------------------------------------- /3_PROJETO_PAGINA_TRIBUTO/img/silvio2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusbattisti/curso_html_css_o_inicio/12245abfc4fc54fffe1c3e85f39b5cbb328ed9ce/3_PROJETO_PAGINA_TRIBUTO/img/silvio2.jpg -------------------------------------------------------------------------------- /3_PROJETO_PAGINA_TRIBUTO/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Tributo a Silvio Santos 5 | 6 | 7 | 8 | 9 |
10 | 11 |
12 |

Silvio Santos

13 |

Um revolucionário apresentador brasileiro.

14 |
15 | 16 |
17 |
18 | silvio santos rindo 19 |
Silvio encanta todos com seu carisma
20 |
21 |
22 | 23 |
24 |

Um pouco de sua história...

25 |

26 | Silvio nasceu em 1930, começou a trabalhar como camelô com 14 anos, e foi trabalhando que aprendeu a negociar e a expor sua voz. 27 |

28 |

29 | Foi convidado a ser locutor na Rádio Guanabara, mas não ficou por lá muito tempo, pois como camelô ganhava mais. 30 |

31 |

32 | Depois de servir ao exército, criou uma maneira de tornar as viagens mais dinâmicas nas embarcações que iam do Rio de Janeiro à Niterói: criou um serviço de alto falantes para anunciar os produtos negociados. Posteriormente, entrou para o ramo de shows e sorteios de loterias. 33 |

34 |

35 | Em 1962 começo a sua carreira na televisão, com o programa "Vamos Brincar de Forca", transmitido pela TV Paulista. 36 |

37 |

38 | Passou pela Rede Tupi e Rede Record, nesta, conseguiu 50% das ações da TV. Mas o grande empreendimento de Silvio Santos seria o SBT - Sistema Brasileiro de Televisão, canal próprio, onde apresentaria o seu tradicional Programa "Silvio Santos" e venderia outros produtos, como o Baú da Felicidade, empresa de venda de carnês e sorteios. 39 |

40 |
41 | 42 |
43 |
"Quem quer dinheiro?"
44 |

Silvio Santos

45 |
46 | 47 |
48 |

Curiosidades de Silvio Santos:

49 | 56 |
57 | 58 |
59 |
"Qual ser humano que vai progredir se ele não recebe um estímulo?"
60 |

Silvio Santos

61 |
62 | 63 |
64 |
65 | silvio santos no palco 66 |
Silvio Santos e seu auditório
67 |
68 |
69 | 70 |
71 |

Biografia

72 |

Você pode conhecer mais sobre o Silvio comprando sua biografia 73 | aqui! 74 |

75 |
76 |
77 | 78 | -------------------------------------------------------------------------------- /4_PROJETO_FORMULARIO/CONCLUIDO/css/styles.css: -------------------------------------------------------------------------------- 1 | /* reset */ 2 | body { 3 | margin: 0; 4 | padding: 0; 5 | font-family: Arial, Helvetica, sans-serif; 6 | background-color: #f0ebf8; 7 | } 8 | 9 | h1, h2, h3, h4, h5 { 10 | color: #333; 11 | } 12 | 13 | p, label { 14 | color: #444; 15 | } 16 | 17 | input { 18 | border: 1px solid transparent; 19 | border-bottom: 1px solid #CCC; 20 | padding: 10px 0px; 21 | } 22 | 23 | input[type=text], input[type=number], input[type=date], input[type=file] { 24 | width: 400px; 25 | } 26 | 27 | textarea { 28 | padding: 10px 5px; 29 | width: 400px; 30 | } 31 | 32 | /* Cabeçalho da página */ 33 | .header { 34 | height: 160px; 35 | padding: 20px; 36 | background-color: #673ab7; 37 | } 38 | 39 | .header h3 { 40 | color: #FFF; 41 | margin-top: 0; 42 | } 43 | 44 | /* Formulário */ 45 | .form-container { 46 | background-color: #FFF; 47 | width: 60%; 48 | margin-left: auto; 49 | margin-right: auto; 50 | position: relative; 51 | top: -62px; 52 | } 53 | 54 | /* Cabeçalho formulário */ 55 | .form-header { 56 | border-bottom: 1px solid #DFDFDF; 57 | height: 45px; 58 | } 59 | 60 | .form-header p { 61 | color: #673ab7; 62 | border-bottom: 2px solid #673ab7; 63 | width: 100px; 64 | text-align: center; 65 | margin-left: auto; 66 | margin-right: auto; 67 | text-transform: uppercase; 68 | height: 45px; 69 | line-height: 45px; 70 | } 71 | 72 | /* Corpo formulário */ 73 | .form-body { 74 | padding: 30px; 75 | } 76 | 77 | .form-title { 78 | margin: 0; 79 | } 80 | 81 | .required-field { 82 | color: #D80835; 83 | } 84 | 85 | .box-input { 86 | margin-bottom: 30px; 87 | } 88 | 89 | .block { 90 | display: block; 91 | } 92 | 93 | .optional_box { 94 | display: inline-block; 95 | margin-right: 30px; 96 | } 97 | 98 | .optional_list { 99 | padding-left: 0; 100 | } 101 | 102 | .optional_list li { 103 | list-style: none; 104 | } 105 | 106 | .btn-submit { 107 | background-color: #673ab7; 108 | color: #FFF; 109 | border: 2px solid transparent; 110 | width: 150px; 111 | height: 50px; 112 | text-transform: uppercase; 113 | cursor: pointer; 114 | transition: .5s; 115 | } 116 | 117 | .btn-submit:hover { 118 | background-color: #FFF; 119 | border-color: #673ab7; 120 | color: #673ab7; 121 | } -------------------------------------------------------------------------------- /4_PROJETO_FORMULARIO/CONCLUIDO/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Cadastro de Veículos 8 | 9 | 10 | 11 |
12 |
13 |

Cadastre seu veículo para vender muito mais rápido!

14 |
15 |
16 |
17 |

Cadastro

18 |
19 |
20 |

Venda fácil seu veículo!

21 |

Descreva as características do seu veículo e marque todas os opicionais e características que ele possui

22 |
23 |
24 | 25 | 26 |
27 |
28 | 29 | 30 |
31 |
32 | 33 | 34 |
35 |
36 | 37 | 42 |
43 |
44 | 45 | 46 |
47 |
48 | 49 | 50 |
51 |
52 | 53 | 54 |
55 |
56 | 57 | 58 |
59 |
60 |

Câmbio: *

61 | 62 | 63 |
64 |
65 |

Opicionais:

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 |

Envie imagens do veículo: *

107 | 108 |
109 | 110 |
111 |
112 |
113 | 114 |
115 |
116 |
117 | 118 | -------------------------------------------------------------------------------- /4_PROJETO_FORMULARIO/css/styles.css: -------------------------------------------------------------------------------- 1 | /* reset */ 2 | body { 3 | margin: 0; 4 | padding: 0; 5 | font-family: Arial, Helvetica, sans-serif; 6 | background-color: #F0EBF8; 7 | } 8 | 9 | h1, h2, h3, h4, h5 { 10 | color: #333; 11 | } 12 | 13 | p, label { 14 | color: #444; 15 | } 16 | 17 | input { 18 | border: 1px solid transparent; 19 | border-bottom: 1px solid #CCC; 20 | padding: 10px 0px; 21 | } 22 | 23 | input[type=text], input[type=number], input[type=date], input[type=file] { 24 | width: 400px; 25 | } 26 | 27 | textarea { 28 | padding: 10px 5px; 29 | width: 400px; 30 | } 31 | 32 | /* cabeçalho da página */ 33 | .header { 34 | height: 160px; 35 | padding: 20px; 36 | background-color: #673AB7; 37 | } 38 | 39 | .header h3 { 40 | color: #FFF; 41 | margin-top: 0; 42 | } 43 | 44 | /* container do formulário */ 45 | .form-container { 46 | background-color: #FFF; 47 | width: 60%; 48 | margin-left: auto; 49 | margin-right: auto; 50 | position: relative; 51 | top: -62px; 52 | } 53 | 54 | /* cabeçalho do formulário */ 55 | .form-header { 56 | border-bottom: 1px solid #DFDFDF; 57 | height: 45px; 58 | } 59 | 60 | .form-header p { 61 | color: #673AB7; 62 | border-bottom: 2px solid #673AB7; 63 | width: 100px; 64 | text-align: center; 65 | margin-right: auto; 66 | margin-left: auto; 67 | text-transform: uppercase; 68 | height: 45px; 69 | line-height: 45px; 70 | } 71 | 72 | /* corpo formulário */ 73 | .form-body { 74 | padding: 30px; 75 | } 76 | 77 | .form-title { 78 | margin: 0; 79 | } 80 | 81 | .required-field { 82 | color: #D80835; 83 | } 84 | 85 | .box-input { 86 | margin-bottom: 30px; 87 | } 88 | 89 | .block { 90 | display: block; 91 | } 92 | 93 | .optional_box { 94 | display: inline-block; 95 | margin-right: 30px; 96 | } 97 | 98 | .option_list { 99 | padding-left: 0; 100 | } 101 | 102 | .optional_list li { 103 | list-style: none; 104 | } 105 | 106 | .btn-submit { 107 | background-color: #673AB7; 108 | color: #FFF; 109 | border: 2px solid transparent; 110 | width: 150px; 111 | height: 50px; 112 | text-transform: uppercase; 113 | cursor: pointer; 114 | transition: .5s; 115 | } 116 | 117 | .btn-submit:hover { 118 | background-color: #FFF; 119 | border-color: #673AB7; 120 | color: #673AB7; 121 | } -------------------------------------------------------------------------------- /4_PROJETO_FORMULARIO/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Cadastro de Veículos 6 | 7 | 8 | 9 |
10 |
11 |

Cadastre seu veículo para vender muito mais rápido!

12 |
13 |
14 |
15 |

Cadastro

16 |
17 |
18 |

Venda fácil seu veículo!

19 |

Descreva as características do seu veículo e marque todas os opicionais e características que ele possui

20 |
21 |
22 | 26 | 29 |
30 |
31 | 34 | 35 |
36 |
37 | 40 | 50 |
51 |
52 | 55 | 60 |
61 |
62 | 66 | 68 |
69 |
70 | 74 | 76 |
77 |
78 | 82 | 84 |
85 |
86 | 90 | 97 |
98 |
99 |

Câmbio: *

100 | 101 | 102 | 103 | 104 |
105 |
106 |

Opcionais:

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 |

Envie imagens do veículo: *

148 | 155 |
156 | 157 |
158 |
159 |
160 |
161 | 162 | -------------------------------------------------------------------------------- /5_PROJETO_PAGINA_AGENCIA/CONCLUIDO/css/reset.css: -------------------------------------------------------------------------------- 1 | /* http://meyerweb.com/eric/tools/css/reset/ 2 | v2.0 | 20110126 3 | License: none (public domain) 4 | */ 5 | 6 | html, body, div, span, applet, object, iframe, 7 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 8 | a, abbr, acronym, address, big, cite, code, 9 | del, dfn, em, img, ins, kbd, q, s, samp, 10 | small, strike, strong, sub, sup, tt, var, 11 | b, u, i, center, 12 | dl, dt, dd, ol, ul, li, 13 | fieldset, form, label, legend, 14 | table, caption, tbody, tfoot, thead, tr, th, td, 15 | article, aside, canvas, details, embed, 16 | figure, figcaption, footer, header, hgroup, 17 | menu, nav, output, ruby, section, summary, 18 | time, mark, audio, video { 19 | margin: 0; 20 | padding: 0; 21 | border: 0; 22 | font-size: 100%; 23 | font: inherit; 24 | vertical-align: baseline; 25 | } 26 | /* HTML5 display-role reset for older browsers */ 27 | article, aside, details, figcaption, figure, 28 | footer, header, hgroup, menu, nav, section { 29 | display: block; 30 | } 31 | body { 32 | line-height: 1; 33 | } 34 | ol, ul { 35 | list-style: none; 36 | } 37 | blockquote, q { 38 | quotes: none; 39 | } 40 | blockquote:before, blockquote:after, 41 | q:before, q:after { 42 | content: ''; 43 | content: none; 44 | } 45 | table { 46 | border-collapse: collapse; 47 | border-spacing: 0; 48 | } -------------------------------------------------------------------------------- /5_PROJETO_PAGINA_AGENCIA/CONCLUIDO/css/styles.css: -------------------------------------------------------------------------------- 1 | /* general */ 2 | html { 3 | font-family: Helvetica, sans-serif; 4 | } 5 | 6 | /* header */ 7 | .banner { 8 | width: 100%; 9 | height: 600px; 10 | background-image: url('../img/capa2.jpg'); 11 | background-position: center; 12 | position: relative; 13 | } 14 | 15 | .box-container { 16 | width: 400px; 17 | height: 200px; 18 | text-align: center; 19 | position: absolute; 20 | right: 100px; 21 | bottom: 250px; 22 | } 23 | 24 | .box-background { 25 | width: 100%; 26 | height: 100%; 27 | background-color: #000; 28 | opacity: .8; 29 | position: relative; 30 | } 31 | 32 | .box-banner-title { 33 | position: absolute; 34 | width: 100%; 35 | text-align: center; 36 | top: 0; 37 | color: #FFF; 38 | padding-top: 65px; 39 | } 40 | 41 | .box-banner-title h1 { 42 | font-size: 32px; 43 | margin-bottom: 25px; 44 | } 45 | 46 | .box-banner-title p { 47 | font-size: 20px; 48 | } 49 | 50 | .company-info-container { 51 | position: absolute; 52 | bottom: 0; 53 | width: 100%; 54 | height: 175px; 55 | } 56 | 57 | .company-info-background { 58 | background-color: #DDD; 59 | opacity: .9; 60 | width: 100%; 61 | height: 100%; 62 | } 63 | 64 | .company-info-titlebox { 65 | position: absolute; 66 | padding-left: 10%; 67 | top: 40px; 68 | width: 500px; 69 | } 70 | 71 | .company-info-titlebox h2, .company-info-titlebox p { 72 | color: #222; 73 | } 74 | 75 | .company-info-titlebox h2 { 76 | margin-bottom: 30px; 77 | font-size: 24px; 78 | } 79 | 80 | /* Serviços */ 81 | 82 | .services-container { 83 | max-width: 1200px; 84 | padding: 30px 10%; 85 | padding-bottom: 0px; 86 | } 87 | 88 | .service-box { 89 | width: 100%; 90 | position: relative; 91 | clear: both; 92 | height: 150px; 93 | margin-bottom: 30px; 94 | } 95 | 96 | .service-box:last { 97 | margin-bottom: 0px; 98 | } 99 | 100 | .service-title { 101 | width: 20%; 102 | height: 150px; 103 | background-color: #DDD; 104 | float: left; 105 | text-align: center; 106 | line-height: 150px; 107 | padding: 20px; 108 | box-sizing: border-box; 109 | } 110 | 111 | .service-title p { 112 | padding-top: 35px; 113 | color: #FFF; 114 | font-size: 18px; 115 | line-height: 24px; 116 | } 117 | 118 | .service-description { 119 | width: 80%; 120 | float: left; 121 | padding: 30px; 122 | box-sizing: border-box; 123 | } 124 | 125 | .service-description h3 { 126 | margin-bottom: 15px; 127 | font-size: 20px; 128 | font-weight: bold; 129 | } 130 | 131 | .service-description p { 132 | font-size: 14px; 133 | line-height: 22px; 134 | } 135 | 136 | #gerenciamento-box { 137 | background-color: #2364AA 138 | } 139 | 140 | #dev-box { 141 | background-color: #3DA5D9 142 | } 143 | 144 | #design-box { 145 | background-color: #73BFB8 146 | } 147 | 148 | #gerenciamento-title { 149 | color: #2364AA 150 | } 151 | 152 | #dev-title { 153 | color: #3DA5D9 154 | } 155 | 156 | #design-title { 157 | color: #73BFB8 158 | } 159 | 160 | /* Sobre a empresa */ 161 | .footer-container { 162 | background-image: url('../img/rodape.jpg'); 163 | background-position: center; 164 | } 165 | 166 | .about-container { 167 | max-width: 1200px; 168 | padding: 30px 10%; 169 | position: relative; 170 | clear: both; 171 | } 172 | 173 | .about-card { 174 | float: left; 175 | width: 30%; 176 | padding: 30px; 177 | background-color: #FFF; 178 | text-align: center; 179 | box-sizing: border-box; 180 | } 181 | 182 | .middle-card { 183 | margin-left: 5%; 184 | margin-right: 5%; 185 | } 186 | 187 | .about-card i { 188 | font-size: 50px; 189 | color: #AAA; 190 | } 191 | 192 | .about-card p { 193 | margin-top: 50px; 194 | font-size: 14px; 195 | line-height: 22px; 196 | color: #888; 197 | text-align: left; 198 | } 199 | 200 | /* Footer */ 201 | 202 | footer { 203 | clear: both; 204 | max-width: 1200px; 205 | height: 500px; 206 | padding: 30px 10%; 207 | position: relative; 208 | } 209 | 210 | .form-container { 211 | width: 65%; 212 | height: 375px; 213 | position: relative; 214 | display: block; 215 | } 216 | 217 | .form-background { 218 | width: 100%; 219 | height: 100%; 220 | background-color: #FFF; 221 | opacity: .5; 222 | } 223 | 224 | .form-container form { 225 | position: absolute; 226 | top: 30px; 227 | left: 30px; 228 | height: 300px; 229 | } 230 | 231 | .form-container input, .form-container textarea { 232 | width: 400px; 233 | display: block; 234 | border: none; 235 | padding: 10px; 236 | margin-bottom: 15px; 237 | border-bottom: 1px solid #AAA; 238 | border-radius: 0; 239 | background-color: transparent; 240 | } 241 | 242 | .form-container textarea { 243 | height: 120px; 244 | } 245 | 246 | .form-container input::placeholder, .form-container textarea::placeholder { 247 | font-size: 14px; 248 | } 249 | 250 | .form-container .submit { 251 | background-color: #222; 252 | color: #FFF; 253 | border: 1px solid transparent; 254 | width: 100px; 255 | position: relative; 256 | float: right; 257 | cursor: pointer; 258 | transition: .5s; 259 | } 260 | 261 | .form-container .submit:hover { 262 | background-color: #FFF; 263 | color: #222; 264 | border: 1px solid #222; 265 | } 266 | 267 | .copyright { 268 | color: #222; 269 | font-size: 14px; 270 | font-weight: bold; 271 | text-align: center; 272 | position: absolute; 273 | left: 0; 274 | right: 0; 275 | bottom: 30px; 276 | margin-left: auto; 277 | margin-right: auto; 278 | } -------------------------------------------------------------------------------- /5_PROJETO_PAGINA_AGENCIA/CONCLUIDO/img/capa.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusbattisti/curso_html_css_o_inicio/12245abfc4fc54fffe1c3e85f39b5cbb328ed9ce/5_PROJETO_PAGINA_AGENCIA/CONCLUIDO/img/capa.jpg -------------------------------------------------------------------------------- /5_PROJETO_PAGINA_AGENCIA/CONCLUIDO/img/capa2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusbattisti/curso_html_css_o_inicio/12245abfc4fc54fffe1c3e85f39b5cbb328ed9ce/5_PROJETO_PAGINA_AGENCIA/CONCLUIDO/img/capa2.jpg -------------------------------------------------------------------------------- /5_PROJETO_PAGINA_AGENCIA/CONCLUIDO/img/rodape.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusbattisti/curso_html_css_o_inicio/12245abfc4fc54fffe1c3e85f39b5cbb328ed9ce/5_PROJETO_PAGINA_AGENCIA/CONCLUIDO/img/rodape.jpg -------------------------------------------------------------------------------- /5_PROJETO_PAGINA_AGENCIA/CONCLUIDO/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Site Institucional 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 |
14 | 31 |
32 | 33 |
34 |
35 |
36 |
37 |

Gerenciamento de Projetos

38 |
39 |
40 |

Lorem ipsum

41 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam iaculis suscipit ligula et imperdiet. Nunc vulputate mattis lacus, eu lobortis ipsum porta sed.

42 |
43 |
44 |
45 |
46 |

Desenvolvimento

47 |
48 |
49 |

Lorem ipsum

50 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam iaculis suscipit ligula et imperdiet. Nunc vulputate mattis lacus, eu lobortis ipsum porta sed.

51 |
52 |
53 |
54 |
55 |

Design UX/UI

56 |
57 |
58 |

Lorem ipsum

59 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam iaculis suscipit ligula et imperdiet. Nunc vulputate mattis lacus, eu lobortis ipsum porta sed.

60 |
61 |
62 |
63 |
64 | 65 |
66 |
67 |
68 |
69 | 70 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam iaculis suscipit ligula et imperdiet. Nunc vulputate mattis lacus, eu lobortis ipsum porta sed.

71 |
72 |
73 | 74 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam iaculis suscipit ligula et imperdiet. Nunc vulputate mattis lacus, eu lobortis ipsum porta sed.

75 |
76 |
77 | 78 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam iaculis suscipit ligula et imperdiet. Nunc vulputate mattis lacus, eu lobortis ipsum porta sed.

79 |
80 |
81 |
82 | 83 | 97 |
98 |
99 | 100 | -------------------------------------------------------------------------------- /5_PROJETO_PAGINA_AGENCIA/css/reset.css: -------------------------------------------------------------------------------- 1 | /* http://meyerweb.com/eric/tools/css/reset/ 2 | v2.0 | 20110126 3 | License: none (public domain) 4 | */ 5 | 6 | html, body, div, span, applet, object, iframe, 7 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 8 | a, abbr, acronym, address, big, cite, code, 9 | del, dfn, em, img, ins, kbd, q, s, samp, 10 | small, strike, strong, sub, sup, tt, var, 11 | b, u, i, center, 12 | dl, dt, dd, ol, ul, li, 13 | fieldset, form, label, legend, 14 | table, caption, tbody, tfoot, thead, tr, th, td, 15 | article, aside, canvas, details, embed, 16 | figure, figcaption, footer, header, hgroup, 17 | menu, nav, output, ruby, section, summary, 18 | time, mark, audio, video { 19 | margin: 0; 20 | padding: 0; 21 | border: 0; 22 | font-size: 100%; 23 | font: inherit; 24 | vertical-align: baseline; 25 | } 26 | /* HTML5 display-role reset for older browsers */ 27 | article, aside, details, figcaption, figure, 28 | footer, header, hgroup, menu, nav, section { 29 | display: block; 30 | } 31 | body { 32 | line-height: 1; 33 | } 34 | ol, ul { 35 | list-style: none; 36 | } 37 | blockquote, q { 38 | quotes: none; 39 | } 40 | blockquote:before, blockquote:after, 41 | q:before, q:after { 42 | content: ''; 43 | content: none; 44 | } 45 | table { 46 | border-collapse: collapse; 47 | border-spacing: 0; 48 | } -------------------------------------------------------------------------------- /5_PROJETO_PAGINA_AGENCIA/css/styles.css: -------------------------------------------------------------------------------- 1 | /* general */ 2 | html { 3 | font-family: Helvetica, sans-serif; 4 | } 5 | 6 | /* header */ 7 | .banner { 8 | width: 100%; 9 | height: 600px; 10 | background-image: url('../img/capa2.jpg'); 11 | background-position: center; 12 | position: relative; 13 | } 14 | 15 | .box-container { 16 | width: 400px; 17 | height: 200px; 18 | text-align: center; 19 | position: absolute; 20 | right: 100px; 21 | bottom: 250px; 22 | } 23 | 24 | .box-background { 25 | width: 100%; 26 | height: 100%; 27 | background-color: #000; 28 | opacity: .8; 29 | position: relative; 30 | } 31 | 32 | .box-banner-title { 33 | position: absolute; 34 | width: 100%; 35 | text-align: center; 36 | top: 0; 37 | color: #FFF; 38 | padding-top: 65px; 39 | } 40 | 41 | .box-banner-title h1 { 42 | font-size: 32px; 43 | margin-bottom: 25px; 44 | } 45 | 46 | .box-banner-title p { 47 | font-size: 20px; 48 | } 49 | 50 | .company-info-container { 51 | position: absolute; 52 | bottom: 0; 53 | width: 100%; 54 | height: 175px; 55 | } 56 | 57 | .company-info-background { 58 | width: 100%; 59 | height: 100%; 60 | background-color: #DDD; 61 | opacity: .9; 62 | } 63 | 64 | .company-info-titlebox { 65 | position: absolute; 66 | padding-left: 10%; 67 | top: 40px; 68 | width: 500px; 69 | } 70 | 71 | .company-info-titlebox h2, .company-info-titlebox p { 72 | color: #222; 73 | } 74 | 75 | .company-info-titlebox h2 { 76 | margin-bottom: 30px; 77 | font-size: 24px; 78 | } 79 | 80 | /* Serviços */ 81 | 82 | .services-container { 83 | max-width: 1200px; 84 | padding: 30px 10%; 85 | padding-bottom: 0; 86 | } 87 | 88 | .service-box { 89 | width: 100%; 90 | position: relative; 91 | clear: both; 92 | height: 150px; 93 | margin-bottom: 30px; 94 | } 95 | 96 | .service-box:last { 97 | margin-bottom: 0; 98 | } 99 | 100 | .service-title { 101 | width: 20%; 102 | height: 150px; 103 | background-color: #DDD; 104 | float: left; 105 | text-align: center; 106 | line-height: 150px; 107 | padding: 20px; 108 | box-sizing: border-box; 109 | } 110 | 111 | .service-title p { 112 | padding-top: 35px; 113 | color: #FFF; 114 | font-size: 18px; 115 | line-height: 24px; 116 | } 117 | 118 | .service-description { 119 | width: 80%; 120 | float: left; 121 | padding: 30px; 122 | box-sizing: border-box; 123 | } 124 | 125 | .service-description h3 { 126 | font-size: 20px; 127 | margin-bottom: 15px; 128 | font-weight: bold; 129 | } 130 | 131 | .service-description p { 132 | font-size: 14px; 133 | line-height: 22px; 134 | } 135 | 136 | #gerenciamento-title { 137 | color: #2364AA; 138 | } 139 | 140 | #dev-title { 141 | color: #3DA5D9; 142 | } 143 | 144 | #design-title { 145 | color: #73BFB8; 146 | } 147 | 148 | #gerenciamento-box { 149 | background-color: #2364AA; 150 | } 151 | 152 | #dev-box { 153 | background-color: #3DA5D9; 154 | } 155 | 156 | #design-box { 157 | background-color: #73BFB8; 158 | } 159 | 160 | /* Sobre a empresa */ 161 | .footer-container { 162 | background-image: url('../img/rodape.jpg'); 163 | background-position: center; 164 | } 165 | 166 | .about-container { 167 | max-width: 1200px; 168 | padding: 30px 10%; 169 | position: relative; 170 | clear: both; 171 | } 172 | 173 | .about-card { 174 | float: left; 175 | width: 30%; 176 | padding: 30px; 177 | background-color: #FFF; 178 | text-align: center; 179 | box-sizing: border-box; 180 | } 181 | 182 | .middle-card { 183 | margin-left: 5%; 184 | margin-right: 5%; 185 | } 186 | 187 | .about-card i { 188 | font-size: 50px; 189 | color: #AAA; 190 | } 191 | 192 | .about-card p { 193 | margin-top: 50px; 194 | font-size: 14px; 195 | line-height: 22px; 196 | color: #888; 197 | text-align: left; 198 | } 199 | 200 | /* footer */ 201 | footer { 202 | clear: both; 203 | max-width: 1200px; 204 | height: 500px; 205 | padding: 30px 10%; 206 | position: relative; 207 | } 208 | 209 | .form-container { 210 | width: 65%; 211 | height: 375px; 212 | position: relative; 213 | display: block; 214 | } 215 | 216 | .form-background { 217 | width: 100%; 218 | height: 100%; 219 | background-color: #FFF; 220 | opacity: .5; 221 | } 222 | 223 | .form-container form { 224 | position: absolute; 225 | top: 30px; 226 | left: 30px; 227 | height: 300px; 228 | } 229 | 230 | .form-container input, .form-container textarea { 231 | width: 400px; 232 | display: block; 233 | border: none; 234 | padding: 10px; 235 | margin-bottom: 15px; 236 | border-bottom: 1px solid #AAA; 237 | border-radius: 0; 238 | background-color: transparent; 239 | } 240 | 241 | .form-container textarea { 242 | height: 120px; 243 | } 244 | 245 | .form-container input::placeholder, .form-container textarea::placeholder { 246 | font-size: 14px; 247 | } 248 | 249 | .form-container .submit { 250 | background-color: #222; 251 | color: #FFF; 252 | border: 1px solid transparent; 253 | width: 100px; 254 | position: relative; 255 | float: right; 256 | cursor: pointer; 257 | transition: .5s 258 | } 259 | 260 | .form-container .submit:hover { 261 | background-color: #FFF; 262 | color: #222; 263 | border: 1px solid #222; 264 | } 265 | 266 | .copyright { 267 | color: #222; 268 | font-size: 14px; 269 | font-weight: bold; 270 | text-align: center; 271 | position: absolute; 272 | left: 0; 273 | right: 0; 274 | bottom: 30px; 275 | margin-left: auto; 276 | margin-right: auto; 277 | } -------------------------------------------------------------------------------- /5_PROJETO_PAGINA_AGENCIA/img/capa.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusbattisti/curso_html_css_o_inicio/12245abfc4fc54fffe1c3e85f39b5cbb328ed9ce/5_PROJETO_PAGINA_AGENCIA/img/capa.jpg -------------------------------------------------------------------------------- /5_PROJETO_PAGINA_AGENCIA/img/capa2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusbattisti/curso_html_css_o_inicio/12245abfc4fc54fffe1c3e85f39b5cbb328ed9ce/5_PROJETO_PAGINA_AGENCIA/img/capa2.jpg -------------------------------------------------------------------------------- /5_PROJETO_PAGINA_AGENCIA/img/rodape.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusbattisti/curso_html_css_o_inicio/12245abfc4fc54fffe1c3e85f39b5cbb328ed9ce/5_PROJETO_PAGINA_AGENCIA/img/rodape.jpg -------------------------------------------------------------------------------- /5_PROJETO_PAGINA_AGENCIA/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Site Institucional 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 |
14 | 30 |
31 | 32 |
33 |
34 |
35 |
36 |

Gerenciamento de Projetos

37 |
38 |
39 |

Lorem ipsum

40 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam iaculis suscipit ligula et imperdiet. Nunc vulputate mattis lacus, eu lobortis ipsum porta sed.

41 |
42 |
43 |
44 |
45 |

Desenvolvimento

46 |
47 |
48 |

Lorem ipsum

49 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam iaculis suscipit ligula et imperdiet. Nunc vulputate mattis lacus, eu lobortis ipsum porta sed.

50 |
51 |
52 |
53 |
54 |

Design UX/UI

55 |
56 |
57 |

Lorem ipsum

58 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam iaculis suscipit ligula et imperdiet. Nunc vulputate mattis lacus, eu lobortis ipsum porta sed.

59 |
60 |
61 |
62 |
63 | 64 |
65 |
66 |
67 |
68 | 69 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam iaculis suscipit ligula et imperdiet. Nunc vulputate mattis lacus, eu lobortis ipsum porta sed.

70 |
71 |
72 | 73 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam iaculis suscipit ligula et imperdiet. Nunc vulputate mattis lacus, eu lobortis ipsum porta sed.

74 |
75 |
76 | 77 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam iaculis suscipit ligula et imperdiet. Nunc vulputate mattis lacus, eu lobortis ipsum porta sed.

78 |
79 |
80 |
81 | 95 |
96 |
97 | 98 | -------------------------------------------------------------------------------- /6_PROJETO_GOOGLE/CONCLUIDO/css/styles.css: -------------------------------------------------------------------------------- 1 | /* Geral */ 2 | 3 | body { 4 | font-family: arial, sans-serif; 5 | font-size: 13px; 6 | margin: 0; 7 | } 8 | 9 | /* Barras de navegação */ 10 | 11 | #navbar { 12 | margin-top: 20px; 13 | } 14 | 15 | .nav-list { 16 | padding: 0 25px; 17 | } 18 | 19 | .nav-list li { 20 | display: inline-block; 21 | list-style: none; 22 | padding: 5px 10px; 23 | } 24 | 25 | .nav-list li a { 26 | color: #5f6368; 27 | text-decoration: none; 28 | font-size: 13px; 29 | } 30 | 31 | .nav-list li a:hover { 32 | text-decoration: underline; 33 | } 34 | 35 | #social-bar { 36 | text-align: right; 37 | } 38 | 39 | /* corpo do site */ 40 | 41 | #body { 42 | text-align: center; 43 | } 44 | 45 | #google-logo { 46 | padding-top: 7%; 47 | margin-bottom: 25px; 48 | } 49 | 50 | #input-box { 51 | width: 43vw; 52 | height: 60px; 53 | position: relative; 54 | margin-left: auto; 55 | margin-right: auto; 56 | } 57 | 58 | #search-input { 59 | height: 48px; 60 | border-radius: 24px; 61 | width: 100%; 62 | box-sizing: border-box; 63 | font-size: 16px; 64 | padding: 0 50px; 65 | border: 1px solid #DFDFDF; 66 | box-shadow: 0px 0px 5px #DDD; 67 | } 68 | 69 | #search-icon, #keyboard-icon, #mic-icon { 70 | position: absolute; 71 | top: 15px; 72 | font-size: 18px; 73 | } 74 | 75 | #search-icon { 76 | left: 20px; 77 | } 78 | 79 | #keyboard-icon { 80 | right: 55px 81 | } 82 | 83 | #mic-icon { 84 | right: 20px 85 | } 86 | 87 | #body input[type="submit"] { 88 | background-color: #F2F2F2; 89 | border: 1px solid #F2F2F2; 90 | border-radius: 4px; 91 | color: #5f6368; 92 | height: 34px; 93 | padding: 0 16px; 94 | font-size: 14px; 95 | margin: 15px 5px; 96 | } 97 | 98 | /* Rodapé */ 99 | 100 | footer { 101 | position: absolute; 102 | display: block; 103 | box-sizing: border-box; 104 | bottom: 0; 105 | height: 42px; 106 | width: 100%; 107 | background-color: #F2F2F2; 108 | border-top: 1px solid #E4E4E4; 109 | } 110 | 111 | #left-bar, #right-bar { 112 | display: inline-block; 113 | margin-top: 8px; 114 | margin-bottom: 0; 115 | } 116 | 117 | #left-bar { 118 | text-align: left; 119 | } 120 | 121 | #right-bar { 122 | position: absolute; 123 | right: 0; 124 | } -------------------------------------------------------------------------------- /6_PROJETO_GOOGLE/CONCLUIDO/img/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusbattisti/curso_html_css_o_inicio/12245abfc4fc54fffe1c3e85f39b5cbb328ed9ce/6_PROJETO_GOOGLE/CONCLUIDO/img/favicon.ico -------------------------------------------------------------------------------- /6_PROJETO_GOOGLE/CONCLUIDO/img/google_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusbattisti/curso_html_css_o_inicio/12245abfc4fc54fffe1c3e85f39b5cbb328ed9ce/6_PROJETO_GOOGLE/CONCLUIDO/img/google_logo.png -------------------------------------------------------------------------------- /6_PROJETO_GOOGLE/CONCLUIDO/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Google 6 | 7 | 8 | 9 | 10 | 11 | 12 | 20 |
21 | 22 |
23 |
24 | 25 | 26 | 27 | 28 |
29 |
30 | 31 | 32 |
33 |
34 |
35 | 48 | 49 | -------------------------------------------------------------------------------- /6_PROJETO_GOOGLE/css/styles.css: -------------------------------------------------------------------------------- 1 | /* Geral */ 2 | 3 | body { 4 | font-family: Arial, sans-serif; 5 | font-size: 13px; 6 | margin: 0; 7 | } 8 | 9 | /* Barra de navegação */ 10 | 11 | #navbar { 12 | margin-top: 20px; 13 | } 14 | 15 | .nav-list { 16 | padding: 0 25px; 17 | } 18 | 19 | .nav-list li { 20 | display: inline-block; 21 | list-style: none; 22 | padding: 5px 10px; 23 | } 24 | 25 | .nav-list li a { 26 | color: #5F6368; 27 | text-decoration: none; 28 | } 29 | 30 | .nav-list li a:hover { 31 | text-decoration: underline; 32 | } 33 | 34 | #social-bar { 35 | text-align: right; 36 | } 37 | 38 | /* Corpo do site */ 39 | 40 | #body { 41 | text-align: center; 42 | } 43 | 44 | #google-logo { 45 | padding-top: 7%; 46 | margin-bottom: 25px; 47 | } 48 | 49 | #input-box { 50 | width: 43vw; /* view width */ 51 | height: 60px; 52 | position: relative; 53 | margin-left: auto; 54 | margin-right: auto; 55 | } 56 | 57 | #search-input { 58 | height: 48px; 59 | border-radius: 24px; 60 | width: 100%; 61 | box-sizing: border-box; 62 | font-size: 16px; 63 | padding: 0 50px; 64 | border: 1px solid #DFDFDF; 65 | box-shadow: 0px 0px 5px #DDD; 66 | } 67 | 68 | #search-icon, #keyboard-icon, #mic-icon { 69 | position: absolute; 70 | top: 15px; 71 | font-size: 18px; 72 | } 73 | 74 | #search-icon { 75 | left: 20px; 76 | } 77 | 78 | #keyboard-icon { 79 | right: 55px; 80 | } 81 | 82 | #mic-icon { 83 | right: 20px; 84 | } 85 | 86 | #body input[type="submit"] { 87 | background-color: #F2F2F2; 88 | border: 1px solid #F2F2F2; 89 | border-radius: 4px; 90 | color: #5F6368; 91 | height: 34px; 92 | padding: 0 16px; 93 | font-size: 14px; 94 | margin: 15px 5px; 95 | cursor: pointer; 96 | } 97 | 98 | #body input[type="submit"]:hover { 99 | color: #333; 100 | border-color: #333; 101 | } 102 | 103 | /* Footer - rodapé */ 104 | 105 | footer { 106 | position: absolute; 107 | display: block; 108 | box-sizing: border-box; 109 | bottom: 0; 110 | height: 42px; 111 | width: 100%; 112 | background-color: #F2F2F2; 113 | border-top: 1px solid #E4E4E4; 114 | } 115 | 116 | #left-bar, #right-bar { 117 | display: inline-block; 118 | margin-top: 8px; 119 | margin-bottom: 0; 120 | } 121 | 122 | #right-bar { 123 | position: absolute; 124 | right: 0; 125 | } -------------------------------------------------------------------------------- /6_PROJETO_GOOGLE/img/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusbattisti/curso_html_css_o_inicio/12245abfc4fc54fffe1c3e85f39b5cbb328ed9ce/6_PROJETO_GOOGLE/img/favicon.ico -------------------------------------------------------------------------------- /6_PROJETO_GOOGLE/img/google_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusbattisti/curso_html_css_o_inicio/12245abfc4fc54fffe1c3e85f39b5cbb328ed9ce/6_PROJETO_GOOGLE/img/google_logo.png -------------------------------------------------------------------------------- /6_PROJETO_GOOGLE/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Google 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 24 |
25 |
26 | 27 |
28 |
29 | 30 | 31 | 32 | 33 |
34 |
35 | 36 | 37 |
38 |
39 |
40 | 53 | 54 | -------------------------------------------------------------------------------- /7_PROJETO_PAGINA_DE_CONTATO/arquivos.rar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusbattisti/curso_html_css_o_inicio/12245abfc4fc54fffe1c3e85f39b5cbb328ed9ce/7_PROJETO_PAGINA_DE_CONTATO/arquivos.rar -------------------------------------------------------------------------------- /7_PROJETO_PAGINA_DE_CONTATO/arquivos/arquivos.rar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusbattisti/curso_html_css_o_inicio/12245abfc4fc54fffe1c3e85f39b5cbb328ed9ce/7_PROJETO_PAGINA_DE_CONTATO/arquivos/arquivos.rar -------------------------------------------------------------------------------- /7_PROJETO_PAGINA_DE_CONTATO/arquivos/css/styles.css: -------------------------------------------------------------------------------- 1 | /* GERAL */ 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | font-family: Arial; 7 | box-sizing: border-box; 8 | } 9 | 10 | /* CONTAINERS */ 11 | 12 | #main-container { 13 | display: flex; 14 | flex-direction: row; 15 | height: 100vh; /* view height */ 16 | } 17 | 18 | #address-container, #form-container { 19 | flex: 1 1 0; 20 | height: 100%; 21 | text-align: left; 22 | } 23 | 24 | /* ADDRESS CONTAINER */ 25 | 26 | #address-container { 27 | background-image: url('../img/project_bg.jpg'); 28 | background-size: cover; 29 | background-position-x: -130px; 30 | color: #FFF; 31 | position: relative; 32 | } 33 | 34 | .fade { 35 | width: 100%; 36 | height: 100%; 37 | background: #000; 38 | opacity: .7; 39 | } 40 | 41 | #address-content { 42 | position: absolute; 43 | top: 25vh; 44 | left: 35%; 45 | width: 300px; 46 | } 47 | 48 | #address-content h2 { 49 | color: #00AD5E; 50 | margin-bottom: 15px; 51 | position: relative; 52 | padding-left: 40px; 53 | } 54 | 55 | #address-content ion-icon { 56 | position: absolute; 57 | top: 2px; 58 | left: 0; 59 | } 60 | 61 | #address-content p { 62 | font-weight: bold; 63 | margin-bottom: 50px; 64 | } 65 | 66 | /* FORM CONTAINER */ 67 | #form-container { 68 | padding-top: 60px; 69 | text-align: center; 70 | } 71 | 72 | #form-container h2 { 73 | color: #888; 74 | margin-bottom: 50px; 75 | font-size: 30px; 76 | } 77 | 78 | #contact-form { 79 | width: 500px; 80 | margin-left: auto; 81 | margin-right: auto; 82 | text-align: left; 83 | } 84 | 85 | #contact-form input, 86 | #contact-form label, 87 | #contact-form textarea { 88 | display: block; 89 | padding: 10px; 90 | border: 1px solid #EEE; 91 | width: 100%; 92 | color: #AAA; 93 | } 94 | 95 | #contact-form label { 96 | color: #999; 97 | font-weight: bold; 98 | border-bottom: none; 99 | } 100 | 101 | #contact-form input { 102 | margin-bottom: 15px; 103 | } 104 | 105 | #contact-form input::placeholder, 106 | #contact-form textarea::placeholder { 107 | color: #BBB; 108 | } 109 | 110 | #contact-form input[type="submit"] { 111 | background-color: #00AD5E; 112 | color: #FFF; 113 | font-size: 16px; 114 | font-weight: bold; 115 | cursor: pointer; 116 | width: 300px; 117 | margin: 30px auto; 118 | border: 2px solid transparent; 119 | transition: .5s; 120 | } 121 | 122 | #contact-form input[type="submit"]:hover { 123 | border-color: #00AD5E; 124 | color: #00AD5E; 125 | background-color: #FFF; 126 | } 127 | 128 | /* RESPONSIVO */ 129 | 130 | @media(max-width: 450px) { 131 | 132 | #main-container { 133 | height: 100%; 134 | flex-wrap: wrap; 135 | } 136 | 137 | #form-container, 138 | #address-container { 139 | flex: 1 1 100%; 140 | } 141 | 142 | #form-container { 143 | order: -1; 144 | padding: 20px; 145 | } 146 | 147 | #form-container h2 { 148 | margin-bottom: 25px; 149 | } 150 | 151 | #contact-form { 152 | width: 100%; 153 | } 154 | 155 | #contact-form input, 156 | #contact-form label, 157 | #contact-form textarea { 158 | border-color: #AAA; 159 | } 160 | 161 | #address-container { 162 | background-position: 0; 163 | height: 500px; 164 | } 165 | 166 | .fade { 167 | opacity: .9; 168 | } 169 | 170 | #address-content { 171 | top: 25%; 172 | left: 25%; 173 | } 174 | 175 | } -------------------------------------------------------------------------------- /7_PROJETO_PAGINA_DE_CONTATO/arquivos/img/project_bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusbattisti/curso_html_css_o_inicio/12245abfc4fc54fffe1c3e85f39b5cbb328ed9ce/7_PROJETO_PAGINA_DE_CONTATO/arquivos/img/project_bg.jpg -------------------------------------------------------------------------------- /7_PROJETO_PAGINA_DE_CONTATO/arquivos/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Contato 7 | 8 | 9 | 10 |
11 | 12 |
13 |
14 |
15 |

Endereço

16 |

Rua das Flores, 133

17 |

Telefone

18 |

(48)9999-9999

19 |

E-mail

20 |

meuemail@email.com

21 |
22 |
23 | 24 |
25 |

Nos mande uma mensagem!

26 |
27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 |
37 |
38 |
39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /7_PROJETO_PAGINA_DE_CONTATO/ref/css/styles.css: -------------------------------------------------------------------------------- 1 | /* GENERAL */ 2 | * { 3 | margin: 0; 4 | padding: 0; 5 | box-sizing: border-box; 6 | font-family: Arial; 7 | } 8 | 9 | /* CONTAINERS */ 10 | #main-container { 11 | display: flex; 12 | flex-direction: row; 13 | height: 100vh; 14 | } 15 | 16 | #address-container, #form-container { 17 | flex: 1 1 0; 18 | height: 100%; 19 | text-align: center; 20 | } 21 | 22 | /* ADDRESS CONTAINER */ 23 | #address-container { 24 | background-image: url('../img/project_bg.jpg'); 25 | background-size: cover; 26 | background-position-x: -130px; 27 | color: #FFF; 28 | position: relative; 29 | } 30 | 31 | .fade { 32 | width: 100%; 33 | height: 100%; 34 | background-color: #000; 35 | opacity: .7; 36 | } 37 | 38 | #address-content { 39 | width: 300px; 40 | text-align: left; 41 | top: 25vh; 42 | left: 35%; 43 | position: absolute; 44 | } 45 | 46 | #address-content h2 { 47 | color: #00AD5E; 48 | margin-bottom: 15px; 49 | position: relative; 50 | padding-left: 40px; 51 | } 52 | 53 | #address-content ion-icon { 54 | position: absolute; 55 | top: 2px; 56 | left: 0; 57 | } 58 | 59 | #address-content p { 60 | margin-bottom: 50px; 61 | font-weight: bold; 62 | } 63 | 64 | /* FORM CONTAINER */ 65 | #form-container { 66 | padding-top: 60px; 67 | } 68 | 69 | #form-container h2 { 70 | margin-bottom: 50px; 71 | color: #888; 72 | font-size: 30px; 73 | } 74 | 75 | #contact-form { 76 | text-align: left; 77 | width: 500px; 78 | margin-left: auto; 79 | margin-right: auto; 80 | } 81 | 82 | #contact-form label, 83 | #contact-form input, 84 | #contact-form textarea { 85 | display: block; 86 | padding: 10px; 87 | border: 1px solid #EEE; 88 | width: 100%; 89 | color: #AAA; 90 | } 91 | 92 | #contact-form label { 93 | color: #999; 94 | font-weight: bold; 95 | border-bottom: none; 96 | } 97 | 98 | #contact-form input { 99 | margin-bottom: 15px; 100 | } 101 | 102 | #contact-form input::placeholder, 103 | #contact-form textarea::placeholder { 104 | color: #CCC; 105 | } 106 | 107 | #contact-form input[type="submit"] { 108 | background-color: #00AD5E; 109 | color: #FFF; 110 | font-size: 16px; 111 | font-weight: bold; 112 | cursor: pointer; 113 | width: 300px; 114 | margin: 30px auto; 115 | border: 2px solid transparent; 116 | transition: .5s; 117 | } 118 | 119 | 120 | #contact-form input[type="submit"]:hover { 121 | border-color: #00AD5E; 122 | color: #00AD5E; 123 | background-color: #FFF; 124 | } 125 | 126 | /* MOBILE */ 127 | 128 | @media(max-width:450px) { 129 | 130 | #main-container { 131 | height: 100%; 132 | flex-wrap: wrap; 133 | } 134 | 135 | #form-container, 136 | #address-container { 137 | flex: 1 1 100%; 138 | } 139 | 140 | #form-container { 141 | order: -1; 142 | padding: 20px; 143 | } 144 | 145 | #form-container h2 { 146 | margin-bottom: 25px; 147 | } 148 | 149 | #contact-form { 150 | width: 100%; 151 | } 152 | 153 | #contact-form label, 154 | #contact-form input, 155 | #contact-form textarea { 156 | border-color: #AAA; 157 | } 158 | 159 | #address-container { 160 | background-position: 0; 161 | height: 500px; 162 | } 163 | 164 | .fade { 165 | opacity: .9; 166 | } 167 | 168 | #address-content { 169 | top: 25%; 170 | left: 25%; 171 | } 172 | 173 | } -------------------------------------------------------------------------------- /7_PROJETO_PAGINA_DE_CONTATO/ref/img/project_bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusbattisti/curso_html_css_o_inicio/12245abfc4fc54fffe1c3e85f39b5cbb328ed9ce/7_PROJETO_PAGINA_DE_CONTATO/ref/img/project_bg.jpg -------------------------------------------------------------------------------- /7_PROJETO_PAGINA_DE_CONTATO/ref/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Contato 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 |

Endereço

16 |

Rua das Flores, 133

17 |

Telefone

18 |

(48)9999-2020

19 |

E-mail

20 |

mandeumemail@email.com

21 |
22 |
23 |
24 |

Nos mande uma mensagem!

25 |
26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 |
36 |
37 |
38 | 39 | 40 | --------------------------------------------------------------------------------