diff --git a/css/styles.css b/css/styles.css index b002164..c15200a 100644 --- a/css/styles.css +++ b/css/styles.css @@ -171,5 +171,140 @@ footer { } .toggle-container { top: -10px; - } + }body { + background-color: #000; + color: #fff; + font-family: 'Roboto', sans-serif; + text-align: center; + padding: 20px; +} + +h1 { + font-family: 'Yeseva One', serif; + font-size: 2.5em; + margin-bottom: 10px; +} + +p { + font-size: 1.2em; + margin-bottom: 30px; +} + +.toggle-container { + display: flex; + justify-content: center; + align-items: center; + margin-bottom: 40px; + position: relative; +} + +.toggle { + background-color: #444; + border-radius: 15px; + width: 70px; + height: 30px; + position: relative; + cursor: pointer; +} + +.toggle::before { + content: 'Mensal'; + position: absolute; + width: 50%; + text-align: center; + color: #888; + font-size: 0.8em; + font-weight: bold; + left: -50px; + top: 7px; +} + +.toggle::after { + content: 'Anual'; + position: absolute; + width: 50%; + text-align: center; + color: #888; + font-size: 0.8em; + font-weight: bold; + right: -50px; + top: 7px; +} + +.toggle-switch { + position: absolute; + background-color: #fff; + border-radius: 50%; + width: 26px; + height: 26px; + top: 2px; + left: 2px; + transition: left 0.3s; +} + +.annual .toggle-switch { + left: 42px; +} + +.plan-container { + display: flex; + justify-content: center; + gap: 20px; + flex-wrap: wrap; +} + +.plan { + background-color: #111; + border-radius: 10px; + padding: 20px; + width: 300px; + text-align: center; +} + +.plan h2 { + font-size: 1.5em; + margin-bottom: 10px; +} + +.plan .price { + font-size: 2em; + margin: 20px 0; +} + +.plan ul { + list-style: none; + padding: 0; + text-align: left; +} + +.plan ul li { + margin: 10px 0; + font-size: 0.9em; +} + +.plan ul li span { + margin-right: 10px; +} + +.plan ul li.available span { + color: #8a2be2; +} + +.plan ul li.unavailable { + color: #666; +} + +.plan .button-container { + text-align: center; + margin-top: 20px; +} + +.plan .button-container a { + background-color: #8a2be2; + color: #fff; + padding: 10px 20px; + border-radius: 5px; + text-decoration: none; +} + } \ No newline at end of file diff --git a/index.html b/index.html index 99a257a..bb85b9d 100644 --- a/index.html +++ b/index.html @@ -1,144 +1,58 @@ - - - - - Curso Online de Física + + + Escolha seu plano ideal + + - - -
-

Curso Online de Física

-

Domine todos os conceitos da física com aulas completas e detalhadas

-

Nosso curso aborda todos os temas de uma faculdade de física, preparando você para enfrentar todos os desafios em sua carreira.

-
- -
-
-

Planos de Assinatura

-

Escolha o plano que melhor se adapta às suas necessidades:

- -
- Mensal - -
- - -
- -
-

Depoimentos

-
-
- Depoimento 1 -

"Este curso mudou minha vida! As aulas são incríveis e os professores são muito atenciosos."

-
★★★★★
-

João Silva

-
-
- Depoimento 2 -

"Recomendo a todos que querem aprender física de verdade. O conteúdo é muito completo."

-
★★★★★
-

Maria Oliveira

-
-
- Depoimento 3 -

"A melhor decisão que tomei foi me inscrever neste curso. Vale cada centavo!"

-
★★★★★
-

Carlos Pereira

-
-
-
- -
-

Sobre o Professor

-
- Professor -

Olá! Eu sou o Professor Fictício, especialista em física com mais de 20 anos de experiência. Minha missão é tornar a física acessível e interessante para todos. Junte-se a mim nesta jornada de aprendizado e descubra o fascinante mundo da física!

-
-
- -
-

Inscreva-se Agora

-

Garanta sua vaga no nosso curso de física.

- Junte-se ao Grupo do WhatsApp -
- -
- - - - +

Escolha seu plano ideal

+

Encontre o plano que melhor se adapta às suas necessidades.

+
+
+
+
+
+
+
+

Plano Newton

+
R$19,90/mês
+ + +
+ Assinar + +
+
+
+

Plano Einstein

+
R$29,90/mês
+ + +
+ Assinar + +
+
+
+ \ No newline at end of file diff --git a/js/scripts.js b/js/scripts.js index 2d03ef9..47ef6ac 100644 --- a/js/scripts.js +++ b/js/scripts.js @@ -1,15 +1,8 @@ -function togglePlans() { - const isChecked = document.getElementById('plan-toggle').checked; - const plans = document.querySelectorAll('.plan'); - const planTypeText = document.getElementById('plan-type'); - plans.forEach(plan => { - if (isChecked && plan.getAttribute('data-plan') === 'anual') { - plan.style.display = 'block'; - } else if (!isChecked && plan.getAttribute('data-plan') === 'mensal') { - plan.style.display = 'block'; - } else { - plan.style.display = 'none'; - } - }); - planTypeText.textContent = isChecked ? 'Anual' : 'Mensal'; -} \ No newline at end of file +function togglePricing() { + const toggle = document.querySelector('.toggle'); + const isAnnual = toggle.classList.toggle('annual'); + document.querySelectorAll('.mensal').forEach(el => el.style.display = isAnnual ? 'none' : 'block'); + document.querySelectorAll('.anual').forEach(el => el.style.display = isAnnual ? 'block' : 'none'); + document.querySelectorAll('.mensal-link').forEach(el => el.style.display = isAnnual ? 'none' : 'block'); + document.querySelectorAll('.anual-link').forEach(el => el.style.display = isAnnual ? 'block' : 'none'); +}