Recursos para o 10º ano – turma9e.aprendertic.net

				
					<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>10.º Ano — Escolhe o Teu Caminho</title>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet">
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
--ct: #0d3b66;
--hum: #5c3317;
--eco: #1a4731;
--art: #5a0025;
--gold: #d4a849;
--cream: #f5f0e8;
--dark: #111;
}

html { scroll-behavior: smooth; }

body {
font-family: 'DM Sans', sans-serif;
background: var(--cream);
color: var(--dark);
overflow-x: hidden;
}

/* ── HERO ── */
.hero {
min-height: 100vh;
background: var(--dark);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 2rem;
position: relative;
overflow: hidden;
}

.hero::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 60% 50% at 20% 30%, rgba(13,59,102,.55) 0%, transparent 70%),
radial-gradient(ellipse 50% 60% at 80% 70%, rgba(90,0,37,.45) 0%, transparent 70%),
radial-gradient(ellipse 40% 40% at 50% 50%, rgba(26,71,49,.35) 0%, transparent 70%);
pointer-events: none;
}

.badge {
font-size: .7rem;
letter-spacing: .25em;
text-transform: uppercase;
color: var(--gold);
border: 1px solid var(--gold);
padding: .35rem 1.1rem;
border-radius: 100px;
margin-bottom: 2rem;
position: relative;
animation: fadeUp .8s ease both;
}

.hero h1 {
font-family: 'Playfair Display', serif;
font-size: clamp(2.8rem, 8vw, 6.5rem);
font-weight: 900;
color: #fff;
line-height: 1.05;
max-width: 900px;
position: relative;
animation: fadeUp .9s .15s ease both;
}

.hero h1 em {
font-style: italic;
color: var(--gold);
}

.hero p {
margin-top: 1.5rem;
font-size: 1.1rem;
color: rgba(255,255,255,.65);
max-width: 520px;
line-height: 1.7;
position: relative;
animation: fadeUp .9s .3s ease both;
}

.hero-nav {
margin-top: 3.5rem;
display: flex;
flex-wrap: wrap;
gap: 1rem;
justify-content: center;
position: relative;
animation: fadeUp .9s .45s ease both;
}

.hero-nav a {
text-decoration: none;
padding: .7rem 1.6rem;
border-radius: 100px;
font-size: .9rem;
font-weight: 500;
transition: all .25s;
border: 1.5px solid rgba(255,255,255,.25);
color: #fff;
}
.hero-nav a:hover { border-color: var(--gold); color: var(--gold); }

.scroll-hint {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
color: rgba(255,255,255,.4);
font-size: .75rem;
letter-spacing: .15em;
text-transform: uppercase;
animation: bounce 2s infinite;
}

/* ── COURSE SECTIONS ── */
.course {
min-height: 100vh;
display: grid;
grid-template-columns: 1fr 1fr;
position: relative;
overflow: hidden;
}

@media (max-width: 768px) {
.course { grid-template-columns: 1fr; }
.course.flip .img-side { order: -1; }
}

.course.flip .img-side { order: 2; }
.course.flip .text-side { order: 1; }

.img-side {
position: relative;
min-height: 55vmin;
overflow: hidden;
}

.img-side img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 8s ease;
}

.course:hover .img-side img { transform: scale(1.04); }

.img-side .overlay {
position: absolute;
inset: 0;
opacity: .45;
}

.text-side {
display: flex;
flex-direction: column;
justify-content: center;
padding: clamp(2.5rem, 6vw, 5rem);
}

/* course colours */
#ct .text-side { background: var(--ct); color: #e8f2ff; }
#hum .text-side { background: var(--hum); color: #fdf3e8; }
#eco .text-side { background: var(--eco); color: #e8f5ee; }
#artes .text-side { background: var(--art); color: #ffe8ef; }

#ct .img-side .overlay { background: var(--ct); }
#hum .img-side .overlay { background: var(--hum); }
#eco .img-side .overlay { background: var(--eco); }
#artes .img-side .overlay { background: var(--art); }

.course-num {
font-size: .7rem;
letter-spacing: .3em;
text-transform: uppercase;
opacity: .6;
margin-bottom: 1rem;
}

.course-icon {
font-size: 2.8rem;
margin-bottom: 1.2rem;
}

.text-side h2 {
font-family: 'Playfair Display', serif;
font-size: clamp(2rem, 4vw, 3.2rem);
font-weight: 900;
line-height: 1.1;
margin-bottom: 1rem;
}

.text-side .tagline {
font-style: italic;
font-family: 'Playfair Display', serif;
font-size: 1.05rem;
opacity: .8;
margin-bottom: 1.5rem;
padding-left: 1rem;
border-left: 3px solid var(--gold);
}

.text-side p {
font-size: .98rem;
line-height: 1.8;
opacity: .88;
margin-bottom: 1.5rem;
}

.disciplines {
display: flex;
flex-wrap: wrap;
gap: .5rem;
margin-bottom: 2rem;
}

.tag {
font-size: .75rem;
letter-spacing: .05em;
padding: .3rem .85rem;
border-radius: 100px;
background: rgba(255,255,255,.15);
backdrop-filter: blur(4px);
border: 1px solid rgba(255,255,255,.2);
}

.cta-btn {
display: inline-block;
text-decoration: none;
padding: .85rem 2rem;
border-radius: 100px;
font-size: .9rem;
font-weight: 500;
background: var(--gold);
color: var(--dark);
transition: all .25s;
width: fit-content;
letter-spacing: .03em;
}
.cta-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.3); }

/* career bullets */
.careers {
margin-top: 1.2rem;
list-style: none;
display: flex;
flex-direction: column;
gap: .4rem;
}
.careers li {
font-size: .85rem;
opacity: .75;
padding-left: 1.2rem;
position: relative;
}
.careers li::before {
content: '→';
position: absolute;
left: 0;
color: var(--gold);
}

/* ── FOOTER ── */
footer {
background: var(--dark);
color: rgba(255,255,255,.5);
text-align: center;
padding: 2.5rem;
font-size: .82rem;
letter-spacing: .05em;
}
footer span { color: var(--gold); }

/* ── ANIMATIONS ── */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(28px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes bounce {
0%,100% { transform: translateX(-50%) translateY(0); }
50% { transform: translateX(-50%) translateY(8px); }
}

/* reveal on scroll */
.reveal {
opacity: 0;
transform: translateY(40px);
transition: opacity .8s ease, transform .8s ease;
}
.reveal.visible { opacity: 1; transform: none; }
</style>
</head>
<body>

<!-- ══════════ HERO ══════════ -->
<section class="hero">
<div class="badge">10.º Ano · 2024/25</div>
<h1>Qual é o teu<br><em>caminho?</em></h1>
<p>Quatro áreas de formação, um futuro à tua espera. Descobre qual o curso que melhor se adapta a quem és e ao que queres ser.</p>
<nav class="hero-nav">
<a href="#ct">🔬 Ciências e Tecnologias</a>
<a href="#hum">📖 Humanidades</a>
<a href="#eco">📊 Economia</a>
<a href="#artes">🎨 Artes Visuais</a>
</nav>
<div class="scroll-hint">↓ Explora</div>
</section>

<!-- ══════════ CT ══════════ -->
<section class="course" id="ct">
<div class="img-side">
<img decoding="async" src="https://images.unsplash.com/photo-1507413245164-6160d8298b31?w=900&q=80" alt="Laboratório de Ciências">
<div class="overlay"></div>
</div>
<div class="text-side reveal">
<div class="course-num">Curso 01</div>
<div class="course-icon">🔬</div>
<h2>Ciências e Tecnologias</h2>
<p class="tagline">"Para quem quer compreender como o mundo funciona."</p>
<p>
O curso de <strong>Ciências e Tecnologias</strong> prepara-te para as áreas STEM — Ciência, Tecnologia, Engenharia e Matemática. Vais mergulhar nos segredos da Física, da Química, da Biologia e da Matemática, desenvolvendo um pensamento analítico e uma capacidade de resolução de problemas que te abrirá portas em dezenas de profissões.
</p>
<p>
Ideal para quem é curioso, gosta de experiências laboratoriais, de raciocínio lógico e quer perceber os fenómenos naturais através da ciência.
</p>
<div class="disciplines">
<span class="tag">Matemática A</span>
<span class="tag">Física e Química A</span>
<span class="tag">Biologia e Geologia</span>
<span class="tag">Geometria Descritiva</span>
<span class="tag">Português</span>
</div>
<ul class="careers">
<li>Medicina · Enfermagem · Farmácia</li>
<li>Engenharia (Civil, Informática, Mecânica...)</li>
<li>Arquitetura · Design Industrial</li>
<li>Investigação Científica · Biotecnologia</li>
</ul>
</div>
</section>

<!-- ══════════ HUMANIDADES ══════════ -->
<section class="course flip" id="hum">
<div class="img-side">
<img decoding="async" src="https://images.unsplash.com/photo-1524995997946-a1c2e315a42f?w=900&q=80" alt="Biblioteca e livros">
<div class="overlay"></div>
</div>
<div class="text-side reveal">
<div class="course-num">Curso 02</div>
<div class="course-icon">📖</div>
<h2>Línguas e Humanidades</h2>
<p class="tagline">"Para quem ama palavras, histórias e pessoas."</p>
<p>
O curso de <strong>Línguas e Humanidades</strong> é a escolha certa para quem tem paixão pela linguagem, pela História, pela Filosofia e pelas culturas do mundo. Aqui desenvolveres competências de comunicação, análise crítica, escrita criativa e pensamento reflexivo — ferramentas poderosas em qualquer área da vida.
</p>
<p>
Perfeito para quem gosta de debater ideias, escrever, viajar (mesmo que só pelos livros) e entender a condição humana em toda a sua complexidade.
</p>
<div class="disciplines">
<span class="tag">Português</span>
<span class="tag">Inglês ou Espanhol</span>
<span class="tag">História A</span>
<span class="tag">Filosofia</span>
<span class="tag">Geografia A</span>
</div>
<ul class="careers">
<li>Direito · Relações Internacionais</li>
<li>Jornalismo · Comunicação · Publicidade</li>
<li>Educação · Psicologia · Sociologia</li>
<li>Tradução · Linguística · Diplomacia</li>
</ul>
</div>
</section>

<!-- ══════════ ECONOMIA ══════════ -->
<section class="course" id="eco">
<div class="img-side">
<img decoding="async" src="https://images.unsplash.com/photo-1611974789855-9c2a0a7236a3?w=900&q=80" alt="Gráficos de economia">
<div class="overlay"></div>
</div>
<div class="text-side reveal">
<div class="course-num">Curso 03</div>
<div class="course-icon">📊</div>
<h2>Ciências Socioeconómicas</h2>
<p class="tagline">"Para quem quer perceber como funciona a sociedade e a economia."</p>
<p>
O curso de <strong>Ciências Socioeconómicas</strong> combina o rigor da Matemática com a compreensão dos mercados, das empresas e das dinâmicas sociais. Vais aprender a ler o mundo pelo prisma da economia, das finanças e das ciências sociais, desenvolvendo um perfil versátil e muito procurado no mercado de trabalho.
</p>
<p>
Ideal para quem gosta de análise de dados, compreender notícias económicas, debater políticas públicas ou simplesmente perceber por que razão os preços sobem.
</p>
<div class="disciplines">
<span class="tag">Matemática Aplicada</span>
<span class="tag">Economia A</span>
<span class="tag">Introdução à Economia</span>
<span class="tag">Sociologia</span>
<span class="tag">Português</span>
</div>
<ul class="careers">
<li>Gestão · Economia · Finanças</li>
<li>Contabilidade · Auditoria · Banca</li>
<li>Marketing · Recursos Humanos</li>
<li>Ciência Política · Administração Pública</li>
</ul>
</div>
</section>

<!-- ══════════ ARTES ══════════ -->
<section class="course flip" id="artes">
<div class="img-side">
<img decoding="async" src="https://images.unsplash.com/photo-1460661419201-fd4cecdf8a8b?w=900&q=80" alt="Estúdio de artes visuais">
<div class="overlay"></div>
</div>
<div class="text-side reveal">
<div class="course-num">Curso 04</div>
<div class="course-icon">🎨</div>
<h2>Artes Visuais</h2>
<p class="tagline">"Para quem vê o mundo de forma diferente — e quer mostrá-lo."</p>
<p>
O curso de <strong>Artes Visuais</strong> é para quem pensa com as mãos e sente com os olhos. Aqui vais explorar desenho, pintura, fotografia, design, escultura e história da arte, desenvolvendo uma visão criativa única e competências técnicas que te diferenciam no mundo contemporâneo.
</p>
<p>
Para além da criatividade, aprendes rigor técnico, linguagem visual e cultura artística — bases sólidas para qualquer carreira criativa ou cultural.
</p>
<div class="disciplines">
<span class="tag">Desenho A</span>
<span class="tag">Geometria Descritiva A</span>
<span class="tag">História da Cultura e das Artes</span>
<span class="tag">Oficina de Artes</span>
<span class="tag">Português</span>
</div>
<ul class="careers">
<li>Arquitetura · Design Gráfico · Moda</li>
<li>Belas Artes · Ilustração · Animação</li>
<li>Fotografia · Cinema · Multimédia</li>
<li>Curadoria de Arte · Museologia</li>
</ul>
</div>
</section>

<!-- ══════════ FOOTER ══════════ -->
<footer>
<p>10.º Ano &nbsp;·&nbsp; <span>Escolhe com conhecimento, decide com confiança.</span></p>
<p style="margin-top:.5rem;font-size:.75rem;">Informação orientativa — consulta sempre o teu diretor de turma ou psicólogo escolar.</p>
</footer>

<script>
// Scroll reveal
const observer = new IntersectionObserver((entries) => {
entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('visible'); });
}, { threshold: 0.15 });

document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
</script>
</body>
</html>