<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Loja Agro & Games - Produzindo com Qualidade</title>
<style>
:root {
--sys-color-primary: #13b829; /* Verde destaque */
--sys-color-bg: #ffffff;
--sys-color-text: #19aa25;
--sys-spacing: 20px;
--sys-radius: 8px;
--transition: 0.3s ease;
}
body {
margin: 0;
font-family: 'Segoe UI', Arial, sans-serif;
background-color: #f9f9f9;
color: #333;
}
/* --- NAVEGAÇÃO --- */
.vitrine-nav {
padding: 15px 5%;
background: #fff;
border-bottom: 5px solid var(--sys-color-primary);
display: flex;
justify-content: space-between;
align-items: center;
position: sticky;
top: 0;
z-index: 1000;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.logo { font-size: 1.2rem; color: var(--sys-color-primary); font-weight: bold; }
.nav-links { display: flex; gap: 10px; }
.btn-nav {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 15px;
background: #000;
color: #fff;
text-decoration: none;
border-radius: 50px;
font-size: 0.9rem;
transition: var(--transition);
}
.btn-nav:hover { transform: scale(1.05); background: #222; }
/* --- CAROUSEL (BANNER ROTATIVO) --- */
.carousel-container {
width: 100%;
height: 400px;
overflow: hidden;
position: relative;
background: #000;
}
.carousel-track {
display: flex;
overflow-x: hidden;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
height: 100%;
}
.carousel-item {
min-width: 100%;
height: 100%;
scroll-snap-align: start;
}
.carousel-item img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.8;
}
/* --- HERO SECTION --- */
.hero-container {
text-align: center;
padding: 60px 20px;
background: #babec022;
}
/* --- GRID DE PRODUTOS --- */
.layout-vitrine {
max-width: 1100px;
margin: 40px auto;
padding: 0 var(--sys-spacing);
}
.galeria-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 30px;
}
.galeria-item {
background: #fff;
border: 1px solid #ddd;
padding: 15px;
border-radius: var(--sys-radius);
transition: var(--transition);
text-align: center;
}
.galeria-item:hover {
box-shadow: 0 10px 20px rgba(0,0,0,0.2);
transform: translateY(-5px);
}
.galeria-item img {
width: 100%;
height: 200px;
object-fit: cover;
border-radius: var(--sys-radius);
}
.btn-comprar {
width: 100%;
padding: 12px;
background: var(--sys-color-primary);
color: white;
border: none;
border-radius: var(--sys-radius);
cursor: pointer;
font-weight: bold;
margin-top: 10px;
}
/* --- MODAL --- */
.modal-especial {
display: none;
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(0,0,0,0.85);
z-index: 2000;
justify-content: center;
align-items: center;
}
.modal-conteudo {
background: white;
padding: 30px;
border-radius: var(--sys-radius);
max-width: 500px;
width: 90%;
position: relative;
animation: slideUp 0.3s ease;
text-align: center;
}
@keyframes slideUp {
from { transform: translateY(30px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.fechar-modal {
position: absolute;
top: 10px; right: 20px;
font-size: 30px;
cursor: pointer;
}
.info-lista { list-style: none; padding: 0; text-align: left; margin: 15px 0; }
.info-lista li { padding: 8px 0; border-bottom: 1px solid #eee; }
/* --- FOOTER --- */
.sys-footer {
background: #222;
color: #fff;
padding: 40px 5%;
margin-top: 50px;
text-align: center;
}
</style>
</head>
<body>
<nav class="vitrine-nav">
<div class="logo">🌿 <strong>PRODUZINDO COM</strong> QUALIDADE</div>
<div class="nav-links">
<a href="#" class="btn-nav"><span>🏠</span> Início</a>
<a href="#" class="btn-nav"><span>🛒</span> Carrinho</a>
</div>
</nav>
<div class="carousel-container">
<div class="carousel-track" id="track">
<div class="carousel-item"><img src="3e5dba50c0b9978b83911b5755fdbe05.jpg"></div>
<div class="carousel-item"><img src="7150e83d3a245868a35a491e8edbeb32.jpg"></div>
</div>
</div>
<section class="hero-container">
<h1>Bem-vindo ao Laboratório Agro-Games</h1>
<p>Explore as melhores linhagens de raças e os jogos mais épicos.</p>
</section>
<main class="layout-vitrine">
<div class="galeria-grid">
<div class="galeria-item">
<img src="MAGDA-FAIXA-CAMPEÃ.webp">
<h3>Vaca Gir Leiteira</h3>
<p><strong>R$ 660.000,00</strong></p>
<button class="btn-comprar" onclick="abrirDetalhes('Vaca Gir Leiteira', '<ul class=\'info-lista\'><li><b>Origem:</b> Índia</li><li><b>Produção:</b> Alta resistência e docilidade.</li><li><b>Uso:</b> Matriz de Elite.</li></ul>', 'MAGDA-FAIXA-CAMPEÃ.webp')">Características</button>
</div>
<div class="galeria-item">
<img src="pngtree-holstein-friesian-cows-with-calves-in-pasture-picture-image_16133508.jpg">
<h3>Holandesa-Frisian</h3>
<p><strong>R$ 40.000,00</strong></p>
<button class="btn-comprar" onclick="abrirDetalhes('Holandesa-Frisian', '<ul class=\'info-lista\'><li><b>Origem:</b> Europa</li><li><b>Destaque:</b> Recordista em produção de leite.</li><li><b>Clima:</b> Prefere regiões amenas.</li></ul>', 'pngtree-holstein-friesian-cows-with-calves-in-pasture-picture-image_16133508.jpg')">Características</button>
</div>
<div class="galeria-item">
<img src="hq720.jpg">
<h3>The Last Of Us</h3>
<p><strong>R$ 80,00</strong></p>
<button class="btn-comprar" onclick="abrirDetalhes('The Last Of Us', '<ul class=\'info-lista\'><li><b>Gênero:</b> Sobrevivência / Ação</li><li><b>Plataforma:</b> Console / PC</li><li><b>Nota:</b> Jogo do Ano (GOTY).</li></ul>', 'hq720.jpg')">Ver Jogo</button>
</div>
<div class="galeria-item">
<img src="Hero-bdef2532984d6fcafc40.jpg">
<h3>Minecraft</h3>
<p><strong>R$ 100,00</strong></p>
<button class="btn-comprar" onclick="abrirDetalhes('Minecraft', '<ul class=\'info-lista\'><li><b>Gênero:</b> Sandbox / Criativo</li><li><b>Vantagem:</b> Diversão sem limites.</li><li><b>Modo:</b> Multiplayer e Survival.</li></ul>', 'Hero-bdef2532984d6fcafc40.jpg')">Ver Jogo</button>
</div>
<div class="galeria-item">
<img src="Among_Us.webp">
<h3>Among Us</h3>
<p><strong>R$ 99,00</strong></p>
<button class="btn-comprar" onclick="abrirDetalhes('Among Us', '<ul class=\'info-lista\'><li><b>Gênero:</b> Festa / Dedução</li><li><b>Social:</b> Descubra o impostor.</li><li><b>Plataforma:</b> Mobile / PC.</li></ul>', 'Among_Us.webp')">Ver Jogo</button>
</div>
<div class="galeria-item">
<img src="Grand_Theft_Auto_San_Andreas_capa.png">
<h3>GTA San Andreas</h3>
<p><strong>R$ 320,00</strong></p>
<button class="btn-comprar" onclick="abrirDetalhes('GTA San Andreas', '<ul class=\'info-lista\'><li><b>Gênero:</b> Mundo Aberto</li><li><b>Clássico:</b> A jornada de CJ.</li><li><b>Versão:</b> Remasterizada / Original.</li></ul>', 'Grand_Theft_Auto_San_Andreas_capa.png')">Ver Jogo</button>
</div>
</div>
</main>
<div id="meuModal" class="modal-especial">
<div class="modal-conteudo">
<span class="fechar-modal" onclick="fecharDetalhes()">×</span>
<img id="modal-img" src="" style="width:100%; max-height:250px; object-fit:cover; border-radius:8px;">
<h2 id="modal-titulo" style="color:var(--sys-color-primary);"></h2>
<div id="modal-descricao"></div>
<button class="btn-comprar" onclick="fecharDetalhes()">Fechar</button>
</div>
</div>
<footer class="sys-footer">
<p>© 2026 Produzindo com Qualidade - Gameslab Modular</p>
</footer>
<script>
// Rotação Automática do Banner
const track = document.getElementById('track');
let index = 0;
const items = document.querySelectorAll('.carousel-item');
setInterval(() => {
index++;
if (index >= items.length) index = 0;
track.scrollTo({ left: track.offsetWidth * index, behavior: 'smooth' });
}, 4000);
// Lógica do Modal de Detalhes
function abrirDetalhes(nome, descricao, imagem) {
document.getElementById('modal-titulo').innerText = nome;
document.getElementById('modal-descricao').innerHTML = 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) {
if (event.target == document.getElementById('meuModal')) fecharDetalhes();
}
</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>Meu Projeto Modular - Gameslab</title>
<style>
:root {
/* Cores e Variáveis padronizadas */
--primary-color: #e67e22; /* Usei o laranja para destacar o Gameslab */
--bg-color: #f4f4f4;
--surface-color: #ffffff;
--text-color: #131111;
--padding-standard: 20px;
--transition: 0.3s ease;
--sys-radius: 8px; /* Arredondamento padrão */
}
body {
background-color: var(--bg-color);
margin: 0;
font-family: sans-serif;
}
/* --- HERO SECTION --- */
.hero-container {
display: flex;
align-items: center;
justify-content: center;
min-height: 60vh;
background-color: #babec067;
padding: var(--padding-standard);
text-align: center;
}
.hero-content img {
border-radius: 10px;
margin: 5px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
/* --- CAROUSEL (BANNER TOPO) --- */
.carousel-container {
width: 100%;
height: 400px;
overflow: hidden;
position: relative;
background: #000;
}
.carousel-track {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
height: 100%;
}
.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;
opacity: 0.7;
}
/* --- PRODUCT SLIDER (O QUE ESTAVA DANDO ERRO) --- */
.product-slider-container {
padding: 40px var(--padding-standard);
max-width: 1200px;
margin: 0 auto;
}
.product-slider-track {
display: flex;
gap: 20px;
overflow-x: auto;
scroll-snap-type: x mandatory;
padding: 20px 0;
scroll-behavior: smooth;
}
.product-slider-track::-webkit-scrollbar { height: 8px; }
.product-card {
min-width: 250px;
background: var(--surface-color);
border-radius: var(--sys-radius);
padding: 15px;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
scroll-snap-align: start;
transition: var(--transition);
text-align: center;
}
.product-card:hover { transform: translateY(-5px); }
.product-image img {
width: 100%;
height: 180px;
object-fit: cover;
border-radius: var(--sys-radius);
margin-bottom: 15px;
}
.product-name { font-weight: bold; display: block; margin-bottom: 5px; }
.product-price { color: var(--primary-color); font-weight: bold; font-size: 1.2rem; }
.sys-btn-small {
background: var(--primary-color);
color: white;
border: none;
padding: 10px;
width: 100%;
border-radius: var(--sys-radius);
cursor: pointer;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="carousel-container">
<div class="carousel-track">
<div class="carousel-item" id="banner1">
<img src="3e5dba50c0b9978b83911b5755fdbe05.jpg" alt="Promoção 1">
</div>
<div class="carousel-item" id="banner2">
<img src="7150e83d3a245868a35a491e8edbeb32.jpg" alt="Promoção 2">
</div>
</div>
</div>
<section class="hero-container">
<div class="hero-content">
<h1 class="hero-title">BEM-VINDO AO LABORATÓRIO DE JOGOS.</h1>
<p class="hero-subtitle">ITENS EM DESTAQUE</p>
<img src="Ghost_of_Tsushima_capa.png" alt="Destaque" width="400">
</div>
</section>
<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="hq720.jpg" alt="The Last Of Us">
</div>
<div class="product-info">
<span class="product-name">The Last Of Us</span>
<span class="product-price">R$ 80,00</span>
<button class="sys-btn-small">Comprar</button>
</div>
</div>
<div class="product-card">
<div class="product-image">
<img src="Hero-bdef2532984d6fcafc40.jpg" alt="Minecraft">
</div>
<div class="product-info">
<span class="product-name">Minecraft</span>
<span class="product-price">R$ 100,00</span>
<button class="sys-btn-small">Comprar</button>
</div>
</div>
<div class="product-card">
<div class="product-image">
<img src="Among_Us.webp" alt="Minecraft">
</div>
<div class="product-info">
<span class="product-name">Among us</span>
<span class="product-price">R$ 99,00</span>
<button class="sys-btn-small">Comprar</button>
</div>
</div>
<div class="product-card">
<div class="product-image">
<img src="Dwk6fihxcautgjs_j74m.webp" alt="Minecraft">
</div>
<div class="product-info">
<span class="product-name">Mortalkombat</span>
<span class="product-price">R$ 260,00</span>
<button class="sys-btn-small">Comprar</button>
</div>
</div>
<div class="product-card">
<div class="product-image">
<img src="Grand_Theft_Auto_San_Andreas_capa.png" alt="Minecraft">
</div>
<div class="product-info">
<span class="product-name">grand theft auto san andreas</span>
<span class="product-price">R$ 320,00</span>
<button class="sys-btn-small">Comprar</button>
</div>
</div>
<div class="product-card">
<div class="product-image">
<img src="2e757ffb0a6bb4b91af84db64e0183d725e56e5354f45eba.avif" alt="Minecraft">
</div>
<div class="product-info">
<span class="product-name">FC26</span>
<span class="product-price">R$ 310,00</span>
<button class="sys-btn-small">Comprar</button>
</div>
</div>
</div>
</section>
</body>
</html>
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Ficha Técnica - Gir Leiteiro</title>
<style>
:root {
--primary: #13b829;
--dark: #2c3e50;
}
body { font-family: Arial, sans-serif; margin: 0; background: #f9f9f9; }
.nav-simples { background: var(--dark); padding: 15px; color: white; }
.nav-simples a { color: var(--primary); text-decoration: none; font-weight: bold; }
.container-detalhes { max-width: 900px; margin: 40px auto; background: white; padding: 30px; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); }
.header-produto { display: flex; gap: 30px; border-bottom: 2px solid #eee; padding-bottom: 30px; }
.header-produto img { width: 400px; border-radius: 8px; }
.info-principal h1 { color: var(--dark); margin-top: 0; }
.preco-tag { font-size: 2rem; color: var(--primary); font-weight: bold; }
.secao-tecnica { margin-top: 30px; }
.tabela-dados { width: 100%; border-collapse: collapse; margin-top: 15px; }
.tabela-dados td { padding: 12px; border: 1px solid #eee; }
.tabela-dados tr:nth-child(odd) { background: #fcfcfc; }
.label { font-weight: bold; color: #666; width: 30%; }
</style>
</head>
<body>
<nav class="nav-simples">
<a href="index.html">⬅ Voltar para a Vitrine</a>
</nav>
<div class="container-detalhes">
<div class="header-produto">
<img src="MAGDA-FAIXA-CAMPEÃ.webp" alt="Gir Leiteiro">
<div class="info-principal">
<h1>Raça Gir Leiteiro</h1>
<p class="preco-tag">R$ 660.000,00</p>
<p>O Gir Leiteiro é uma raça zebuína de origem indiana, fundamental para a produção leiteira em países tropicais.</p>
<button style="background: var(--primary); color: white; border: none; padding: 15px 30px; border-radius: 5px; cursor: pointer; font-size: 1rem;">Tenho Interesse</button>
</div>
</div>
<div class="secao-tecnica">
<h2>Dossiê e Características</h2>
<table class="tabela-dados">
<tr><td class="label">Origem</td><td>Índia</td></tr>
<tr><td class="label">Produção Média</td><td>3.500 a 5.000 kg por lactação</td></tr>
<tr><td class="label">Clima Ideal</td><td>Tropical e Subtropical</td></tr>
<tr><td class="label">Temperamento</td><td>Docilidade acentuada</td></tr>
<tr><td class="label">Curiosidade</td><td>Raça base para o cruzamento Girolando.</td></tr>
</table>
<div style="margin-top: 30px; line-height: 1.6; color: #444;">
<h3>História e Aptidão</h3>
<p>Inserir aqui o "monte de informações" que você comentou. Como a página é dedicada, você pode colocar parágrafos longos, outras fotos e até vídeos de exposição.</p>
</div>
</div>
</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>Loja Virtual - Página Principal</title>
<style>
:root {
--sys-color-primary: #13b829; /* Cor de destaque laranja */
--sys-color-bg: #ffffff;
--sys-color-text: #19aa25;
--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: 10px solid #09ff00cb;
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 #34880d;
padding: 10px;
border-radius: var(--sys-radius);
transition: 0.3s;
}
.galeria-item:hover {
box-shadow: 0 10px 20px rgb(0, 0, 0);
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: rgb(0, 0, 0);
border: none;
border-radius: var(--sys-radius);
cursor: pointer;
margin-top: 10px;
}
/* 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 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;
}
}
</style>
</head>
<body>
<nav class="vitrine-nav">
<div class="logo"><strong>Produzindo com </strong>qualidade</div>
<input type="text" class="search-bar" placeholder="Qual raça você procura?">
<div class="carrinho">🐄 (0)</div>
</nav>
<main class="layout-vitrine">
<div class="vitrine-title">
<h1>Características das Raças.</h1>
</div>
<div class="galeria-grid">
<div class="galeria-item">
<img src="MAGDA-FAIXA-CAMPEÃ.webp" alt="">
<h3>Vaca Gir Leiteira</h3>
<p><strong>R$ 660.000,00</strong></p>
<button class="btn-comprar" onclick="abrirDetalhes('Vaca Gir Leiteira', 'Características da raça...', 'MAGDA-FAIXA-CAMPEÃ.webp')">
Características
</button>
</div>
<div class="galeria-item">
<img src="pngtree-holstein-friesian-cows-with-calves-in-pasture-picture-image_16133508.jpg" alt="">
<h3>Holandesa-Frisian</h3>
<p><strong>R$ 40.000,00</strong></p>
<button class="btn-comprar" onclick="abrirDetalhes('Holandesa-Frisian', 'essa é uma vaquinha massa', 'pngtree-holstein-friesian-cows-with-calves-in-pasture-picture-image_16133508.jpg')">
Características
</button>
</div>
</div>
</main>
<div id="meuModal" class="modal-especial">
<div class="modal-conteudo">
<span class="fechar-modal" onclick="fecharDetalhes()">×</span>
<img id="modal-img" src="" class="img-detalhe">
<h2 id="modal-titulo">Título do Produto</h2>
<p id="modal-descricao">essa é uma vaquinha bonita</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>
<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>© 2026 Sistema Master - Todos os direitos reservados.</p>
</div>
</footer>
</body>
</html>Com certeza, professor! Vou isolar apenas o código do Nav (HTML e CSS) com um design de botões em formato de "pílula", usando os símbolos que você enviou e um acabamento muito mais profissional.
Aqui está o módulo pronto para o seu sistema:
🧱 CATEGORIA: ESTRUTURA | NOME: NAV-MODERNO-SYMBOLS (HTML)
HTML
<nav class="vitrine-nav">
<div class="nav-logo">
<img src="Nestle-Logo.png" alt="Logo">
</div>
<div class="nav-links">
<a href="index.html" class="btn-nav">
<img src="3643769-building-home-house-main-menu-start_113416.webp" class="nav-icon">
<span>Início</span>
</a>
<a href="loja.html" class="btn-nav">
<img src="ícone-do-saco-de-compras-preto-papel-ecológico-bolsa-vetor-sobre-fundo-branco-isolado-eps-199971486-removebg-preview.png" class="nav-icon">
<span>Comprar</span>
</a>
<a href="https://www.google.com" class="btn-nav">
<img src="5087784.png" class="nav-icon">
<span>Carrinho</span>
</a>
</div>
</nav>
🎨 CATEGORIA: CSS PURO | NOME: UPGRADE-NAV-DESIGN (ESTILO)
CSS
/* TITULO: UPGRADE NAV - BOTÕES COM SÍMBOLOS */
.vitrine-nav {
padding: 10px 5%;
background: #0563b1; /* Cor de fundo do seu projeto */
border-bottom: 2px solid rgba(255, 255, 255, 0.2);
display: flex;
justify-content: space-between; /* Separa Logo de Botões */
align-items: center;
position: sticky;
top: 0;
z-index: 1000;
box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
.nav-logo img {
height: 50px;
object-fit: contain;
}
.nav-links {
display: flex;
gap: 12px; /* Espaço entre os botões */
}
/* Estilização do Botão "Pílula" */
.btn-nav {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 18px;
background: #000000; /* Cor preta conforme seu código anterior */
border-radius: 50px; /* Formato arredondado */
text-decoration: none;
transition: all 0.3s ease;
border: 1px solid transparent;
}
.btn-nav:hover {
transform: scale(1.05);
background: #111111;
border-color: #ffffff;
box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
}
/* Estilo do Símbolo dentro do Botão */
.nav-icon {
width: 22px;
height: 22px;
object-fit: contain;
/* Dica: Se quiser que os ícones pretos fiquem brancos,
descomente a linha abaixo: */
/* filter: brightness(0) invert(1); */
}
.btn-nav span {
color: #ffffff;
font-weight: bold;
font-size: 0.9rem;
text-transform: uppercase;
}
/* Ajuste para telas pequenas */
@media (max-width: 768px) {
.vitrine-nav {
flex-direction: column;
gap: 15px;
padding: 15px;
}
.btn-nav span { display: none; } /* Esconde o texto no mobile, deixa só o ícone */
}🧱 CATEGORIA: LISTA | NOME: SLIDER-PRODUTOS-SÍMBOLOS (HTML)
Instrução: Substitui o Slider de Produtos anterior. As fotos foram trocadas por ícones geométricos/simbólicos criados apenas com CSS ou Emojis.
HTML
<section class="product-slider-emoji">
<h2 class="sys-title-dark">Destaques com Símbolos</h2>
<div class="product-slider-track-emoji">
<div class="product-card-emoji">
<div class="product-icon-placeholder style-1">
<span class="big-emoji">🏍️</span>
</div>
<div class="product-info-emoji">
<span class="product-name">Moto Esportiva</span>
<span class="product-price">R$ 45.000</span>
<button class="sys-btn-small">Ver</button>
</div>
</div>
<div class="product-card-emoji">
<div class="product-icon-placeholder style-2">
<span class="big-emoji">🛒</span>
</div>
<div class="product-info-emoji">
<span class="product-name">Carrinho Modular</span>
<span class="product-price">R$ 1.200</span>
<button class="sys-btn-small">Ver</button>
</div>
</div>
<div class="product-card-emoji">
<div class="product-icon-placeholder style-3">
<span class="big-emoji">🏢</span>
</div>
<div class="product-info-emoji">
<span class="product-name">Prédio Master</span>
<span class="product-price">R$ 350.000</span>
<button class="sys-btn-small">Ver</button>
</div>
</div>
<div class="product-card-emoji">
<div class="product-icon-placeholder style-1">
<span class="big-emoji">📦</span>
</div>
<div class="product-info-emoji">
<span class="product-name">Pacote Modular</span>
<span class="product-price">R$ 99</span>
<button class="sys-btn-small">Ver</button>
</div>
</div>
</div>
</section>
🎨 CATEGORIA: CSS PURO | NOME: UPGRADE-SLIDER-SÍMBOLOS (ESTILO)
CSS
/* TITULO: UPGRADE SLIDER - VITRINE COM SÍMBOLOS */
/* Reutilizando as variáveis globais que definimos no início */
:root {
--sys-spacing: 20px;
--sys-radius: 8px;
--sys-transition: 0.3s ease;
--primary-color: #0563b1; /* Azul do projeto */
--surface-color: #ffffff;
}
.product-slider-emoji {
padding: var(--sys-spacing);
max-width: 1200px;
margin: 0 auto;
}
.product-slider-track-emoji {
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 */
.product-slider-track-emoji::-webkit-scrollbar { display: none; }
.product-card-emoji {
min-width: 250px;
background: var(--surface-color);
border-radius: var(--sys-radius);
padding: 15px;
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
scroll-snap-align: start;
transition: var(--sys-transition);
}
.product-card-emoji:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}
/* Espaço onde ficava a imagem, agora com um símbolo */
.product-icon-placeholder {
width: 100%;
height: 180px;
display: flex;
justify-content: center;
align-items: center;
border-radius: var(--sys-radius);
margin-bottom: 15px;
}
/* Estilos de fundo diferentes para cada tipo de ícone */
.style-1 { background: #e3f2fd; } /* Azul claro */
.style-2 { background: #e8f5e9; } /* Verde claro */
.style-3 { background: #fff3e0; } /* Laranja claro */
.big-emoji {
font-size: 5rem; /* Emoji gigante */
}
.product-info-emoji {
display: flex;
flex-direction: column;
gap: 8px;
text-align: center;
}
.product-name { font-weight: bold; font-size: 1.1rem; }
.product-price { color: var(--primary-color); font-size: 1.2rem; font-weight: bold; }
.sys-btn-small {
background: var(--primary-color);
color: white;
border: none;
padding: 8px;
border-radius: var(--sys-radius);
cursor: pointer;
margin-top: 5px;
}<!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: 100vh; /* 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: 20px;
justify-content: center;
}
.btn-exemplo {
padding: 10px 25px;
border: none;
border-radius: 5px;
cursor: pointer;
background: #000000;
color: var(--primary-color);
font-weight: bold;
transition: var(--transition);
}
.btn-exemplo:hover {
transform: scale(1.05); /* Efeito leve ao passar o mouse */
}
/* TITULO: UPGRADE IMAGE PRO - FUNDO COM FILTRO */
.hero-container {
/* O linear-gradient cria uma camada escura sobre a imagem */
background-image:
url('2.png');
background-size: cover;
background-position: center;
}
.vitrine-nav {
padding: 25px 10%;
background: #0563b1;
border-bottom: 10px solid #ffffff;
display: flex;
justify-content: space-between;
align-items: center;
position: sticky;
top: 0;
z-index: 100;
}
.search-bar {
width: 25%;
padding: 20px;
border: 1px solid #d6d6d6;
border-radius: 2033px;
}
</style>
</head>
<body>
<nav class="vitrine-nav">
<!-- Direita -->
<img src="Nestle-Logo.png" width="130px" style="float: right;">
<img src="3643769-building-home-house-main-menu-start_113416.webp" width="40px" style="float: right;">
<button class="btn-exemplo" onclick="window.location.href='index.html';">Início</button>
<img src="ícone-do-saco-de-compras-preto-papel-ecológico-bolsa-vetor-sobre-fundo-branco-isolado-eps-199971486-removebg-preview.png" width="80px" style="float: right;">
<button class="btn-exemplo" onclick="window.location.href='2.png';">comprar</button>
<img src="5087784.png" width="40px" style="float: right;">
<button class="btn-exemplo" onclick="window.location.href='https://www.google.com';">carrinho</button>
</nav>
<section class="hero-container"> <!-- Container principal -->
<div class="hero-content"> <!-- Caixa interna de centralização -->
<div class="hero-slots"> <!-- Área para botões -->
</div>
</div>
</section>
</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 - Gameslab</title>
<style>
:root {
/* Cores e Variáveis padronizadas */
--primary-color: #e67e22; /* Usei o laranja para destacar o Gameslab */
--bg-color: #f4f4f4;
--surface-color: #ffffff;
--text-color: #131111;
--padding-standard: 20px;
--transition: 0.3s ease;
--sys-radius: 8px; /* Arredondamento padrão */
}
body {
background-color: var(--bg-color);
margin: 0;
font-family: sans-serif;
}
/* --- HERO SECTION --- */
.hero-container {
display: flex;
align-items: center;
justify-content: center;
min-height: 60vh;
background-color: #babec067;
padding: var(--padding-standard);
text-align: center;
}
.hero-content img {
border-radius: 10px;
margin: 5px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
/* --- CAROUSEL (BANNER TOPO) --- */
.carousel-container {
width: 100%;
height: 400px;
overflow: hidden;
position: relative;
background: #000;
}
.carousel-track {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
height: 100%;
}
.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;
opacity: 0.7;
}
/* --- PRODUCT SLIDER (O QUE ESTAVA DANDO ERRO) --- */
.product-slider-container {
padding: 40px var(--padding-standard);
max-width: 1200px;
margin: 0 auto;
}
.product-slider-track {
display: flex;
gap: 20px;
overflow-x: auto;
scroll-snap-type: x mandatory;
padding: 20px 0;
scroll-behavior: smooth;
}
.product-slider-track::-webkit-scrollbar { height: 8px; }
.product-card {
min-width: 250px;
background: var(--surface-color);
border-radius: var(--sys-radius);
padding: 15px;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
scroll-snap-align: start;
transition: var(--transition);
text-align: center;
}
.product-card:hover { transform: translateY(-5px); }
.product-image img {
width: 100%;
height: 180px;
object-fit: cover;
border-radius: var(--sys-radius);
margin-bottom: 15px;
}
.product-name { font-weight: bold; display: block; margin-bottom: 5px; }
.product-price { color: var(--primary-color); font-weight: bold; font-size: 1.2rem; }
.sys-btn-small {
background: var(--primary-color);
color: white;
border: none;
padding: 10px;
width: 100%;
border-radius: var(--sys-radius);
cursor: pointer;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="carousel-container">
<div class="carousel-track">
<div class="carousel-item" id="banner1">
<img src="https://via.placeholder.com/1200x400/000/fff?text=Gameslab+Promo+1" alt="Promoção 1">
</div>
<div class="carousel-item" id="banner2">
<img src="https://via.placeholder.com/1200x400/333/fff?text=Gameslab+Promo+2" alt="Promoção 2">
</div>
</div>
</div>
<section class="hero-container">
<div class="hero-content">
<h1 class="hero-title">BEM-VINDO AO LABORATÓRIO DE JOGOS.</h1>
<p class="hero-subtitle">ITENS EM DESTAQUE</p>
<img src="https://via.placeholder.com/400x200" alt="Destaque" width="400">
</div>
</section>
<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/200" alt="The Last Of Us">
</div>
<div class="product-info">
<span class="product-name">The Last Of Us</span>
<span class="product-price">R$ 80,00</span>
<button class="sys-btn-small">Comprar</button>
</div>
</div>
<div class="product-card">
<div class="product-image">
<img src="https://via.placeholder.com/200" alt="Minecraft">
</div>
<div class="product-info">
<span class="product-name">Minecraft</span>
<span class="product-price">R$ 100,00</span>
<button class="sys-btn-small">Comprar</button>
</div>
</div>
</div>
</section>
</body>
</html>nav class="vitrine-nav">
<!-- Direita -->
<img src="Nestle-Logo.png" width="130px" style="float: right;">
<img src="3643769-building-home-house-main-menu-start_113416.webp" width="40px" style="float: right;">
<button class="btn-exemplo" onclick="window.location.href='index.html';">Início</button>
<img src="ícone-do-saco-de-compras-preto-papel-ecológico-bolsa-vetor-sobre-fundo-branco-isolado-eps-199971486-removebg-preview.png" width="80px" style="float: right;">
<button class="btn-exemplo" onclick="window.location.href='2.png';">comprar</button>
<img src="5087784.png" width="40px" style="float: right;">
<button class="btn-exemplo" onclick="window.location.href='https://www.google.com';">carrinho</button>
</nav><!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: #babec067; /* Cor principal que todos os códigos usarão */
--text-color: #131111; /* 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: #0f0f0f;
color: var(--primary-color);
font-weight: bold;
transition: var(--transition);
}
.btn-exemplo:hover {
transform: scale(1.05); /* Efeito leve ao passar o mouse */
}
/* 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(189, 188, 204, 0.507);
border-radius: 50%;
text-decoration: none;
transition: 0.3s;
}
.carousel-indicators a:hover {
background: var(--sys-color-primary);
transform: scale(1.3);
}
/* 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;
}
</style>
</head>
<body>
<div class="carousel-container">
<div class="carousel-track">
/* TITULO: UPGRADE CAROUSEL - BANNER DESLIZANTE */
<div class="carousel-item" id="banner1">
<img src="3e5dba50c0b9978b83911b5755fdbe05.jpg" alt="Promoção 1">
<div class="carousel-caption">
<h2>Gameslab</h2>
<p>Confira os lançamentos da semana com 30% OFF.</p>
</div>
</div>
<div class="carousel-item" id="banner2">
<img src="7150e83d3a245868a35a491e8edbeb32.jpg" alt="Promoção 2">
<div class="carousel-caption">
<h2>Gameslab</h2>
<p></p>
</div>
</div>
</div>
<div class="carousel-indicators">
<a href="#banner1"></a>
<a href="#banner2"></a>
</div>
</div>
<section class="hero-container"> <!-- Container principal -->
<div class="hero-content"> <!-- Caixa interna de centralização -->
<h1 class="hero-title"> BEM-VINDO AO LABORATÓRIO DE JOGOS.</h1> <!-- Espaço para Títulos -->
<p class="hero-subtitle">ITENS EM DESTAQUE</p> <!-- Espaço para Textos -->
<img src="hvKCG93Orn7ypAy8hHis7mtUrWu8u1OwJz7u4uydchs (1).jpg" alt="Descrição da imagem" width="400">
<img src="2G7Nl2eJRHNMCUL00BzdZrcX.avif" alt="Descrição da imagem" width="400">
<img src="" alt="Descrição da imagem" width="400">
<img src="
<img src=">
<img src=">
<img src=">
<img src=">
<img src=">
<img src="" alt="Descrição da imagem" width="400">
<img src="dmc-5-arte.avif" alt="Descrição da imagem" width="400">
<img src="WkgJ8OLvEkfoZmY65B8cudKYw8Aylp1y.avif" alt="Descrição da imagem" width="400">
<img src="Grand_Theft_Auto_San_Andreas_capa.png" alt="Descrição da imagem" width="400">
<img src="2e757ffb0a6bb4b91af84db64e0183d725e56e5354f45eba.avif" alt="Descrição da imagem" width="400">
<img src="fffb9df0056b522df6a1f35a8aadaa8e2456627ebef64849.avif" alt="Descrição da imagem" width="400">
<img src="C784xeOFo2wViCf4m5bxgoeH.webp" alt="Descrição da imagem" width="400">
<img src="w48z6bzefZPrRcJHc7L8SO66.avif" alt="Descrição da imagem" width="400">
<img src="resident-evil-requiem-g8jiq-1.jpg" alt="Descrição da imagem" width="400">
<img src="call-of-duty-warzone.avif" alt="Descrição da imagem" width="400">
<img src="Dwk6fihxcautgjs_j74m.webp" alt="Descrição da imagem" width="400">
<img src="Among_Us.webp" alt="Descrição da imagem" width="400">
<img src="The_Walking_Dead_The_Final_Season_cover.jpg" alt="Descrição da imagem" width="400">
<img src="Ghost_of_Tsushima_capa.png" alt="Descrição da imagem" width="400">
<img src="apex-legends-listing-thumb-01-ps4-en-29oct20.webp" alt="Descrição da imagem" width="400">
</div>
</section>
<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="hq720.jpg" alt="Produto">
</div>
<div class="product-info">
<span class="product-name">The Las Of Us</span>
<span class="product-price">R$ 80,00</span>
<button class="sys-btn-small">Comprar</button>
</div>
</div>
<div class="product-card">
<div class="product-image">
<img src="Hero-bdef2532984d6fcafc40.jpg" alt="Descrição da imagem" width="400"" alt="Produto">
</div>
<div class="product-info">
<span class="product-name">Minecraft</span>
<span class="product-price">R$ 100,00</span>
<button class="sys-btn-small">Comprar</button>
</div>
</div>
<div class="product-card">
<div class="product-image">
<img src="icon0.avif" alt="Descrição da imagem" width="400" alt="Produto">
</div>
<div class="product-info">
<span class="product-name">Red Dead Redemption 2</span>
<span class="product-price">R$ 120,00</span>
<button class="sys-btn-small">Comprar</button>
</div>
</div>
<div class="product-card">
<div class="product-image">
<img src="ac2-gamename-store-landscape-2560x1440-2560x1440-aa944fa0e8c6.jpg" alt="Descrição da imagem" width="400" alt="Descrição da imagem" width="400" alt="Produto">
</div>
<div class="product-info">
<span class="product-name">Assassin's creed 2</span>
<span class="product-price">R$ 70,00</span>
<button class="sys-btn-small">Comprar</button>
</div>
</div>
<div class="product-card">
<div class="product-image">
<img src="GODRagnarokCover1.webp" alt="Descrição da imagem" width="400" alt="Descrição da imagem" width="400" alt="Produto">
</div>
<div class="product-info">
<span class="product-name">god of war ragnarokk</span>
<span class="product-price">R$ 250,00</span>
<button class="sys-btn-small">Comprar</button>
</div>
</div>
<div class="product-card">
<div class="product-image">
<img src="MV5BMjA4NWE1YWMtNjQ4ZC00Y2Q3LWFjMGEtNGVhM2FmYzJjMzM1XkEyXkFqcGc@._V1_FMjpg_UX1000_.jpg" alt="Descrição da imagem" width="400" alt="Produto">
</div>
<div class="product-info">
<span class="product-name">Hollow Knight Silksong </span>
<span class="product-price">R$ 560,00</span>
<button class="sys-btn-small">Ver Detalhes</button>
</div>
</div>
<div class="product-card">
<div class="product-image">
<img src="71jZAGKRAQL._AC_UF1000,1000_QL80_.jpg" alt="Descrição da imagem" width="400" alt="Produto">
</div>
<div class="product-info">
<span class="product-name">Hollow Knight Silksong </span>
<span class="product-price">R$ 560,00</span>
<button class="sys-btn-small">Ver Detalhes</button>
</div>
</div>
</div>
</section>
</body>
</html>🥤 1. Pepsi Ice Blue (lata com gelo)
💰 R$ 6,90
Uma versão ultra refrescante da Pepsi, servida em temperatura extrema com efeito “ice blast”. Ideal para dias quentes, essa edição traz uma sensação gelada prolongada a cada gole, com gás mais intenso e sabor marcante.
🥤 2. Pepsi Classic Midnight (lata escura)
💰 R$ 5,50
A tradicional Pepsi com um toque mais encorpado e sofisticado. Essa versão “Midnight” possui um sabor levemente mais forte, perfeita para quem gosta de refrigerantes intensos e menos doces.
🥤 3. Pepsi Bottle Fresh (garrafa)
💰 R$ 7,90
Pepsi na versão garrafa premium, com gás mais preservado e sabor mais puro. Ideal para compartilhar ou consumir ao longo do dia, mantendo a qualidade e o frescor por mais tempo.
🍒 4. Pepsi Cherry Zero Sugar
💰 R$ 8,50
Uma combinação ousada de Pepsi com cereja, sem adição de açúcar. Levemente adocicada com um toque frutado, é perfeita para quem quer algo diferente sem sair da dieta.
🍋 5. Pepsi Lemon Splash
💰 R$ 7,50
Refrescante e cítrica, essa versão traz um equilíbrio perfeito entre o sabor clássico da Pepsi e o azedinho do limão. Ideal para quem gosta de bebidas leves e vibrantes.
⚪ 6. Pepsi Diet Original
💰 R$ 6,50
A clássica versão sem açúcar da Pepsi, com sabor fiel ao original. Leve, equilibrada e perfeita para o consumo diário sem abrir mão do sabor.
⚫ 7. Pepsi Black Intense
💰 R$ 7,20
Uma Pepsi mais intensa, com menos açúcar e sabor mais marcante. Pensada para quem gosta de bebidas com personalidade forte e um leve amargor sofisticado.
💥 8. Pepsi Splash Energy
💰 R$ 9,00
Uma versão explosiva com sensação energética e refrescância extrema. Ideal para quem quer um boost no dia, com gás mais forte e uma experiência mais “radical”.<a href="pdfs/meuarquivo.pdf" target="_blank">
<button class="btn-pdf">Abrir PDF</button>
</a>
.btn-pdf {
padding: 10px 20px;
background: #e74c3c;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
.btn-pdf:hover {
background: #c0392b;
transform: scale(1.05);
}
<div class="lista-container">
<h2 class="lista-titulo">Minha Lista</h2>
<ul class="lista">
<li>
<img src="imagens/img1.jpg" alt="">
Item 1
</li>
<li>
<img src="imagens/img2.jpg" alt="">
Item 2
</li>
<li>
<img src="imagens/img3.jpg" alt="">
Item 3
</li>
</ul>
</div>
body {
font-family: Arial, sans-serif;
background: #f4f6f8;
}
.lista-container {
background: #ffffff;
padding: 20px;
border-radius: 10px;
width: 300px;
margin: 50px auto;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.lista-titulo {
text-align: center;
margin-bottom: 15px;
}
.lista {
list-style: none;
padding: 0;
}
.lista li {
display: flex;
align-items: center;
gap: 10px;
padding: 10px;
margin-bottom: 10px;
background: #3498db;
color: white;
border-radius: 5px;
transition: 0.3s;
}
.lista li:hover {
background: #2980b9;
transform: scale(1.02);
}
.lista img {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
}.hero-container {
display: flex;
align-items: center;
justify-content: center;
min-height: 80vh;
/* REMOVE isso */
/* background-color: var(--primary-color); */
/* ADICIONE isso */
background-image: url('sua-imagem.jpg');
background-size: cover; /* Faz a imagem cobrir tudo */
background-position: center; /* Centraliza */
background-repeat: no-repeat;
padding: var(--padding-standard);
text-align: center;
font-family: sans-serif;
}
<video width="500" controls poster="capa.jpg">
<source src="meu-video.mp4" type="video/mp4">
Seu navegador não suporta vídeo.
</video><!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Desafio HTML</title>
<style>
.container {
display: flex;
align-items: center;
}
img {
width: 150px;
margin-left:
}
</style>
</head>
<body>
<!-- TÍTULO -->
<h1> Meu Site de Programação</h1>
<!-- PARÁGRAFO -->
<p> Hoje vamos aprender HTML e botões</p>
<p>
I<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>
<!-- LISTA -->
<h2>Menu do Site</h2>
<ul>
<li>Home</li>
<li>Sobre</li>
<li>Contato</li>
<li>
</ul>
<!-- BOTÕES -->
<h2>Interações</h2>
<b<button>Clique Aqui</button>
<button> Clique aqui</button>
<button onclick="alert('Você clicou no botão!')">Mostrar Alerta</button>
<p id="meutexto">Texto que mudará de cor.</p>
<button onclick="document.getElementById('meutexto').style.color = 'red';">Mudar Cor</button>
<button onclick="window.location.href='https://www.google.com';">Ir para o Google</button>
<button onclick="window.location.href='https://www.google.com';">Ir para o Google</button>
<!-- IMAGEM CLICÁVEL -->
<h2>Imagem Interativa</h2>
<img src="Nome da imagem"
onclick="window.location.href='local pra onde ela vai'"
style="cursor: pointer;">
<img src="botao.png">
<h2>Finalização</h2>
<p>Obrigado por visitar o site</p>
<p>
<!-- DESAFIO EXTRA -->
<!-- crie uma lista ordenada aqui -->
<ol>
<li></li>
<li></li>
<li></li>
</ol>
</body>
</html><!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Desafio HTML</title>
<style>
.container {
display: flex;
align-items: center;
}
img {
width: 150px;
margin-left:
}
</style>
</head>
<body>
<!-- TÍTULO -->
<h1> Meu Site de Programação</h1>
<!-- PARÁGRAFO -->
<p> Hoje vamos aprender HTML e botões<p></p>
<!-- 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>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Desafio HTML</title>
<style>
.container {
display: flex;
align-items: center;
}
img {
width: 150px;
margin-left: 100px;
}
</style>
</head>
<body>
<!-- TÍTULO -->
<h1> Meu Site de Programação</h1>
<!-- PARÁGRAFO -->
<p> Hoje vamos aprender HTML e botões</p>
<!-- coloque um parágrafo correto aqui usando a biblioteca -->
<ul>
<li>3 cenouras médias</li>
<li>4 ovos</li>
<li>1 xícara de óleo</li>
<li>2 xícaras de açúcar</li>
</ul>
<!-- IMAGEM + TEXTO (FLEXBOX) -->
<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>
<!-- LISTA -->
<h2>Menu do Site</h2>
<ul>
<li>Home</li>
<li>Sobre</li>
<li>Contato</li>
<li>anne linda</li>
</ul>
<!-- BOTÕES -->
<h2>Interações </h2>
<!-- coloque aqui um botão simples -->
<button> Clique aqui</button>
<!-- botão com alerta (complete o código) -->
<button onclick="alert('Você clicou no botão!')">Mostrar Alerta</button>
<!-- botão mudar cor (incompleto) -->
<p id="meutexto">Texto que mudará de cor.</p>
<button onclick="document.getElementById('meutexto').style.color = 'red';">Mudar Cor</button>
<!-- botão com link -->
<button onclick="window.location.href='https://www.google.com';">Ir para o Google</button>
<!-- coloque aqui o botão com link da biblioteca -->
<button onclick="window.location.href='https://www.google.com';">Ir para o Google</button>
<!-- IMAGEM CLICÁVEL -->
<img src="Nome da imagem"
onclick="window.location.href='local pra onde ela vai'"
style="cursor: pointer;">
<h2>Imagem Interativa</h2>
<!-- transforme isso em botão clicável -->
<img src="Nome da imagem"
onclick="window.location.href='local pra onde ela vai'"
style="cursor: pointer;">
<!-- TEXTO FINAL -->
<h2>Finalização</h2>
<p>Obrigado por visitar o site</p>
<p></p>
<!-- DESAFIO EXTRA -->
<!-- crie uma lista ordenada aqui -->
<ol>
<li>anne linda</li>
<li>lindas</li>
<li>flavia linda</li>
</ol>
</body>
</html><!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Desafio HTML</title>
<style>
.container {
display: flex;
align-items: center;
}
img {
width: 150px;
margin-left:
}
</style>
</head>
<body>
<!-- TÍTULO -->
<h1> Meu Site de Programação </h1>
<!-- PARÁGRAFO -->
<p> Hoje vamos aprender HTML e botões </p>
<ul>
<li>3 cenouras médias</li>
<li>4 ovos</li>
<li>1 xícara de óleo</li>
<li>2 xícaras de açúcar</li>
</ul>
<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>
<!-- LISTA -->
<h2>Menu do Site</h2>
<ul>
<li>Home</li>
<li>Sobre</li>
<li>Contato</li>
<li>
</ul
<h2>BOTÕES</h2>
<h2>Interações</h2>
<button>Clique Aqui</button>
<button> Clique aqui</button>
<button onclick="alert('Você clicou no botão!')">Mostrar Alerta</button>
<p id="meutexto">Texto que mudará de cor.</p>
<button onclick="document.getElementById('meutexto').style.color = 'red';">Mudar Cor</button>
<button onclick="window.location.href='https://www.google.com';">Ir para o Google</button>
https://smeumburatiba.com/codigos.php
<img src="Nome da imagem"
onclick="window.location.href='local pra onde ela vai'"
style="cursor: pointer;">
<h2>Imagem Interativa</h2>
<button onclick="window.location.href='https://www.google.com';">Ir para o Google</button>
<img src="botao.png"
<h2> TEXTO FINAL </h2>
<h2>Finalização</h2>
<p>Obrigado por visitar o site</p>
<p>
<!-- DESAFIO EXTRA -->
<!-- crie uma lista ordenada aqui -->
<ol> item1</li>
<li> item2</li>
<li> item3</li>
<li>
</ol
</body>
</html><!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Desafio HTML</title>
<style>
.container {
display: flex;
align-items: center;
}
img {
width: 150px;
margin-left: 150000000px;
}
</style>
</head>
<body>
<!-- TÍTULO -->
<h1> Meu Site de Programação </h1>
<!-- PARÁGRAFO -->
<p> Hoje vamos aprender HTML e botões </p>
<!-- coloque um parágrafo correto aqui usando a biblioteca -->
<ul>
<li>3 cenouras médias</li>
<li>4 ovos</li>
<li>1 xícara de óleo</li>
<li>2 xícaras de açúcar</li>
</ul>
<!-- IMAGEM + TEXTO (FLEXBOX) -->
<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>
<!-- LISTA -->
<h2>Menu do Site</h2>
<ul>
<li>Home </li>
<li>Sobre</li>
<li>Contato</li>
<li></li>
</ul>
<!-- BOTÕES -->
<h2>Interações</h2>
<!-- coloque aqui um botão simples -->
<button> Clique aqui</button>
<!-- botão com alerta (complete o código) -->
<button onclick="alert('Você clicou no botão!')">Mostrar Alerta</button>
<!-- botão mudar cor (incompleto) -->
<p id="meutexto">Texto que mudará de cor.</p>
<button onclick="document.getElementById('meutexto').style.color = 'red';">Mudar Cor</button>
<!-- botão com link -->
<button onclick="window.location.href='https://www.google.com';">Ir para o Google</button>
<!-- coloque aqui o botão com link da biblioteca -->
<button onclick="window.location.href='https:https://smeumburatiba.com/codigos.php';">Ir para o Google</button>
<!-- IMAGEM CLICÁVEL -->
<img src="Nome da imagem"
onclick="window.location.href='local pra onde ela vai'"
style="cursor: pointer;">
<h2>Imagem Interativa</h2>
<!-- transforme isso em botão clicável -->
<img src="Nome da imagem"
onclick="window.location.href='local pra onde ela vai'"
style="cursor: pointer;">
<!-- TEXTO FINAL -->
<h2>Finalização</h2>
<p>Obrigado por visitar o site</p>
<p></p>
<!-- DESAFIO EXTRA -->
<!-- crie uma lista ordenada aqui -->
<ol>
<li>paz</li>
<li>amor</li>
<li>beleza</li>
</ol>
</body>
</html>💡 DICAS SIMPLIFICADAS (bem fáceis)
🟦 1. Começo do site
👉 Dica:
A primeira lacuna começa com a tag que tem o idioma (lang).
✔ Use:
html
🟦 2. Parte das configurações
👉 Dica:
Aqui fica o <title> e o <style>.
✔ Use:
head
🟦 3. Parte visível do site
👉 Dica:
Tudo que aparece na tela fica aqui.
✔ Use:
body
🟦 4. Parte rosa (topo do site)
👉 Dica:
É onde está o título grande “Sexta-feira Linda”.
✔ Use:
header
🟦 5. Parte do meio (conteúdo)
👉 Dica:
Onde estão o texto, imagem e link.
✔ Use:
section
🟦 6. Parte final
👉 Dica:
Fica no final com a frase “Tenha um ótimo dia”.
✔ Use:
footer
🟦 7. Título grande
👉 Dica:
É o maior título da página.
✔ Use:
h1
🟦 8. Palavra em destaque
👉 Dica:
“Hoje é dia de alegria!” está em negrito.
✔ Use:
strong
🟦 9. Imagem
👉 Dica:
A única tag que usa src.
✔ Use:
img
🟦 10. Link
👉 Dica:
A única que usa href.
✔ Use:
a
🎯 DICAS PARA O CSS (mais fácil ainda)
👉 Use os nomes das partes:
topo → header
meio → section
final → footer
💬 Fala simples pra sala
Você pode dizer assim:
“Procure palavras-chave:
imagem → img
link → a
título → h1
topo → header
meio → section
final → footer”<!DOCTYPE html>
<html>lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Sexta-feira Linda</title>
<style>
body {
background-color: #ffe4e1;
font-family: Arial;
text-align: center;
}
h1 {
background-color: #35001b;
padding: 20px;
color: white;
}
{
margin: 20px;
}
img {
width: 300px;
border-radius: 10px;
}
p {
margin-top: 20px;
background-color: #ffb6c1;
padding: 10px;
}
a {
color: blue;
}
</style>
</head>
<body>
<h1>🌸 Sexta-feira Linda 🌸</h1>
<img src="107171b922724c1526e1f1dbb4c9accd.jpg" alt="Descrição da imagem" width="400">
<p><strong>Hoje é dia de alegria!</strong> Aproveite sua sexta-feira.</p>
<p>Ouça uma música especial para hoje:</p>
<____ href="#">Clique aqui</____>
</____>
<____>
<p><____>Tenha um ótimo dia!</____></p>
</____>
</body>
</html>“Essas são as peças que vocês precisam usar para montar o site corretamente.”
Lista de Tags Utilizadas na Atividade
Estrutura do documento
● <html>
● <head>
● <body>
�
�
Estrutura da página
● <header>
● <section>
● <footer>
�
�
Conteúdo
● <h1>
● <p>
�
�
Formatação de texto
● <strong> → negrito
● <em> → itálico
�
�
Elementos de mídia e interação
● <img> → imagem
● <a> → link“Essas são as peças que vocês precisam usar para montar o site corretamente.”
Lista de Tags Utilizadas na Atividade
Estrutura do documento
● <html>
● <head>
● <body>
�
�
Estrutura da página
● <header>
● <section>
● <footer>
�
�
Conteúdo
● <h1>
● <p>
�
�
Formatação de texto
● <strong> → negrito
● <em> → itálico
�
�
Elementos de mídia e interação
● <img> → imagem
● <a> → link
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>The Flowers</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #d1c985;
margin: 0;
}
/* CONTAINER */
.container {
width: 80%;
max-width: 500px;
margin: 40px auto;
background: white;
padding: 25px;
border-radius: 10px;
box-shadow: 0px 4px 10px rgba(0,0,0,0.1);
}
/* TITULOS */
h1 {
text-align: center;
color: #6d0303;
}
h2 {
color: #333;
margin-top: 25px;
}
/* PRODUTO */
.produto {
display: flex;
gap: 15px;
align-items: center;
margin-top: 10px;
}
.produto img {
width: 120px;
height: 120px;
object-fit: cover;
border-radius: 8px;
}
.produto p {
font-size: 14px;
line-height: 1.5;
}
/* PREÇO */
.preco {
margin-top: 10px;
font-weight: bold;
}
/* BOTÕES */
button {
background-color: #6d0b0b;
color: white;
border: none;
padding: 8px 15px;
margin-top: 8px;
border-radius: 6px;
cursor: pointer;
}
button:hover {
background-color: #680c0c;
}
</style>
</head>
<body>
<div class="container">
<h1>𝓣𝓱𝓮 𝓡𝓮𝓭 𝓕𝓵𝓸𝔀𝓮𝓻𝓼 🌷</h1>
<!-- PRODUTO 1 -->
<h2>Lírio Aranha Vermelha</h2>
<div class="produto">
<img src="lírio aranha vermelha.jpg">
<p>
A lírio-aranha vermelha (Lycoris radiata) é uma flor exótica e encantadora,
com pétalas finas que lembram pernas de aranha. Sua cor intensa transmite
mistério, beleza e sofisticação.
</p>
</div>
<p class="preco">P: R$50 | M: R$100 | G: R$150</p>
<button onclick="adicionarAoCarrinho('Lírio Aranha',150)">Adicionar ao carrinho</button>
<!-- PRODUTO 2 -->
<h2>Rosas</h2>
<div class="produto">
<img src="vermelhas.jpg">
<p>
As rosas são clássicas e símbolo de amor e elegância.
Perfeitas para qualquer ocasião, com perfume suave e beleza única.
</p>
</div>
<p class="preco">P: R$40 | M: R$80 | G: R$120</p>
<button onclick="adicionarAoCarrinho('Rosas',120)">Adicionar ao carrinho</button>
<!-- PRODUTO 3 -->
<h2>Lírio Chinês</h2>
<div class="produto">
<img src="lírio chinex.jpg">
<p>
O lírio chinês representa pureza e renovação.
Uma flor elegante que traz tranquilidade e beleza ao ambiente.
</p>
</div>
<p class="preco">P: R$60 | M: R$120 | G: R$180</p>
<button onclick="adicionarAoCarrinho('Lírio Chinês',180)">Adicionar ao carrinho</button>
<!-- PRODUTO 4 -->
<h2>Astromélia</h2>
<div class="produto">
<img src="Alstroemeria.webp">
<p>
A astromélia simboliza amizade, carinho e gratidão.
Uma flor delicada, colorida e durável, ideal para presentear.
</p>
</div>
<p class="preco">P: R$40 | M: R$80 | G: R$120</p>
<button onclick="adicionarAoCarrinho('Astromélia',120)">Adicionar ao carrinho</button>
<br><br>
<button onclick="window.location.href='carrinho.html'">Ir para o Carrinho</button>
</div>
<script>
function adicionarAoCarrinho(nome, preco) {
let carrinho = JSON.parse(localStorage.getItem('meuCarrinho')) || [];
carrinho.push({ nome, preco });
localStorage.setItem('meuCarrinho', JSON.stringify(carrinho));
alert(nome + " foi adicionada ao carrinho!");
}
</script>
</body>
</html><script>
// 1. Seleciona todos os itens do mural
const itens = document.querySelectorAll('.item');
// 2. Para cada item, adiciona uma função de clique
itens.forEach(card => {
card.onclick = function() {
// O "toggle" liga e desliga a classe de zoom que criamos no CSS
this.classList.toggle('zoom-active');
};
});
// 3. Função simples para o botão de salvar
document.querySelector('.btn-salvar').onclick = function() {
alert("Seu mural personalizado foi salvo com sucesso!");
};
</script>/* Este código faz a imagem ocupar a tela toda quando clicada */
.zoom-active {
position: fixed !important; /* Fixa na tela, ignorando o resto */
top: 0;
left: 0;
width: 100vw !important; /* 100% da largura da janela */
height: 100vh !important; /* 100% da altura da janela */
z-index: 9999; /* Fica na frente de todos os outros elementos */
background-color: rgba(0,0,0,0.9); /* Fundo preto semi-transparente */
display: flex;
align-items: center;
justify-content: center;
cursor: zoom-out; /* Muda o mouse para indicar que pode diminuir */
border-radius: 0;
}
.zoom-active img {
width: auto !important; /* Impede que a foto estique errado */
max-width: 90%;
max-height: 90%;
}
2. No HTML (Dentro da <div class="mural">)
Aqui é onde eles exercitam a repetição. Eles devem copiar o modelo e mudar o link da imagem conforme as ordens.
HTML
<div class="item">
<img src="URL_DA_IMAGEM_AQUI" alt="Descricao">
</div>
3. O JavaScript (Antes do fechamento da tag </body>)
Este é o "cérebro" que faz o clique funcionar. Sem ele, as imagens não crescem.
JavaScript<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #efefef;
margin: 0;
padding: 20px;
}
/* Botão Salvar no Topo */
.header-actions {
display: flex;
justify-content: center;
margin-bottom: 30px;
position: sticky;
top: 10px;
z-index: 100;
}
.btn-save {
background-color: #e60023;
color: white;
border: none;
padding: 12px 24px;
border-radius: 24px;
font-weight: bold;
cursor: pointer;
font-size: 16px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
/* Layout Estilo Pinterest (Multi-colunas) */
.mural-container {
column-count: 4; /* Número de colunas */
column-gap: 15px;
width: 95%;
max-width: 1200px;
margin: 0 auto;
}
.item-mural {
display: inline-block;
width: 100%;
margin-bottom: 15px;
background-color: white;
border-radius: 16px;
overflow: hidden;
transition: transform 0.3s ease;
cursor: pointer; /* Indica que é clicável */
}
.item-mural:hover {
transform: scale(1.02);
}
/* As imagens ocuparão a largura total do card, mas a altura variará conforme o link */
.item-mural img {
width: 100%;
display: block;
border-radius: 16px;
}
/* Responsividade para telas menores */
@media (max-width: 900px) { .mural-container { column-count: 3; } }
@media (max-width: 600px) { .mural-container { column-count: 2; } }
/* =========================================
NOVO CSS: ESTILO DO MODAL (TELA CHEIA)
========================================= */
/* O contêiner do modal (fundo escuro) */
.modal-zoom {
display: none; /* Escondido por padrão */
position: fixed; /* Fica fixo na tela */
z-index: 1000; /* Fica acima de tudo */
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto; /* Permite scroll se necessário */
background-color: rgba(0,0,0,0.9); /* Fundo preto com opacidade */
align-items: center; /* Centraliza a imagem verticalmente */
justify-content: center; /* Centraliza a imagem horizontalmente */
opacity: 0; /* Começa invisível para animação */
transition: opacity 0.3s ease; /* Animação de aparecimento */
}
/* Classe para mostrar o modal via JavaScript */
.modal-zoom.show {
display: flex; /* Exibe o modal como flexbox */
opacity: 1; /* Torna visível */
}
/* A imagem dentro do modal */
.modal-content {
margin: auto;
display: block;
max-width: 90%; /* Limita a largura máxima */
max-height: 90%; /* Limita a altura máxima */
border-radius: 8px;
box-shadow: 0 4px 12px rgba(255,255,255,0.2);
/* Animação de "crescimento" da imagem */
animation: zoomIn 0.3s ease;
}
/* Botão para fechar o modal */
.close-modal {
position: absolute;
top: 20px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
cursor: pointer;
}
.close-modal:hover,
.close-modal:focus {
color: #bbb;
text-decoration: none;
}
/* Definição da animação zoomIn */
@keyframes zoomIn {
from {transform: scale(0.7)} /* Começa menor */
to {transform: scale(1)} /* Termina no tamanho normal */
}<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Mural de Desafios - Pinterest</title>
<style>
body {
font-family: 'Segoe UI', sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 20px;
}
/* Topo com Botão Salvar */
.topo {
display: flex;
justify-content: center;
padding: 20px;
position: sticky;
top: 0;
background-color: rgba(240, 240, 240, 0.9);
z-index: 1000;
}
.btn-salvar {
background-color: #e60023;
color: white;
border: none;
padding: 12px 25px;
border-radius: 25px;
font-size: 16px;
font-weight: bold;
cursor: pointer;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.btn-salvar:hover {
background-color: #ad081b;
}
/* Container do Mural (Efeito Pinterest) */
.mural {
column-count: 4; /* Quantidade de colunas */
column-gap: 15px;
max-width: 1200px;
margin: 0 auto;
}
/* Estilo de cada Card */
.item {
display: inline-block;
width: 100%;
margin-bottom: 15px;
background-color: #fff;
border-radius: 15px;
overflow: hidden;
transition: 0.3s;
}
.item img {
width: 100%;
display: block;
border-radius: 15px;
}
.item:hover {
transform: scale(1.03);
}
/* Ajuste para celulares */
@media (max-width: 768px) {
.mural { column-count: 2; }
}
</style>
</head>
<body>
<div class="topo">
<button class="btn-salvar">Salvar no Mural</button>
</div>
<div class="mural">
<div class="item">
<img src="https://picsum.photos/400/600" alt="Imagem Exemplo">
</div>
</div>
</body>
</html>minhas imagens e meus textos estão com problemas de proporção
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>The Flowers</title>
<style>
/* ===== ESTILO GERAL ===== */
body {
font-family: Arial, sans-serif;
background-color: #d1c985;
margin: 0;
padding: 0;
}
/* ===== CONTAINER PRINCIPAL ===== */
.container {
width: 80%;
max-width: 400px;
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: #6d0303;
}
/* ===== SUBTÍTULOS ===== */
h2 {
color: #333;
border-bottom: 2px solid #f1f1f1;
padding-bottom: 5px;
}
/* ===== PARÁGRAFOS ===== */
p {
color: #0f0d0d;
line-height: 1.6;
font-size: 16px;
}
/* ===== IMAGENS ===== */
img {
width: 100%;
max-height: 400px;
object-fit: cover;
border-radius: 8px;
margin-top: 10px;
}
/* ===== BOTÕES ===== */
button {
background-color: #6d0b0b;
color: white;
border: none;
padding: 10px 20px;
margin-top: 10px;
border-radius: 6px;
cursor: pointer;
font-size: 16px;
}
button:hover {
background-color: #680c0c;
}
</style>
</head>
<body>
<div class="container">
<!-- TÍTULO PRINCIPAL -->
<h1>𝓣𝓱𝓮 𝓡𝓮𝓭 𝓕𝓵𝓸𝔀𝓮𝓻𝓼 𓍢ִ໋🌷͙֒</h1>
<!-- SOBRE MIM -->
<h2>ℒ𝒾́𝓇𝒾ℴ 𝒶𝓇𝒶𝓃𝒽𝒶 𝓋ℯ𝓇𝓂ℯ𝓁𝒽𝒶</h2>
<div style="display: flex; align-items: center;">
<img src="lírio aranha vermelha.jpg" style="margin-right: 20px;">
<p>A lírio-aranha vermelha (Lycoris radiata) é uma flor exótica e encantadora, conhecida por suas pétalas finas e alongadas que lembram delicadas pernas de aranha. Com sua cor vermelha intensa e formato elegante, ela transmite mistério, beleza e sofisticação. Ideal para presentear ou decorar ambientes especiais, essa flor chama atenção pela sua aparência única e marcante, trazendo um toque de charme e originalidade a qualquer arranjo floral. 🌺✨</p>
</div>
<p>
preço:
p=R$50 m=R$100 g=R$150
</p>
<button onclick="adicionarAoCarrinho('lirio aranha vermelha',180)">Adicionar no carrinho</button>
<!-- LOCAL PARA IMAGEM DE PERFIL -->
<!-- Coloque aqui sua imagem -->
<!-- Exemplo:
<img src="minha-foto.jpg" alt="Minha foto">
-->
<!-- REGISTRO DO DIA -->
<h2>ℛℴ𝓈𝒶𝓈<div style="display: flex; align-items: center;">
<img src="vermelhas.jpg" style="margin-right: 20px;">
<p>As rosas são flores clássicas e atemporais, símbolo de amor, beleza e elegância. Com suas pétalas delicadas e perfume suave, elas encantam em qualquer ocasião, desde gestos românticos até celebrações especiais. Disponíveis em diversas cores, cada rosa transmite um sentimento único, tornando qualquer arranjo floral ainda mais especial e cheio de significado. 🌹✨.</p>
</div>
</h2>
<p>
Preço:
p=R$40 m=R$80 g=R$120
</p>
<button onclick="alert('Adicionar ao carrinho')">Comprar</button>
<button onclick="adicionarAoCarrinho('rosas',180)">Adicionar no carrinho</button>
<!-- LOCAL PARA IMAGEM DO DIA -->
<!-- Exemplo:
<img src="foto-do-dia.jpg" alt="Foto do dia">
-->
<!-- OBJETIVOS -->
<h2>ℒ𝒾́𝓇𝒾ℴ</h2>
<div style="display: flex; align-items: center;">
<img src="lírio chinex.jpg" style="margin-right: 20px;">
<p>O lírio chinês é uma flor elegante e delicada, admirada por suas pétalas suaves e formato harmonioso. Com sua aparência sofisticada e perfume agradável, ele simboliza pureza, renovação e boa sorte. Muito utilizado em arranjos florais e decorações especiais, o lírio chinês traz um toque de beleza natural e tranquilidade para qualquer ambiente. 🌸✨.</p>
</div>
<button onclick="adicionarAoCarrinho('rosas',180)">Adicionar no carrinho</button>
<p>
preço:
p=R$60 m=R$120 g=R$180
</p>
<button onclick="window.location.href='carrinho.html';">Ir para o Google</button>
<h2>𝒜𝓈𝓉𝓇ℴ𝓂ℯ́𝓁𝒾𝒶<div style="display: flex; align-items: center;">
<img src="Alstroemeria.webp" style="margin-right: 20px;">
<p>A **astromélia**, também conhecida como **lírio-do-peru**, é uma flor delicada e cheia de significado, perfeita para presentear em momentos especiais. Com pétalas suaves e levemente rajadas, ela se destaca por sua beleza exótica e elegante, trazendo charme e sofisticação para qualquer arranjo.
Disponível em diversas cores vibrantes — como rosa, branco, amarelo, laranja e lilás — a astromélia simboliza **amizade, carinho, gratidão e prosperidade**, sendo uma excelente escolha para demonstrar sentimentos verdadeiros.
Além de linda, é uma flor muito durável, mantendo sua beleza por vários dias quando bem cuidada. Ideal para buquês, arranjos decorativos e presentes que desejam transmitir afeto e alegria.
✨ **Astromélia: delicadeza, cor e significado em uma única flor.**
</h2>
<p>
Preço:
p=R$40 m=R$80 g=R$120
</p>
<button onclick="alert('Adicionar ao carrinho')">Comprar</button>
<button onclick="adicionarAoCarrinho('rosas',180)">Adicionar no carrinho</button>
<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>
<!-- LOCAL PARA BOTÕES -->
<button>assistência</button>
<button></button>
</div>
<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>
</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: #ffffff;
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: #ff7b00;
}
/* ===== SUBTÍTULOS ===== */
h2 {
color: #333;
border-bottom: 2px solid #ff6600;
padding-bottom: 5px;
}
/* ===== PARÁGRAFOS ===== */
p {
color: #000000;
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: #ff5e00;
color: rgb(0, 0, 0);
border: none;
padding: 10px 20px;
margin-top: 10px;
border-radius: 6px;
cursor: pointer;
font-size: 16px;
}
button:hover {
background-color: #00ffc8;
}
</style>
</head>
<body>
<div class="container">
<!-- TÍTULO PRINCIPAL -->
<h1> Motos </h1>
<!-- SOBRE MIM -->
<h2> Honda CRF 250 </h2>
<div style="display: flex; align-items: center;">
<img src="5-melhores-motos-usadas-para-trilhas-em-2021.jpg" style="margin-right: 20px;">
<p> Motocicletas off-road projetadas tanto para lazer (trilhas) quanto para competições de alta performance (Motocross e Enduro). no valor de R$ 75.000.</p>
</div>
<p>
Característica CRF 250R CRF 250RX
Motor Monocilíndrico, 4 tempos, refrigeração líquida Idem
Potência Máxima 43,5 CV a 12.000 rpm 43,5 CV a 12.000 rpm
Torque Máximo 2,9 kgf.m a 9.500 rpm 2,9 kgf.m a 9.500 rpm
Transmissão 5 marchas 5 marchas
Peso Seco 102 kg 104 kg
Suspensão Showa invertida (310mm curso) Showa invertida (ajuste Enduro).
</p>
<button onclick="alert('Você adicionou no carrinho!')"> Adicionar no carrinho</button>
<!-- LOCAL PARA IMAGEM DE PERFIL -->
<!-- Coloque aqui sua imagem -->
<!-- Exemplo:
<img src="minha-foto.jpg" alt="Minha foto">
-->
<!-- REGISTRO DO DIA -->
<h2> BMW Gs 310</h2>
<div style="display: flex; align-items: center;">
<img src="681632740344807.jpg" style="margin-right: 20px;">
<p> Modelos 2025/2026 com preços variando, muitas vezes encontrados em torno de R$ 35.900 a R$ 39.990.</p>
</div>
<button onclick="alert('Você adicionou ao carrinho!')">Adicionar no carrinho</button>
<p>
Motor e Desempenho: Monocilíndrico, 4 tempos, refrigeração líquida, 6 marchas, com injeção eletrônica. Aceleração forte e boa agilidade no trânsito urbano.
Suspensão e Rodas: Roda dianteira de 19 polegadas e traseira de 17 polegadas, com suspensão de longo curso (180 mm) que lida bem com irregularidades.
Tecnologia e Conforto: Painel digital multifuncional, embreagem deslizante, iluminação Full LED e posição de pilotagem ergonômica.
Segurança: Freios com ABS de série e mangueiras de freio tipo "aeroquip" para melhor precisão, com componentes by Brembo (BYB).
Capacidade: Tanque de combustível de 11,5 litros, com autonomia reportada de cerca de 250 a 275 km.
Altura do Assento: Aproximadamente 835 mm, considerada acessível para a maioria dos pilotos.
</p>
<!-- LOCAL PARA IMAGEM DO DIA -->
<!-- Exemplo:
<img src="foto-do-dia.jpg" alt="Foto do dia">
-->
<!-- OBJETIVOS -->
<h2> Triumph Daytona 660</h2>
<div style="display: flex; align-items: center;">
<img src="daytona-675-ano-2009-1-1200x600.png" style="margin-right: 20px;">
<p> O preço sugerido é de R$ 58.190,00.</p>
</div>
<button onclick="alert('Você adicionou ao carrinho!')">Adicionar ao carrinho</button>
<p>
Motor e Desempenho: Motor de 3 cilindros com 660 cc, gerando 95 cv a 11.250 rpm e torque de 69 Nm a 8.250 rpm. O motor é caracterizado por ser elástico, com 80% do torque disponível a partir de 3.150 rpm.
Design e Ergonomia: Visual esportivo com carenagens agressivas, iluminação full LED, farol assimétrico e posição de pilotagem esportiva, mas confortável para o dia a dia, com semi-guidões posicionados acima da mesa.
Tecnologia: Acelerador ride-by-wire, controle de tração (desligável), painel TFT colorido integrado a um visor LCD e modos de pilotagem (Sport, Road, Rain).
Ciclística: Chassi perimetral em aço, suspensão dianteira Showa SF-BP de 41 mm (invertida) e traseira monoamortecedor Showa com ajuste de pré-carga. Pneus Michelin Power 6 e freios com pinças radiais de 4 pistões.
Consumo e Tanque: Capacidade do tanque é de 14 litros, com consumo médio relatado em torno de 19 km/litro.
</p>
<!-- LOCAL PARA BOTÕES -->
<button>Pesquisar valores</button>
<button>Pesquisa de modelos de motos</button>
<button onclick="window.location.href='carrinho.html';">Ir para o Google</button>
</div>
</body>
</html><!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Carrossel de Imagens</title>
<style>
body{
font-family: Arial;
background:#f2f2f2;
text-align:center;
}
.carrossel{
width:600px;
height:350px;
margin:auto;
overflow:hidden;
border-radius:10px;
box-shadow:0px 4px 10px rgba(0,0,0,0.3);
position:relative;
}
.slides{
display:flex;
transition:0.5s;
}
.slides img{
width:600px;
height:350px;
object-fit:cover;
}
/* Botões */
.botao{
position:absolute;
top:50%;
transform:translateY(-50%);
background:rgba(0,0,0,0.5);
color:white;
border:none;
font-size:25px;
padding:10px;
cursor:pointer;
}
#anterior{
left:10px;
}
#proximo{
right:10px;
}
</style>
</head>
<body>
<h1>Carrossel de Imagens</h1>
<div class="carrossel">
<div class="slides" id="slides">
<!-- IMAGEM 1 -->
<img src="PALI AZUL M.jpg">
<!-- IMAGEM 2 -->
<img src="PALI ROSA.jpg">
<!-- IMAGEM 3 -->
<img src="pali cinza.jpg">
<!-- IMAGEM 4 -->
<img src="conjuto com pali.jpg">
<img src="pali marrom.jpg">
<img src="PALI AZUL.jpg">
</div>
<!-- BOTÕES -->
<button class="botao" id="anterior">❮</button>
<button class="botao" id="proximo">❯</button>
</div>
<script>
let slideIndex = 0;
const slides = document.getElementById("slides");
const totalSlides = slides.children.length;
document.getElementById("proximo").onclick = () => {
slideIndex++;
if(slideIndex >= totalSlides){
slideIndex = 0;
}
atualizarSlide();
}
document.getElementById("anterior").onclick = () => {
slideIndex--;
if(slideIndex < 0){
slideIndex = totalSlides - 1;
}
atualizarSlide();
}
function atualizarSlide(){
slides.style.transform = `translateX(-${slideIndex * 600}px)`;
}
</script>
</body>
</html>Melhorias feitas no código do carrossel
1️⃣ Aumentar o tamanho do container principal
Problema
O container estava limitado a 800px, o que deixava o site muito estreito.
.container{
width: 80%;
max-width: 800px;
}
Como perceber isso
Quando um layout parece apertado, a primeira coisa a verificar é:
width
max-width
Solução aplicada
.container{
width: 90%;
max-width: 1200px;
}
Resultado
O site ficou mais largo e confortável visualmente.
2️⃣ Remover CSS duplicado
Problema
No código existiam duas configurações diferentes do carrossel.
Exemplo:
.carrossel{
width:600px;
}
.carrossel{
width:800px;
}
Como perceber isso
Sempre verifique se existem classes repetidas no CSS.
O navegador usa a última regra, o que pode gerar confusão.
Solução
Manter apenas uma configuração clara do carrossel.
3️⃣ Corrigir nomes de classes diferentes
Problema
Existiam 3 nomes diferentes para os botões:
.botao
.botoes
.botaos
E no HTML:
<button class="botaos">
Como perceber isso
Quando um estilo não funciona, verifique se:
o nome da classe no CSS
é igual ao nome da classe no HTML
Solução
Padronizar para apenas uma classe:
.botao
4️⃣ Padronizar o tamanho das imagens do carrossel
Problema
Cada parte do código tinha um tamanho diferente:
Elemento Tamanho
Container 800px
Imagem 900px
Javascript move 600px
Isso quebra o carrossel.
Como perceber isso
Carrossel funcionando errado geralmente significa problema de largura.
Solução
Padronizar tudo para o mesmo valor.
.slides img{
width:1000px;
}
5️⃣ Corrigir o cálculo do JavaScript
Problema
O JS movia os slides usando:
translateX(-${slideIndex * 600}px)
Mas a imagem tinha outro tamanho.
Como perceber isso
Quando o slide não para no lugar correto, o problema geralmente está no translateX.
Solução
Criar uma variável de largura:
const larguraSlide = 1000;
E usar no cálculo:
translateX(-${slideIndex * larguraSlide}px)
6️⃣ Melhorar a proporção do carrossel
Problema
A altura da imagem não combinava com a largura.
Solução
Usar proporção mais equilibrada:
width:1000px;
height:420px;
Isso cria um formato mais cinematográfico.
7️⃣ Melhorar a aparência dos botões
Problema
Os botões estavam sem destaque.
Solução
Aplicar fundo semi-transparente:
background: rgba(0,0,0,0.5);
color:white;
Resultado
Botões mais visíveis sobre as imagens.
8️⃣ Organizar o CSS por seções
Problema
O CSS estava misturado.
Solução
Separar em blocos:
/* ESTILO GERAL */
/* CONTAINER */
/* TEXTO */
/* CARROSSEL */
/* BOTÕES */
Resultado
Código mais fácil de manter e ensinar.
Dica profissional para analisar layouts
Sempre verifique nessa ordem:
1️⃣ Container
2️⃣ Tamanho das imagens
3️⃣ Flex ou Grid
4️⃣ Overflow
5️⃣ Transformações JS
Esse é exatamente o processo mental que desenvolvedores usam.Melhorias feitas no código do carrossel
1️⃣ Aumentar o tamanho do container principal
Problema
O container estava limitado a 800px, o que deixava o site muito estreito.
.container{
width: 80%;
max-width: 800px;
}
Como perceber isso
Quando um layout parece apertado, a primeira coisa a verificar é:
width
max-width
Solução aplicada
.container{
width: 90%;
max-width: 1200px;
}
Resultado
O site ficou mais largo e confortável visualmente.
2️⃣ Remover CSS duplicado
Problema
No código existiam duas configurações diferentes do carrossel.
Exemplo:
.carrossel{
width:600px;
}
.carrossel{
width:800px;
}
Como perceber isso
Sempre verifique se existem classes repetidas no CSS.
O navegador usa a última regra, o que pode gerar confusão.
Solução
Manter apenas uma configuração clara do carrossel.
3️⃣ Corrigir nomes de classes diferentes
Problema
Existiam 3 nomes diferentes para os botões:
.botao
.botoes
.botaos
E no HTML:
<button class="botaos">
Como perceber isso
Quando um estilo não funciona, verifique se:
o nome da classe no CSS
é igual ao nome da classe no HTML
Solução
Padronizar para apenas uma classe:
.botao
4️⃣ Padronizar o tamanho das imagens do carrossel
Problema
Cada parte do código tinha um tamanho diferente:
Elemento Tamanho
Container 800px
Imagem 900px
Javascript move 600px
Isso quebra o carrossel.
Como perceber isso
Carrossel funcionando errado geralmente significa problema de largura.
Solução
Padronizar tudo para o mesmo valor.
.slides img{
width:1000px;
}
5️⃣ Corrigir o cálculo do JavaScript
Problema
O JS movia os slides usando:
translateX(-${slideIndex * 600}px)
Mas a imagem tinha outro tamanho.
Como perceber isso
Quando o slide não para no lugar correto, o problema geralmente está no translateX.
Solução
Criar uma variável de largura:
const larguraSlide = 1000;
E usar no cálculo:
translateX(-${slideIndex * larguraSlide}px)
6️⃣ Melhorar a proporção do carrossel
Problema
A altura da imagem não combinava com a largura.
Solução
Usar proporção mais equilibrada:
width:1000px;
height:420px;
Isso cria um formato mais cinematográfico.
7️⃣ Melhorar a aparência dos botões
Problema
Os botões estavam sem destaque.
Solução
Aplicar fundo semi-transparente:
background: rgba(0,0,0,0.5);
color:white;
Resultado
Botões mais visíveis sobre as imagens.
8️⃣ Organizar o CSS por seções
Problema
O CSS estava misturado.
Solução
Separar em blocos:
/* ESTILO GERAL */
/* CONTAINER */
/* TEXTO */
/* CARROSSEL */
/* BOTÕES */
Resultado
Código mais fácil de manter e ensinar.
Dica profissional para analisar layouts
Sempre verifique nessa ordem:
1️⃣ Container
2️⃣ Tamanho das imagens
3️⃣ Flex ou Grid
4️⃣ Overflow
5️⃣ Transformações JS
Esse é exatamente o processo mental que desenvolvedores usam.Melhorias feitas no código do carrossel
1️⃣ Aumentar o tamanho do container principal
Problema
O container estava limitado a 800px, o que deixava o site muito estreito.
.container{
width: 80%;
max-width: 800px;
}
Como perceber isso
Quando um layout parece apertado, a primeira coisa a verificar é:
width
max-width
Solução aplicada
.container{
width: 90%;
max-width: 1200px;
}
Resultado
O site ficou mais largo e confortável visualmente.
2️⃣ Remover CSS duplicado
Problema
No código existiam duas configurações diferentes do carrossel.
Exemplo:
.carrossel{
width:600px;
}
.carrossel{
width:800px;
}
Como perceber isso
Sempre verifique se existem classes repetidas no CSS.
O navegador usa a última regra, o que pode gerar confusão.
Solução
Manter apenas uma configuração clara do carrossel.
3️⃣ Corrigir nomes de classes diferentes
Problema
Existiam 3 nomes diferentes para os botões:
.botao
.botoes
.botaos
E no HTML:
<button class="botaos">
Como perceber isso
Quando um estilo não funciona, verifique se:
o nome da classe no CSS
é igual ao nome da classe no HTML
Solução
Padronizar para apenas uma classe:
.botao
4️⃣ Padronizar o tamanho das imagens do carrossel
Problema
Cada parte do código tinha um tamanho diferente:
Elemento Tamanho
Container 800px
Imagem 900px
Javascript move 600px
Isso quebra o carrossel.
Como perceber isso
Carrossel funcionando errado geralmente significa problema de largura.
Solução
Padronizar tudo para o mesmo valor.
.slides img{
width:1000px;
}
5️⃣ Corrigir o cálculo do JavaScript
Problema
O JS movia os slides usando:
translateX(-${slideIndex * 600}px)
Mas a imagem tinha outro tamanho.
Como perceber isso
Quando o slide não para no lugar correto, o problema geralmente está no translateX.
Solução
Criar uma variável de largura:
const larguraSlide = 1000;
E usar no cálculo:
translateX(-${slideIndex * larguraSlide}px)
6️⃣ Melhorar a proporção do carrossel
Problema
A altura da imagem não combinava com a largura.
Solução
Usar proporção mais equilibrada:
width:1000px;
height:420px;
Isso cria um formato mais cinematográfico.
7️⃣ Melhorar a aparência dos botões
Problema
Os botões estavam sem destaque.
Solução
Aplicar fundo semi-transparente:
background: rgba(0,0,0,0.5);
color:white;
Resultado
Botões mais visíveis sobre as imagens.
8️⃣ Organizar o CSS por seções
Problema
O CSS estava misturado.
Solução
Separar em blocos:
/* ESTILO GERAL */
/* CONTAINER */
/* TEXTO */
/* CARROSSEL */
/* BOTÕES */
Resultado
Código mais fácil de manter e ensinar.
Dica profissional para analisar layouts
Sempre verifique nessa ordem:
1️⃣ Container
2️⃣ Tamanho das imagens
3️⃣ Flex ou Grid
4️⃣ Overflow
5️⃣ Transformações JS
Esse é exatamente o processo mental que desenvolvedores usam.<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Nintendo</title>
<style>
/* ===== ESTILO GERAL ===== */
body{
font-family: Arial, sans-serif;
background-color:#f4f6fb;
margin:0;
}
/* ===== CONTAINER PRINCIPAL ===== */
.container{
width:90%;
max-width:1200px;
margin:40px auto;
background:white;
padding:30px;
border-radius:10px;
box-shadow:0 4px 10px rgba(0,0,0,0.1);
}
/* ===== TÍTULOS ===== */
h1{
text-align:center;
color:#e20f0f;
}
h2{
color:#a10d0d;
border-bottom:2px solid #dd1212;
padding-bottom:5px;
}
/* ===== TEXTO ===== */
p{
color:#772222;
line-height:1.6;
}
/* ===== IMAGENS ===== */
img{
width:100%;
border-radius:8px;
}
/* ===== BOTÕES ===== */
button{
background:#f5f1f1;
border:none;
padding:10px 20px;
border-radius:50px;
cursor:pointer;
font-size:16px;
}
button:hover{
background:#e61d1d;
color:white;
}
/* ===== CARROSSEL ===== */
.carrossel{
width:100%;
max-width:1000px;
height:420px;
margin:20px auto;
overflow:hidden;
border-radius:10px;
position:relative;
box-shadow:0 4px 10px rgba(218,13,13,0.3);
}
.slides{
display:flex;
transition:0.5s;
}
.slides img{
width:1000px;
height:420px;
object-fit:cover;
}
/* BOTÕES DO CARROSSEL */
.botao{
position:absolute;
top:50%;
transform:translateY(-50%);
background:rgba(0,0,0,0.5);
color:white;
border:none;
font-size:28px;
padding:10px 15px;
cursor:pointer;
}
#anterior{
left:10px;
}
#proximo{
right:10px;
}
</style>
</head>
<body>
<div class="container">
<h1>Nintendo</h1>
<h2>Consoles Disponíveis</h2>
<div class="carrossel">
<div class="slides" id="slides">
<img src="2000x1125_Consoles_Switch_Flagship_BeautyShot.avif">
<img src="nintendo-switc-2.jpg">
<img src="nintendo-switch-2-console-in-red-and-blue-lighting.avif">
<img src="351f9df0-0fe4-11f0-b7ed-d27e3588aec9.jpg">
</div>
<button class="botao" id="anterior">❮</button>
<button class="botao" id="proximo">❯</button>
</div>
<p>
Descubra os consoles mais famosos da Nintendo e aproveite uma nova forma de jogar.
Com gráficos incríveis, jogos divertidos e personagens clássicos, cada console
oferece uma experiência única para jogadores de todas as idades.
</p>
<h2>Conheça e venha se divertir!</h2>
<p>
Entre no universo da Nintendo e embarque em aventuras com Mario e muitos outros personagens!
</p>
<img src="Consola-nintendo-oculta.webp" style="max-width:500px">
<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>
<button>Adicionar Novo Registro</button>
<button>Salvar Diário</button>
</div>
<script>
let slideIndex = 0;
const slides = document.getElementById("slides");
const totalSlides = slides.children.length;
const larguraSlide = 1000;
document.getElementById("proximo").onclick = () => {
slideIndex++;
if(slideIndex >= totalSlides){
slideIndex = 0;
}
atualizarSlide();
}
document.getElementById("anterior").onclick = () => {
slideIndex--;
if(slideIndex < 0){
slideIndex = totalSlides - 1;
}
atualizarSlide();
}
function atualizarSlide(){
slides.style.transform = `translateX(-${slideIndex * larguraSlide}px)`;
}
</script>
</body>
</html><!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<style>
body { background-color: #40E0D0 color: #4A148C; font-family: Georgia, serif; display: flex; justify-content: center; padding: 20px; }
.moldura-reflexiva { max-width: 750px; background: white; padding: 50px; border-radius: 30px; box-shadow: 10px 10px 0px #CE93D8; text-align: center; }
h1 { font-size: 2.8rem; font-style: italic; color: #6A1B9A; }
.paragrafo { font-size: 1.2rem; color: #311B92; margin-bottom: 30px; line-height: 1.8; }
.superpoderes { text-align: left; display: inline-block; list-style-type: square; margin-bottom: 30px; }
.imagem-transicao { width: 100%; filter: sepia(20%); border-radius: 15px; }
footer { margin-top: 30px; font-family: sans-serif; color: #7B1FA2; border-top: 1px solid #E1BEE7; padding-top: 20px; }
</style>
</head>
<body>
<div class="moldura-reflexiva">
<h1>Como assim sou quase adulto?</h1>
<p class="paragrafo">Essa fase de transição é um misto de medo e liberdade. É o momento de assumir as rédeas da vida e descobrir quem você realmente quer ser no mundo.</p>
<ul class="superpoderes">
<li>O direito de votar e decidir caminhos</li>
<li>A gestão estratégica do próprio tempo</li>
<li>O início da independência financeira</li>
<li>A construção da própria identidade</li>
</ul>
<img src="https://via.placeholder.com/600x300/e1bee7/4a148c?text=Projeto+Escola+Além+dos+Muros" class="imagem-transicao">
<footer>Crescer é um processo corajoso</footer>
</div>
</body>
</html><!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<style>
body { background-color: #800080; color: #4A148C; font-family: Georgia, serif; display: flex; justify-content: center; padding: 20px; }
.moldura-reflexiva { max-width: 750px; background: white; padding: 50px; border-radius: 30px; box-shadow: 10px 10px 0px #CE93D8; text-align: center; }
h1 { font-size: 2.8rem; font-style: italic; color: #6A1B9A; }
.paragrafo { font-size: 1.2rem; color: #311B92; margin-bottom: 30px; line-height: 1.8; }
.superpoderes { text-align: left; display: inline-block; list-style-type: square; margin-bottom: 30px; }
.imagem-transicao { width: 100%; filter: sepia(20%); border-radius: 15px; }
footer { margin-top: 30px; font-family: sans-serif; color: #7B1FA2; border-top: 1px solid #E1BEE7; padding-top: 20px; }
</style>
</head>
<body>
<div class="moldura-reflexiva">
<h1>O espelho da maturidade</h1>
<p class="paragrafo">Essa fase de transição é um misto de medo e liberdade. É o momento de assumir as rédeas da vida e descobrir quem você realmente quer ser no mundo.</p>
<ul class="superpoderes">
<li> O texto busca validar as dúvidas dos jovens que estão prestes a assumir as rédeas de suas vidas</li>
</ul>
<img src="https://via.placeholder.com/600x300/e1bee7/4a148c?text=Projeto+Escola+Além+dos+Muros" class="imagem-transicao">
<footer>Crescer é um processo corajoso</footer>
</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>O Horizonte das Possibilidades</title>
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
background: linear-gradient(to bottom, #1b5e20, #2e7d32);
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.container {
background-color: #2e7d32;
width: 80%;
max-width: 900px;
padding: 40px;
border-radius: 15px;
box-shadow: 0 10px 25px rgba(0, 50, 0, 0.4);
text-align: center;
border: 3px solid #66bb6a;
}
h1 {
color: #a5d6a7;
margin-bottom: 10px;
}
.destaque {
font-size: 28px;
font-weight: bold;
color: #c8e6c9;
margin-bottom: 20px;
}
p {
color: #e8f5e9;
line-height: 1.6;
margin-bottom: 20px;
}
ul {
text-align: left;
margin: 20px auto;
max-width: 600px;
color: #e8f5e9;
}
ul li {
margin-bottom: 10px;
padding-left: 10px;
}
.imagem {
margin-top: 30px;
}
.imagem img {
width: 100%;
max-width: 500px;
border-radius: 10px;
border: 3px solid #81c784;
}
.imagem p {
color: #c8e6c9;
}
footer {
margin-top: 30px;
font-weight: bold;
color: #a5d6a7;
font-size: 18px;
}
</style>
</head>
<body>
<div class="container">
<h1>O Horizonte das Possibilidades</h1>
<div class="destaque">Como lidar com o futuro</div>
<p>
O futuro não é um bicho de sete cabeças, mas sim uma construção feita
de pequenos passos no presente. Encare as incertezas com estratégia
e mantenha os pés no chão.
</p>
<ul>
<li>Definir prioridades</li>
<li>Buscar mentores</li>
<li>Aprender com os erros</li>
<li>Manter a curiosidade viva</li>
</ul>
<div class="imagem">
<img src="https://via.placeholder.com/500x300" alt="Projeto Escola Além dos Muros">
<p><strong>Projeto Escola Além dos Muros</strong> — conhecimento prático abrindo portas para o mundo.</p>
</div>
<footer>
"O amanhã começa hoje"
</footer>
</div>
</body>
</html><!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<style>
body { background-color: #FF4500; color: #4A148C; font-family: Georgia, serif; display: flex; justify-content: center; padding: 20px; }
.moldura-reflexiva { max-width: 750px; background: white; padding: 50px; border-radius: 30px; box-shadow: 10px 10px 0px #CE93D8; text-align: center; }
h1 { font-size: 2.8rem; font-style: italic; color: #6A1B9A; }
.paragrafo { font-size: 1.2rem; color: #311B92; margin-bottom: 30px; line-height: 1.8; }
.superpoderes { text-align: left; display: inline-block; list-style-type: square; margin-bottom: 30px; }
.imagem-transicao { width: 100%; filter: sepia(20%); border-radius: 15px; }
footer { margin-top: 30px; font-family: sans-serif; color: #7B1FA2; border-top: 1px solid #E1BEE7; padding-top: 20px; }
</style>
</head>
<body>
<div class="moldura-reflexiva">
<h1>Para que estudar?</h1>
<p class="paragrafo">Essa fase de transição é um misto de medo e liberdade. É o momento de assumir as rédeas da vida e descobrir quem você realmente quer ser no mundo.</p>
<ul class="superpoderes">
<li>Estudar não é apenas decorar conteúdos para passar em provas ou tirar boas notas. O verdadeiro sentido do estudo está na construção da autonomia e da liberdade. Quando aprendemos de forma consciente, desenvolvemos a capacidade de pensar por conta própria, questionar informações e tomar decisões mais seguras ao longo da vida.
O conhecimento é a ferramenta mais poderosa para quem deseja mudar a própria realidade e compreender o funcionamento do mundo ao redor. Ele amplia horizontes, cria oportunidades e fortalece nossa independência. Por isso, estudar não deve ser visto apenas como uma obrigação escolar, mas como um caminho de transformação pessoal e crescimento contínuo.</li>
<li>A gestão estratégica do próprio tempo</li>
<li>O início da independência financeira</li>
<li>A construção da própria identidade</li>
</ul>
<img src="https://via.placeholder.com/600x300/e1bee7/4a148c?text=Projeto+Escola+Além+dos+Muros" class="imagem-transicao">
<footer>Crescer é um processo corajoso</footer>
</div>
</body>
</html><!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<style>
body { background-color: #FFC0CB; color: #FF69B4; font-family: Georgia, serif; display: flex; justify-content: center; padding: 20px; }
.moldura-reflexiva { max-width: 750px; background: white; padding: 50px; border-radius: 30px; box-shadow: 10px 10px 0px #CE93D8; text-align: center; }
h1 { font-size: 2.8rem; font-style: italic; color: FFC0CB; }
.paragrafo { font-size: 1.2rem; color: #311B92; margin-bottom: 30px; line-height: 1.8; }
.superpoderes { text-align: left; display: inline-block; list-style-type: square; margin-bottom: 30px; }
.imagem-transicao { width: 100%; filter: sepia(20%); border-radius: 15px; }
footer { margin-top: 30px; font-family: sans-serif; color: #7B1FA2; border-top: 1px solid #E1BEE7; padding-top: 20px; }
</style>
</head>
<body>
<div class="moldura-reflexiva">
<h1>Tecnologia e o Futuro</h1>
<p class="paragrafo">Como as aulas de informática podem ser surpreendentes e interessantes, quebrando o mito de que o aprendizado técnico é apenas repetição e mostrando que ele é, na verdade, um campo de pura criatividade.</p>
<ul class="Portal da inovação">
<li> A capacidade de resolver problemas reais</li>
<li>A criação de ferramentas do zero</li>
<li>Infinitas possibilidades de carreira</li>
<
</ul>
<img src="https://via.placeholder.com/600x300/e1bee7/4a148c?text=Projeto+Escola+Além+dos+Muros" class="imagem-transicao">
<footer>Não desistam de sonhar</footer>
</div>
</body>
</html>aaaaaaaaaaaaaaaaaaaaaa<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<style>
body { background-color: #F3E5F5; color: #4A148C; font-family: Georgia, serif; display: flex; justify-content: center; padding: 20px; }
.moldura-reflexiva { max-width: 750px; background: white; padding: 50px; border-radius: 30px; box-shadow: 10px 10px 0px #CE93D8; text-align: center; }
h1 { font-size: 2.8rem; font-style: italic; color: #6A1B9A; }
.paragrafo { font-size: 1.2rem; color: #311B92; margin-bottom: 30px; line-height: 1.8; }
.superpoderes { text-align: left; display: inline-block; list-style-type: square; margin-bottom: 30px; }
.imagem-transicao { width: 100%; filter: sepia(20%); border-radius: 15px; }
footer { margin-top: 30px; font-family: sans-serif; color: #7B1FA2; border-top: 1px solid #E1BEE7; padding-top: 20px; }
</style>
</head>
<body>
<div class="moldura-reflexiva">
<h1>O espelho da maturidade</h1>
<p class="paragrafo">Essa fase de transição é um misto de medo e liberdade. É o momento de assumir as rédeas da vida e descobrir quem você realmente quer ser no mundo.</p>
<ul class="superpoderes">
<li>O direito de votar e decidir caminhos</li>
<li>A gestão estratégica do próprio tempo</li>
<li>O início da independência financeira</li>
<li>A construção da própria identidade</li>
</ul>
<img src="https://via.placeholder.com/600x300/e1bee7/4a148c?text=Projeto+Escola+Além+dos+Muros" class="imagem-transicao">
<footer>Crescer é um processo corajoso</footer>
</div>
</body>
</html><!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<style>
body { background-color: #F3E5F5; color: #4A148C; font-family: Georgia, serif; display: flex; justify-content: center; padding: 20px; }
.moldura-reflexiva { max-width: 750px; background: white; padding: 50px; border-radius: 30px; box-shadow: 10px 10px 0px #CE93D8; text-align: center; }
h1 { font-size: 2.8rem; font-style: italic; color: #6A1B9A; }
.paragrafo { font-size: 1.2rem; color: #311B92; margin-bottom: 30px; line-height: 1.8; }
.superpoderes { text-align: left; display: inline-block; list-style-type: square; margin-bottom: 30px; }
.imagem-transicao { width: 100%; filter: sepia(20%); border-radius: 15px; }
footer { margin-top: 30px; font-family: sans-serif; color: #7B1FA2; border-top: 1px solid #E1BEE7; padding-top: 20px; }
</style>
</head>
<body>
<div class="moldura-reflexiva">
<h1>O espelho da maturidade</h1>
<p class="paragrafo">Essa fase de transição é um misto de medo e liberdade. É o momento de assumir as rédeas da vida e descobrir quem você realmente quer ser no mundo.</p>
<ul class="superpoderes">
<li>O direito de votar e decidir caminhos</li>
<li>A gestão estratégica do próprio tempo</li>
<li>O início da independência financeira</li>
<li>A construção da própria identidade</li>
</ul>
<img src="https://via.placeholder.com/600x300/e1bee7/4a148c?text=Projeto+Escola+Além+dos+Muros" class="imagem-transicao">
<footer>Crescer é um processo corajoso</footer>
</div>
</body>
</html><!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<style>
body { background-color: #F3E5F5; color: #4A148C; font-family: Georgia, serif; display: flex; justify-content: center; padding: 20px; }
.moldura-reflexiva { max-width: 750px; background: white; padding: 50px; border-radius: 30px; box-shadow: 10px 10px 0px #CE93D8; text-align: center; }
h1 { font-size: 2.8rem; font-style: italic; color: #6A1B9A; }
.paragrafo { font-size: 1.2rem; color: #311B92; margin-bottom: 30px; line-height: 1.8; }
.superpoderes { text-align: left; display: inline-block; list-style-type: square; margin-bottom: 30px; }
.imagem-transicao { width: 100%; filter: sepia(20%); border-radius: 15px; }
footer { margin-top: 30px; font-family: sans-serif; color: #7B1FA2; border-top: 1px solid #E1BEE7; padding-top: 20px; }
</style>
</head>
<body>
<div class="moldura-reflexiva">
<h1>Como assim sou quase adulto?</h1>
<p class="paragrafo">Essa fase de transição é um misto de medo e liberdade. É o momento de assumir as rédeas da vida e descobrir quem você realmente quer ser no mundo.</p>
<ul class="superpoderes">
<li>O direito de votar e decidir caminhos</li>
<li>A gestão estratégica do próprio tempo</li>
<li>O início da independência financeira</li>
<li>A construção da própria identidade</li>
</ul>
<img src="https://via.placeholder.com/600x300/e1bee7/4a148c?text=Projeto+Escola+Além+dos+Muros" class="imagem-transicao">
<footer>Crescer é um processo corajoso</footer>
</div>
</body>
</html><!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<style>
body { background-color: #F3E5F5; color: #4A148C; font-family: Georgia, serif; display: flex; justify-content: center; padding: 20px; }
.moldura-reflexiva { max-width: 750px; background: white; padding: 50px; border-radius: 30px; box-shadow: 10px 10px 0px #CE93D8; text-align: center; }
h1 { font-size: 2.8rem; font-style: italic; color: #6A1B9A; }
.paragrafo { font-size: 1.2rem; color: #311B92; margin-bottom: 30px; line-height: 1.8; }
.superpoderes { text-align: left; display: inline-block; list-style-type: square; margin-bottom: 30px; }
.imagem-transicao { width: 100%; filter: sepia(20%); border-radius: 15px; }
footer { margin-top: 30px; font-family: sans-serif; color: #7B1FA2; border-top: 1px solid #E1BEE7; padding-top: 20px; }
</style>
</head>
<body>
<div class="moldura-reflexiva">
<h1>Como assim sou quase adulto?</h1>
<p class="paragrafo">Essa fase de transição é um misto de medo e liberdade. É o momento de assumir as rédeas da vida e descobrir quem você realmente quer ser no mundo.</p>
<ul class="superpoderes">
<li>O direito de votar e decidir caminhos</li>
<li>A gestão estratégica do próprio tempo</li>
<li>O início da independência financeira</li>
<li>A construção da própria identidade</li>
</ul>
<img src="https://via.placeholder.com/600x300/e1bee7/4a148c?text=Projeto+Escola+Além+dos+Muros" class="imagem-transicao">
<footer>Crescer é um processo corajoso</footer>
</div>
</body>
</html>aaaaaaaaaaa