fotossintese-preview.html•16.6 kB
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fotossíntese: Como as Plantas Produzem Alimento - Preview</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Lato', 'Arial', sans-serif;
line-height: 1.6;
color: #333;
background-color: #f8f9fa;
}
.composition-container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.element {
background: white;
margin: 30px 0;
padding: 30px;
border-radius: 15px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
border-left: 5px solid #228B22;
}
.header-element {
background: linear-gradient(135deg, #2E8B57 0%, #228B22 100%);
color: white;
text-align: center;
padding: 60px 30px;
}
.header-element h1 {
font-size: 2.5rem;
margin-bottom: 20px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
.header-element .category {
background: rgba(255,255,255,0.2);
padding: 10px 20px;
border-radius: 25px;
display: inline-block;
margin-bottom: 20px;
}
.header-element .author {
font-size: 1.1rem;
opacity: 0.9;
}
h2 {
color: #228B22;
font-size: 1.8rem;
margin-bottom: 20px;
border-bottom: 3px solid #32CD32;
padding-bottom: 10px;
}
h3 {
color: #1E6B1E;
font-size: 1.4rem;
margin: 20px 0 15px 0;
}
.objectives-box {
background: linear-gradient(135deg, #E8F5E8 0%, #F0FFF0 100%);
padding: 25px;
border-radius: 15px;
border: 3px solid #228B22;
margin: 20px 0;
}
.equation-box {
background: linear-gradient(135deg, #E8F5E8 0%, #F0FFF0 100%);
padding: 30px;
border-radius: 15px;
text-align: center;
border: 3px solid #228B22;
margin: 25px 0;
}
.equation {
background: white;
padding: 25px;
border-radius: 10px;
margin: 20px 0;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
font-size: 24px;
font-weight: bold;
color: #2F4F4F;
line-height: 2;
}
.ingredients-list {
list-style: none;
padding: 0;
}
.ingredients-list li {
background: white;
margin: 15px 0;
padding: 20px;
border-radius: 10px;
border-left: 5px solid #228B22;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.ingredients-list .number {
background: #228B22;
color: white;
width: 30px;
height: 30px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
margin-right: 15px;
font-weight: bold;
}
.curiosity-box {
background: #F0FFF0;
padding: 20px;
border-left: 4px solid #228B22;
margin: 20px 0;
border-radius: 5px;
}
.warning-box {
background: #FFE4E1;
padding: 20px;
border-left: 4px solid #DC143C;
margin: 20px 0;
border-radius: 5px;
}
.info-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
margin: 25px 0;
}
.card {
padding: 20px;
border-radius: 10px;
border-left: 5px solid;
}
.card.oxygen { border-left-color: #4169E1; background: linear-gradient(135deg, #E6F3FF 0%, #F0F8FF 100%); }
.card.food { border-left-color: #228B22; background: linear-gradient(135deg, #F0FFF0 0%, #E8F5E8 100%); }
.card.climate { border-left-color: #DAA520; background: linear-gradient(135deg, #FFF8DC 0%, #F5F5DC 100%); }
.quiz-preview {
background: linear-gradient(135deg, #E6E6FA 0%, #F8F8FF 100%);
padding: 25px;
border-radius: 15px;
border: 3px solid #9370DB;
}
.quiz-question {
background: white;
padding: 20px;
margin: 15px 0;
border-radius: 10px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.progress-bar {
background: #e0e0e0;
height: 8px;
border-radius: 4px;
margin: 10px 0;
overflow: hidden;
}
.progress-fill {
background: linear-gradient(90deg, #228B22, #32CD32);
height: 100%;
width: 0%;
transition: width 0.3s ease;
animation: progressAnimation 2s ease-in-out forwards;
}
@keyframes progressAnimation {
to { width: 100%; }
}
.time-indicator {
color: #666;
font-size: 0.9rem;
text-align: right;
margin: 10px 0;
}
@media (max-width: 768px) {
.composition-container { padding: 10px; }
.element { padding: 20px; margin: 20px 0; }
.header-element h1 { font-size: 2rem; }
.info-cards { grid-template-columns: 1fr; }
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
</style>
</head>
<body>
<div class="composition-container">
<!-- Header Element -->
<div class="element header-element">
<div class="category">Ciências Naturais - 7º Ano</div>
<h1>🌱 Fotossíntese: Como as Plantas Produzem Alimento</h1>
<div class="author">Prof. Ricardo Kawasaki | Ciências da Natureza</div>
<div class="progress-bar"><div class="progress-fill"></div></div>
</div>
<!-- Objectives -->
<div class="element">
<div class="time-indicator">⏱️ 3 minutos</div>
<div class="objectives-box">
<h2>🎯 Objetivos da Aula</h2>
<p>Ao final desta aula, você será capaz de:</p>
<ul style="line-height: 1.8; margin-left: 20px;">
<li><strong>Explicar</strong> o que é fotossíntese e sua importância</li>
<li><strong>Identificar</strong> os componentes necessários para a fotossíntese</li>
<li><strong>Descrever</strong> onde ocorre a fotossíntese nas plantas</li>
<li><strong>Compreender</strong> como as plantas produzem seu próprio alimento</li>
<li><strong>Relacionar</strong> a fotossíntese com a vida na Terra</li>
</ul>
<div class="curiosity-box">
<p><strong>💡 Curiosidade:</strong> Você sabia que as plantas são como pequenas fábricas que produzem seu próprio alimento usando apenas luz solar, água e ar?</p>
</div>
</div>
</div>
<!-- What is Photosynthesis -->
<div class="element">
<div class="time-indicator">⏱️ 5 minutos</div>
<h2>🌱 O que é Fotossíntese?</h2>
<p style="font-size: 18px; line-height: 1.6;">
A <strong style="color: #228B22;">fotossíntese</strong> é o processo pelo qual as plantas
produzem seu próprio alimento. É como se elas tivessem uma cozinha especial dentro de suas folhas!
</p>
<div style="background-color: #F5F5DC; padding: 20px; border-radius: 10px; margin: 20px 0;">
<h3 style="color: #8B4513; margin-top: 0;">📚 Etimologia da palavra</h3>
<p><strong>FOTO</strong> = luz + <strong>SÍNTESE</strong> = produção</p>
<p style="font-style: italic;">Fotossíntese = "Produção com luz"</p>
</div>
</div>
<!-- Ingredients -->
<div class="element">
<div class="time-indicator">⏱️ 6 minutos</div>
<h2>🔵 Os 4 Ingredientes da Fotossíntese</h2>
<ol class="ingredients-list">
<li>
<span class="number">1</span>
<div style="display: inline-block;">
<strong style="color: #FF6347;">☀️ Luz Solar (Energia)</strong><br>
A energia que vem do Sol é o "combustível" que faz a fotossíntese acontecer.
</div>
</li>
<li>
<span class="number">2</span>
<div style="display: inline-block;">
<strong style="color: #1E90FF;">💧 Água (H₂O)</strong><br>
As plantas absorvem água pelas raízes. É um dos ingredientes principais da "receita".
</div>
</li>
<li>
<span class="number">3</span>
<div style="display: inline-block;">
<strong style="color: #708090;">🌬️ Gás Carbônico (CO₂)</strong><br>
As plantas "respiram" o gás carbônico do ar através dos estômatos.
</div>
</li>
<li>
<span class="number">4</span>
<div style="display: inline-block;">
<strong style="color: #228B22;">🍃 Clorofila</strong><br>
É o pigmento verde que consegue capturar a luz solar. Como um painel solar natural!
</div>
</li>
</ol>
</div>
<!-- Equation -->
<div class="element">
<div class="time-indicator">⏱️ 5 minutos</div>
<div class="equation-box">
<h2>⚗️ A Fórmula Mágica da Fotossíntese</h2>
<div class="equation">
<span style="color: #1E90FF;">6 H₂O</span>
<span style="color: #666;"> + </span>
<span style="color: #708090;">6 CO₂</span>
<span style="color: #666;"> + </span>
<span style="color: #FF6347;">Energia Solar</span>
<br>
<span style="color: #228B22; font-size: 30px;">↓</span>
<br>
<span style="color: #8B4513;">C₆H₁₂O₆</span>
<span style="color: #666;"> + </span>
<span style="color: #32CD32;">6 O₂</span>
</div>
<p><strong>🍯 Glicose:</strong> É o "açúcar" que a planta produz como alimento!</p>
</div>
</div>
<!-- Importance -->
<div class="element">
<div class="time-indicator">⏱️ 6 minutos</div>
<h2>🌍 Por que a Fotossíntese é Tão Importante?</h2>
<div class="info-cards">
<div class="card oxygen">
<h3 style="color: #1E6B96; margin-top: 0;">🫁 PRODUÇÃO DE OXIGÊNIO</h3>
<p>• Todo o oxigênio que respiramos vem da fotossíntese</p>
<p>• Uma árvore pode produzir O₂ para 2 pessoas por dia</p>
<p>• 70% do oxigênio vem do fitoplâncton nos oceanos!</p>
</div>
<div class="card food">
<h3 style="color: #1E6B1E; margin-top: 0;">🍞 BASE DA CADEIA ALIMENTAR</h3>
<p>• Plantas são produtores primários</p>
<p>• Todos os animais dependem das plantas</p>
<p>• Fornece energia para toda a vida terrestre</p>
</div>
<div class="card climate">
<h3 style="color: #B8860B; margin-top: 0;">🌡️ CONTROLE DO CLIMA</h3>
<p>• Remove CO₂ da atmosfera (efeito estufa)</p>
<p>• Ajuda a regular a temperatura global</p>
<p>• 1 árvore absorve 22kg de CO₂ por ano</p>
</div>
</div>
<div class="warning-box">
<h3 style="color: #B22222; margin-top: 0;">⚠️ O que aconteceria sem fotossíntese?</h3>
<p>Todo o oxigênio acabaria, não haveria plantas nem animais, e o planeta seria um lugar sem vida como conhecemos!</p>
</div>
</div>
<!-- Quiz Preview -->
<div class="element">
<div class="time-indicator">⏱️ 8 minutos</div>
<div class="quiz-preview">
<h2 style="color: #4B0082; margin-top: 0;">🧪 Quiz: Teste seus Conhecimentos</h2>
<div class="quiz-question">
<h4>Questão 1: O que significa a palavra 'fotossíntese'?</h4>
<p>a) Divisão com luz</p>
<p><strong>b) Produção com luz ✅</strong></p>
<p>c) Respiração com luz</p>
<p>d) Movimento com luz</p>
</div>
<div class="quiz-question">
<h4>Questão 2: Onde acontece principalmente a fotossíntese?</h4>
<p>a) Nas raízes</p>
<p>b) No caule</p>
<p><strong>c) Nas folhas ✅</strong></p>
<p>d) Nas flores</p>
</div>
<p style="text-align: center; color: #666; font-style: italic;">
+ 3 questões adicionais sobre ingredientes, produtos e importância
</p>
</div>
</div>
<!-- Summary -->
<div class="element">
<div class="time-indicator">⏱️ 3 minutos</div>
<div class="objectives-box">
<h2>📋 Resumo: O que Aprendemos Hoje</h2>
<div style="text-align: center; margin: 25px 0;">
<h3 style="color: #008B8B;">🎯 Mensagem Principal</h3>
<p style="font-size: 20px; font-weight: bold; color: #2F4F4F;">
A fotossíntese é o processo mais importante para a vida na Terra!<br>
Sem ela, não existiríamos. 🌱➡️🌍
</p>
</div>
<div class="curiosity-box">
<p><strong>📝 Tarefa de Casa:</strong> Seja um "Detetive da Fotossíntese" - tire fotos de plantas, faça experimentos caseiros e observe a natureza ao seu redor!</p>
</div>
</div>
</div>
</div>
<script>
// Simple progress animation
window.addEventListener('load', function() {
const progressBars = document.querySelectorAll('.progress-fill');
progressBars.forEach(bar => {
setTimeout(() => {
bar.style.width = '100%';
}, 500);
});
});
// Smooth scrolling for better UX
document.addEventListener('DOMContentLoaded', function() {
const elements = document.querySelectorAll('.element');
elements.forEach((el, index) => {
el.style.animationDelay = `${index * 0.1}s`;
el.style.animation = 'fadeInUp 0.6s ease forwards';
});
});
</script>
</body>
</html>