File size: 9,132 Bytes
59e8564 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 |
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Progressão Aritmética - Sofia Rosa</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
.gradient-bg {
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}
.card-hover:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}
.formula-box {
background-color: #f8f9fa;
border-left: 4px solid #4f46e5;
}
.scroll-smooth {
scroll-behavior: smooth;
}
.highlight {
background-color: rgba(79, 70, 229, 0.1);
border-left: 3px solid #4f46e5;
}
</style>
</head>
<body class="gradient-bg scroll-smooth font-sans antialiased text-gray-800">
<!-- Header -->
<header class="bg-indigo-600 text-white shadow-lg">
<div class="container mx-auto px-4 py-6">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="flex items-center mb-4 md:mb-0">
<i class="fas fa-chart-line text-3xl mr-3"></i>
<h1 class="text-2xl md:text-3xl font-bold">Progressão Aritmética</h1>
</div>
<div class="text-sm md:text-base">
<span class="font-semibold">Por Sofia Rosa</span>
</div>
</div>
</div>
</header>
<!-- Main Content -->
<main class="container mx-auto px-4 py-8">
<!-- Introduction Section -->
<section class="mb-12">
<div class="bg-white rounded-xl shadow-md overflow-hidden p-6 card-hover transition-all duration-300">
<div class="flex items-center mb-4">
<i class="fas fa-graduation-cap text-indigo-500 text-2xl mr-3"></i>
<h2 class="text-xl md:text-2xl font-bold text-gray-800">Resumo Didático: Progressão Aritmética (PA)</h2>
</div>
<p class="text-gray-600 mb-4">Olá, Sofia! Vamos aprender juntos sobre progressão aritmética. Vou explicar de forma simples, com exemplos do cotidiano, para você entender de vez!</p>
<div class="border-t border-gray-200 my-4"></div>
<div class="flex items-start">
<i class="fas fa-lightbulb text-yellow-400 mt-1 mr-3"></i>
<div>
<h3 class="text-lg font-semibold text-gray-800 mb-2">O que é Progressão Aritmética?</h3>
<p class="text-gray-600">É uma sequência de números em que cada termo, a partir do segundo, é igual ao anterior somado a um número fixo, chamado de razão (r).</p>
</div>
</div>
</div>
</section>
<!-- Formula Section -->
<section class="mb-12">
<div class="bg-white rounded-xl shadow-md overflow-hidden p-6 card-hover transition-all duration-300">
<h2 class="text-xl md:text-2xl font-bold text-gray-800 mb-4 flex items-center">
<i class="fas fa-square-root-alt text-indigo-500 mr-3"></i>
Fórmula do Termo Geral
</h2>
<div class="formula-box p-4 rounded mb-6">
<p class="text-center text-xl font-mono font-bold text-indigo-700">
a<sub>n</sub> = a<sub>1</sub> + (n - 1) × r
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="highlight p-4 rounded-lg">
<h3 class="font-semibold text-gray-800 mb-2">Onde:</h3>
<ul class="space-y-2 text-gray-600">
<li><span class="font-bold">a<sub>n</sub>:</span> termo que você quer achar</li>
<li><span class="font-bold">a<sub>1</sub>:</span> primeiro termo da sequência</li>
<li><span class="font-bold">n:</span> posição do termo</li>
<li><span class="font-bold">r:</span> razão (quanto aumenta ou diminui)</li>
</ul>
</div>
<div class="bg-indigo-50 p-4 rounded-lg">
<h3 class="font-semibold text-gray-800 mb-2">Exemplo do cotidiano:</h3>
<p class="text-gray-600 mb-2">Imagine que você ganha uma mesada de R$ 50,00 e todo mês sua mãe aumenta R$ 10,00.</p>
<ul class="list-disc list-inside text-gray-600 space-y-1">
<li>1º mês: R$ 50,00</li>
<li>2º mês: R$ 60,00</li>
<li>3º mês: R$ 70,00</li>
<li>4º mês: R$ 80,00</li>
</ul>
<p class="text-gray-600 mt-2">Aqui, a razão é 10, pois todo mês soma-se 10 ao valor anterior.</p>
</div>
</div>
<div class="mt-6 bg-blue-50 p-4 rounded-lg border border-blue-100">
<div class="flex items-start">
<i class="fas fa-brain text-blue-500 mt-1 mr-3"></i>
<div>
<h4 class="font-semibold text-gray-800 mb-1">Analogia:</h4>
<p class="text-gray-600">É como subir uma escada, onde cada degrau tem sempre a mesma altura.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Practical Examples Section -->
<section class="mb-12">
<div class="bg-white rounded-xl shadow-md overflow-hidden p-6 card-hover transition-all duration-300">
<h2 class="text-xl md:text-2xl font-bold text-gray-800 mb-6 flex items-center">
<i class="fas fa-clipboard-list text-indigo-500 mr-3"></i>
Exemplos Práticos para Sofia
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Example 1 -->
<div class="border border-gray-200 rounded-lg p-4 hover:border-indigo-300 transition-colors">
<div class="flex items-center mb-3">
<div class="bg-indigo-100 p-2 rounded-full mr-3">
<i class="fas fa-money-bill-wave text-indigo-600"></i>
</div>
<h3 class="font-semibold">Mesada Crescente</h3>
</div>
<p class="text-gray-600 mb-3">Sofia recebe R$ 100,00 de mesada com aumento mensal de R$ 20,00:</p>
<ul class="text-sm text-gray-600 space-y-1">
<li>1º mês: R$ 100,00</li>
<li>2º mês: R$ 120,00</li>
<li>3º mês: R$ 140,00</li>
<li>4º mês: R$ 160,00</li>
<li>5º mês: R$ 180,00</li>
</ul>
<div class="mt-3 text-xs bg-indigo-50 text-indigo-700 p-2 rounded">
<span class="font-bold">Razão (r):</span> R$ 20,00
</div>
</div>
<!-- Example 2 -->
<div class="border border-gray-200 rounded-lg p-4 hover:border-indigo-300 transition-colors">
<div class="flex items-center mb-3">
<div class="bg-indigo-100 p-2 rounded-full mr-3">
<i class="fas fa-piggy-bank text-indigo-600"></i>
</div>
<h3 class="font-semibold">Economia para Celular</h3>
</div>
<p class="text-gray-600 mb-3">Sofia economiza R$ 50,00 por semana para comprar um celular:</p>
<ul class="text-sm text-gray-600 space-y-1">
<li>1ª semana: R$ 50,00</li>
<li>2ª semana: R$ 100,00</li>
<li>3ª semana: R$ 150,00</li>
<li>4ª semana: R$ 200,00</li>
</ul>
<div class="mt-3 text-xs bg-indigo-50 text-indigo-700 p-2 rounded">
<span class="font-bold">Razão (r):</span> R$ 50,00
</div>
</div>
<!-- Example 3 -->
<div class="border border-gray-200 rounded-lg p-4 hover:border-indigo-300 transition-colors">
<div class="flex items-center mb-3">
</html> |