Encontrar índice

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

    return aluno.nome == pesquisa;

});

Excluir

alunos.splice(indice,1);

Atualizar

listarAlunos();

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();

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();

<tbody id="listaAlunos">

</tbody>

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);

}

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

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

// ==============================
// 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";

    }

}

*{

    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;

}

}

<!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>

<!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>

  <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>

  /* ==========================================
           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! */

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

.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;
}

<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>

.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); }
}

HTML
<div class="alerta-praia perigo">
  <div class="alerta-icone">🚨</div>
  <div class="alerta-conteudo">
    <h4>ALERTA CRÍTICO</h4>
    <p>Gaivota de asa escura avistada na mesa 4. Protejam os perímetros.</p>
  </div>
</div>

.btn-alerta-gaivota {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #ff8b6b;
  color: white;
  border: none;
  padding: 12px 28px;
  border-radius: 14px;
  font-family: "Inter", sans-serif;
  cursor: pointer;
  box-shadow: 0 6px 15px rgba(255, 139, 107, 0.4);
  transition: transform 0.2s ease, background 0.2s ease;
}

.btn-alerta-gaivota:hover {
  background: #e26f50;
  transform: scale(1.03) rotate(-1deg);
}

.btn-alerta-gaivota span {
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.5px;
}

.btn-alerta-gaivota small {
  font-size: 0.7rem;
  opacity: 0.9;
  margin-top: 2px;
  text-transform: uppercase;
}

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

<button class="meu-botao">Botão Estilizado</button>

<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>

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

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

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

<button>Clique Aqui</button>

*{
    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;
}

<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>

<section class="hero-container">

    <div class="hero-content">

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

        <p class="hero-subtitle">
            Grupo de Desenvolvimento Web
        </p>

        <div class="hero-slots">

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

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

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

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

        </div>

    </div>

</section>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

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

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

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

.hero-container {
    position: relative;
}

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

.hero-content {
    transition: 0.4s;
}

.hero-content:hover {
    transform: translateY(-15px);
}

.hero-content:hover {
    box-shadow:
        0 20px 40px rgba(0,0,0,0.25);
}

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

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

.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%;
    }
}

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

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

.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;
    }
}

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';
});

<!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>

<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>

<!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>

/* 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;
}

/* 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;
}

<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>

/* 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);
}

<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>

/* 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;
}

/* 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 */
}

/* 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));
}

<!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>

<!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>

<!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>

<!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>

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

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

<button>Clique Aqui</button>