#obstaculo {
    /* Mantenha o que já tinha e adicione/altere isso: */
    background-color: transparent; /* Remove a cor vermelha */
    background-image: url('parede.png'); /* Nome da sua imagem aqui */
    background-size: cover;
    background-repeat: no-repeat;
}

// Barreiras do Container + Detecção de Obstáculo
const limiteDireita = 600 - tamanho;
const limiteBaixo = 400 - tamanho;

// Só move se estiver dentro da tela E NÃO estiver colidindo com o obstáculo
if (proximoX >= 0 && proximoX <= limiteDireita && !detectarColisao(proximoX, posicaoY, tamanho)) {
    posicaoX = proximoX;
}

if (proximoY >= 0 && proximoY <= limiteBaixo && !detectarColisao(posicaoX, proximoY, tamanho)) {
    posicaoY = proximoY;
}

// Adicione isso logo após definir a variável 'tecla'
if (tecla === 'd') {
    quadrado.style.transform = 'scaleX(1)'; // Olha para a direita (original)
} 
else if (tecla === 'a') {
    quadrado.style.transform = 'scaleX(-1)'; // Espelha a imagem para a esquerda
}

function detectarColisao(x, y, tam) {
    const obs = { x: 400, y: 150, w: 100, h: 100 }; // Dados do obstáculo (mesmos do CSS)

    // Verifica se o quadrado está dentro da área do obstáculo
    return (
        x < obs.x + obs.w &&
        x + tam > obs.x &&
        y < obs.y + obs.h &&
        y + tam > obs.y
    );
}

#obstaculo {
    width: 100px;
    height: 100px;
    background-color: #e74c3c; /* Vermelho */
    position: absolute;
    top: 150px;
    left: 400px;
    border-radius: 8px;
}

<div id="obstaculo"></div>

// Adicione isso logo após definir a variável 'tecla'
if (tecla === 'd') {
   quadrado.style.transform = 'scaleX(1)'; // Olha para a direita (original)
} 
else if (tecla === 'a') {
   quadrado.style.transform = 'scaleX(-1)'; // Espelha a imagem para a esquerda
}

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

let posicaoX = 275; 
let posicaoY = 175;
let tamanho = 50;

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

    let proximoX = posicaoX;
    let proximoY = posicaoY;

    // Movimentação
    if (tecla === 'd') proximoX += velocidade;
    if (tecla === 'a') proximoX -= velocidade;
    if (tecla === 'w') proximoY -= velocidade;
    if (tecla === 's') proximoY += velocidade;

    // Redimensionamento
    if (event.key === '+') tamanho += escala;
    if (event.key === '-' && tamanho > 20) tamanho -= escala;

    // Barreiras
    const limiteDireita = 600 - tamanho;
    const limiteBaixo = 400 - tamanho;

    if (proximoX >= 0 && proximoX <= limiteDireita) posicaoX = proximoX;
    if (proximoY >= 0 && proximoY <= limiteBaixo) posicaoY = proximoY;

    // Atualização Visual
    quadrado.style.left = posicaoX + 'px';
    quadrado.style.top = posicaoY + 'px';
    quadrado.style.width = tamanho + 'px';
    quadrado.style.height = tamanho + 'px';
});

#quadrado {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 175px;
    left: 275px;
    transition: left 0.1s ease, top 0.1s ease;

    /* Adicionando a imagem */
    background-image: url('personagem.png'); /* Coloque o nome da sua imagem aqui */
    background-size: contain;    /* Faz a imagem caber dentro do espaço */
    background-repeat: no-repeat; /* Não deixa a imagem repetir */
    background-position: center;  /* Centraliza a imagem no quadrado */
}

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

// 1. Selecionamos o quadrado no HTML
const quadrado = document.getElementById('quadrado');

// 2. Definimos as posições iniciais (X para horizontal, Y para vertical)
let posicaoX = 275; 
let posicaoY = 175;

// 3. Adicionamos o evento de teclado
window.addEventListener('keydown', (event) => {
    // Convertemos para minúsculo para facilitar a comparação
    const tecla = event.key.toLowerCase();
    const velocidade = 20; // Quantos pixels ele anda por clique

    // 4. Lógica de movimentação
    if (tecla === 'd') {
        posicaoX += velocidade; // Direita
    } 
    else if (tecla === 'a') {
        posicaoX -= velocidade; // Esquerda
    } 
    else if (tecla === 'w') {
        posicaoY -= velocidade; // Cima (no navegador, diminuir Y sobe o elemento)
    } 
    else if (tecla === 's') {
        posicaoY += velocidade; // Baixo
    }

    // 5. Aplicamos as novas posições ao estilo do elemento
    quadrado.style.left = posicaoX + 'px';
    quadrado.style.top = posicaoY + 'px';

    console.log(`Posição: X=${posicaoX}, Y=${posicaoY}`);
});

// 1. Selecionamos o quadrado no HTML
const quadrado = document.getElementById('quadrado');

// 2. Definimos a posição inicial
let posicaoX = 50; 

// 3. Adicionamos o evento de teclado na janela inteira
window.addEventListener('keydown', (event) => {
    
    // Verificamos se a tecla pressionada foi a letra 'd' ou 'D'
    if (event.key === 'd' || event.key === 'D') {
        
        // Aumentamos o valor da posição
        posicaoX += 20;
        
        // Aplicamos a nova posição ao estilo do elemento
        quadrado.style.left = posicaoX + 'px';
        
        console.log("Posição atual: " + posicaoX);
    }
});

/* Centraliza a arena na tela */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
}

.container {
    width: 600px;
    height: 400px;
    border: 2px solid #333;
    background-color: white;
    position: relative; /* Necessário para o movimento interno */
    overflow: hidden;
}

#quadrado {
    width: 50px;
    height: 50px;
    background-color: #3498db;
    position: absolute; /* Permite mover via top/left */
    top: 175px;
    left: 50px;
    transition: left 0.1s ease; /* Suaviza o movimento */
}

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Projeto Quadrado Móvel</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div class="container">
        <div id="quadrado"></div>
    </div>

    <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>Projeto Quadrado Móvel</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div class="container">
        <div id="quadrado"></div>
    </div>

    <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>Sistema de Mercado - Caixa</title>
    <style>
        /* CORES NEUTRAS PARA EDIÇÃO POSTERIOR */
        :root {
            --cor-principal: #333333;     /* Defina sua cor aqui */
            --cor-fundo: #ffffff;         /* Fundo da página */
            --cor-bordas: #dddddd;        /* Cor das linhas e divisórias */
            --cor-texto: #000000;
            --cor-destaque-valor: #222222; 
            --fonte-caixa: 'Courier New', Courier, monospace; /* Estilo cupom fiscal */
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: sans-serif;
        }

        body {
            background-color: var(--cor-fundo);
            color: var(--cor-texto);
            height: 100vh;
            display: flex;
            flex-direction: column;
        }

        /* CABEÇALHO DO CAIXA */
        header {
            padding: 10px 2%;
            border-bottom: 2px solid var(--cor-bordas);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        /* ÁREA PRINCIPAL DIVIDIDA */
        .container-caixa {
            display: flex;
            flex: 1;
            overflow: hidden; /* Evita rolagem na página toda */
        }

        /* COLUNA ESQUERDA: LISTA DE PRODUTOS */
        .lista-produtos {
            flex: 2;
            border-right: 2px solid var(--cor-bordas);
            display: flex;
            flex-direction: column;
            padding: 20px;
        }

        .tabela-itens {
            width: 100%;
            border-collapse: collapse;
            font-family: var(--fonte-caixa);
        }

        .tabela-itens th {
            text-align: left;
            border-bottom: 1px solid var(--cor-bordas);
            padding: 10px 5px;
        }

        .tabela-itens td {
            padding: 10px 5px;
            border-bottom: 1px dotted var(--cor-bordas);
        }

        /* COLUNA DIREITA: RESUMO E COMANDOS */
        .painel-controle {
            flex: 1;
            display: flex;
            flex-direction: column;
            padding: 20px;
            background-color: #fafafa; /* Apenas um leve contraste */
        }

        .campo-entrada {
            margin-bottom: 30px;
        }

        .campo-entrada label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }

        .campo-entrada input {
            width: 100%;
            padding: 15px;
            font-size: 1.2rem;
            border: 2px solid var(--cor-bordas);
        }

        .resumo-valores {
            margin-top: auto; /* Empurra para o fim da coluna */
            border: 2px solid var(--cor-bordas);
            padding: 20px;
        }

        .valor-linha {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
        }

        .total-grande {
            font-size: 2.5rem;
            font-weight: bold;
            border-top: 2px solid var(--cor-bordas);
            padding-top: 10px;
            margin-top: 10px;
        }

        /* BOTÕES DE AÇÃO */
        .acoes-caixa {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            margin-top: 20px;
        }

        .btn {
            padding: 15px;
            border: 2px solid var(--cor-bordas);
            background: transparent;
            cursor: pointer;
            font-weight: bold;
            text-transform: uppercase;
        }

        .btn-finalizar {
            grid-column: span 2; /* Ocupa as duas colunas */
            background-color: var(--cor-texto);
            color: var(--cor-fundo);
        }

    </style>
</head>
<body>

    <header>
        <div class="unidade">PDV: 001 | Operador: Admin</div>
        <div class="data-hora">27/04/2026 - 14:20</div>
    </header>

    <div class="container-caixa">
        
        <section class="lista-produtos">
            <table class="tabela-itens">
                <thead>
                    <tr>
                        <th>ITEM</th>
                        <th>CÓDIGO</th>
                        <th>DESCRIÇÃO</th>
                        <th>QTD</th>
                        <th>VL.UNIT</th>
                        <th>TOTAL</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>001</td>
                        <td>789123...</td>
                        <td>ARROZ TIPO 1 5KG</td>
                        <td>1</td>
                        <td>25.00</td>
                        <td>25.00</td>
                    </tr>
                    <tr>
                        <td>002</td>
                        <td>789456...</td>
                        <td>FEIJÃO CARIOCA 1KG</td>
                        <td>2</td>
                        <td>8.50</td>
                        <td>17.00</td>
                    </tr>
                </tbody>
            </table>
        </section>

        <aside class="painel-controle">
            
            <div class="campo-entrada">
                <label>CÓDIGO DE BARRAS / PESQUISA</label>
                <input type="text" placeholder="Passe o scanner ou digite...">
            </div>

            <div class="resumo-valores">
                <div class="valor-linha">
                    <span>Subtotal:</span>
                    <span>R$ 42,00</span>
                </div>
                <div class="valor-linha">
                    <span>Descontos:</span>
                    <span>R$ 0,00</span>
                </div>
                <div class="total-grande">
                    <span>TOTAL:</span>
                    <span>R$ 42,00</span>
                </div>
            </div>

            <div class="acoes-caixa">
                <button class="btn">Cancelar Item</button>
                <button class="btn">Limpar Carrinho</button>
                <button class="btn btn-finalizar">Finalizar Venda (F10)</button>
            </div>

        </aside>

    </div>

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

<button class="btn-comprar" onclick="abrirDetalhes('Smartphone X', 'Descrição técnica do produto...', 'https://via.placeholder.com/400')">
    Ver Detalhes
</button>

<div id="meuModal" class="modal-especial">
    <div class="modal-conteudo">
        <span class="fechar-modal" onclick="fecharDetalhes()">&times;</span>
        <img id="modal-img" src="" class="img-detalhe">
        <h2 id="modal-titulo">Título do Produto</h2>
        <p id="modal-descricao">Descrição detalhada aqui...</p>
        <button class="btn-comprar">Confirmar Compra</button>
    </div>
</div>

<script>
    function abrirDetalhes(nome, descricao, imagem) {
        document.getElementById('modal-titulo').innerText = nome;
        document.getElementById('modal-descricao').innerText = descricao;
        document.getElementById('modal-img').src = imagem;
        document.getElementById('meuModal').style.display = 'flex';
    }

    function fecharDetalhes() {
        document.getElementById('meuModal').style.display = 'none';
    }

    window.onclick = function(event) {
        let modal = document.getElementById('meuModal');
        if (event.target == modal) { fecharDetalhes(); }
    }
</script>

/* 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 PATTERN - MOSAICO DE AZUIS */

.faixa-geometrica {
    width: 100%;
    height: 60px; /* Altura da faixa */
    
    /* Criação dos quadrados usando gradientes repetitivos */
    background-color: #3498db; /* Azul Normal */
    background-image: 
        linear-gradient(45deg, #2980b9 25%, transparent 25%), /* Azul Escuro */
        linear-gradient(-45deg, #2980b9 25%, transparent 25%), 
        linear-gradient(45deg, transparent 75%, #5dade2 75%), /* Azul Claro */
        linear-gradient(-45deg, transparent 75%, #5dade2 75%);
    
    background-size: 40px 40px; /* Tamanho dos quadrados */
    background-position: 0 0, 0 20px, 20px -20px, -20px 0px;
    
    border-top: 2px solid rgba(255,255,255,0.2);
    border-bottom: 2px solid rgba(0,0,0,0.1);
}

/* TITULO: UPGRADE FOOTER - RODAPÉ MULTI-COLUNAS */

.sys-footer {
    background-color: #2c3e50; /* Cor escura padrão */
    color: #ecf0f1;
    padding: 50px 0 20px 0;
    margin-top: 50px;
}

.footer-container {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 var(--sys-spacing);
    gap: 30px;
}

.footer-column {
    flex: 1;
    min-width: 200px; /* Garante que as colunas não fiquem muito finas */
}

.footer-column h3 {
    color: var(--sys-color-primary);
    margin-bottom: 20px;
    font-size: 1.2rem;
}

.footer-column ul {
    list-style: none;
    padding: 0;
}

.footer-column ul li {
    margin-bottom: 10px;
}

.footer-column ul li a {
    color: #bdc3c7;
    text-decoration: none;
    transition: var(--sys-transition);
}

.footer-column ul li a:hover {
    color: white;
    padding-left: 5px;
}

.footer-bottom {
    text-align: center;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.1);
    font-size: 0.9rem;
    color: #95a5a6;
}

/* RESPONSIVIDADE */
@media (max-width: 768px) {
    .footer-container {
        flex-direction: column;
        text-align: center;
    }
}

<footer class="sys-footer">
    <div class="footer-container">
        
        <div class="footer-column">
            <h3>Sobre Nós</h3>
            <p>Sua loja de tecnologia e inovação. Levando o melhor do desenvolvimento web para você.</p>
        </div>

        <div class="footer-column">
            <h3>Navegação</h3>
            <ul>
                <li><a href="#">Início</a></li>
                <li><a href="#">Produtos</a></li>
                <li><a href="#">Sobre</a></li>
                <li><a href="#">Contato</a></li>
            </ul>
        </div>

        <div class="footer-column">
            <h3>Redes Sociais</h3>
            <div class="social-icons">
                <a href="#">Instagram</a>
                <a href="#">Facebook</a>
                <a href="#">LinkedIn</a>
            </div>
        </div>

        <div class="footer-column">
            <h3>Pagamento</h3>
            <div class="payment-methods">
                <span>💳 Cartão</span>
                <span>🏦 Pix</span>
                <span>📄 Boleto</span>
            </div>
        </div>

    </div>

    <div class="footer-bottom">
        <p>&copy; 2026 Sistema Master - Todos os direitos reservados.</p>
    </div>
</footer>

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

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Loja Virtual - Página Principal</title>
    <style>
        :root {
            --sys-color-primary: #e67e22; /* Cor de destaque laranja */
            --sys-color-bg: #ffffff;
            --sys-color-text: #2c3e50;
            --sys-spacing: 20px;
            --sys-radius: 4px;
        }

        body {
            margin: 0;
            font-family: Arial, sans-serif;
            color: var(--sys-color-text);
        }

        /* BARRA DE BUSCA SUPERIOR */
        .vitrine-nav {
            padding: 15px 5%;
            background: #fff;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: sticky;
            top: 0;
            z-index: 100;
        }

        .search-bar {
            width: 50%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 20px;
        }

        /* CONTAINER DA VITRINE */
        .layout-vitrine {
            max-width: 1100px;
            margin: 40px auto;
            padding: 0 var(--sys-spacing);
        }

        .vitrine-title {
            border-left: 6px solid var(--sys-color-primary);
            padding-left: 15px;
            margin-bottom: 30px;
        }

        /* GRID DE PRODUTOS */
        .galeria-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
            gap: 30px;
        }

        .galeria-item {
            border: 1px solid #eee;
            padding: 10px;
            border-radius: var(--sys-radius);
            transition: 0.3s;
        }

        .galeria-item:hover {
            box-shadow: 0 10px 20px rgba(0,0,0,0.05);
            transform: translateY(-5px);
        }

        .galeria-item img {
            width: 100%;
            height: 200px;
            object-fit: cover;
            border-radius: var(--sys-radius);
        }

        .btn-comprar {
            width: 100%;
            padding: 10px;
            background: var(--sys-color-primary);
            color: white;
            border: none;
            border-radius: var(--sys-radius);
            cursor: pointer;
            margin-top: 10px;
        }
    </style>
</head>
<body>

    <nav class="vitrine-nav">
        <div class="logo"><strong>SHOP</strong>MASTER</div>
        <input type="text" class="search-bar" placeholder="O que você procura hoje?">
        <div class="carrinho">🛒 (0)</div>
    </nav>

    <main class="layout-vitrine">
        
        <div class="vitrine-title">
            <h1>Produtos em Destaque</h1>
        </div>

        <div class="galeria-grid">
            <div class="galeria-item">
                <img src="https://via.placeholder.com/200" alt="">
                <h3>Smartphone X</h3>
                <p><strong>R$ 1.200,00</strong></p>
                <button class="btn-comprar">Ver Detalhes</button>
            </div>
            
            <div class="galeria-item">
                <img src="https://via.placeholder.com/200" alt="">
                <h3>Notebook Pro</h3>
                <p><strong>R$ 4.500,00</strong></p>
                <button class="btn-comprar">Ver Detalhes</button>
            </div>
        </div>

    </main>

</body>
</html>

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

<div class="galeria-container">
    <h2 class="sys-title-dark">Destaques do Projeto</h2>

    <div class="galeria-grid">
        <div class="galeria-item" onclick="this.classList.toggle('full-screen')">
            <img src="https://via.placeholder.com/150" alt="Produto">
            <div class="galeria-info">
                <span class="galeria-nome">Item Premium</span>
                <span class="galeria-valor">R$ 250,00</span>
            </div>
        </div>

        <div class="galeria-item" onclick="this.classList.toggle('full-screen')">
            <img src="https://via.placeholder.com/150" alt="Produto">
            <div class="galeria-info">
                <span class="galeria-nome">Item Gold</span>
                <span class="galeria-valor">R$ 480,00</span>
            </div>
        </div>
    </div>
</div>

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

/* TITULO: UPGRADE FRAME - MOLDURA INTERNA */
.hero-container {
    border: 15px solid rgba(255, 255, 255, 0.2); /* Borda grossa semi-transparente */
    outline: 2px solid white; /* Linha fina externa */
    outline-offset: -25px;    /* Joga a linha para dentro da borda */
}

.hero-title {
    letter-spacing: 5px;      /* Espaça as letras para um ar mais "Chique" */
    text-transform: uppercase; /* Deixa tudo em Maiúsculo */
}

/* TITULO: UPGRADE MOTION - GRADIENTE ANIMADO */
.hero-container {
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%; /* Aumenta o tamanho para o gradiente "correr" */
    animation: gradientMove 15s ease infinite; /* Chama a animação infinita */
}

/* O segredo do movimento: */
@keyframes gradientMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* TITULO: UPGRADE SPLIT - ALINHAMENTO LATERAL */
.hero-container {
    justify-content: flex-start; /* Empurra o conteúdo para o início */
    text-align: left;            /* Alinha o texto na esquerda */
    padding-left: 10%;           /* Dá um espaço elegante da borda */
}

.hero-slots {
    justify-content: flex-start; /* Alinha os botões também na esquerda */
}

/* TITULO: UPGRADE IMAGE PRO - FUNDO COM FILTRO */
.hero-container {
    /* O linear-gradient cria uma camada escura sobre a imagem */
    background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), 
                      url('sua-imagem.jpg'); 
    background-size: cover;
    background-position: center;
}

/* TITULO: UPGRADE GLASS - EFEITO VIDRO */
.hero-content {
    background: rgba(255, 255, 255, 0.1); /* Transparência branca */
    backdrop-filter: blur(10px);          /* O segredo: Embaça o que está atrás */
    border: 1px solid rgba(255, 255, 255, 0.2); /* Borda fina de vidro */
    padding: 40px;
    border-radius: 20px;                  /* Bordas bem arredondadas */
}

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Layout Central</title>

    <style>
        /* ========================= */
        /* CONFIGURAÇÃO GLOBAL       */
        /* ========================= */

        :root {
            --cor-fundo: #f4f7f6; /* Cor de fundo da página */
            --cor-caixa: #ffffff; /* Cor da caixa central */
            --cor-texto: #333; /* Cor do texto */
            --cor-destaque: #3498db; /* Cor principal */

            --espacamento: 20px; /* Espaço interno */
            --borda: 8px; /* Arredondamento */
        }

        /* ========================= */
        /* CORPO DA PÁGINA           */
        /* ========================= */

        body {
            margin: 0; /* Remove margem padrão */
            font-family: Arial, sans-serif;
            background-color: var(--cor-fundo); /* Usa variável */
        }

        /* ========================= */
        /* LAYOUT PRINCIPAL          */
        /* ========================= */

        .layout-central {
            display: flex; /* Ativa o flexbox */
            justify-content: center; /* Centraliza horizontal */
            align-items: center; /* Centraliza vertical */
            height: 100vh; /* Altura da tela inteira */
        }

        /* ========================= */
        /* CAIXA CENTRAL             */
        /* ========================= */

        .caixa {
            width: 80%; /* Largura da caixa */
            max-width: 700px; /* Limite máximo */
            background: var(--cor-caixa);
            padding: var(--espacamento);
            border-radius: var(--borda);
            text-align: center;
        }

        /* ========================= */
        /* TÍTULO                    */
        /* ========================= */

        .titulo {
            color: var(--cor-destaque);
        }

        /* ========================= */
        /* ÁREA DE CONTEÚDO          */
        /* ========================= */

        .conteudo {
            margin-top: 20px;
        }

        /* ========================= */
        /* BOTÃO (EXEMPLO)           */
        /* ========================= */

        .botao {
            margin-top: 20px;
            padding: 10px 20px;
            border: none;
            background: var(--cor-destaque);
            color: #fff;
            border-radius: var(--borda);
            cursor: pointer;
        }

    </style>
</head>

<body>

    <!-- ========================= -->
    <!-- INÍCIO DO LAYOUT          -->
    <!-- ========================= -->

    <div class="layout-central"> <!-- Container que centraliza tudo -->

        <div class="caixa"> <!-- Caixa principal -->

            <!-- TÍTULO (ALUNO PODE MUDAR) -->
            <h1 class="titulo">Meu Primeiro Layout</h1>

            <!-- TEXTO (ALUNO PODE EDITAR) -->
            <div class="conteudo">
                <p>Escreva aqui o conteúdo da sua página.</p>
            </div>

            <!-- BOTÃO (ALUNO PODE TROCAR OU REMOVER) -->
            <button class="botao">Clique aqui</button>

        </div>

    </div>

    <!-- ========================= -->
    <!-- FIM DO LAYOUT             -->
    <!-- ========================= -->

</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>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>Mundo dos Esportes</title>

  <style>
    body {
      font-family: Arial;
      background-color: #eef2f3;
      margin: 0;
    }

    <____> {
      background-color: #1e90ff;
      color: white;
      padding: 20px;
      text-align: center;
    }

    <____> {
      background-color: #4682b4;
      padding: 10px;
      text-align: center;
    }

    <____> a {
      color: white;
      margin: 10px;
      text-decoration: none;
    }

    <____> {
      padding: 20px;
    }

    .card {
      background-color: white;
      margin: 15px;
      padding: 15px;
      border-radius: 10px;
    }

    img {
      width: 200px;
    }

    <____> {
      background-color: #1e90ff;
      color: white;
      text-align: center;
      padding: 10px;
    }
  </style>
</____>

<____>

<____>
  <____>🏆 Mundo dos Esportes</____>
  <p>Conheça diferentes esportes</p>
</____>

<____>
  <____ href="#">Futebol</____>
  <____ href="#">Vôlei</____>
  <____ href="#">Basquete</____>
</____>

<____>
  <div class="card">
    <____>Futebol</____>
    <p>Esporte jogado com os pés e uma bola.</p>
    <____ src="" alt="Futebol">
  </div>

  <div class="card">
    <____>Vôlei</____>
    <p>Jogado em equipe com rede.</p>
    <____ src="" alt="Vôlei">
  </div>

  <div class="card">
    <____>Basquete</____>
    <p>Objetivo é acertar a cesta.</p>
    <____ src="" alt="Basquete">
  </div>
</____>

<____>
  <____>Cadastro de Interesse</____>

  <____>
    <____>Nome:</____><br>
    <____ type="text"><br><br>

    <____>Esporte favorito:</____><br>
    <____>
      <____>Futebol</____>
      <____>Vôlei</____>
      <____>Basquete</____>
    </____><br><br>

    <____>Enviar</____>
  </____>
</____>

<____>
  <p>Projeto Escolar - Programação Web</p>
</____>

</____>
</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>Meu Carrinho Completo</title>
    <style>
        /* ===== SEU ESTILO ORIGINAL ===== */
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f6fb;
            margin: 0;
            padding: 0;
        }

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

        h1 { text-align: center; color: #5a4fcf; }
        h2 { color: #333; border-bottom: 2px solid #5a4fcf; padding-bottom: 5px; margin-top: 30px;}
        p { color: #555; line-height: 1.6; }

        /* ===== ESTILO DOS PRODUTOS ===== */
        .lista-produtos {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
            margin-bottom: 30px;
        }

        .produto-card {
            border: 1px solid #eee;
            padding: 15px;
            border-radius: 8px;
            text-align: center;
        }

        /* ===== ESTILO DO CARRINHO ===== */
        .item-carrinho {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 0;
            border-bottom: 1px dotted #ccc;
        }

        .btn-remover {
            background-color: #ff4d4d;
            padding: 5px 10px;
            font-size: 12px;
            width: auto;
            margin: 0;
        }

        .total-box {
            text-align: right;
            font-size: 1.2rem;
            margin-top: 20px;
            color: #333;
        }

        /* ===== BOTÕES ===== */
        button {
            background-color: #5a4fcf;
            color: white;
            border: none;
            padding: 10px 20px;
            margin-top: 10px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 16px;
            transition: 0.3s;
        }

        button:hover { background-color: #483db0; }
        .btn-adicionar { width: 100%; }
        .btn-finalizar { width: 100%; background-color: #28a745; margin-top: 20px; }
        .btn-finalizar:hover { background-color: #218838; }
    </style>
</head>
<body>

    <div class="container">
        <h1>🛒 Loja Integrada</h1>

        <h2>Produtos Disponíveis</h2>
        <div class="lista-produtos">
            <div class="produto-card">
                <strong>Monitor LED</strong>
                <p>R$ 800,00</p>
                <button class="btn-adicionar" onclick="adicionar(1, 'Monitor LED', 800)">Adicionar</button>
            </div>
            <div class="produto-card">
                <strong>Teclado RGB</strong>
                <p>R$ 150,00</p>
                <button class="btn-adicionar" onclick="adicionar(2, 'Teclado RGB', 150)">Adicionar</button>
            </div>
        </div>

        <h2>Meu Carrinho</h2>
        <div id="carrinho-vazio">
            <p>Seu carrinho está vazio.</p>
        </div>
        <div id="itens-lista">
            </div>

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

        <button class="btn-finalizar" onclick="finalizar()">Finalizar Compra</button>
    </div>

    <script>
        let carrinho = [];
        let total = 0;

        function adicionar(id, nome, preco) {
            carrinho.push({ id, nome, preco });
            atualizarCarrinho();
        }

        function remover(index) {
            carrinho.splice(index, 1);
            atualizarCarrinho();
        }

        function atualizarCarrinho() {
            const lista = document.getElementById('itens-lista');
            const placeholder = document.getElementById('carrinho-vazio');
            const totalDisplay = document.getElementById('valor-total');
            
            lista.innerHTML = "";
            total = 0;

            if (carrinho.length === 0) {
                placeholder.style.display = "block";
            } else {
                placeholder.style.display = "none";
                carrinho.forEach((item, index) => {
                    total += item.preco;
                    lista.innerHTML += `
                        <div class="item-carrinho">
                            <span>${item.nome} - R$ ${item.preco.toFixed(2)}</span>
                            <button class="btn-remover" onclick="remover(${index})">Remover</button>
                        </div>
                    `;
                });
            }
            totalDisplay.innerText = total.toFixed(2).replace('.', ',');
        }

        function finalizar() {
            if (carrinho.length > 0) {
                alert("Pedido processado com sucesso! Valor total: R$ " + total.toFixed(2));
                carrinho = [];
                atualizarCarrinho();
            } else {
                alert("Adicione pelo menos um item para finalizar.");
            }
        }
    </script>
</body>
</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>

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Meu Diário</title>

    <style>
        /* ===== ESTILO GERAL ===== */
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f6fb;
            margin: 0;
            padding: 0;
        }

        /* ===== CONTAINER PRINCIPAL ===== */
        .container {
            width: 80%;
            max-width: 800px;
            margin: 40px auto;
            background-color: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0px 4px 10px rgba(0,0,0,0.1);
        }

        /* ===== TÍTULO PRINCIPAL ===== */
        h1 {
            text-align: center;
            color: #5a4fcf;
        }

        /* ===== SUBTÍTULOS ===== */
        h2 {
            color: #333;
            border-bottom: 2px solid #5a4fcf;
            padding-bottom: 5px;
        }

        /* ===== PARÁGRAFOS ===== */
        p {
            color: #555;
            line-height: 1.6;
        }

        /* ===== IMAGENS ===== */
        img {
            width: 100%;
            max-height: 300px;
            object-fit: cover;
            border-radius: 8px;
            margin-top: 10px;
        }

        /* ===== BOTÕES ===== */
        button {
            background-color: #5a4fcf;
            color: white;
            border: none;
            padding: 10px 20px;
            margin-top: 10px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 16px;
        }

        button:hover {
            background-color: #483db0;
        }
    </style>
</head>

<body>

    <div class="container">

        <!-- TÍTULO PRINCIPAL -->
        <h1>📖 Meu Diário</h1>

        <!-- SOBRE MIM -->
        <h2>Sobre mim</h2>
        <p>
            Este é o meu diário pessoal. Aqui eu escrevo sobre meus dias,
            meus sentimentos, meus sonhos e momentos importantes da minha vida.
        </p>

        <!-- LOCAL PARA IMAGEM DE PERFIL -->
        <!-- Coloque aqui sua imagem -->
        <!-- Exemplo:
        <img src="minha-foto.jpg" alt="Minha foto">
        -->

        <!-- REGISTRO DO DIA -->
        <h2>Registro do Dia</h2>
        <p>
            Hoje foi um dia muito especial. Aconteceram várias coisas interessantes
            que quero guardar como lembrança.
        </p>

        <!-- LOCAL PARA IMAGEM DO DIA -->
        <!-- Exemplo:
        <img src="foto-do-dia.jpg" alt="Foto do dia">
        -->

        <!-- OBJETIVOS -->
        <h2>Meus Objetivos</h2>
        <p>
            Meus objetivos para os próximos dias são estudar mais,
            organizar minha rotina e continuar aprendendo coisas novas.
        </p>

        <!-- LOCAL PARA BOTÕES -->
        <button>Adicionar Novo Registro</button>
        <button>Salvar Diário</button>

    </div>

</body>
</html>

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <title>Home - Aula de HTML</title>

    <!-- Aqui futuramente podemos conectar um arquivo CSS externo -->
    <!-- <link rel="stylesheet" href="style.css"> -->

    <style>
        /* ===== ESTILIZAÇÃO BÁSICA (PODE SER REMOVIDA PARA AULA DE CSS) ===== */

        body {
            font-family: Arial, sans-serif;
            background-color: #f0f4f8;
            margin: 0;
            padding: 0;
        }

        .cabecalho {
            background-color: #003366;
            color: white;
            padding: 20px;
            text-align: center;
        }

        .menu {
            background-color: #0055aa;
            padding: 10px;
            text-align: center;
        }

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

        .conteudo {
            padding: 30px;
        }

        .secao {
            margin-bottom: 40px;
            padding: 20px;
            background-color: white;
            border-radius: 8px;
        }

        .botao-primario {
            background-color: #28a745;
            color: white;
            padding: 10px 20px;
            border: none;
            cursor: pointer;
        }

        .botao-secundario {
            background-color: #ffc107;
            color: black;
            padding: 10px 20px;
            border: none;
            cursor: pointer;
        }

        .botao-perigo {
            background-color: #dc3545;
            color: white;
            padding: 10px 20px;
            border: none;
            cursor: pointer;
        }

        .rodape {
            background-color: #003366;
            color: white;
            text-align: center;
            padding: 15px;
        }

    </style>
</head>

<body>

    <!-- ===== CABEÇALHO DA PÁGINA ===== -->
    <header class="cabecalho" id="topo">
        <h1>Bem-vindo ao Site da Escola</h1>
        <h2>Aprendendo HTML na prática</h2>
        <h3>Introdução ao Desenvolvimento Web</h3>
    </header>

    <!-- ===== MENU DE NAVEGAÇÃO ===== -->
    <nav class="menu" id="menu-principal">
        <!-- Aqui são links de navegação -->
        <a href="#">Início</a>
        <a href="#">Sobre</a>
        <a href="#">Projetos</a>
        <a href="#">Contato</a>
    </nav>

    <!-- ===== CONTEÚDO PRINCIPAL ===== -->
    <main class="conteudo" id="conteudo-principal">

        <!-- ===== SEÇÃO 1 ===== -->
        <section class="secao" id="secao-apresentacao">
            <h2>Sobre a Aula</h2>

            <p>
                Esta é uma página exemplo para aprendermos HTML.<br>
                Aqui utilizamos títulos, parágrafos, botões e divisões.
            </p>

            <p>
                O HTML é responsável pela estrutura do site.<br>
                Já o CSS será responsável pelas cores e estilização.
            </p>

            <!-- LOCAL PARA IMAGEM -->
            <!-- Professor pode pedir para os alunos inserirem uma imagem aqui -->
            <!-- Exemplo:
            <img src="imagem.jpg" alt="Descrição da imagem" class="imagem-apresentacao">
            -->

        </section>

        <!-- ===== SEÇÃO 2 ===== -->
        <section class="secao" id="secao-projetos">
            <h2>Projetos dos Alunos</h2>

            <h3>Projeto 1 - Página Pessoal</h3>
            <p>
                Cada aluno criará sua própria página utilizando as tags aprendidas.
            </p>

            <h3>Projeto 2 - Site da Escola</h3>
            <p>
                Desenvolveremos uma página institucional simples.
            </p>

            <!-- BOTÕES (3 TIPOS DIFERENTES) -->
            <button class="botao-primario" id="btn-saiba-mais">
                Saiba Mais
            </button>

            <button class="botao-secundario" id="btn-editar">
                Editar Projeto
            </button>

            <button class="botao-perigo" id="btn-excluir">
                Excluir Projeto
            </button>

        </section>

        <!-- ===== SEÇÃO 3 ===== -->
        <section class="secao" id="secao-contato">
            <h2>Contato</h2>

            <p>
                Caso tenha dúvidas, entre em contato com o professor.
            </p>

            <p>
                Email: professor@escola.com.br<br>
                Telefone: (00) 00000-0000
            </p>

            <!-- LOCAL PARA FUTURO FORMULÁRIO -->
            <!-- Aqui os alunos poderão adicionar um <form> futuramente -->

        </section>

    </main>

    <!-- ===== RODAPÉ ===== -->
    <footer class="rodape" id="rodape">
        <p>© 2026 - Aula de Introdução ao HTML</p>
    </footer>

</body>
</html>

<button onclick="adicionarAoCarrinho('Honda CRF 250', 75000)">Adicionar no carrinho</button>

<img src="Nome da imagem"
     onclick="window.location.href='local pra onde ela vai'"
     style="cursor: pointer;">

<table>
  <tr>
    <td><img src="sua_imagem.jpg" width="200"></td>
    <td>Texto ao lado da imagem.</td>
  </tr>
</table>

<div style="display: flex; align-items: center;">
  <img src="sua_imagem.jpg" style="margin-right: 20px;">
  <p>Texto alinhado horizontalmente com a imagem.</p>
</div>

<img src="sua_imagem.jpg" style="float: left; margin-right: 20px;">
<p>Texto ao lado da imagem.</p>

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

<img src="sua_imagem.jpg" style="margin-left: 100px;">

<!-- Direita -->
<img src="sua_imagem.jpg" style="float: right;">

<!-- Esquerda -->
<img src="sua_imagem.jpg" style="float: left;">

<!-- Centralizada -->
<div style="text-align: center;">
  <img src="sua_imagem.jpg">
</div>

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

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