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