Delimitação do Problema

styles.css

/* Estilização global */ body { font-family: Arial, sans-serif; margin: 0; padding: 0; } header { background-color: #f9f9f9; padding: 20px; } nav ul { list-style: none; margin: 0; padding: 0; } nav li { display: inline-block; margin-right: 20px; } nav a { text-decoration: none; color: #333; font-weight: bold; } main { padding: 20px; } h2 { color: #555; border-bottom: 2px solid #555; padding-bottom: 5px; } /* Estilização dos filtros */ #filtros { display: flex; justify-content: space-between; margin-bottom: 20px; } .filtro { flex-basis: 45%; } /* Estilização dos perfumes */ #lista-perfumes { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); grid-gap: 20px; } .perfume { border: 1px solid #ddd; padding: 20px; } .perfume img { width: 100%; max-height: 200px; object-fit: cover; margin-bottom: 10px; } .perfume h3 { color: #333; font-size: 20px; margin: 0; } .perfume p { color: #666; margin: 5px 0; } .perfume a { display: block; text-align: center; background-color: #333; color: #fff; padding: 10px; text-decoration: none; font-weight: bold; } /* Estilização do rodapé */ footer { background-color: #333; color: #fff; text-align: center; padding: 10px; }

script.js

// Filtrar os perfumes com base nas notas selecionadas document.getElementById('notas').addEventListener('change', function () { const filtroNotas = this.value; const perfumes = document.querySelectorAll('.perfume'); perfumes.forEach(perfume => { const notas = perfume.querySelector('p').textContent; if (filtroNotas === 'todos' || notas.includes(filtroNotas)) { perfume.style.display = 'block'; } else { perfume.style.display = 'none'; } }); });

index.html

Comparação de Perfumes

Destaques

Filtros

Filtrar por notas:

Perfumes Disponíveis

Perfume X

Notas: Cítricos, Frutas, Flores

Preço: R$ 100,00

Classificação: 4.5/5

Ver Detalhes

Pesquisar este blog

Orientador de TCC - Virtual - Grátis