Biblioteca de Códigos | Escola Aparício

JavaScript

EXCLUIR

EXCLUIR nome

Encontrar índice

const indice = alunos.findIndex(function(aluno){

    return aluno.nome == pesquisa;

});

Excluir

alunos.splice(indice,1);

Atualizar

listarAlunos();

JavaScript

EDITAR

Pesquisar

const aluno = alunos.find(function(aluno){

    return aluno.nome == pesquisa;

});

Alterar

aluno.plano = "Anual";

aluno.pagamento = "Pendente";

aluno.vencimento = "20/08/2026";

Atualizar

listarAlunos();

JavaScript

Capturar javascript

Capturar

Capturar

const listaAlunos = document.querySelector("#listaAlunos");

Criar função

function listarAlunos(){

    listaAlunos.innerHTML = "";

    alunos.forEach(function(aluno){

        listaAlunos.innerHTML += `

        <tr>

            <td>${aluno.nome}</td>

            <td>${aluno.plano}</td>

            <td>${aluno.pagamento}</td>

            <td>${aluno.vencimento}</td>

        </tr>

        `;

    });

}

Depois do cadastro

listarAlunos();

Texto

lista de alunos conectada ao java

lista de alunos

<tbody id="listaAlunos">

</tbody>

Banco de Dados

Capturar java

Capturar os elementos

Capturar os elementos

const novoNome = document.querySelector("#novoNome");
const novoPlano = document.querySelector("#novoPlano");
const novoVencimento = document.querySelector("#novoVencimento");

Adicionar evento

btnCadastrar.addEventListener("click", cadastrarAluno);

Criar a função

function cadastrarAluno(){

    const novoAluno = {

        nome: novoNome.value,
        plano: novoPlano.value,
        pagamento: "Em dia",
        vencimento: novoVencimento.value,
        presenca: "-"

    };

    alunos.push(novoAluno);

}

Banco de Dados

CADASTRAR

Primeiro criar os campos HTML

<input id="novoNome">
<input id="novoPlano">
<input id="novoVencimento">

<button id="btnCadastrar">
Cadastrar
</button>

Feedback/Avisos

script 02/07

script- 0207

// ==============================
// BANCO DE DADOS DOS ALUNOS
// ==============================

const alunos = [
    {
        nome: "João Silva",
        plano: "Mensal",
        pagamento: "Em dia",
        vencimento: "05/07/2026",
        presenca: "01/07/2026"
    },
    {
        nome: "Maria Souza",
        plano: "Anual",
        pagamento: "Pendente",
        vencimento: "28/06/2026",
        presenca: "20/06/2026"
    },
    {
        nome: "Carlos Lima",
        plano: "Trimestral",
        pagamento: "Em dia",
        vencimento: "18/07/2026",
        presenca: "30/06/2026"
    },
    {
        nome: "Ana Oliveira",
        plano: "Semestral",
        pagamento: "Em dia",
        vencimento: "15/07/2026",
        presenca: "02/07/2026"
    }
];

// ==============================
// ELEMENTOS DO HTML
// ==============================

const campoPesquisa = document.querySelector("#pesquisa");
const botaoPesquisar = document.querySelector("#btnPesquisar");

const nomeAluno = document.querySelector("#nome");
const planoAluno = document.querySelector("#plano");
const pagamentoAluno = document.querySelector("#pagamento");
const vencimentoAluno = document.querySelector("#vencimento");
const presencaAluno = document.querySelector("#presenca");

// ==============================
// EVENTO DO BOTÃO
// ==============================

botaoPesquisar.addEventListener("click", pesquisarAluno);

// Permite pesquisar apertando ENTER
campoPesquisa.addEventListener("keypress", function(event){

    if(event.key === "Enter"){
        pesquisarAluno();
    }

});

// ==============================
// FUNÇÃO DE PESQUISA
// ==============================

function pesquisarAluno(){

    // Texto digitado pelo usuário
    const pesquisa = campoPesquisa.value.trim();

    // Verifica se o campo está vazio
    if(pesquisa === ""){

        alert("Digite o nome de um aluno.");

        return;

    }

    // Procura o aluno
    const alunoEncontrado = alunos.find(function(aluno){

        return aluno.nome.toLowerCase() === pesquisa.toLowerCase();

    });

    // Encontrou?
    if(alunoEncontrado){

        nomeAluno.textContent = alunoEncontrado.nome;
        planoAluno.textContent = alunoEncontrado.plano;
        pagamentoAluno.textContent = alunoEncontrado.pagamento;
        vencimentoAluno.textContent = alunoEncontrado.vencimento;
        presencaAluno.textContent = alunoEncontrado.presenca;

        // Cor do pagamento
        if(alunoEncontrado.pagamento === "Em dia"){

            pagamentoAluno.style.color = "lime";

        }else{

            pagamentoAluno.style.color = "red";

        }

    }else{

        alert("Aluno não encontrado.");

        nomeAluno.textContent = "--------";
        planoAluno.textContent = "--------";
        pagamentoAluno.textContent = "--------";
        vencimentoAluno.textContent = "--------";
        presencaAluno.textContent = "--------";

        pagamentoAluno.style.color = "white";

    }

}

Feedback/Avisos

css 02/07

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

body{

    background:#0F172A;
    color:white;
    font-family:Poppins,sans-serif;

}

header{

    background:#1E293B;
    padding:25px;
    text-align:center;

    box-shadow:0 0 10px rgba(0,0,0,.3);

}

header h1{

    font-size:34px;

}

main{

    width:90%;
    max-width:1200px;

    margin:auto;

    padding:30px;

}

section{

    background:#1E293B;

    margin-bottom:30px;

    padding:25px;

    border-radius:12px;

}

section h2{

    margin-bottom:20px;

}

.campo{

    display:flex;

    gap:15px;

}

input{

    flex:1;

    padding:15px;

    border:none;

    border-radius:8px;

    font-size:17px;

}

button{

    background:#2563EB;

    color:white;

    border:none;

    padding:15px 25px;

    border-radius:8px;

    cursor:pointer;

    transition:.3s;

    font-size:16px;

}

button:hover{

    background:#1D4ED8;

}

.card-aluno p{

    margin:12px 0;

    font-size:18px;

}

.dashboard{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:20px;

}

.card{

    background:#334155;

    padding:20px;

    border-radius:10px;

    text-align:center;

}

.card span{

    display:block;

    margin-top:15px;

    font-size:34px;

    font-weight:bold;

}

table{

    width:100%;

    border-collapse:collapse;

}

th{

    background:#2563EB;

    padding:15px;

}

td{

    padding:15px;

    text-align:center;

    border-bottom:1px solid #475569;

}

tr:hover{

    background:#334155;

}

@media(max-width:900px){

.dashboard{

grid-template-columns:1fr 1fr;

}

.campo{

flex-direction:column;

}

}

@media(max-width:600px){

.dashboard{

grid-template-columns:1fr;

}

table{

font-size:14px;

}

}

Feedback/Avisos

html 02/07

aula de 02/07

<!DOCTYPE html>
<html lang="pt-BR">

<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Sistema Academia</title>

    <link rel="stylesheet" href="style.css">

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
        rel="stylesheet">

</head>

<body>

    <header>

        <h1>🏋 Sistema de Academia</h1>

    </header>

    <main>

        <section class="pesquisa">

            <h2>Pesquisar Aluno</h2>

            <div class="campo">

            <input id="pesquisa" type="text" placeholder="Digite o nome do aluno">
<button id="btnPesquisar">Pesquisar</button>

            </div>

        </section>

        <section class="card-aluno">

    <p><strong>Nome:</strong> <span id="nome">--------</span></p>

<p><strong>Plano:</strong> <span id="plano">--------</span></p>

<p><strong>Pagamento:</strong> <span id="pagamento">--------</span></p>

<p><strong>Vencimento:</strong> <span id="vencimento">--------</span></p>

<p><strong>Última Presença:</strong> <span id="presenca">--------</span></p>
        </section>

        <section class="dashboard">

            <div class="card">

                <h3>👥 Alunos</h3>

                <span>58</span>

            </div>

            <div class="card">

                <h3>🟢 Em Dia</h3>

                <span>42</span>

            </div>

            <div class="card">

                <h3>🔴 Pendentes</h3>

                <span>16</span>

            </div>

            <div class="card">

                <h3>🏋 Presentes Hoje</h3>

                <span>19</span>

            </div>

        </section>

        <section class="tabela">

            <h2>Lista de Alunos</h2>

            <table>

                <thead>

                    <tr>

                        <th>Nome</th>

                        <th>Plano</th>

                        <th>Pagamento</th>

                        <th>Vencimento</th>

                    </tr>

                </thead>

                <tbody>

                    <tr>

                        <td>João Silva</td>

                        <td>Mensal</td>

                        <td>Em Dia</td>

                        <td>05/07/2026</td>

                    </tr>

                    <tr>

                        <td>Maria Souza</td>

                        <td>Anual</td>

                        <td>Pendente</td>

                        <td>28/06/2026</td>

                    </tr>

                    <tr>

                        <td>Carlos Lima</td>

                        <td>Trimestral</td>

                        <td>Em Dia</td>

                        <td>18/07/2026</td>

                    </tr>

                </tbody>

            </table>

        </section>

    </main>
<script src="script.js"></script>
</body>

</html>

Feedback/Avisos

Atividade completa dia 25/06

Atividade completa dia 25/06

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Desafio das 30 Cores - Atividade Prática</title>
    <style>
        /* ==========================================
           ESTILOS DE BASE (Não mexer nesta parte)
           ========================================== */
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        @page {
            size: A4;
            margin: 12mm 12mm;
            background-color: #f8fafc;
        }
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f8fafc;
            color: #1e293b;
            padding: 0;
            margin: 0;
            font-size: 10.5pt;
            line-height: 1.4;
        }
        .container {
            max-width: 100%;
            margin: 0 auto;
        }
        header {
            background-color: #0f172a;
            color: #ffffff;
            padding: 16px 20px;
            border-radius: 6px;
            margin-bottom: 16px;
        }
        header h1 {
            font-size: 18pt;
            margin-bottom: 4px;
            color: #38bdf8;
        }
        header p {
            font-size: 10pt;
            color: #94a3b8;
        }
        .instrucoes {
            background-color: #ffffff;
            border-left: 4px solid #38bdf8;
            padding: 12px 16px;
            margin-bottom: 20px;
            border-radius: 0 6px; box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        }
        .instrucoes h2 {
            font-size: 12pt;
            margin-bottom: 6px;
            color: #0f172a;
        }
        .instrucoes ul {
            margin-left: 20px;
        }
        .instrucoes li {
            margin-bottom: 4px;
        }
        
        /* Painel de Exibição dos Objetos */
        .painel {
            background-color: #ffffff;
            border: 1px solid #e2e8f0;
            border-radius: 6px;
            padding: 20px;
            margin-bottom: 20px;
            text-align: center;
        }
        .grid-objetos {
            display: table;
            width: 100%;
            border-collapse: separate;
            border-spacing: 12px;
        }
        .linha {
            display: table-row;
        }
        .objeto-box {
            display: table-cell;
            width: 16.66%;
            background-color: #f1f5f9;
            border: 2px dashed #cbd5e1;
            border-radius: 8px;
            padding: 12px 6px;
            text-align: center;
            vertical-align: middle;
            height: 90px;
        }
        .objeto-box span {
            display: block;
            font-size: 8.5pt;
            color: #64748b;
            margin-top: 6px;
            font-weight: 600;
        }

        /* Formatos Geométricos Básicos dos Objetos */
        .forma {
            width: 45px;
            height: 45px;
            margin: 0 auto;
            transition: transform 0.2s;
            background-color: #cbd5e1; /* Cor neutra padrão antes de colorirem */
        }
        .forma:hover {
            transform: scale(1.08);
        }
        
        /* Variações de Forma por classe auxiliar */
        .circulo { border-radius: 50%; }
        .losango { transform: rotate(45deg); width: 35px; height: 35px; margin: 5px auto; }
        .losango:hover { transform: rotate(45deg) scale(1.08); }
        .arredondado { border-radius: 10px; }

        /* ==========================================
           CLASSES PRONTAS (Exemplo para os alunos)
           ========================================== */
        .cor-fogo {
            background-color: #ef4444 !important;
            box-shadow: 0 0 10px #f87171;
            border: 1px solid #b91c1c;
        }
        .cor-oceano {
            background-color: #0ea5e9 !important;
            box-shadow: 0 0 10px #38bdf8;
            border: 1px solid #0369a1;
        }
        .cor-esmeralda {
            background-color: #10b981 !important;
            box-shadow: 0 0 10px #34d399;
            border: 1px solid #047857;
        }

        /* ==========================================
           ESPAÇO DOS ALUNOS (Eles devem criar daqui para baixo)
           ========================================== */
        /* DICA: Crie as classes abaixo definindo background-color, box-shadow ou borders! */

    </style>
</head>
<body>

    <div class="container">
        <header>
            <h1>Desafio CSS: O Laboratório de Cores</h1>
            <p>Escola Estadual Aparício Alves Murta • Curso Técnico em Informática</p>
        </header>

        <div class="instrucoes">
            <h2>🎯 Instruções da Atividade:</h2>
            <ul>
                <li>Observe que os 3 primeiros objetos já estão coloridos porque as classes <code>.cor-fogo</code>, <code>.cor-oceano</code> e <code>.cor-esmeralda</code> já existem no CSS.</li>
                <li>Sua missão é ir no código CSS e <strong>criar as próximas 27 classes</strong> (do <code>.cor-4</code> até o <code>.cor-30</code>).</li>
                <li>Utilize sua criatividade aplicando cores sólidas, gradientes, bordas especiais (<code>border</code>) ou efeitos de brilho (<code>box-shadow</code>) para cada um dos temas propostos!</li>
            </ul>
        </div>

        <div class="painel">
            <div class="grid-objetos">
                <!-- Linha 1 (Objetos 1 a 6) -->
                <div class="linha">
                    <div class="objeto-box">
                        <div class="forma circulo cor-fogo"></div>
                        <span>1. Fogo</span>
                    </div>
                    <div class="objeto-box">
                        <div class="forma cor-oceano"></div>
                        <span>2. Oceano</span>
                    </div>
                    <div class="objeto-box">
                        <div class="forma losango cor-esmeralda"></div>
                        <span>3. Esmeralda</span>
                    </div>
                    <div class="objeto-box">
                        <div class="forma arredondado cor-4"></div>
                        <span>4. Sol</span>
                    </div>
                    <div class="objeto-box">
                        <div class="forma circulo cor-5"></div>
                        <span>5. Ametista</span>
                    </div>
                    <div class="objeto-box">
                        <div class="forma cor-6"></div>
                        <span>6. Floresta</span>
                    </div>
                </div>

                <!-- Linha 2 (Objetos 7 a 12) -->
                <div class="linha">
                    <div class="objeto-box">
                        <div class="forma losango cor-7"></div>
                        <span>7. Chocolate</span>
                    </div>
                    <div class="objeto-box">
                        <div class="forma arredondado cor-8"></div>
                        <span>8. Nuvem</span>
                    </div>
                    <div class="objeto-box">
                        <div class="forma circulo cor-9"></div>
                        <span>9. Neon Pink</span>
                    </div>
                    <div class="objeto-box">
                        <div class="forma cor-10"></div>
                        <span>10. Asfalto</span>
                    </div>
                    <div class="objeto-box">
                        <div class="forma losango cor-11"></div>
                        <span>11. Ouro</span>
                    </div>
                    <div class="objeto-box">
                        <div class="forma arredondado cor-12"></div>
                        <span>12. Cyberpunk</span>
                    </div>
                </div>

                <!-- Linha 3 (Objetos 13 a 18) -->
                <div class="linha">
                    <div class="objeto-box">
                        <div class="forma circulo cor-13"></div>
                        <span>13. Deserto</span>
                    </div>
                    <div class="objeto-box">
                        <div class="forma cor-14"></div>
                        <span>14. Magma</span>
                    </div>
                    <div class="objeto-box">
                        <div class="forma losango cor-15"></div>
                        <span>15. Gelo</span>
                    </div>
                    <div class="objeto-box">
                        <div class="forma arredondado cor-16"></div>
                        <span>16. Tóxico</span>
                    </div>
                    <div class="objeto-box">
                        <div class="forma circulo cor-17"></div>
                        <span>17. Tangerina</span>
                    </div>
                    <div class="objeto-box">
                        <div class="forma cor-18"></div>
                        <span>18. Militar</span>
                    </div>
                </div>

                <!-- Linha 4 (Objetos 19 a 24) -->
                <div class="linha">
                    <div class="objeto-box">
                        <div class="forma losango cor-19"></div>
                        <span>19. Hematita</span>
                    </div>
                    <div class="objeto-box">
                        <div class="forma arredondado cor-20"></div>
                        <span>20. Algodão Doce</span>
                    </div>
                    <div class="objeto-box">
                        <div class="forma circulo cor-21"></div>
                        <span>21. Sakura</span>
                    </div>
                    <div class="objeto-box">
                        <div class="forma cor-22"></div>
                        <span>22. Turquesa</span>
                    </div>
                    <div class="objeto-box">
                        <div class="forma losango cor-23"></div>
                        <span>23. Bronze</span>
                    </div>
                    <div class="objeto-box">
                        <div class="forma arredondado cor-24"></div>
                        <span>24. Meia-Noite</span>
                    </div>
                </div>

                <!-- Linha 5 (Objetos 25 a 30) -->
                <div class="linha">
                    <div class="objeto-box">
                        <div class="forma circulo cor-25"></div>
                        <span>25. Mostarda</span>
                    </div>
                    <div class="objeto-box">
                        <div class="forma cor-26"></div>
                        <span>26. Menta</span>
                    </div>
                    <div class="objeto-box">
                        <div class="forma losango cor-27"></div>
                        <span>27. Rubi</span>
                    </div>
                    <div class="objeto-box">
                        <div class="forma arredondado cor-28"></div>
                        <span>28. Safira</span>
                    </div>
                    <div class="objeto-box">
                        <div class="forma circulo cor-29"></div>
                        <span>29. Espacial</span>
                    </div>
                    <div class="objeto-box">
                        <div class="forma cor-30"></div>
                        <span>30. Lava</span>
                    </div>
                </div>

            </div>
        </div>
    </div>

</body>
</html>

Feedback/Avisos

Hmtl do dia 25/06

Atividade do dia 25/06

  <div class="container">
        <header>
            <h1>Desafio CSS: O Laboratório de Cores</h1>
            <p>Escola Estadual Aparício Alves Murta • Curso Técnico em Informática</p>
        </header>

        <div class="instrucoes">
            <h2>🎯 Instruções da Atividade:</h2>
            <ul>
                <li>Observe que os 3 primeiros objetos já estão coloridos porque as classes <code>.cor-fogo</code>, <code>.cor-oceano</code> e <code>.cor-esmeralda</code> já existem no CSS.</li>
                <li>Sua missão é ir no código CSS e <strong>criar as próximas 27 classes</strong> (do <code>.cor-4</code> até o <code>.cor-30</code>).</li>
                <li>Utilize sua criatividade aplicando cores sólidas, gradientes, bordas especiais (<code>border</code>) ou efeitos de brilho (<code>box-shadow</code>) para cada um dos temas propostos!</li>
            </ul>
        </div>

        <div class="painel">
            <div class="grid-objetos">
                <!-- Linha 1 (Objetos 1 a 6) -->
                <div class="linha">
                    <div class="objeto-box">
                        <div class="forma circulo cor-fogo"></div>
                        <span>1. Fogo</span>
                    </div>
                    <div class="objeto-box">
                        <div class="forma cor-oceano"></div>
                        <span>2. Oceano</span>
                    </div>
                    <div class="objeto-box">
                        <div class="forma losango cor-esmeralda"></div>
                        <span>3. Esmeralda</span>
                    </div>
                    <div class="objeto-box">
                        <div class="forma arredondado cor-4"></div>
                        <span>4. Sol</span>
                    </div>
                    <div class="objeto-box">
                        <div class="forma circulo cor-5"></div>
                        <span>5. Ametista</span>
                    </div>
                    <div class="objeto-box">
                        <div class="forma cor-6"></div>
                        <span>6. Floresta</span>
                    </div>
                </div>

                <!-- Linha 2 (Objetos 7 a 12) -->
                <div class="linha">
                    <div class="objeto-box">
                        <div class="forma losango cor-7"></div>
                        <span>7. Chocolate</span>
                    </div>
                    <div class="objeto-box">
                        <div class="forma arredondado cor-8"></div>
                        <span>8. Nuvem</span>
                    </div>
                    <div class="objeto-box">
                        <div class="forma circulo cor-9"></div>
                        <span>9. Neon Pink</span>
                    </div>
                    <div class="objeto-box">
                        <div class="forma cor-10"></div>
                        <span>10. Asfalto</span>
                    </div>
                    <div class="objeto-box">
                        <div class="forma losango cor-11"></div>
                        <span>11. Ouro</span>
                    </div>
                    <div class="objeto-box">
                        <div class="forma arredondado cor-12"></div>
                        <span>12. Cyberpunk</span>
                    </div>
                </div>

                <!-- Linha 3 (Objetos 13 a 18) -->
                <div class="linha">
                    <div class="objeto-box">
                        <div class="forma circulo cor-13"></div>
                        <span>13. Deserto</span>
                    </div>
                    <div class="objeto-box">
                        <div class="forma cor-14"></div>
                        <span>14. Magma</span>
                    </div>
                    <div class="objeto-box">
                        <div class="forma losango cor-15"></div>
                        <span>15. Gelo</span>
                    </div>
                    <div class="objeto-box">
                        <div class="forma arredondado cor-16"></div>
                        <span>16. Tóxico</span>
                    </div>
                    <div class="objeto-box">
                        <div class="forma circulo cor-17"></div>
                        <span>17. Tangerina</span>
                    </div>
                    <div class="objeto-box">
                        <div class="forma cor-18"></div>
                        <span>18. Militar</span>
                    </div>
                </div>

                <!-- Linha 4 (Objetos 19 a 24) -->
                <div class="linha">
                    <div class="objeto-box">
                        <div class="forma losango cor-19"></div>
                        <span>19. Hematita</span>
                    </div>
                    <div class="objeto-box">
                        <div class="forma arredondado cor-20"></div>
                        <span>20. Algodão Doce</span>
                    </div>
                    <div class="objeto-box">
                        <div class="forma circulo cor-21"></div>
                        <span>21. Sakura</span>
                    </div>
                    <div class="objeto-box">
                        <div class="forma cor-22"></div>
                        <span>22. Turquesa</span>
                    </div>
                    <div class="objeto-box">
                        <div class="forma losango cor-23"></div>
                        <span>23. Bronze</span>
                    </div>
                    <div class="objeto-box">
                        <div class="forma arredondado cor-24"></div>
                        <span>24. Meia-Noite</span>
                    </div>
                </div>

                <!-- Linha 5 (Objetos 25 a 30) -->
                <div class="linha">
                    <div class="objeto-box">
                        <div class="forma circulo cor-25"></div>
                        <span>25. Mostarda</span>
                    </div>
                    <div class="objeto-box">
                        <div class="forma cor-26"></div>
                        <span>26. Menta</span>
                    </div>
                    <div class="objeto-box">
                        <div class="forma losango cor-27"></div>
                        <span>27. Rubi</span>
                    </div>
                    <div class="objeto-box">
                        <div class="forma arredondado cor-28"></div>
                        <span>28. Safira</span>
                    </div>
                    <div class="objeto-box">
                        <div class="forma circulo cor-29"></div>
                        <span>29. Espacial</span>
                    </div>
                    <div class="objeto-box">
                        <div class="forma cor-30"></div>
                        <span>30. Lava</span>
                    </div>
                </div>

            </div>
        </div>
    </div>

Feedback/Avisos

Atividade dia 25 06 CSS

Atividade do dia 25 06

  /* ==========================================
           ESTILOS DE BASE (Não mexer nesta parte)
           ========================================== */
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        @page {
            size: A4;
            margin: 12mm 12mm;
            background-color: #f8fafc;
        }
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f8fafc;
            color: #1e293b;
            padding: 0;
            margin: 0;
            font-size: 10.5pt;
            line-height: 1.4;
        }
        .container {
            max-width: 100%;
            margin: 0 auto;
        }
        header {
            background-color: #0f172a;
            color: #ffffff;
            padding: 16px 20px;
            border-radius: 6px;
            margin-bottom: 16px;
        }
        header h1 {
            font-size: 18pt;
            margin-bottom: 4px;
            color: #38bdf8;
        }
        header p {
            font-size: 10pt;
            color: #94a3b8;
        }
        .instrucoes {
            background-color: #ffffff;
            border-left: 4px solid #38bdf8;
            padding: 12px 16px;
            margin-bottom: 20px;
            border-radius: 0 6px; box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        }
        .instrucoes h2 {
            font-size: 12pt;
            margin-bottom: 6px;
            color: #0f172a;
        }
        .instrucoes ul {
            margin-left: 20px;
        }
        .instrucoes li {
            margin-bottom: 4px;
        }
        
        /* Painel de Exibição dos Objetos */
        .painel {
            background-color: #ffffff;
            border: 1px solid #e2e8f0;
            border-radius: 6px;
            padding: 20px;
            margin-bottom: 20px;
            text-align: center;
        }
        .grid-objetos {
            display: table;
            width: 100%;
            border-collapse: separate;
            border-spacing: 12px;
        }
        .linha {
            display: table-row;
        }
        .objeto-box {
            display: table-cell;
            width: 16.66%;
            background-color: #f1f5f9;
            border: 2px dashed #cbd5e1;
            border-radius: 8px;
            padding: 12px 6px;
            text-align: center;
            vertical-align: middle;
            height: 90px;
        }
        .objeto-box span {
            display: block;
            font-size: 8.5pt;
            color: #64748b;
            margin-top: 6px;
            font-weight: 600;
        }

        /* Formatos Geométricos Básicos dos Objetos */
        .forma {
            width: 45px;
            height: 45px;
            margin: 0 auto;
            transition: transform 0.2s;
            background-color: #cbd5e1; /* Cor neutra padrão antes de colorirem */
        }
        .forma:hover {
            transform: scale(1.08);
        }
        
        /* Variações de Forma por classe auxiliar */
        .circulo { border-radius: 50%; }
        .losango { transform: rotate(45deg); width: 35px; height: 35px; margin: 5px auto; }
        .losango:hover { transform: rotate(45deg) scale(1.08); }
        .arredondado { border-radius: 10px; }

        /* ==========================================
           CLASSES PRONTAS (Exemplo para os alunos)
           ========================================== */
        .cor-fogo {
            background-color: #ef4444 !important;
            box-shadow: 0 0 10px #f87171;
            border: 1px solid #b91c1c;
        }
        .cor-oceano {
            background-color: #0ea5e9 !important;
            box-shadow: 0 0 10px #38bdf8;
            border: 1px solid #0369a1;
        }
        .cor-esmeralda {
            background-color: #10b981 !important;
            box-shadow: 0 0 10px #34d399;
            border: 1px solid #047857;
        }

        /* ==========================================
           ESPAÇO DOS ALUNOS (Eles devem criar daqui para baixo)
           ========================================== */
        /* DICA: Crie as classes abaixo definindo background-color, box-shadow ou borders! */

Animações

Loader Fluido Balanço Marítimo

Indicador de carregamento assíncrono criado puramente com CSS (sem JS). Estuda propriedades de animação como transform: translateY(), loops infinitos e o uso estratégico da propriedade animation-delay com valores negativos no segundo elemento para desencontrar o movimento e criar o efeito visual de onda fluida.

Tem a parte CSS

<div class="loader-ondas">
  <div class="onda"></div>
  <div class="onda"></div>
</div>

CSS Puro

Input de Denúncias com Foco Estilizado CSS

Componente básico de formulário focado em usabilidade e design limpo. Demonstra o uso da pseudo-classe de estado :focus para aplicar transições suaves (transition) na cor da borda e na sombra projetada (box-shadow) quando o campo é selecionado pelo usuário.

.campo-denuncia {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: "Inter", sans-serif;
  max-width: 400px;
}

.campo-denuncia label {
  font-size: 0.85rem;
  font-weight: 700;
  color: #1f3a4d;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.campo-denuncia input {
  background: #ffffff;
  border: 2px solid #1f3a4d;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 0.9rem;
  color: #1f3a4d;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.campo-denuncia input:focus {
  border-color: #ff8b6b;
  box-shadow: 0 0 0 3px rgba(255, 139, 107, 0.2);
}

.campo-denuncia input::placeholder {
  color: #a0aec0;
  font-style: italic;
}

Formulário

Input de Denúncias com Foco Estilizado

<div class="campo-denuncia">
  <label for="txt-roubo">Relate o Incidente</label>
  <input type="text" id="txt-roubo" placeholder="Ex: Roubaram meu pneu de queijo na mesa 2...">
</div>

CSS Puro

Card de Notificação Crítica de Praia CSS

Card de aviso estático para mensagens de erro, alertas ou notificações do sistema. Utiliza uma borda esquerda de destaque (border-left) de 5px e uma animação infinita baseada em @keyframes que faz o emoji de sirene pulsar (alterando a propriedade transform: scale).

.alerta-praia {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #fff5f5;
  border-left: 5px solid #e53e3e;
  border-radius: 8px;
  padding: 16px;
  max-width: 350px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.alerta-icone {
  font-size: 1.5rem;
  animation: pulsar 1.5s infinite alternate;
}

.alerta-conteudo h4 {
  font-family: "Inter", sans-serif;
  color: #c53030;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}

.alerta-conteudo p {
  font-size: 0.85rem;
  color: #742a2a;
  line-height: 1.4;
}

@keyframes pulsar {
  from { transform: scale(1); }
  to { transform: scale(1.15); }
}

Botão

Botão Alerta Anti-Gaivota

Ao passar o mouse (hover), ele muda de cor e simula um efeito de "alerta" (tremidinha de clique) usando apenas CSS

<button class="btn-alerta-gaivota">
  <span>Fazer Pedido Rápido</span>
  <small>Antes que elas vejam</small>
</button>

CSS Puro

Botão com Efeito colorido (CSS)

<style>
  .meu-botao {
    background-color: #007BFF;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
  }

  .meu-botao:hover {
    background-color: #0056b3;
  }
</style>

Botão

Botão que Muda Cor de Texto

Botão que Muda Cor de Texto

<p id="meutexto">Texto que mudará de cor.</p>
<button onclick="document.getElementById('meutexto').style.color = 'red';">Mudar Cor</button>

Botão

Botão com Alerta

Botão com Alerta

<button onclick="alert('Você clicou no botão!')">Mostrar Alerta</button>

Botão

Botão com Link

<button onclick="window.location.href='https://www.google.com';">Ir para o Google</button>

Botão

Botão Simples

Botão Simples

<button>Clique Aqui</button>

CSS Puro

CSS BASE PARA O HTML BASE CODE PEN

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:Arial, sans-serif;
    background:#f5f5f5;
}

.topo{

    background:#1e3a5f;

    color:white;

    padding:20px 40px;
}

.logo-area{

    display:flex;

    align-items:center;

    gap:20px;
}

.logo-area img{

    border-radius:50%;
}

.menu{

    background:#16304f;

    display:flex;

    justify-content:center;

    gap:30px;

    padding:15px;
}

.menu a{

    color:white;

    text-decoration:none;

    font-weight:bold;
}

.menu a:hover{

    opacity:0.7;
}

.hero-container{

    min-height:70vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:40px;
}

.hero-content{

    max-width:800px;

    text-align:center;
}

.hero-title{

    font-size:3rem;

    margin-bottom:20px;
}

.hero-subtitle{

    font-size:1.2rem;

    margin-bottom:30px;
}

.btn-exemplo{

    border:none;

    background:#3498db;

    color:white;

    padding:15px 30px;

    border-radius:8px;

    cursor:pointer;
}

Layout

HTML BASE para o Code PEN

<header class="topo">

    <div class="logo-area">

        <img src="https://via.placeholder.com/80"
             alt="Logo">

        <div>

            <h1>Pódio da Aparício</h1>

            <p>
                Celebrando o talento dos nossos alunos
            </p>

        </div>

    </div>

</header>

<nav class="menu">

    <a href="#">Início</a>

    <a href="#">Destaques</a>

    <a href="#">OBMEP</a>

    <a href="#">Projetos</a>

    <a href="#">Galeria</a>

</nav>

<section class="hero-container">

    <div class="hero-content">

        <h1 class="hero-title">
            Reconhecendo quem faz a diferença
        </h1>

        <p class="hero-subtitle">
            Conheça os alunos e projetos que estão
            construindo a história da Escola Aparício.
        </p>

        <button class="btn-exemplo">
            Ver Destaques
        </button>

    </div>

</section>

Texto

BLOCO 7 - HISTÓRIA DE SUCESSO

<section class="hero-container">

    <div class="hero-content">

        <h1 class="hero-title">
            História de Sucesso
        </h1>

        <img src="https://via.placeholder.com/200">

        <p class="hero-subtitle">
            Nome do Estudante
        </p>

        <p>
            Conte aqui a trajetória do aluno.
        </p>

    </div>

</section>

Texto

BLOCO 6 - PÓDIO DOS ALUNOS

<section class="hero-container">

    <div class="hero-content">

        <h1 class="hero-title">
            Pódio da Aparício
        </h1>

        <div class="hero-slots">

            <div>
                <h2>🥈</h2>
                <p>Aluno 2</p>
            </div>

            <div>
                <h2>🥇</h2>
                <p>Aluno 1</p>
            </div>

            <div>
                <h2>🥉</h2>
                <p>Aluno 3</p>
            </div>

        </div>

    </div>

</section>

Texto

BLOCO 5 - PROJETO PREMIADO

<section class="hero-container">

    <div class="hero-content">

        <h1 class="hero-title">
            Projeto Premiado
        </h1>

        <p class="hero-subtitle">
            Sistema de Biblioteca Virtual
        </p>

        <p>
            Desenvolvido pelos alunos do EMTI.
        </p>

    </div>

</section>

Texto

BLOCO 4 - GALERIA DE DESTAQUES

<section class="hero-container">

    <div class="hero-content">

        <h1 class="hero-title">
            Galeria de Destaques
        </h1>

        <div class="hero-slots">

            <img src="https://via.placeholder.com/150">

            <img src="https://via.placeholder.com/150">

            <img src="https://via.placeholder.com/150">

        </div>

    </div>

</section>

Texto

BLOCO 3 - CONQUISTA DA SEMANA

<section class="hero-container">

    <div class="hero-content">

        <h1 class="hero-title">
            Conquista da Semana
        </h1>

        <p class="hero-subtitle">
            Projeto Destaque
        </p>

        <p>
            Descrição da conquista.
        </p>

        <button class="btn-exemplo">
            Ver Mais
        </button>

    </div>

</section>

Texto

BLOCO 2 - MEDALHISTA DA OBMEP

<section class="hero-container">

    <div class="hero-content">

        <h1 class="hero-title">
            Medalhista da OBMEP
        </h1>

        <img src="https://via.placeholder.com/180">

        <h2>Nome do Aluno</h2>

        <p class="hero-subtitle">
            Medalha de Ouro
        </p>

    </div>

</section>

Texto

BLOCO 1 - ALUNO DESTAQUE

<section class="hero-container">

    <div class="hero-content">

        <h1 class="hero-title">Aluno Destaque</h1>

        <img src="https://via.placeholder.com/200"
             alt="Foto do Aluno">

        <p class="hero-subtitle">
            Nome do aluno
        </p>

        <p>
            Descreva aqui a conquista realizada.
        </p>

    </div>

</section>

CSS Puro

Linha do tempo das conquistas.

Linha do tempo das conquistas. Ideal para páginas de conquistas.

.timeline {
    border-left: 4px solid gold;
    padding-left: 20px;
}

.timeline-item {
    margin-bottom: 30px;
}

CSS Puro

Título com brilho neon.

.hero-title {
    text-shadow:
        0 0 5px white,
        0 0 10px white,
        0 0 20px #3498db,
        0 0 40px #3498db;
}

CSS Puro

Faixa decorativa de estrelas.

.hero-container {
    position: relative;
}

.hero-container::before {
    content: "⭐ ⭐ ⭐ ⭐ ⭐ ⭐ ⭐";
    position: absolute;
    width: 100%;
    top: 20px;
    text-align: center;
    opacity: 0.2;
    font-size: 2rem;
}

CSS Puro

BORDA DE MEDALHA

🥇🥈🥉 Borda inspirada nas medalhas.

.hero-content {
    border: 5px solid transparent;

    background:
        linear-gradient(white, white) padding-box,
        linear-gradient(45deg,
            #FFD700,
            #C0C0C0,
            #CD7F32,
            #FFD700) border-box;
}

CSS Puro

Faixa de luz passando sobre o card.

✨ Faixa de luz passando sobre o card.

.hero-content {
    position: relative;
    overflow: hidden;
}

.hero-content::after {
    content: "";
    position: absolute;
    top: -100%;
    left: -50%;
    width: 50%;
    height: 300%;
    background: rgba(255,255,255,0.15);
    transform: rotate(25deg);
    animation: brilho 5s infinite;
}

@keyframes brilho {
    from {
        left: -80%;
    }

    to {
        left: 150%;
    }
}

CSS Puro

UPGRADE Troféu

🏆 Adiciona um troféu no card principal.

.hero-content {
    border-top: 8px solid gold;
    position: relative;
}

.hero-content::before {
    content: "🏆";
    position: absolute;
    top: -30px;
    right: 20px;
    font-size: 3rem;
}

CSS Puro

TITULO: UPGRADE GOLD - EFEITO CAMPEÃO

🥇 Texto dourado brilhante.

.hero-title {
    background: linear-gradient(45deg, #FFD700, #FFF8DC, #FFD700);
    background-size: 200% auto;

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    animation: goldMove 3s linear infinite;
}

@keyframes goldMove {
    to {
        background-position: 200% center;
    }
}

JavaScript

atualização

colisão

const quadrado = document.getElementById('quadrado');

// Posições iniciais
let posicaoX = 275; 
let posicaoY = 175;
let tamanho = 50;

window.addEventListener('keydown', (event) => {
    const tecla = event.key.toLowerCase();
    const velocidade = 20;

    // 1. Calculamos a próxima posição baseada na tecla
    let proximoX = posicaoX;
    let proximoY = posicaoY;

    if (tecla === 'd') proximoX += velocidade;
    if (tecla === 'a') proximoX -= velocidade;
    if (tecla === 'w') proximoY -= velocidade;
    if (tecla === 's') proximoY += velocidade;

    // 2. Lógica da Barreira (Limites do Container)
    // Largura do container (600) e Altura (400)
    const limiteDireita = 600 - tamanho;
    const limiteBaixo = 400 - tamanho;

    // Verificação para o eixo X (Esquerda e Direita)
    if (proximoX >= 0 && proximoX <= limiteDireita) {
        posicaoX = proximoX;
    }

    // Verificação para o eixo Y (Cima e Baixo)
    if (proximoY >= 0 && proximoY <= limiteBaixo) {
        posicaoY = proximoY;
    }

    // 3. Aplicamos o movimento
    quadrado.style.left = posicaoX + 'px';
    quadrado.style.top = posicaoY + 'px';
});

Layout

Projeto empreendedorismo

Projeto para vendas

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sistema de Mercado - Home</title>
    <style>
        /* VARIÁVEIS PARA EDIÇÃO RÁPIDA */
        :root {
            --primary-color: #27ae60;    /* Cor principal (Verde Mercado) */
            --secondary-color: #2c3e50;  /* Cor do Cabeçalho/Rodapé */
            --bg-color: #f4f7f6;         /* Fundo da página */
            --card-bg: #ffffff;          /* Fundo dos botões/cards */
            --text-dark: #333333;
            --text-light: #ffffff;
            --transition: 0.3s ease;
            --shadow: 0 4px 6px rgba(0,0,0,0.1);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background-color: var(--bg-color);
            color: var(--text-dark);
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }

        /* CABEÇALHO */
        header {
            background-color: var(--secondary-color);
            color: var(--text-light);
            padding: 1rem 5%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: var(--shadow);
        }

        header h1 {
            font-size: 1.5rem;
            letter-spacing: 1px;
        }

        .status-badge {
            background-color: var(--primary-color);
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 0.8rem;
        }

        /* CONTEÚDO PRINCIPAL */
        main {
            flex: 1;
            padding: 40px 5%;
            max-width: 1200px;
            margin: 0 auto;
            width: 100%;
        }

        .welcome-section {
            margin-bottom: 40px;
            text-align: center;
        }

        /* GRID DE NAVEGAÇÃO */
        .nav-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 25px;
        }

        .nav-card {
            background-color: var(--card-bg);
            padding: 30px;
            border-radius: 12px;
            text-align: center;
            text-decoration: none;
            color: var(--text-dark);
            box-shadow: var(--shadow);
            transition: var(--transition);
            border: 2px solid transparent;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .nav-card:hover {
            transform: translateY(-5px);
            border-color: var(--primary-color);
        }

        .icon {
            font-size: 3rem;
            margin-bottom: 15px;
        }

        .nav-card h2 {
            margin-bottom: 10px;
            color: var(--secondary-color);
        }

        .nav-card p {
            font-size: 0.9rem;
            color: #666;
        }

        /* RODAPÉ */
        footer {
            background-color: var(--secondary-color);
            color: var(--text-light);
            text-align: center;
            padding: 1.5rem;
            font-size: 0.85rem;
            margin-top: 40px;
        }

        /* RESPONSIVIDADE */
        @media (max-width: 600px) {
            header {
                flex-direction: column;
                gap: 10px;
            }
        }
    </style>
</head>
<body>

    <header>
        <h1>MERCADO PRO v1.0</h1>
        <div class="status-badge">Sistema Online</div>
    </header>

    <main>
        <section class="welcome-section">
            <h2>Painel de Controle</h2>
            <p>Selecione o módulo que deseja acessar hoje.</p>
        </section>

        <nav class="nav-grid">
            <a href="inventario.html" class="nav-card">
                <div class="icon">📦</div>
                <h2>Inventário</h2>
                <p>Cadastre produtos, controle estoque e preços.</p>
            </a>

            <a href="caixa.html" class="nav-card">
                <div class="icon">🛒</div>
                <h2>Caixa (PDV)</h2>
                <p>Realize vendas e calcule o total da compra.</p>
            </a>

            <a href="relatorios.html" class="nav-card">
                <div class="icon">📊</div>
                <h2>Relatórios</h2>
                <p>Visualize vendas e lucro do período.</p>
            </a>
        </nav>
    </main>

    <footer>
        &copy; 2026 Mercado Pro - Gerenciamento Inteligente.
        <br>
        <small>Desenvolvido para gestão eficiente de estoque.</small>
    </footer>

</body>
</html>

JavaScript

Adicionar produto no carrinho

Java para carrinho de compras usar no final do arquivo HTML antes de body

<script>
    function adicionarAoCarrinho(nome, preco) {
        // 1. Busca o que já existe no carrinho (se não existir, cria uma lista vazia)
        let carrinho = JSON.parse(localStorage.getItem('meuCarrinho')) || [];

        // 2. Adiciona a nova moto na lista
        carrinho.push({ nome: nome, preco: preco });

        // 3. Salva a lista atualizada de volta no navegador
        localStorage.setItem('meuCarrinho', JSON.stringify(carrinho));

        alert(nome + " foi adicionada ao carrinho!");
    }
</script>

Layout

carrinho

Carrinho de compras pode ser usado por qualquer um

O nome deve sempre ser carrinho.html

<!DOCTYPE html>

<html lang="pt-br">

<head>

    <meta charset="UTF-8">

    <title>CARRINHO DE COMPRAS</title>

    <style>

        body { font-family: Arial, sans-serif; background-color: rgb(160, 160, 160); padding: 20px; }

        .container { width: 80%; max-width: 600px; margin: auto; background: #c2c2c2; padding: 30px; border-radius: 10px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }

        h1 { color: #2b3a6b; text-align: center; }

        .item { display: flex; justify-content: space-between; border-bottom: 1px solid #eee; padding: 10px 0; }

        .total { font-size: 1.5rem; color: #2b3a6b; text-align: right; margin-top: 20px; }

        button { background-color: #5872c9; color: white; border: none; padding: 10px 20px; border-radius: 6px; cursor: pointer; width: 100%; margin-top: 10px; }

        .limpar { background-color: #5872c9; color: #ffffff; }

    </style>

</head>

<body>




    <div class="container">

        <h1>ITENS SELECIONADOS 🛒</h1>

        <div id="lista-itens">

            </div>

       

        <div class="total">

            <strong>Total: R$ <span id="valor-total">0,00</span></strong>

        </div>




        <button onclick="alert('Pedido enviado!')">FINALIZAR COMPRA</button>

        <button class="limpar" onclick="limparCarrinho()">ESVAZIAR CARRINHO</button>

        <button class="limpar" onclick="window.history.back()">VOLTAR PARA APARELHOS</button>

    </div>




    <script>

        function carregarCarrinho() {

            const lista = document.getElementById('lista-itens');

            const totalDisplay = document.getElementById('valor-total');

            let carrinho = JSON.parse(localStorage.getItem('meuCarrinho')) || [];

           

            if (carrinho.length === 0) {

                lista.innerHTML = "<p>NENHUM IPHONE SELECIONADO.</p>";

                totalDisplay.innerText = "0,00";

                return;

            }




            let soma = 0;

            lista.innerHTML = "";

           

            carrinho.forEach((item) => {

                soma += item.preco;

                lista.innerHTML += `

                    <div class="item">

                        <span>${item.nome}</span>

                        <span>R$ ${item.preco.toLocaleString('pt-BR')}</span>

                    </div>

                `;

            });




            totalDisplay.innerText = soma.toLocaleString('pt-BR', { minimumFractionDigits: 2 });

        }




        function limparCarrinho() {

            localStorage.removeItem('meuCarrinho');

            carregarCarrinho();

        }




        // Carrega os dados assim que a página abrir

        window.onload = carregarCarrinho;

    </script>

</body>

</html>

CSS Puro

botão ver detalhes

css

/* TITULO: UPGRADE MODAL - JANELA SOBREPOSTA */

.modal-especial {
    display: none; /* Invisível por padrão */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85); /* Fundo escuro atrás da janela */
    z-index: 9999; /* Garante que fique na frente de tudo */
    justify-content: center;
    align-items: center;
}

.modal-conteudo {
    background: var(--sys-color-bg);
    padding: 30px;
    border-radius: var(--sys-radius);
    max-width: 500px;
    width: 90%;
    position: relative;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    animation: slideUp 0.3s ease-out;
}

/* Efeito de entrada suave */
@keyframes slideUp {
    from { transform: translateY(50px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.fechar-modal {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 30px;
    font-weight: bold;
    color: #95a5a6;
    cursor: pointer;
    transition: 0.3s;
}

.fechar-modal:hover {
    color: var(--sys-color-primary);
}

.img-detalhe {
    width: 100%;
    height: auto;
    max-height: 250px;
    object-fit: contain;
    border-radius: var(--sys-radius);
    margin-bottom: 20px;
}

#modal-titulo {
    margin-bottom: 15px;
    color: var(--sys-color-text);
}

#modal-descricao {
    color: #666;
    line-height: 1.6;
    margin-bottom: 20px;
}

CSS Puro

Inteligência da Vitrine (Upgrade Slider Horizontal)

Descrição: Este upgrade transforma a lista vertical em uma linha horizontal inteligente. Ele garante que os cards tenham sempre o mesmo tamanho e que a rolagem seja suave e "magnética" (parando sempre no início de um card).

Destaques do Estilo:

Scroll Snap: Faz com que o card "grude" na tela ao ser deslizado.

Responsividade Nativa: No computador mostra vários produtos; no celular mostra um e um pedaço do próximo, convidando o usuário a deslizar.

Estilização de Cards: Adiciona bordas suaves e sombras para destacar os produtos do fundo da página.

/* TITULO: UPGRADE SLIDER - VITRINE HORIZONTAL */

.product-slider-container {
    padding: var(--sys-spacing);
    max-width: 1200px;
    margin: 0 auto;
}

.product-slider-track {
    display: flex;
    gap: 20px;
    overflow-x: auto; /* Ativa rolagem horizontal */
    scroll-snap-type: x mandatory; /* Efeito magnético */
    padding: 20px 0;
    scroll-behavior: smooth;
}

/* Esconde a barra de rolagem para um visual mais limpo */
.product-slider-track::-webkit-scrollbar { display: none; }

.product-card {
    min-width: 250px; /* Largura de cada card */
    background: var(--sys-color-surface);
    border-radius: var(--sys-radius);
    padding: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    scroll-snap-align: start; /* Onde o card "gruda" */
    transition: var(--sys-transition);
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

.product-image img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: var(--sys-radius);
    margin-bottom: 15px;
}

.product-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: center;
}

.product-name { font-weight: bold; font-size: 1.1rem; }
.product-price { color: var(--sys-color-primary); font-size: 1.2rem; font-weight: bold; }

.sys-btn-small {
    background: var(--sys-color-primary);
    color: white;
    border: none;
    padding: 8px;
    border-radius: var(--sys-radius);
    cursor: pointer;
    margin-top: 5px;
}

Navegação

Estrutura de Vitrine Deslizante (Product Slider)

Descrição: Este código cria um trilho horizontal para exibir produtos com foto, nome e preço. É perfeito para a página principal quando você tem muitos itens e pouco espaço vertical. O usuário pode deslizar para os lados para ver mais opções.

O que este código faz:

Cards Compactos: Organiza cada item dentro de um "card" padronizado.

Flexibilidade: Você pode adicionar quantos itens quiser; o navegador criará a barra de rolagem lateral automaticamente.

Botão Integrado: Cada produto já vem com um botão de "Ver Detalhes".

🔗 CONEXÃO OBRIGATÓRIA: Para que os produtos fiquem lado a lado e tenham o efeito de "trava" ao deslizar, você DEVE aplicar o código correspondente na Sessão CSS (Upgrade Slider - Vitrine Horizontal).

<section class="product-slider-container">
    <h2 class="sys-title-dark">Ofertas da Semana</h2>
    
    <div class="product-slider-track">
        
        <div class="product-card">
            <div class="product-image">
                <img src="https://via.placeholder.com/200x200?text=Moto+1" alt="Produto">
            </div>
            <div class="product-info">
                <span class="product-name">Capacete Esportivo</span>
                <span class="product-price">R$ 450,00</span>
                <button class="sys-btn-small">Ver Detalhes</button>
            </div>
        </div>

        <div class="product-card">
            <div class="product-image">
                <img src="https://via.placeholder.com/200x200?text=Moto+2" alt="Produto">
            </div>
            <div class="product-info">
                <span class="product-name">Jaqueta de Couro</span>
                <span class="product-price">R$ 890,00</span>
                <button class="sys-btn-small">Ver Detalhes</button>
            </div>
        </div>

        <div class="product-card">
            <div class="product-image">
                <img src="https://via.placeholder.com/200x200?text=Moto+3" alt="Produto">
            </div>
            <div class="product-info">
                <span class="product-name">Luvas Carbono</span>
                <span class="product-price">R$ 120,00</span>
                <button class="sys-btn-small">Ver Detalhes</button>
            </div>
        </div>

        <div class="product-card">
            <div class="product-image">
                <img src="https://via.placeholder.com/200x200?text=Moto+4" alt="Produto">
            </div>
            <div class="product-info">
                <span class="product-name">Bota Off-Road</span>
                <span class="product-price">R$ 560,00</span>
                <button class="sys-btn-small">Ver Detalhes</button>
            </div>
        </div>

    </div>
</section>

CSS Puro

Estrutura do Banner Rotativo CSS

Descrição: Este bloco de CSS é o que transforma uma lista de imagens em um componente interativo e moderno. Ele utiliza uma tecnologia chamada Scroll Snap, que faz com que a imagem "prenda" magneticamente na tela quando o usuário desliza, garantindo que o banner nunca fique parado no meio do caminho.

Destaques do Estilo:

Efeito de Profundidade: Aplica automaticamente uma camada de escurecimento nas fotos para que os textos brancos fiquem sempre legíveis.

Rolagem Suave: Ativa o scroll-behavior: smooth, fazendo com que a transição entre os banners seja fluida e elegante.

Design Adaptável: Garante que o banner ocupe 100% da largura da tela, mas mantém uma altura fixa e profissional de 400px.

🔗 CONEXÃO OBRIGATÓRIA: Este estilo só funcionará se as classes no seu HTML forem exatamente as mesmas (.carousel-container, .carousel-track, etc). Certifique-se de ter copiado a estrutura na Estrutura do Banner Rotativo antes de aplicar este upgrade.

/* TITULO: UPGRADE CAROUSEL - BANNER DESLIZANTE */

.carousel-container {
    width: 100%;
    height: 400px;
    overflow: hidden;
    position: relative;
    background: #000;
}

.carousel-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory; /* Faz a imagem "travar" no lugar certo */
    scroll-behavior: smooth;    /* Deslize suave ao clicar nos pontos */
    height: 100%;
}

/* Remove a barra de rolagem visual, mas mantém a função */
.carousel-track::-webkit-scrollbar { display: none; }

.carousel-item {
    min-width: 100%;
    height: 100%;
    scroll-snap-align: start;
    position: relative;
}

.carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Garante que a foto não estique */
    opacity: 0.7;      /* Escurece a foto para o texto aparecer */
}

.carousel-caption {
    position: absolute;
    bottom: 20%;
    left: 10%;
    color: white;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.5);
}

.carousel-caption h2 { font-size: 2.5rem; margin-bottom: 10px; }

/* PONTINHOS DE NAVEGAÇÃO */
.carousel-indicators {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
}

.carousel-indicators a {
    width: 12px;
    height: 12px;
    background: rgba(255,255,255,0.5);
    border-radius: 50%;
    text-decoration: none;
    transition: 0.3s;
}

.carousel-indicators a:hover {
    background: var(--sys-color-primary);
    transform: scale(1.3);
}

Navegação

Estrutura do Banner Rotativo

Descrição: Este código cria a "carcaça" do seu banner de destaque. Ele é composto por um trilho invisível (carousel-track) onde as imagens ficam enfileiradas lado a lado, prontas para deslizar. É o espaço ideal para colocar as promoções principais, lançamentos de motos ou avisos importantes do seu site.

O que este código faz:

Organização de Itens: Permite adicionar quantos banners você quiser usando a classe .carousel-item.

Legendas Prontas: Já possui um espaço fixo (carousel-caption) para títulos e descrições sobre a imagem.

Navegação por Âncoras: Utiliza IDs específicos para que os botões de controle saibam exatamente qual imagem mostrar.

🔗 CONEXÃO OBRIGATÓRIA: Este HTML sozinho mostrará as imagens uma embaixo da outra. Para que elas fiquem lado a lado e deslizem como um carrossel profissional, você DEVE aplicar o código correspondente na Sessão CSS (Upgrade Carousel - Banner Deslizante).

<div class="carousel-container">
    <div class="carousel-track">
        
        <div class="carousel-item" id="banner1">
            <img src="https://images.unsplash.com/photo-1519389950473-47ba0277781c" alt="Promoção 1">
            <div class="carousel-caption">
                <h2>Novidades Tech 2026</h2>
                <p>Confira os lançamentos da semana com 20% OFF.</p>
            </div>
        </div>

        <div class="carousel-item" id="banner2">
            <img src="https://images.unsplash.com/photo-1498050108023-c5249f4df085" alt="Promoção 2">
            <div class="carousel-caption">
                <h2>Programação Avançada</h2>
                <p>Cursos de PHP e React com certificados inclusos.</p>
            </div>
        </div>

    </div>
    
    <div class="carousel-indicators">
        <a href="#banner1"></a>
        <a href="#banner2"></a>
    </div>
</div>

CSS Puro

Galeria - Grade com Zoom

Descrição: Este bloco de CSS transforma uma lista simples em uma vitrine profissional. Ele utiliza o CSS Grid para organizar os itens automaticamente, não importa quantos você adicione.

Destaques do Código:

Grid Responsivo: As fotos se ajustam sozinhas (lado a lado) dependendo do tamanho da tela do celular ou computador.

Efeito Hover: O item aumenta levemente de tamanho quando o mouse passa por cima, indicando que é clicável.

Lógica de Tela Cheia: Contém as regras de position: fixed que fazem a imagem "saltar" para a frente de tudo quando o usuário clica.

⚠️ ATENÇÃO PROFESSOR/ALUNO: > Para que este estilo tenha algo para "vestir", você deve primeiro copiar a estrutura na Sessão Lista (Galeria-Grid). Certifique-se de que as classes (.galeria-item, .galeria-grid) sejam as mesmas em ambos os arquivos.

/* TITULO: UPGRADE GALERIA - GRADE COM ZOOM */

.galeria-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Fotos lado a lado */
    gap: var(--sys-spacing);
    padding: var(--sys-spacing);
}

.galeria-item {
    background: var(--sys-color-surface);
    padding: 15px;
    border-radius: var(--sys-radius);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    text-align: center;
    cursor: pointer;
    transition: var(--sys-transition);
    position: relative;
}

.galeria-item img {
    width: 100%;           /* Imagem ocupa todo o card */
    height: 150px;
    object-fit: cover;     /* Não distorce a foto */
    border-radius: var(--sys-radius);
    margin-bottom: 10px;
}

.galeria-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.galeria-nome { font-weight: bold; color: var(--sys-color-text); }
.galeria-valor { color: var(--sys-color-primary); font-size: 1.1rem; }

/* --- EFEITO TELA CHEIA (Ao clicar) --- */
.galeria-item.full-screen {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    z-index: 9999;
    background: rgba(0,0,0,0.9);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0;
}

.galeria-item.full-screen img {
    width: auto;
    height: 70%;
    max-width: 90%;
}

.galeria-item.full-screen .galeria-info {
    color: white;
    font-size: 1.5rem;
}

CSS Puro

MUDANÇAS PARA O HERO MASTER 6#

Uso: Cria um efeito de elevação na caixa de conteúdo, fazendo-a parecer flutuar sobre o fundo.

/* TITULO: UPGRADE FLOAT - SOMBRA DE PROFUNDIDADE */
.hero-content {
    background: white;
    color: #333;
    padding: 50px;
    border-radius: var(--sys-radius);
    /* Sombra suave e espalhada */
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2); 
    transform: translateY(-10px); /* Sobe um pouco a caixa */
}

.hero-title, .hero-subtitle {
    color: var(--sys-color-primary) !important; /* Força a cor principal */
}

CSS Puro

TITULO QUE MUDA DE COR (TITULO EM GRADIENTE)

Uso: Em vez de uma cor sólida no título, o próprio texto ganha as cores do gradiente.

/* TITULO: UPGRADE NEON TEXT - TÍTULO COLORIDO */
.hero-title {
    background: linear-gradient(to right, #f321d7, #ffec61);
    -webkit-background-clip: text; /* "Corta" o fundo no formato das letras */
    -webkit-text-fill-color: transparent; /* Deixa o preenchimento invisível */
    font-weight: 900;
    filter: drop-shadow(0px 5px 10px rgba(0,0,0,0.2));
}

Layout

Layout Hero Master

O que é:
É a parte principal do site, tipo a “capa”. É a primeira coisa que aparece e chama a atenção.

Para que serve:
Mostrar um título, um texto e um botão logo no início da página.

Como funciona:
Tudo fica centralizado na tela (no meio), com um fundo colorido e organizado automaticamente.

Diferencial:
Tem um espaço pronto no meio onde você pode colocar botões ou textos depois.

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meu Projeto Modular</title>

    <style>
        /* O CSS SEMPRE ENTRA AQUI NO HEAD DENTRO DA TAG STYLE */
        
        :root {
            --primary-color: #3498db; /* Cor principal que todos os códigos usarão */
            --text-color: #ffffff; /* Cor do texto para contraste */
            --padding-standard: 20px; /* Espaçamento padrão do sistema */
            --transition: 0.3s ease; /* Velocidade de animações universal */
        }

        .hero-container {
            display: flex; /* Usa Flexbox para alinhar tudo facilmente */
            align-items: center; /* Centraliza verticalmente */
            justify-content: center; /* Centraliza horizontalmente */
            min-height: 80vh; /* Ocupa 80% da altura da tela */
            background-color: var(--primary-color); /* Usa variável global */
            padding: var(--padding-standard); /* Espaçamento padrão */
            text-align: center; /* Centraliza texto */
            font-family: sans-serif;
        }

        .hero-content {
            max-width: 800px; /* Evita que o texto estique demais */
        }

        .hero-title {
            font-size: 3rem; /* Tamanho grande para destaque */
            margin-bottom: 10px;
            color: var(--text-color);
        }

        .hero-subtitle {
            font-size: 1.2rem;
            opacity: 0.9;
            margin-bottom: 30px;
            color: var(--text-color);
        }

        .hero-slots {
            display: flex;
            gap: 15px;
            justify-content: center;
        }

        .btn-exemplo {
            padding: 10px 25px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            background: #fff;
            color: var(--primary-color);
            font-weight: bold;
            transition: var(--transition);
        }

        .btn-exemplo:hover {
            transform: scale(1.05); /* Efeito leve ao passar o mouse */
        }
    </style>
</head>
<body>

    <section class="hero-container"> <!-- Container principal -->
        <div class="hero-content"> <!-- Caixa interna de centralização -->
            
            <h1 class="hero-title">Título do Seu Projeto</h1> <!-- Espaço para Títulos -->
            <p class="hero-subtitle">Descreva aqui o objetivo principal da sua página.</p> <!-- Espaço para Textos -->
            
            <div class="hero-slots"> <!-- Área para botões -->
                <button class="btn-exemplo">Botão de Exemplo</button>
            </div>

        </div>
    </section>

</body>
</html>

Layout

Aula 31/03

O código está em erro, você deve completar as tags e colocar as partes que estão faltando.

<!DOCTYPE html>

<html lang="pt-br">

<head>

<meta charset="UTF-8">

<title>Desafio HTML




<style>

.container {

    display: flex;

    align-items: center;

}




img {

    width: 150px;

    margin-left:

}

</style>




</head>




<body>




<!-- TÍTULO -->

<h1>  Meu Site de Programação




<!-- PARÁGRAFO -->

<p>  Hoje vamos aprender HTML e botões




<!-- coloque um parágrafo correto aqui usando a biblioteca -->






<!-- IMAGEM + TEXTO (FLEXBOX) -->








<!-- LISTA  -->

<h2>Menu do Site




<ul>

<li>Home

<li>Sobre

<li>Contato

<li>

</ul






<!-- BOTÕES -->




<h2>Interações




<!-- coloque aqui um botão simples -->




<button> Clique aqui




<!-- botão com alerta (complete o código) -->





<!-- botão mudar cor (incompleto) -->





<!-- botão com link -->

 

<!-- coloque aqui o botão com link da biblioteca -->






<!-- IMAGEM CLICÁVEL -->




<h2>Imagem Interativa




<!-- transforme isso em botão clicável -->

<img src="botao.png"






<!-- TEXTO FINAL -->




<h2>Finalização




<p>Obrigado por visitar o site




<p>






<!-- DESAFIO EXTRA -->




<!-- crie uma lista ordenada aqui -->

<ol>

<li>

<li>

<li>

</ol






</body>




</html>

Feedback/Avisos

Parte 1 aula 27/03

Atividade avaliativa

Complete o código!

Valor 2 pontos

<!DOCTYPE html>
<____ lang="pt-br">
<____>
  <meta charset="UTF-8">
  <title>Sexta-feira Linda</title>
  <style>
    body {
      background-color: #ffe4e1;
      font-family: Arial;
      text-align: center;
    }

    <____> {
      background-color: #ff69b4;
      padding: 20px;
      color: white;
    }

    <____> {
      margin: 20px;
    }

    img {
      width: 300px;
      border-radius: 10px;
    }

    <____> {
      margin-top: 20px;
      background-color: #ffb6c1;
      padding: 10px;
    }

    a {
      color: blue;
    }
  </style>
</____>

<____>

<____>
  <____>🌸 Sexta-feira Linda 🌸</____>
</____>

<____>
  <p><____>Hoje é dia de alegria!</____> Aproveite sua sexta-feira.</p>

  <____ src="https://via.placeholder.com/300" alt="Imagem bonita">

  <p>Ouça uma música especial para hoje:</p>
  <____ href="#">Clique aqui</____>
</____>

<____>
  <p><____>Tenha um ótimo dia!</____></p>
</____>

</____>
</html>

Feedback/Avisos

aula 02/03/2026

aula

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Projeto Estrutura HTML</title>

    <style>
        /* ===== RESET BÁSICO ===== */
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body{
            font-family: Arial, Helvetica, sans-serif;
            background-color: #f4f6f9;
        }

        header{
            background-color: #1e3a8a;
            color: white;
            text-align: center;
            padding: 20px;
        }

        nav{
            background-color: #3b82f6;
            padding: 10px;
            text-align: center;
        }

        nav a{
            color: white;
            text-decoration: none;
            margin: 0 15px;
            font-weight: bold;
        }

        section{
            padding: 20px;
            margin: 20px;
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }

        footer{
            background-color: #1e3a8a;
            color: white;
            text-align: center;
            padding: 15px;
            margin-top: 20px;
        }

        .area-exercicio{
            border: 2px dashed #999;
            padding: 20px;
            margin-top: 15px;
            background-color: #f9fafb;
        }
    </style>
</head>

<body>

    <!-- ===== CABEÇALHO ===== -->
    <header>
        <h1>Projeto de Estrutura HTML</h1>
        <h2>Atividade de Inserção de Elementos</h2>
        <p>Complete os espaços indicados pelo professor.</p>
    </header>

    <!-- ===== MENU ===== -->
    <nav>
        <a href="#">Home</a>
        <a href="#">Sobre</a>
        <a href="#">Contato</a>
    </nav>

    <!-- ===== SEÇÃO DE IMAGENS ===== -->
    <section>
        <h2>Área de Imagens</h2>
        <p>Os alunos devem inserir 4 tipos diferentes de imagens abaixo:</p>

        <div class="area-exercicio">
            <!-- INSERIR AQUI:
                 1 - Imagem simples
                 2 - Imagem com width e height
                 3 - Imagem com link
                 4 - Imagem com borda personalizada
            -->
        </div>
    </section>

    <!-- ===== SEÇÃO DE BOTÕES ===== -->
    <section>
        <h2>Área de Botões</h2>
        <p>Os alunos devem inserir 4 tipos diferentes de botões:</p>

        <div class="area-exercicio">
            <!-- INSERIR AQUI:
                 1 - Botão simples
                 2 - Botão com cor personalizada
                 3 - Botão com link
                 4 - Botão com efeito hover
            -->
        </div>
    </section>

    <!-- ===== SEÇÃO DE LISTAS ===== -->
    <section>
        <h2>Área de Listas</h2>
        <p>Os alunos devem inserir 2 tipos de listas:</p>

        <div class="area-exercicio">
            <!-- INSERIR AQUI:
                 1 - Lista não ordenada (ul)
                 2 - Lista ordenada (ol)
            -->
        </div>
    </section>

    <!-- ===== SEÇÃO DE TABELAS ===== -->
    <section>
        <h2>Área de Tabelas</h2>
        <p>Os alunos devem inserir 2 tabelas diferentes:</p>

        <div class="area-exercicio">
            <!-- INSERIR AQUI:
                 1 - Tabela simples (3 colunas)
                 2 - Tabela com thead e tbody
            -->
        </div>
    </section>

    <!-- ===== RODAPÉ ===== -->
    <footer>
        <p>Atividade de HTML - Desenvolva sua estrutura corretamente.</p>
    </footer>

</body>
</html>

Imagem

Posicionar Imagem com position: absolute

Função: Posiciona a imagem em coordenadas exatas dentro de um contêiner

Uso comum: Sobreposição de elementos, layouts personalizados

Importante: O contêiner precisa ter position: relative

<div style="position: relative;">
  <img src="sua_imagem.jpg" style="position: absolute; top: 50px; left: 100px;">
</div>

Imagem

Adicionar Imagem

Função: Exibe uma imagem na página.

Atributos:

src: caminho da imagem

alt: texto alternativo (acessibilidade)

width: define a largura da imagem

Uso comum: Inserir imagens ilustrativas, banners, fot

<img src="caminho-da-imagem.jpg" alt="Descrição da imagem" width="400">

Botão

Botão Simples

Função: Cria um botão básico sem nenhuma ação associada.

Uso comum: Interface visual, aguardando que o JavaScript defina uma ação.

Visual: Apenas o texto “Clique Aqui” dentro de um botão padrão do navegador

<button>Clique Aqui</button>

Repositório Escola Aparício

Como usar os códigos prontos (Passo a Passo)

EXCLUIR

EDITAR

Capturar javascript

lista de alunos conectada ao java

Capturar java

CADASTRAR

script 02/07

css 02/07

html 02/07

Atividade completa dia 25/06

Hmtl do dia 25/06

Atividade dia 25 06 CSS

Loader Fluido Balanço Marítimo

Input de Denúncias com Foco Estilizado CSS

Input de Denúncias com Foco Estilizado

Card de Notificação Crítica de Praia CSS

Botão Alerta Anti-Gaivota

Botão com Efeito colorido (CSS)

Botão que Muda Cor de Texto

Botão com Alerta

Botão com Link

Botão Simples

CSS BASE PARA O HTML BASE CODE PEN

HTML BASE para o Code PEN

BLOCO 7 - HISTÓRIA DE SUCESSO

BLOCO 6 - PÓDIO DOS ALUNOS

BLOCO 5 - PROJETO PREMIADO

BLOCO 4 - GALERIA DE DESTAQUES

BLOCO 3 - CONQUISTA DA SEMANA

BLOCO 2 - MEDALHISTA DA OBMEP

BLOCO 1 - ALUNO DESTAQUE

Linha do tempo das conquistas.

Título com brilho neon.

Faixa decorativa de estrelas.

BORDA DE MEDALHA

Faixa de luz passando sobre o card.

UPGRADE Troféu

TITULO: UPGRADE GOLD - EFEITO CAMPEÃO

atualização

Projeto empreendedorismo

Adicionar produto no carrinho

carrinho

botão ver detalhes

Inteligência da Vitrine (Upgrade Slider Horizontal)

Estrutura de Vitrine Deslizante (Product Slider)

Estrutura do Banner Rotativo CSS

Estrutura do Banner Rotativo

Galeria - Grade com Zoom

MUDANÇAS PARA O HERO MASTER 6#

TITULO QUE MUDA DE COR (TITULO EM GRADIENTE)

Layout Hero Master

Aula 31/03

Parte 1 aula 27/03

aula 02/03/2026

Posicionar Imagem com position: absolute

Adicionar Imagem

Botão Simples