├── CodePark-01
└── src
│ ├── script.js
│ ├── img
│ └── perfil.png
│ ├── style.css
│ └── index.html
└── README.md
/CodePark-01/src/script.js:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/CodePark-01/src/img/perfil.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/profRobsonPMartins/CodePark-01/HEAD/CodePark-01/src/img/perfil.png
--------------------------------------------------------------------------------
/CodePark-01/src/style.css:
--------------------------------------------------------------------------------
1 | *{
2 | margin: 0;
3 | padding: 0;
4 | }
5 | main{
6 | text-align: center;
7 | }
8 | /* Estilos para o formulário */
9 | .form {
10 | max-width: 400px;
11 | margin: 0 auto;
12 | padding: 20px;
13 | border: 1px solid #ccc;
14 | border-radius: 5px;
15 | background-color: #f9f9f9;
16 | }
17 | .form .img{
18 | text-align: center;
19 | }
20 |
21 | h1 {
22 | text-align: center;
23 | color: #333;
24 | }
25 |
26 | label {
27 | display: block;
28 | margin-bottom: 8px;
29 | color: #555;
30 | }
31 |
32 | input[type="text"],
33 | input[type="email"] {
34 | width: 100%;
35 | padding: 8px;
36 | margin-bottom: 10px;
37 | box-sizing: border-box;
38 | border: 1px solid #ccc;
39 | border-radius: 4px;
40 | }
41 |
42 | input[type="submit"] {
43 | background-color: #4caf50;
44 | color: white;
45 | padding: 10px 15px;
46 | border: none;
47 | border-radius: 4px;
48 | cursor: pointer;
49 | }
50 |
51 | input[type="submit"]:hover {
52 | background-color: #45a049;
53 | }
--------------------------------------------------------------------------------
/CodePark-01/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | CodePark-01
8 |
16 |
17 |
18 |
19 |
20 |
21 | Título Principal
22 | Este é um parágrafo de exemplo.
23 | Texto em negrito.
24 |
25 |
26 |
27 |
28 |
44 |
45 |
48 |
49 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | **Projeto Desenvolvimento 1 #97731 - README**
2 |
3 | **Turma 2ºB - E.E Yollanda Araújo Silva Paiva**
4 |
5 | **Reposição - HTML/CSS - Joyclass**
6 | # Introdução 🚀
7 |
8 | Este repositório foi criado como parte do Projeto Desenvolvimento 1, número de issue #97731.
9 | O objetivo principal deste projeto é fornecer exemplos práticos de utilização das tags mais comuns em HTML,
10 | abrangendo metadados, separação de conteúdo, texto, imagem e formulários.
11 | Este README oferece uma visão geral do conteúdo disponível neste repositório e como utilizá-lo.
12 |
13 | # Estrutura do Repositório 📁
14 |
15 | O repositório está organizado da seguinte forma:
16 |
17 | - **metadados**: Contém exemplos de utilização de tags relacionadas a metadados HTML.
18 | - **separacao-de-conteudo**: Demonstração de técnicas para a separação eficaz de conteúdo na página.
19 | - **texto**: Exemplos envolvendo manipulação e apresentação de texto em HTML.
20 | - **imagem**: Demonstração de tags relacionadas a imagens.
21 | - **formulario**: Exemplos práticos para criar formulários HTML.
22 |
23 | Cada diretório acima contém pelo menos dois exemplos correspondentes ao tipo de conteúdo especificado.
24 |
25 | # Como Utilizar 🛠️
26 |
27 | Para explorar os exemplos fornecidos, basta navegar nos diretórios mencionados acima. Cada diretório contém arquivos HTML com código exemplar e, se aplicável, arquivos adicionais (como imagens) para ilustrar os conceitos.
28 |
29 | ## Exemplo de Metadados 📄
30 |
31 | ```html
32 |
33 |
34 |
35 | Metadados HTML
39 |
40 |
41 |
42 |
43 |
44 | ```
45 |
46 | ## Exemplo de Separação de Conteúdo 📑
47 |
48 | ```html
49 |
50 |
51 |
52 | Separação de Conteúdo
55 |
56 |
57 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
69 |
70 |
71 | ```
72 |
73 | ## Exemplo de Texto 📝
74 |
75 | ```html
76 |
77 |
78 |
79 | Exemplo de Texto HTML
82 |
83 |
84 | Título Principal
85 | Este é um parágrafo de exemplo.
86 | Texto em negrito.
87 |
88 |
89 | ```
90 |
91 | ## Exemplo de Imagem 🖼️
92 |
93 | ```html
94 |
95 |
96 |
97 | Exemplo de Imagem HTML
100 |
101 |
102 | Imagem Incorporada
103 | Exemplo de Formulário HTML
117 |
118 |
119 | Formulário de Contato
120 |
129 |
130 |
131 | ```
132 |
133 | Sinta-se à vontade para explorar e adaptar esses exemplos conforme necessário para atender aos requisitos específicos do seu projeto.
134 | Se surgirem dúvidas ou problemas, não hesite em abrir uma nova issue para discussão.
135 | Agradecemos sua participação no desenvolvimento deste projeto! 🎉
136 |
--------------------------------------------------------------------------------
32 | 
104 |
105 |
106 | ```
107 |
108 | ## Exemplo de Formulário 📬
109 |
110 | ```html
111 |
112 |
113 |
114 |
115 |
116 |