HTML: color: #f1c40f;
<!DOCTYPE html> }
<html lang="pt-br">
<head> section {
<meta charset="UTF-8"> padding: 20px;
<title>Portal Educacional</title> }
<style> .card {
body { background-color: white;
font-family: Arial, sans-serif; padding: 15px;
margin: 0; margin: 15px 0;
background-color: #f4f6f9; border-radius: 8px;
} box-shadow: 0 2px 5px rgba(0,0,0,0.1);
header {
background-color: #2c3e50; footer {
color: white; background-color: #2c3e50;
padding: 20px; color: white;
text-align: center; text-align: center;
} padding: 10px;
margin-top: 20px;
nav { }
background-color: #34495e;
padding: 10px; button {
text-align: center; padding: 8px 15px;
} background-color: #27ae60;
color: white;
nav a { border: none;
color: white; border-radius: 5px;
margin: 15px; cursor: pointer;
text-decoration: none; }
font-weight: bold;
} button:hover {
background-color: #219150;
nav a:hover { }
</style> <button onclick="alert('Aula de Português em
breve!')">Ver Aula</button>
</head>
</div>
<body>
<div class="card">
<h2>🌎 Geografia</h2>
<header>
<p>Estudo dos países, mapas e meio
<h1>📚 Portal Educacional</h1> ambiente.</p>
<p>Aprendendo de forma simples e didática</p> <button onclick="alert('Aula de Geografia em
</header> breve!')">Ver Aula</button>
</div>
<nav> </section>
<a href="#inicio">Início</a>
<a href="#materias">Matérias</a> <section id="contato">
<a href="#contato">Contato</a> <div class="card">
</nav> <h2>Contato</h2>
<p>Email: professor@[Link]</p>
<section id="inicio"> <p>Telefone: (00) 0000-0000</p>
<div class="card"> </div>
<h2>Bem-vindo!</h2> </section>
<p>Este site foi criado para auxiliar alunos no
aprendizado escolar.</p> <footer>
</div> <p>© 2026 Portal Educacional - Projeto Didático
</section> Escolar</p>
</footer>
<section id="materias">
<div class="card"> </body>
<h2>📐 Matemática</h2> </html>
<p>Aprenda operações básicas, equações e
geometria.</p>
<button onclick="alert('Aula de Matemática em
breve!')">Ver Aula</button>
</div>
<div class="card">
<h2>📖 Português</h2>
<p>Gramática, interpretação de texto e
redação.</p>