quadros-galeria/
├── index.html
├── script.js
└── style/
└── style.css
index.html<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Galeria de Quadros</title>
<link rel="stylesheet" href="style/style.css" />
</head>
<body>
<header class="header">
<h1>Galeria de Quadros</h1>
<button id="toggleTema">🌙 Tema Escuro</button>
</header>
<main class="galeria">
<a class="quadro" href="<https://www.amazon.com.br/s?k=quadro+decorativo>" target="_blank">
<img src="<https://picsum.photos/300/200?random=1>" alt="Quadro 1" />
<h2>Quadro Moderno</h2>
<p>Comprar na Amazon</p>
</a>
<a class="quadro" href="<https://www.mercadolivre.com.br/ofertas/quadro>" target="_blank">
<img src="<https://picsum.photos/300/200?random=2>" alt="Quadro 2" />
<h2>Quadro Abstrato</h2>
<p>Ver no Mercado Livre</p>
</a>
<a class="quadro" href="<https://www.elo7.com.br/quadro-decorativo>" target="_blank">
<img src="<https://picsum.photos/300/200?random=3>" alt="Quadro 3" />
<h2>Quadro Artesanal</h2>
<p>Comprar na Elo7</p>
</a>
<a class="quadro" href="<https://www.magazineluiza.com.br/busca/quadro%20decorativo/>" target="_blank">
<img src="<https://picsum.photos/300/200?random=4>" alt="Quadro 4" />
<h2>Quadro Natureza</h2>
<p>Ver na Magalu</p>
</a>
</main>
<footer class="footer">
<p>© 2025 - Galeria de Quadros</p>
</footer>
<script src="script.js"></script>
</body>
</html>
style/style.css/* Reset e tema padrão */
body {
margin: 0;
font-family: 'Segoe UI', sans-serif;
background-color: #ffffff;
color: #333333;
transition: background 0.3s, color 0.3s;
}
body.dark-mode {
background-color: #1f1f1f;
color: #f0f0f0;
}
/* Cabeçalho com Flexbox */
.header {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #0077cc;
color: white;
padding: 1em 2em;
}
.header button {
background: white;
color: #0077cc;
border: none;
border-radius: 5px;
padding: 0.5em 1em;
cursor: pointer;
font-weight: bold;
}
.dark-mode .header {
background-color: #111;
}
.dark-mode .header button {
background-color: #444;
color: white;
}
/* Galeria com Grid */
.galeria {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5em;
padding: 2em;
}
.quadro {
background: #f5f5f5;
border-radius: 8px;
text-decoration: none;
color: inherit;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
overflow: hidden;
transition: transform 0.2s;
}
.quadro:hover {
transform: scale(1.03);
}
.quadro img {
width: 100%;
height: auto;
display: block;
}
.quadro h2 {
margin: 0.5em;
font-size: 1.2em;
}
.quadro p {
margin: 0.5em;
color: #0077cc;
}
.dark-mode .quadro {
background-color: #2a2a2a;
}
.dark-mode .quadro p {
color: #90caf9;
}
/* Rodapé */
.footer {
text-align: center;
padding: 1em;
background-color: #0077cc;
color: white;
}
.dark-mode .footer {
background-color: #111;
}
script.jsconst botaoTema = document.getElementById("toggleTema");
botaoTema.addEventListener("click", () => {
document.body.classList.toggle("dark-mode");
const temaAtual = document.body.classList.contains("dark-mode");
botaoTema.textContent = temaAtual ? "☀️ Tema Claro" : "🌙 Tema Escuro";
});
Nesta primeira parte da aula, vamos entender os conceitos básicos de CSS Flexbox e CSS Grid. Ambos são sistemas de layout modernos em CSS que facilitam a organização de elementos na página, porém cada um tem suas características e casos de uso. Vamos explorar cada um separadamente e discutir quando usar Flexbox ou Grid em seus layouts.
O Flexbox (Flexible Box) é um módulo de CSS voltado para criar layouts em uma dimensão (em linha ou em coluna). Isso significa que ele organiza elementos em fila (horizontalmente) ou em coluna (verticalmente), facilitando, por exemplo, a criação de menus horizontais, barras de navegação, listas de itens ou alinhamento vertical de componentes em um container. Com Flexbox, um container flexível pode distribuir espaço entre os itens e alinhar esses itens de diversas formas.