.

Geovannisz · Jun 4, 2024 · f0d3298 · f0d3298
1 parent 2bf018e
commit f0d3298
Show file tree

Hide file tree

Showing 3 changed files with 125 additions and 26 deletions.
diff --git a/css/styles.css b/css/styles.css
@@ -1,25 +1,85 @@
 body {
-    font-family: Arial, sans-serif;
+    font-family: 'Roboto', sans-serif;
     background-color: #f4f4f4;
     margin: 0;
     padding: 0;
 }
 
 .pricing-section {
     text-align: center;
-    padding: 50px;
+    padding: 50px 20px;
     background-color: #fff;
 }
 
 .pricing-section h1 {
     margin-bottom: 30px;
     color: #333;
+    font-size: 2em;
+}
+
+.toggle-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 20px;
+}
+
+.switch {
+    position: relative;
+    display: inline-block;
+    width: 60px;
+    height: 34px;
+}
+
+.switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+.slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ccc;
+    transition: .4s;
+    border-radius: 34px;
+}
+
+.slider:before {
+    position: absolute;
+    content: "";
+    height: 26px;
+    width: 26px;
+    left: 4px;
+    bottom: 4px;
+    background-color: white;
+    transition: .4s;
+    border-radius: 50%;
+}
+
+input:checked + .slider {
+    background-color: #007bff;
+}
+
+input:checked + .slider:before {
+    transform: translateX(26px);
+}
+
+.toggle-label {
+    margin-left: 10px;
+    font-size: 1.2em;
+    color: #333;
 }
 
 .pricing-cards {
     display: flex;
     justify-content: center;
     gap: 20px;
+    flex-wrap: wrap;
 }
 
 .card {
@@ -29,21 +89,28 @@ body {
     padding: 20px;
     width: 300px;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    transition: transform 0.3s;
+}
+
+.card:hover {
+    transform: translateY(-10px);
 }
 
 .card h2 {
     margin-top: 0;
     color: #555;
+    font-size: 1.5em;
 }
 
 .price {
     font-size: 24px;
     color: #333;
+    margin: 10px 0;
 }
 
 .annual-price {
     color: #777;
-    text-decoration: line-through;
+    font-size: 20px;
 }
 
 .features {
@@ -57,6 +124,11 @@ body {
     margin: 10px 0;
 }
 
+.features i {
+    color: #28a745;
+    margin-right: 10px;
+}
+
 .btn {
     display: inline-block;
     padding: 10px 20px;
@@ -65,6 +137,7 @@ body {
     border-radius: 5px;
     text-decoration: none;
     margin-top: 20px;
+    transition: background-color 0.3s;
 }
 
 .btn:hover {

diff --git a/index.html b/index.html
@@ -4,52 +4,62 @@
     <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">
 </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>
+        </div>
         <div class="pricing-cards">
             <div class="card">
                 <h2>Essential</h2>
-                <p class="price">$12.95/mês</p>
-                <p class="annual-price">$155.40/ano</p>
+                <p class="price monthly-price">R$12.95/mês</p>
+                <p class="price annual-price">R$155.40/ano (R$12.95/mês)</p>
                 <ul class="features">
-                    <li>2 gráficos por aba</li>
-                    <li>5 indicadores por gráfico</li>
-                    <li>10K barras do histórico</li>
-                    <li>20 alertas de preço</li>
-                    <li>Sem anúncios</li>
+                    <li><i class="fas fa-check"></i> 2 gráficos por aba</li>
+                    <li><i class="fas fa-check"></i> 5 indicadores por gráfico</li>
+                    <li><i class="fas fa-check"></i> 10K barras do histórico</li>
+                    <li><i class="fas fa-check"></i> 20 alertas de preço</li>
+                    <li><i class="fas fa-check"></i> Sem anúncios</li>
                 </ul>
                 <a href="#" class="btn">Teste grátis por 30 dias</a>
             </div>
             <div class="card">
                 <h2>Plus</h2>
-                <p class="price">$24.95/mês</p>
-                <p class="annual-price">$299.40/ano</p>
+                <p class="price monthly-price">R$24.95/mês</p>
+                <p class="price annual-price">R$299.40/ano (R$24.95/mês)</p>
                 <ul class="features">
-                    <li>4 gráficos por aba</li>
-                    <li>10 indicadores por gráfico</li>
-                    <li>10K barras do histórico</li>
-                    <li>100 alertas de preço</li>
-                    <li>Sem anúncios</li>
+                    <li><i class="fas fa-check"></i> 4 gráficos por aba</li>
+                    <li><i class="fas fa-check"></i> 10 indicadores por gráfico</li>
+                    <li><i class="fas fa-check"></i> 10K barras do histórico</li>
+                    <li><i class="fas fa-check"></i> 100 alertas de preço</li>
+                    <li><i class="fas fa-check"></i> Sem anúncios</li>
                 </ul>
                 <a href="#" class="btn">Teste grátis por 30 dias</a>
             </div>
             <div class="card">
                 <h2>Premium</h2>
-                <p class="price">$49.95/mês</p>
-                <p class="annual-price">$599.40/ano</p>
+                <p class="price monthly-price">R$49.95/mês</p>
+                <p class="price annual-price">R$599.40/ano (R$49.95/mês)</p>
                 <ul class="features">
-                    <li>8 gráficos por aba</li>
-                    <li>25 indicadores por gráfico</li>
-                    <li>20K barras do histórico</li>
-                    <li>400 alertas de preço</li>
-                    <li>Sem anúncios</li>
+                    <li><i class="fas fa-check"></i> 8 gráficos por aba</li>
+                    <li><i class="fas fa-check"></i> 25 indicadores por gráfico</li>
+                    <li><i class="fas fa-check"></i> 20K barras do histórico</li>
+                    <li><i class="fas fa-check"></i> 400 alertas de preço</li>
+                    <li><i class="fas fa-check"></i> Sem anúncios</li>
                 </ul>
                 <a href="#" class="btn">Teste grátis por 30 dias</a>
             </div>
         </div>
     </section>
+    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
+    <script src="js/script.js"></script>
 </body>
 </html>
diff --git a/js/scripts.js b/js/scripts.js
@@ -1,3 +1,19 @@
-$(document).ready(function() {
-    // Adicione qualquer funcionalidade JavaScript necessária aqui
+document.addEventListener('DOMContentLoaded', function() {
+    const toggle = document.getElementById('toggle-pricing');
+    const monthlyPrices = document.querySelectorAll('.monthly-price');
+    const annualPrices = document.querySelectorAll('.annual-price');
+
+    toggle.addEventListener('change', function() {
+        if (this.checked) {
+            monthlyPrices.forEach(price => price.style.display = 'none');
+            annualPrices.forEach(price => price.style.display = 'block');
+        } else {
+            monthlyPrices.forEach(price => price.style.display = 'block');
+            annualPrices.forEach(price => price.style.display = 'none');
+        }
+    });
+
+    // Initialize with monthly prices displayed
+    monthlyPrices.forEach(price => price.style.display = 'block');
+    annualPrices.forEach(price => price.style.display = 'none');
 });