-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
164 lines (152 loc) · 7.36 KB
/
Copy pathindex.html
File metadata and controls
164 lines (152 loc) · 7.36 KB
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
<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Portal Escolar | MiniHacka P3 Informática</title>
<meta name="description" content="Um portal para publicar posts, artigos, atividades, avisos, feiras, votações de líderes e solicitações de materiais para projetos dos alunos." />
<meta name="theme-color" content="#2937a3" />
<link rel="stylesheet" href="styles.css" />
</head>
<body style="--primary: #2937a3; --secondary: #00a676; --accent: #ef8354;">
<header class="site-header">
<a class="brand" href="#inicio" aria-label="Portal Escolar">
<span class="brand-mark">07</span>
<span>Portal</span>
</a>
<nav aria-label="Navegação principal">
<a href="#recursos">Recursos</a>
<a href="#exemplos">Exemplos</a>
<a href="#previa">Prévia</a>
<a href="#equipe">Equipe</a>
</nav>
</header>
<main>
<section class="hero" id="inicio">
<div class="hero-copy">
<h1>Portal Escolar</h1>
<p class="tagline">Posts, avisos, votações e projetos estudantis em um portal.</p>
<p>Um portal para publicar posts, artigos, atividades, avisos, feiras, votações de líderes e solicitações de materiais para projetos dos alunos.</p>
<div class="hero-actions">
<a class="button button-primary" href="#previa">Explorar portal</a>
<a class="button button-secondary" href="#equipe">Conhecer equipe</a>
</div>
<ol class="step-list" aria-label="Fluxo principal">
<li>Publicar conteúdo</li><li>Participar de votação</li><li>Solicitar material</li>
</ol>
</div>
<div class="hero-media" aria-label="Visual do projeto">
<img src="assets/visual.svg" alt="Prévia visual do site Portal Escolar" />
</div>
</section>
<section class="section" id="recursos">
<div class="section-heading">
<span>Projeto da equipe 07</span>
<h2>Exemplos para centralizar comunicação e participação estudantil.</h2>
</div>
<div class="feature-grid">
<article class="feature-card">
<span class="feature-index">01</span>
<h3>Conteúdos da turma</h3>
<p>Posts e atividades ajudam estudantes que faltaram a acompanhar a rotina.</p>
</article>
<article class="feature-card">
<span class="feature-index">02</span>
<h3>Votações escolares</h3>
<p>Eleições para líderes, conselheiros e grêmio podem ser organizadas no portal.</p>
</article>
<article class="feature-card">
<span class="feature-index">03</span>
<h3>Projetos e materiais</h3>
<p>Solicitações de insumos apoiam ideias estudantis e feiras.</p>
</article>
</div>
</section>
<section class="section examples-section" id="exemplos">
<div class="section-heading">
<span>Exemplos de uso</span>
<h2>Dados fictícios para mostrar como a ideia funcionaria.</h2>
</div>
<div class="examples-grid">
<article class="example-card">
<h3>Post de atividade</h3>
<p>Aluno que faltou consulta resumo da aula, anexo e tarefa pendente.</p>
</article>
<article class="example-card">
<h3>Votação de líder</h3>
<p>Candidatos, prazo e resultado parcial ficam em um espaço organizado.</p>
</article>
<article class="example-card">
<h3>Pedido de materiais</h3>
<p>Projetos estudantis registram insumos necessários para análise.</p>
</article>
</div>
</section>
<section class="section preview-section" id="previa">
<div class="preview-copy">
<span>Prévia interativa</span>
<h2>Troque o cenário e veja um exemplo da proposta.</h2>
<p data-demo-summary>Post fictício reúne conteúdo, atividade e aviso para quem faltou.</p>
<div class="chip-row" aria-label="Opções da prévia">
<button class="chip is-active" type="button" data-scenario-title="Resumo da aula de Redes" data-scenario-summary="Post fictício reúne conteúdo, atividade e aviso para quem faltou." data-scenario-meta="Publicado pela turma" data-scenario-detail="O portal ajuda estudantes a recuperar o que perderam sem depender de mensagens soltas.">Atividades</button>
<button class="chip" type="button" data-scenario-title="Líder de turma - votação aberta" data-scenario-summary="Área mostra candidatos, prazo e participação de forma transparente." data-scenario-meta="Encerra sexta-feira" data-scenario-detail="O exemplo demonstra como organizar decisões da turma em um ambiente único.">Votação</button>
<button class="chip" type="button" data-scenario-title="Pedido de cabos e conectores" data-scenario-summary="Equipe registra materiais para uma feira técnica fictícia." data-scenario-meta="Status: em análise" data-scenario-detail="A solicitação fica documentada com objetivo do projeto, quantidade e responsável.">Projetos</button>
</div>
<article class="demo-panel" aria-live="polite">
<span data-demo-meta>Publicado pela turma</span>
<strong data-demo-title>Resumo da aula de Redes</strong>
<p data-demo-detail>O portal ajuda estudantes a recuperar o que perderam sem depender de mensagens soltas.</p>
</article>
<button class="button button-primary" type="button" data-demo-action>Explorar portal</button>
<p class="counter" data-counter>Interações nesta visita: 0</p>
</div>
<div class="metric-grid">
<article class="metric-card">
<span>Posts</span>
<strong>18 novos</strong>
<p>Atividades e artigos recentes.</p>
</article>
<article class="metric-card">
<span>Votação</span>
<strong>Aberta</strong>
<p>Líder de turma até sexta.</p>
</article>
<article class="metric-card">
<span>Materiais</span>
<strong>5 pedidos</strong>
<p>Solicitações em análise.</p>
</article>
</div>
</section>
<section class="section team-section" id="equipe">
<div class="section-heading">
<span>Integrantes</span>
<h2>Funções da equipe no desenvolvimento.</h2>
</div>
<div class="team-grid">
<article class="member-card">
<span>Gerente de Ideias</span>
<strong>Maria Eduarda Ferreira</strong>
</article>
<article class="member-card">
<span>Designer</span>
<strong>Carlos Daniel Santos</strong>
</article>
<article class="member-card">
<span>Construtor(a) HTML</span>
<strong>João Guilherme Seabra</strong>
</article>
<article class="member-card">
<span>Estilista CSS</span>
<strong>Fernanda Kristhyna Costa</strong>
</article>
</div>
</section>
</main>
<footer>
<p>MiniHacka 2026-1 - 3º período de Informática (Integrado).</p>
<a href="#inicio">Voltar ao topo</a>
</footer>
<script src="script.js" defer></script>
</body>
</html>