<![CDATA[<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Pricing Toggle | Learn With Arshyan</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: linear-gradient(145deg, #f3f3f3, #e0e0e0);
font-family: 'Segoe UI', sans-serif;
color: #333;
}
/* Wrapper */
.pricing-wrapper {
padding: 80px 20px;
text-align: center;
}
.heading {
font-size: 36px;
color: #444;
margin-bottom: 60px;
}
/* Toggle Switch */
.toggle-container {
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
margin-bottom: 40px;
font-size: 18px;
color: #333;
}
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 30px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
background-color: #ccc;
border-radius: 30px;
top: 0;
left: 0;
right: 0;
bottom: 0;
transition: 0.4s;
}
.slider:before {
content: "";
position: absolute;
height: 22px;
width: 22px;
left: 4px;
bottom: 4px;
background-color: white;
transition: 0.4s;
border-radius: 50%;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
input:checked + .slider {
background-color: #00bcd4;
}
input:checked + .slider:before {
transform: translateX(30px);
}
/* Pricing Cards */
.pricing-container {
display: flex;
gap: 30px;
flex-wrap: wrap;
justify-content: center;
}
.card {
background: #f1f1f1;
border-radius: 25px;
padding: 40px 30px;
width: 300px;
box-shadow: 9px 9px 16px #cfcfcf, -9px -9px 16px #ffffff;
transition: all 0.3s ease;
position: relative;
}
.card:hover {
transform: translateY(-10px);
box-shadow: inset 5px 5px 12px #cccccc, inset -5px -5px 12px #ffffff;
}
.plan {
font-size: 24px;
color: #1976d2;
margin-bottom: 15px;
}
.price {
font-size: 40px;
font-weight: bold;
color: #111;
margin-bottom: 25px;
}
.price span {
font-size: 16px;
color: #777;
}
.features {
list-style: none;
text-align: left;
margin-bottom: 30px;
}
.features li {
margin: 10px 0;
font-size: 16px;
color: #555;
}
.features i {
color: #00bcd4;
margin-right: 10px;
}
/* Button */
.btn {
display: inline-block;
padding: 12px 30px;
background: #00bcd4;
color: #fff;
border-radius: 30px;
text-decoration: none;
font-weight: bold;
transition: 0.3s ease;
box-shadow: 0 8px 20px rgba(0, 188, 212, 0.2);
}
.btn:hover {
background: #028ba1;
}
/* Featured Plan */
.featured {
background: #e0f7fa;
box-shadow: 12px 12px 24px #bebebe, -12px -12px 24px #ffffff;
}
/* Responsive */
@media (max-width: 768px) {
.pricing-container {
flex-direction: column;
align-items: center;
}
}
</style>
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
</head>
<body>
<section class="pricing-wrapper">
<h1 class="heading">Our Pricing Plans</h1>
<!-- Toggle Switch -->
<div class="toggle-container">
<span>Monthly</span>
<label class="switch">
<input type="checkbox" id="billing-toggle">
<span class="slider"></span>
</label>
<span>Yearly</span>
</div>
<!-- Pricing Cards -->
<div class="pricing-container">
<div class="card">
<h2 class="plan">Starter</h2>
<div class='code-block code-block-2' style='margin: 8px 0; clear: both;'>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2094722033678002"
crossorigin="anonymous"></script>
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-2094722033678002"
data-ad-slot="2248279416"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></div>
<p class="price"><span class="currency">$</span><span class="amount" data-month="9" data-year="90">9</span><span class="duration">/mo</span></p>
<ul class="features">
<li><i class="fas fa-check-circle"></i> Single Website</li>
<li><i class="fas fa-check-circle"></i> 10 GB Storage</li>
<li><i class="fas fa-check-circle"></i> Community Support</li>
</ul>
<a href="#" class="btn">Get Started</a>
</div>
<div class="card featured">
<h2 class="plan">Professional</h2>
<p class="price"><span class="currency">$</span><span class="amount" data-month="19" data-year="190">19</span><span class="duration">/mo</span></p>
<ul class="features">
<li><i class="fas fa-check-circle"></i> Up to 10 Websites</li>
<li><i class="fas fa-check-circle"></i> 100 GB Storage</li>
<li><i class="fas fa-check-circle"></i> Email Support</li>
</ul>
<a href="#" class="btn">Choose Plan</a>
</div>
<div class="card">
<h2 class="plan">Enterprise</h2>
<p class="price"><span class="currency">$</span><span class="amount" data-month="29" data-year="290">29</span><span class="duration">/mo</span></p>
<ul class="features">
<li><i class="fas fa-check-circle"></i> Unlimited Websites</li>
<li><i class="fas fa-check-circle"></i> 1 TB Storage</li>
<li><i class="fas fa-check-circle"></i> 24/7 Priority Support</li>
</ul>
<a href="#" class="btn">Go Premium</a>
</div>
</div>
</section>
<script>
const toggle = document.getElementById('billing-toggle');
const amounts = document.querySelectorAll('.amount');
const durations = document.querySelectorAll('.duration');
toggle.addEventListener('change', () => {
const yearly = toggle.checked;
amounts.forEach(amount => {
amount.textContent = yearly ? amount.dataset.year : amount.dataset.month;
});
durations.forEach(duration => {
duration.textContent = yearly ? '/yr' : '/mo';
});
});
</script>
</body>
</html>
]]>
