From 532b451c00274b3536edce6dce193e0383c6982d Mon Sep 17 00:00:00 2001 From: Geovannisz Date: Tue, 4 Jun 2024 03:15:31 -0300 Subject: [PATCH] return --- css/styles.css | 258 +++++++++++++++++++++++-------------------------- index.html | 198 +++++++++++++++++++++++++------------ js/scripts.js | 46 +++------ 3 files changed, 274 insertions(+), 228 deletions(-) diff --git a/css/styles.css b/css/styles.css index 2d82a7e..b002164 100644 --- a/css/styles.css +++ b/css/styles.css @@ -1,191 +1,175 @@ -/* Estilos gerais */ +/* Estilos personalizados */ body { - font-family: 'Taviraj', serif; - background-color: #121212; - color: #fff; + background-color: #121212; + color: #e0e0e0; } -h1, h2, h3, h4, h5, h6 { - font-family: 'Yeseva One', serif; +.hero { + text-align: center; + background: url('https://source.unsplash.com/1600x900/?physics') no-repeat center center; + background-size: cover; + color: white; + padding: 50px 0; } -.container { - max-width: 1200px; - margin: 0 auto; - padding: 2rem; +.hero h1, .hero h2 { + margin: 0; + text-shadow: 2px 2px 4px #000000; /* Contorno preto */ } -/* Seção de preços */ -.pricing-section { - padding: 4rem 0; +.hero h1, .hero h2, .hero p { + text-shadow: 2px 2px 4px #000000; } -.pricing-header { - text-align: center; - margin-bottom: 3rem; +.plan-carousel { + display: flex; + justify-content: center; + gap: 20px; + padding: 20px 0; + position: relative; } -.pricing-header h2 { - font-size: 2.5rem; - margin-bottom: 1rem; -} - -/* Toggle switch */ -.toggle-switch { - display: flex; - align-items: center; - justify-content: center; - margin-bottom: 2rem; -} - -.toggle-switch span { - font-size: 0.9rem; - margin: 0 0.5rem; -} - -/* The switch - the box around the slider */ -.switch { - position: relative; - display: inline-block; - width: 40px; - height: 20px; -} - -/* Hide default HTML checkbox */ -.switch input { - opacity: 0; - width: 0; - height: 0; +.plan { + background: #1e1e1e; + padding: 20px; + border-radius: 10px; + box-shadow: 0 4px 8px rgba(0,0,0,0.1); + min-width: 420px; + max-width: 420px; + text-align: center; + transition: transform 0.3s ease; } -/* The slider */ -.slider { - position: absolute; - cursor: pointer; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-color: #ccc; - -webkit-transition: .4s; - transition: .4s; +.plan:hover { + transform: scale(1.05); } -.slider:before { - position: absolute; - content: ""; - height: 16px; - width: 16px; - left: 2px; - bottom: 2px; - background-color: white; - -webkit-transition: .4s; - transition: .4s; +.plan h3 { + margin-top: 0; } -input:checked + .slider { - background-color: #8b5cf6; +.plan .price { + font-size: 1.5em; /* Aumenta o tamanho da fonte */ + font-family: 'Arial Black', Gadget, sans-serif; /* Fonte mais grossa */ } -input:focus + .slider { - box-shadow: 0 0 1px #8b5cf6; +.toggle-container { + display: flex; + flex-direction: column; + align-items: center; + margin-bottom: 20px; } -input:checked + .slider:before { - -webkit-transform: translateX(20px); - -ms-transform: translateX(20px); - transform: translateX(20px); +.toggle-button { + position: relative; + display: inline-block; + width: 60px; + height: 34px; } -/* Rounded sliders */ -.slider.round { - border-radius: 34px; +.toggle-button input { + opacity: 0; + width: 0; + height: 0; } -.slider.round:before { - border-radius: 50%; +.slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: #ccc; + transition: .4s; + border-radius: 34px; } -/* Planos de assinatura */ -.pricing-plans { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); - gap: 2rem; +.slider:before { + position: absolute; + content: ""; + height: 26px; + width: 26px; + left: 4px; + bottom: 4px; + background-color: white; + transition: .4s; + border-radius: 50%; } -.plan { - border: 1px solid #333; - padding: 2rem; - border-radius: 8px; - background-color: #27272a; - transition: border-color 0.3s ease; +input:checked + .slider { + background-color: #007bff; } -.plan:hover { - border-color: #8b5cf6; +input:checked + .slider:before { + transform: translateX(26px); } -.plan h3 { - font-size: 1.8rem; - margin-bottom: 1rem; +.testimonials { + display: flex; + justify-content: center; + gap: 20px; + margin: 40px 0; + flex-wrap: wrap; } -.plan .price { - display: flex; - align-items: baseline; - font-size: 2rem; - margin-bottom: 1rem; +.testimonial { + background: #1e1e1e; + padding: 20px; + border-radius: 10px; + box-shadow: 0 4px 8px rgba(0,0,0,0.1); + max-width: 300px; + text-align: center; } -.plan .price .value { - font-weight: bold; - margin-right: 0.5rem; +.testimonial img { + border-radius: 50%; + width: 80px; + height: 80px; + object-fit: cover; } -.plan .annual-price { - font-size: 0.9rem; - color: #888; - margin-bottom: 1.5rem; +.testimonial p { + font-style: italic; } -.plan ul { - list-style: none; - padding: 0; - margin-bottom: 2rem; +.testimonial .rating { + color: gold; } -.plan ul li { - margin-bottom: 0.5rem; - color: #a1a1aa; - font-size: 0.9rem; - display: flex; - align-items: center; +.about { + text-align: center; + margin: 40px 0; } -.plan ul li i { - margin-right: 0.5rem; - font-size: 1.2rem; +.about img { + border-radius: 50%; + width: 150px; + height: 150px; + object-fit: cover; + margin-bottom: 20px; } -.plan ul li .check { - color: #8b5cf6; +.center-content { + text-align: center; } -.plan ul li .x { - color: #ef4444; +.center-content a { + display: inline-block; + margin-top: 20px; } -.plan .subscribe-button { - background-color: #8b5cf6; - color: #fff; - border: none; - padding: 0.8rem 1.5rem; - border-radius: 5px; - cursor: pointer; - transition: background-color 0.3s ease; - width: 100%; +footer { + text-align: center; + padding: 20px 0; } -.plan .subscribe-button:hover { - background-color: #a855f7; +@media (max-width: 768px) { + .plan { + min-width: 100%; + max-width: 100%; + } + .toggle-container { + top: -10px; + } } \ No newline at end of file diff --git a/index.html b/index.html index 2257670..99a257a 100644 --- a/index.html +++ b/index.html @@ -1,66 +1,144 @@ - + - - - Planos de Assinatura - + + + + + Curso Online de Física -
-
-
-

Escolha seu plano ideal

-

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

-
- Mensal - - Anual -
-
-
-
-

Plano Newton

-
- 19,90 - /mês -
-

Equivalente a R$19,90/mês

-
    -
  • Acesso a todas as aulas já gravadas
    • -
  • Acesso às listas de exercícios
    • -
  • Acesso aos materiais de estudo
    • -
  • Acesso ao Grupo de Dúvidas do WhatsApp
    • -
  • Acesso ao Drive de +1TB do Curso
    • -
  • Atendimento personalizado
    • -
  • Lives mensais com os alunos
    • -
- -
-
-

Plano Einstein

-
- 29,90 - /mês -
-

Equivalente a R$29,90/mês

-
    -
  • Acesso a todas as aulas já gravadas
    • -
  • Acesso às listas de exercícios
    • -
  • Acesso aos materiais de estudo
    • -
  • Acesso ao Grupo de Dúvidas do WhatsApp
    • -
  • Acesso ao Drive de +1TB do Curso
    • -
  • Atendimento personalizado
    • -
  • Lives mensais com os alunos
    • -
- -
-
-
-
- + + +
+

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 +
+ +
+ + + + \ No newline at end of file diff --git a/js/scripts.js b/js/scripts.js index 81ba753..2d03ef9 100644 --- a/js/scripts.js +++ b/js/scripts.js @@ -1,31 +1,15 @@ -const planSwitch = document.getElementById('planSwitch'); -const plans = document.querySelectorAll('.plan'); - -planSwitch.addEventListener('change', () => { - plans.forEach(plan => { - const planType = plan.dataset.plan; - const priceElement = plan.querySelector('.price .value'); - const periodElement = plan.querySelector('.price .period'); - const annualPriceElement = plan.querySelector('.annual-price'); - - if (planSwitch.checked) { - // Plano anual - if (planType === 'newton') { - priceElement.textContent = '199,90'; - } else if (planType === 'einstein') { - priceElement.textContent = '299,90'; - } - periodElement.textContent = '/ano'; - annualPriceElement.style.display = 'block'; - } else { - // Plano mensal - if (planType === 'newton') { - priceElement.textContent = '19,90'; - } else if (planType === 'einstein') { - priceElement.textContent = '29,90'; - } - periodElement.textContent = '/mês'; - annualPriceElement.style.display = 'none'; - } - }); -}); \ No newline at end of file +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