Skip to content

Commit

Permalink
.
Browse files Browse the repository at this point in the history
  • Loading branch information
@Geovannisz
Geovannisz committed Jun 4, 2024
1 parent eaa5f88 commit 8210c69
Show file tree
Hide file tree
Showing 3 changed files with 222 additions and 160 deletions.
227 changes: 127 additions & 100 deletions css/styles.css
View file
Original file line number Diff line number Diff line change
@@ -1,145 +1,172 @@
body {
font-family: 'Roboto', sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
/* Reset de estilos */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

.pricing-section {
text-align: center;
padding: 50px 20px;
background-color: #fff;
body {
font-family: 'Taviraj', serif;
background-color: #f8f8f8;
color: #333;
}

.pricing-section h1 {
margin-bottom: 30px;
color: #333;
font-size: 2em;
.container {
max-width: 960px;
margin: 0 auto;
padding: 2rem;
}

.toggle-container {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 20px;
/* Hero Section */
.hero {
background-color: #222;
color: #fff;
padding: 4rem 0;
text-align: center;
}

.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
.hero h2 {
font-family: 'Yeseva One', serif;
font-size: 2.5rem;
margin-bottom: 1rem;
}

.switch input {
opacity: 0;
width: 0;
height: 0;
.hero p {
font-size: 1.2rem;
line-height: 1.6;
margin-bottom: 2rem;
}

.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .4s;
border-radius: 34px;
/* Toggle Button */
.toggle {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 3rem;
}

.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
transition: .4s;
border-radius: 50%;
.toggle span {
font-size: 1rem;
margin: 0 1rem;
}

input:checked + .slider {
background-color: #007bff;
.toggle button {
background-color: #ccc;
border: none;
border-radius: 2rem;
width: 4rem;
height: 2rem;
position: relative;
cursor: pointer;
}

input:checked + .slider:before {
transform: translateX(26px);
.toggle-slider {
background-color: #fff;
border-radius: 50%;
width: 1.5rem;
height: 1.5rem;
position: absolute;
left: 0.25rem;
top: 0.25rem;
transition: left 0.3s ease;
}

.toggle-label {
margin-left: 10px;
font-size: 1.2em;
color: #333;
.toggle button[aria-checked="true"] .toggle-slider {
left: 2.25rem;
}

.pricing-cards {
display: flex;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
/* Plans Section */
.plans {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
}

.card {
background-color: #f9f9f9;
border: 1px solid #ddd;
border-radius: 10px;
padding: 20px;
width: 300px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
transition: transform 0.3s;
.plan {
background-color: #fff;
border-radius: 0.5rem;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
padding: 2rem;
text-align: center;
}

.card:hover {
transform: translateY(-10px);
.plan h3 {
font-family: 'Yeseva One', serif;
font-size: 1.5rem;
margin-bottom: 1rem;
}

.card h2 {
margin-top: 0;
color: #555;
font-size: 1.5em;
.price {
display: flex;
align-items: baseline;
justify-content: center;
margin-bottom: 1.5rem;
}

.price {
font-size: 24px;
color: #333;
margin: 10px 0;
.price-value {
font-size: 2rem;
font-weight: bold;
}

.annual-price {
color: #777;
font-size: 20px;
.price-period {
font-size: 1rem;
color: #666;
margin-left: 0.5rem;
}

.features {
list-style-type: none;
padding: 0;
text-align: left;
color: #555;
list-style: none;
margin-bottom: 2rem;
}

.features li {
margin: 10px 0;
font-size: 1rem;
line-height: 1.6;
text-align: left;
margin-bottom: 0.5rem;
}

.features .unavailable {
color: #999;
}

.features i {
color: #28a745;
margin-right: 10px;
.features li::before {
content: "\2713"; /* Checkmark symbol */
color: #007bff;
margin-right: 0.5rem;
}

.btn {
display: inline-block;
padding: 10px 20px;
color: #fff;
background-color: #007bff;
border-radius: 5px;
text-decoration: none;
margin-top: 20px;
transition: background-color 0.3s;
.features .unavailable::before {
content: "\2717"; /* X symbol */
color: #999;
}

.btn:hover {
background-color: #0056b3;
.subscribe-button {
background-color: #007bff;
color: #fff;
border: none;
border-radius: 0.3rem;
padding: 0.8rem 1.5rem;
cursor: pointer;
transition: background-color 0.3s ease;
}

.subscribe-button:hover {
background-color: #0069d9;
}

.subscribe-button a {
color: inherit;
text-decoration: none;
}

/* Media Queries */
@media (max-width: 768px) {
.hero h2 {
font-size: 2rem;
}

.plans {
grid-template-columns: 1fr;
}
}
105 changes: 62 additions & 43 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,52 +1,71 @@
<!DOCTYPE html>
<html lang="pt">
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Planos e Preços</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Escolha seu plano ideal</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<section class="pricing-section">
<h1>Planos para todos os níveis de ambição</h1>
<div class="toggle-container">
<label class="switch">
<input type="checkbox" id="toggle-pricing">
<span class="slider"></span>
</label>
<span class="toggle-label">Anual</span>
<section class="hero">
<div class="container">
<div class="content">
<h2>Escolha seu plano ideal</h2>
<p>Encontre o plano que melhor se adapta às suas necessidades.</p>
<div class="toggle">
<span>Mensal</span>
<button type="button" role="switch" aria-checked="false" data-state="unchecked" id="plan-toggle">
<span class="toggle-slider"></span>
</button>
<span>Anual</span>
</div>
<div class="pricing-cards">
<div class="card">
<h2>Plano Newton</h2>
<p class="price monthly-price">R$19,90/mês</p>
<p class="price annual-price">R$199,90/ano (R$16,66/mês)</p>
<ul class="features">
<li><i class="fas fa-check"></i> Acesso às aulas já gravadas</li>
<li><i class="fas fa-check"></i> Acesso às listas de exercícios</li>
<li><i class="fas fa-check"></i> Acesso aos materiais de estudo</li>
</ul>
<a href="https://pay.hotmart.com/U75748946G?off=58n0up7d" class="btn monthly-price">Assinar Mensal</a>
<a href="https://pay.hotmart.com/U75748946G?off=g94u3qd9" class="btn annual-price">Assinar Anual</a>
</div>
<div class="plans" id="plans-container">
<div class="plan" data-plan="newton">
<div class="plan-content">
<h3>Plano Newton</h3>
<div class="price">
<span class="price-value">R$19,90</span>
<span class="price-period">/mês</span>
</div>
<div class="card">
<h2>Plano Einstein</h2>
<p class="price monthly-price">R$29,90/mês</p>
<p class="price annual-price">R$299,90/ano (R$24,99/mês)</p>
<ul class="features">
<li><i class="fas fa-check"></i> Tudo do plano Newton</li>
<li><i class="fas fa-check"></i> Acesso ao Grupo de Dúvidas do WhatsApp</li>
<li><i class="fas fa-check"></i> Acesso ao Drive de +1TB do Curso</li>
<li><i class="fas fa-check"></i> Atendimento personalizado</li>
<li><i class="fas fa-check"></i> Lives mensais com os alunos</li>
</ul>
<a href="https://pay.hotmart.com/U75748946G?off=nl9mm15d" class="btn monthly-price">Assinar Mensal</a>
<a href="https://pay.hotmart.com/U75748946G?off=3v7wxjqn" class="btn annual-price">Assinar Anual</a>
<ul class="features">
<li>Acesso a todas as aulas já gravadas</li>
<li>Acesso às listas de exercícios</li>
<li>Acesso aos materiais de estudo</li>
<li class="unavailable">Acesso ao Grupo de Dúvidas do WhatsApp</li>
<li class="unavailable">Acesso ao Drive de +1TB do Curso</li>
<li class="unavailable">Atendimento personalizado</li>
<li class="unavailable">Lives mensais com os alunos</li>
</ul>
<button class="subscribe-button">
<a href="#" rel="ugc">Assinar</a>
</button>
</div>
</div>
<div class="plan" data-plan="einstein">
<div class="plan-content">
<h3>Plano Einstein</h3>
<div class="price">
<span class="price-value">R$29,90</span>
<span class="price-period">/mês</span>
</div>
<ul class="features">
<li>Acesso a todas as aulas já gravadas</li>
<li>Acesso às listas de exercícios</li>
<li>Acesso aos materiais de estudo</li>
<li>Acesso ao Grupo de Dúvidas do WhatsApp</li>
<li>Acesso ao Drive de +1TB do Curso</li>
<li>Atendimento personalizado</li>
<li>Lives mensais com os alunos</li>
</ul>
<button class="subscribe-button">
<a href="#" rel="ugc">Assinar</a>
</button>
</div>
</div>
</section>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<script src="js/script.js"></script>
</div>
</div>
</section>
<script src="js/script.js"></script>
</body>
</html>
</html>
Loading

0 comments on commit 8210c69

Please sign in to comment.