Mural de Dúvidas | Escola Aparício

Conteúdo e Objetivos Pedagógicos

Projeto Pódio da Aparício

Objetivo da Aula

Desenvolver uma página temática para o projeto Pódio da Aparício utilizando HTML e CSS, explorando layouts prontos, módulos visuais e personalizações criativas para destacar conquistas, projetos e alunos da escola.

Dicas Importantes

Experimente diferentes combinações de Upgrades CSS para criar um visual único. Não tenha medo de testar novos efeitos. Lembre-se de que o HTML define a estrutura da página e o CSS é responsável pela aparência. Procure manter a organização visual, utilizar títulos claros e escolher cores que facilitem a leitura do conteúdo.

Passo a passo das Atividades

1. Abrir o CodePen e criar um novo projeto.
2. Copiar o HTML Base e colar na área destinada ao HTML.
3. Copiar o CSS Base e colar na área destinada ao CSS.
4. Executar o projeto para verificar se a estrutura principal está funcionando corretamente.
5. Escolher um ou mais Upgrades CSS disponíveis nos arquivos "Mudanças para Hero Master" e adicionar ao projeto.
6. Testar diferentes combinações de cores, animações, efeitos de vidro, sombras, gradientes e molduras.
7. Escolher os blocos HTML disponíveis nos arquivos "Códigos Prontos".
8. Adicionar os blocos abaixo da seção principal do site.
9. Personalizar os textos com informações sobre alunos destaque, medalhistas da OBMEP, projetos premiados ou outras conquistas da Escola Aparício.
10. Substituir as imagens de exemplo por fotos ou imagens relacionadas ao conteúdo escolhido.
11. Organizar as seções da página de acordo com sua proposta visual.
12. Ajustar cores, tamanhos e espaçamentos para criar uma identidade própria.
13. Revisar o projeto verificando alinhamento, legibilidade e organização dos elementos.
14. Salvar e compartilhar o projeto finalizado.

Sugestões de código base

CodePen
HTML
CSS
Hero Master
Upgrades CSS
Cards
Galeria
Aluno Destaque
OBMEP
Projetos Premiados
Design Responsivo
Criatividade
Personalização Visual

Plataforma de Quiz

Objetivo da Aula

Criar a estrutura inicial de uma plataforma de Quiz utilizando HTML e CSS.

Dicas Importantes

Personalize o Hero Master usando cores, imagens e efeitos.
A tabela do Quiz deve ficar organizada e alinhada com o restante da página.
Use o CSS para criar efeitos visuais ao passar o mouse nos botões e respostas.

Passo a passo das Atividades

1. Abrir um novo arquivo e nomeá-lo com o nome da matéria escolhida para fazer o quiz.
2. Criar o arquivo index.html.
3. Adicionar o layout Hero Master dentro do HTML.
4. Modificar o Hero Master no CSS de acordo com sua criatividade.
5. Pode pegar os códigos nos arquivos "Códigos Prontos" e "Mudanças para Hero Master".
6. Procurar a tabela do Quiz em "Códigos Prontos".
7. Colocar a tabela do Quiz no final do arquivo antes da tag </body>.
8. Adicionar o CSS do Quiz dentro da tag <style>.

Sugestões de código base

Hero Master
Estrutura HTML
CSS Interno
Tabela de Quiz
Efeitos Hover
Personalização Visual

Fórum de Discussão da Turma

robotica

2º Completo 0 respostas

<!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8"> <meta name="viewport&quo...

<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Avaliativo de Robótica — 3 Pontos</title>

<style>
* {
box-sizing: border-box;
}

body {
margin: 0;
padding: 28px 18px 50px;
font-family: Arial, Helvetica, sans-serif;
color: #e8f1f8;
background:
radial-gradient(circle at top, #17395c 0, #0b1d31 45%, #06101d 100%);
min-height: 100vh;
}

header,
.instrucoes,
.laboratorio {
width: 100%;
max-width: 1000px;
margin: 0 auto 22px;
}

header {
padding: 25px;
text-align: center;
background: rgba(11, 30, 50, 0.86);
border: 1px solid #35658d;
border-radius: 18px;
box-shadow: 0 14px 35px rgba(0, 0, 0, 0.35);
}

h1 {
margin: 0 0 8px;
color: #72e7ff;
letter-spacing: 1px;
}

header p {
margin: 7px 0;
}

.valor {
display: inline-block;
margin-top: 8px;
padding: 8px 16px;
color: #07131e;
background: #ffd54f;
border-radius: 30px;
font-weight: bold;
}

.nome-aluno {
margin-top: 16px;
color: #ffffff;
font-size: 18px;
}

.instrucoes {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}

.criterio {
padding: 20px;
color: #17324a;
background: #f4f9fc;
border-top: 6px solid #31c5f4;
border-radius: 14px;
box-shadow: 0 9px 22px rgba(0, 0, 0, 0.3);
}

.criterio h2 {
margin: 0 0 10px;
color: #0c5276;
font-size: 20px;
}

.criterio p,
.criterio li {
line-height: 1.5;
}

.criterio ul {
margin-bottom: 0;
padding-left: 20px;
}

code {
padding: 2px 5px;
color: #8a244b;
background: #f9e8ef;
border-radius: 4px;
}

.laboratorio {
padding: 30px 20px 45px;
overflow: hidden;
text-align: center;
background-color: rgba(4, 18, 31, 0.85);
background-image:
linear-gradient(rgba(49, 197, 244, 0.08) 1px, transparent 1px),
linear-gradient(90deg, rgba(49, 197, 244, 0.08) 1px, transparent 1px);
background-size: 28px 28px;
border: 1px solid #35658d;
border-radius: 18px;
box-shadow: 0 14px 35px rgba(0, 0, 0, 0.35);
}

.laboratorio h2 {
margin-top: 0;
color: #72e7ff;
}

.mesa {
position: relative;
width: 500px;
max-width: 95%;
min-height: 540px;
margin: 25px auto 0;
padding-top: 20px;
border-bottom: 24px solid #273b4f;
}

.robo {
width: 320px;
max-width: 100%;
margin: 0 auto;
transition: transform 0.3s;
}

.antena {
position: relative;
width: 8px;
height: 55px;
margin: 0 auto;
background: #90a4ae;
}

.sensor {
position: absolute;
top: -15px;
left: -11px;
width: 30px;
height: 30px;
background: #ef5350;
border: 4px solid #ffb3b3;
border-radius: 50%;
}

.cabeca {
position: relative;
width: 210px;
height: 145px;
margin: 0 auto;
padding-top: 38px;
background: #78909c;
border: 6px solid #cfd8dc;
}

.orelhas {
position: absolute;
top: 38px;
left: -24px;
width: calc(100% + 48px);
display: flex;
justify-content: space-between;
}

.orelha {
width: 24px;
height: 55px;
background: #546e7a;
border-radius: 8px;
}

.olhos {
display: flex;
justify-content: center;
gap: 36px;
}

.olho {
width: 38px;
height: 38px;
background: #b2ebf2;
border: 7px solid #263238;
border-radius: 50%;
}

.boca {
width: 92px;
height: 18px;
margin: 24px auto 0;
background: #263238;
border-radius: 5px;
}

.pescoco {
width: 65px;
height: 28px;
margin: 0 auto;
background: #455a64;
}

.conjunto-corpo {
display: flex;
align-items: flex-start;
justify-content: center;
}

.braco {
width: 45px;
height: 175px;
margin-top: 20px;
background: #607d8b;
border: 5px solid #b0bec5;
border-radius: 22px;
}

.braco-esquerdo {
transform: rotate(8deg);
}

.braco-direito {
transform: rotate(-8deg);
}

.corpo {
width: 190px;
height: 210px;
padding: 25px 18px;
background: #546e7a;
border: 6px solid #cfd8dc;
}

.painel-robo {
width: 125px;
height: 92px;
margin: 0 auto;
padding: 14px;
background: #172c3e;
border: 4px solid #90a4ae;
border-radius: 10px;
}

.luzes {
display: flex;
justify-content: space-around;
margin-bottom: 16px;
}

.luz {
width: 18px;
height: 18px;
border-radius: 50%;
}

.luz-vermelha {
background: #ef5350;
}

.luz-amarela {
background: #ffd54f;
}

.luz-verde {
background: #66bb6a;
}

.tela {
height: 27px;
color: #7dffb3;
background: #07131e;
font-family: Consolas, monospace;
font-size: 12px;
line-height: 27px;
border-radius: 4px;
}

.identificacao {
display: inline-block;
margin-top: 22px;
padding: 7px 13px;
color: #102331;
background: #eceff1;
border-radius: 5px;
font-weight: bold;
}

.pernas {
display: flex;
justify-content: center;
gap: 65px;
}

.perna {
width: 48px;
height: 95px;
background: #607d8b;
border-right: 5px solid #b0bec5;
border-left: 5px solid #b0bec5;
}

.pes {
display: flex;
justify-content: center;
gap: 35px;
}

.pe {
width: 78px;
height: 30px;
background: #37474f;
border-radius: 20px 20px 5px 5px;
}

/* =============================================================
ÁREA AVALIATIVA — MODIFIQUE E CRIE CLASSES A PARTIR DAQUI
============================================================= */

/* 1º PONTO: troque as três cores abaixo. */
.cor-principal {
background-color: #3f8efc;
}

.cor-secundaria {
background-color: #7756d8;
}

.cor-destaque {
background-color: #ffca3a;
}

/* 2º PONTO: estas classes criam sombra, brilho e movimento. */
.sombra {
box-shadow: 0 12px 22px rgba(0, 0, 0, 0.55);
}

.brilho {
box-shadow: 0 0 18px #72e7ff;
}

.arredondado {
border-radius: 25px;
}

.movimento:hover {
transform: translateY(-12px) scale(1.03);
}

/* 3º PONTO: crie abaixo uma classe nova para um elemento novo. */
.elemento-novo {
/* Exemplo: background-color, border, border-radius ou box-shadow. */
}

@media (max-width: 760px) {
.instrucoes {
grid-template-columns: 1fr;
}

.robo {
transform: scale(0.85);
transform-origin: top center;
margin-bottom: -65px;
}
}
</style>
</head>

<body>
<header>
<h1>ATIVIDADE AVALIATIVA DE ROBÓTICA</h1>
<p>Personalização de um robô utilizando classes CSS</p>
<span class="valor">Valor: 3,0 pontos</span>


<p class="nome-aluno">Aluno(a): DIGITE SEU NOME AQUI</p>
</header>

<section class="instrucoes">
<article class="criterio">
<h2>1º ponto — Cores</h2>
<ul>
<li>Troque as três cores na área avaliativa do CSS.</li>
<li>Use as classes <code>cor-principal</code>, <code>cor-secundaria</code> e <code>cor-destaque</code>.</li>
<li>As três cores precisam aparecer no robô.</li>
</ul>
</article>

<article class="criterio">
<h2>2º ponto — Efeitos</h2>
<ul>
<li>Coloque a classe <code>sombra</code> na cabeça ou no corpo.</li>
<li>Coloque <code>brilho</code> em pelo menos um sensor.</li>
<li>Use <code>arredondado</code> e <code>movimento</code>.</li>
</ul>
</article>

<article class="criterio">
<h2>3º ponto — Criação</h2>
<ul>
<li>Crie uma classe CSS própria.</li>
<li>Adicione um novo elemento ao robô.</li>
<li>Pode ser botão, câmera, símbolo, placa, bateria ou sensor.</li>
</ul>
</article>
</section>

<section class="laboratorio">
<h2>Laboratório de Montagem</h2>
<p>Passe o mouse sobre o robô depois de aplicar a classe <code>movimento</code>.</p>

<div class="mesa">

<div class="robo">

<div class="antena">

<div class="sensor"></div>
</div>


<div class="cabeca">
<div class="orelhas">
<div class="orelha"></div>
<div class="orelha"></div>
</div>

<div class="olhos">

<div class="olho"></div>
<div class="olho"></div>
</div>
<div class="boca"></div>
</div>

<div class="pescoco"></div>

<div class="conjunto-corpo">
<div class="braco braco-esquerdo"></div>


<div class="corpo">
<div class="painel-robo">
<div class="luzes">
<div class="luz luz-vermelha"></div>
<div class="luz luz-amarela"></div>
<div class="luz luz-verde"></div>
</div>
<div class="tela">SISTEMA OK</div>
</div>

<div class="identificacao">ROBÔ 01</div>


</div>

<div class="braco braco-direito"></div>
</div>

<div class="pernas">
<div class="perna"></div>
<div class="perna"></div>
</div>

<div class="pes">
<div class="pe"></div>
<div class="pe"></div>
</div>
</div>
</div>
</section>
</body>
</html>

sengo ano css

3º Completo 0 respostas

body { margin: 0; padding: 30px; font-family: Arial, sans-serif; text-align: center; background-color: #eef3f8; } h1 { color: #2...

body {
margin: 0;
padding: 30px;
font-family: Arial, sans-serif;
text-align: center;
background-color: #eef3f8;
}

h1 {
color: #263238;
}

p {
color: #546e7a;
font-size: 18px;
}

.galeria {
max-width: 900px;
margin: 30px auto;
padding: 25px;

display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 25px;

background-color: white;
border-radius: 20px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

/* Classe principal de todos os objetos */

.bloco {
width: 100px;
height: 100px;

display: flex;
justify-content: center;
align-items: center;

background-color: #b0bec5;
color: white;
font-size: 24px;
font-weight: bold;

transition: 0.3s;
}

/* Classes de cores */

.vermelho {
background-color: #ef5350;
}

.azul {
background-color: #42a5f5;
}

.amarelo {
background-color: #fbc02d;
}

.verde {
background-color: #66bb6a;
}

.roxo {
background-color: #ab47bc;
}

.laranja {
background-color: #ff9800;
}

/* Classes de formatos */

.quadrado {
border-radius: 0;
}

.circulo {
border-radius: 50%;
}

.arredondado {
border-radius: 20px;
}

.retangulo {
width: 150px;
height: 85px;
}

.oval {
width: 150px;
height: 85px;
border-radius: 50%;
}

/* Classes de efeitos */

.sombra {
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.3);
}

.borda {
border: 6px solid white;
outline: 3px solid #37474f;
}

.bloco:hover {
transform: scale(1.12);
cursor: pointer;
}

segundo ano html

2º Completo 0 respostas

<h1>Galeria Digital de Formas</h1> <p> Utilize classes CSS para dar cores e formatos aos objetos. </p> <section c...

<h1>Galeria Digital de Formas</h1>

<p>
Utilize classes CSS para dar cores e formatos aos objetos.
</p>

<section class="galeria">
<div class="bloco vermelho circulo">1</div>

<div class="bloco">2</div>
<div class="bloco">3</div>
<div class="bloco">4</div>
<div class="bloco">5</div>
<div class="bloco">6</div>
<div class="bloco">7</div>
<div class="bloco">8</div>
<div class="bloco">9</div>
<div class="bloco">10</div>
<div class="bloco">11</div>
<div class="bloco">12</div>
</section>

versão vs code

3º Parte 0 respostas

<!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8"> <meta name="viewport&quo...

<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Atividade — Classes CSS</title>

<style>
* {
box-sizing: border-box;
}

body {
margin: 0;
padding: 30px 20px;
font-family: Arial, Helvetica, sans-serif;
color: #263238;
text-align: center;
background: #eaf2f8;
}

h1 {
margin: 0 0 10px;
color: #153e75;
}

h2 {
margin-top: 0;
color: #1d4e89;
}

code {
padding: 3px 7px;
color: #7b1e3a;
background: #f8e8ee;
border-radius: 5px;
}

.subtitulo {
margin: 0 0 25px;
color: #546e7a;
font-size: 18px;
}

.painel {
width: 100%;
max-width: 950px;
margin: 20px auto;
padding: 24px;
text-align: left;
background: #ffffff;
border-radius: 16px;
box-shadow: 0 8px 24px rgba(38, 50, 56, 0.12);
}

.contexto {
border-left: 7px solid #1976d2;
}

.exemplo {
border-left: 7px solid #8e44ad;
}

.missoes {
border-left: 7px solid #f39c12;
}

.painel p,
.painel li {
line-height: 1.6;
}

.galeria {
width: 100%;
max-width: 950px;
margin: 25px auto;
padding: 30px 20px;
background: #ffffff;
border-radius: 18px;
box-shadow: 0 8px 24px rgba(38, 50, 56, 0.12);
}

/* CLASSE PRINCIPAL: todos os objetos devem utilizar esta classe. */
.bloco {
width: 100px;
height: 100px;
margin: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
vertical-align: middle;
color: #ffffff;
background: #b0bec5;
font-size: 24px;
font-weight: bold;
border-radius: 0;
transition: transform 0.25s, box-shadow 0.25s;
}

/* CLASSES DE CORES */
.vermelho {
background: #ef5350;
}

.azul {
background: #3498db;
}

.amarelo {
background: #f1c40f;
color: #263238;
}

.verde {
background: #2ecc71;
}

.roxo {
background: #9b59b6;
}

.laranja {
background: #f39c12;
}

.rosa {
background: #ec407a;
}

/* CLASSES DE FORMATOS */
.quadrado {
border-radius: 0;
}

.circulo {
border-radius: 50%;
}

.arredondado {
border-radius: 22px;
}

.retangulo {
width: 150px;
height: 85px;
}

.oval {
width: 150px;
height: 85px;
border-radius: 50%;
}

.capsula {
width: 170px;
height: 70px;
border-radius: 40px;
}

/* CLASSES DE EFEITOS */
.sombra {
box-shadow: 0 10px 16px rgba(0, 0, 0, 0.32);
}

.borda {
border: 6px solid #ffffff;
outline: 3px solid #37474f;
}

.bloco:hover {
transform: scale(1.1);
cursor: pointer;
}

.rodape {
margin-top: 25px;
color: #607d8b;
}

@media (max-width: 600px) {
body {
padding: 20px 10px;
}

.painel,
.galeria {
padding: 20px 14px;
}
}
</style>
</head>

<body>
<h1>Galeria Digital de Formas</h1>
<p class="subtitulo">Atividade prática: aplicação e combinação de classes CSS</p>

<section class="painel contexto">
<h2>Contexto</h2>
<p>
A escola deseja criar uma galeria digital com objetos de diferentes cores
e formatos. Sua missão será utilizar classes CSS para transformar os blocos
cinza em objetos coloridos e criativos.
</p>
<p>
No HTML, os nomes das classes são colocados dentro de
<code>class=""</code> e separados por espaços.
</p>
</section>

<section class="painel exemplo">
<h2>Exemplo</h2>
<p>Para criar um círculo azul com sombra, utilize:</p>
<p><code><div class="bloco azul circulo sombra">2</div></code></p>
<p>
As classes disponíveis são:<br>
<strong>Cores:</strong> vermelho, azul, amarelo, verde, roxo, laranja e rosa.<br>
<strong>Formatos:</strong> quadrado, circulo, arredondado, retangulo, oval e capsula.<br>
<strong>Efeitos:</strong> sombra e borda.
</p>
</section>

<section class="painel missoes">
<h2>Missões</h2>
<ol>
<li>Adicione cor e formato aos objetos de 2 a 12.</li>
<li>Utilize pelo menos cinco cores diferentes.</li>
<li>Crie pelo menos dois círculos e dois quadrados.</li>
<li>Crie um retângulo, um objeto oval e uma cápsula.</li>
<li>Coloque sombra em dois objetos e borda em um objeto.</li>
<li>Crie uma nova classe de cor no CSS e utilize-a em um objeto.</li>
</ol>
</section>

<main class="galeria">

<div class="bloco vermelho circulo">1</div>



<div class="bloco">2</div>
<div class="bloco">3</div>
<div class="bloco">4</div>
<div class="bloco">5</div>
<div class="bloco">6</div>
<div class="bloco">7</div>
<div class="bloco">8</div>
<div class="bloco">9</div>
<div class="bloco">10</div>
<div class="bloco">11</div>
<div class="bloco">12</div>
</main>

<p class="rodape">Salve o arquivo e observe as mudanças no navegador.</p>
</body>
</html>

cainan css

3º Completo 0 respostas

body { margin: 0; padding: 30px; font-family: Arial, sans-serif; text-align: center; background-color: #eef3f8; } h1 { color: #2...

cainan

3º Completo 0 respostas

<h1>Galeria Digital de Formas</h1> <p> Utilize classes CSS para dar cores e formatos aos objetos. </p> <section c...

Cainan R Balieiro

3º Completo 0 respostas

https://avaliacoes.educacao.mg.gov.br/pesquisa-socioemocional/socioemocional-2026...

https://avaliacoes.educacao.mg.gov.br/pesquisa-socioemocional/socioemocional-2026

Arthur

2º Parte 0 respostas

<a href="Projetos/Anne e Flávia/trabalho de 10p/"> Trabalho de Anne e Flávia </a>...

<a href="Projetos/Anne e Flávia/trabalho de 10p/">
Trabalho de Anne e Flávia
</a>

Exibindo bloco 1 de 5 (Total: 39 publicações)

Enviar Dúvida

Travou em alguma parte do código? Envie aqui e resolva com a turma.

Conteúdo e Objetivos Pedagógicos

Projeto Pódio da Aparício

Objetivo da Aula

Dicas Importantes

Passo a passo das Atividades

Sugestões de código base

Plataforma de Quiz

Objetivo da Aula

Dicas Importantes

Passo a passo das Atividades

Sugestões de código base

Fórum de Discussão da Turma

robotica

sengo ano css

segundo ano html

versão vs code

cainan css

cainan

Cainan R Balieiro

Arthur

Enviar Dúvida

Filtrar Página Atual