Guided Subscription Process HTML CSS and JavaScript
- HTML CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Guided Subsription Process</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h2>Start Your Journey With Us</h2>
<p class="benefits">
🚀 Get exclusive content, latest updates, member access, and more!
</p>
<div class="progress-bar">
<span id="bar1" class="active"></span>
<span id="bar2"></span>
<span id="bar3"></span>
</div>
<div class="loader" id="loader"></div>
<div class="step active" id="step1">
<div class="form-group">
<label for="name">Enter Your Name</label>
<input type="text" id="name" placeholder="e.g., Joseph Vijay" />
</div>
<div class="form-group">
<label for="plan">Select a Plan</label>
<select id="plan" onchange="showPlanInfo()">
<option value="basic">Basic - Free</option>
<option value="pro">Pro - $5.99/mo</option>
<option value="premium">Premium - $11.99/mo</option>
</select>
<p id="plan-info" class="plan-info"></p>
</div>
<div class="buttons">
<button onclick="nextStep(1)">Next</button>
</div>
</div>
<div class="step" id="step2">
<div class="form-group">
<label for="email">Email Address</label>
<input type="email" id="email" placeholder="e.g., john@example.com" />
</div>
<div class="buttons">
<button onclick="prevStep(2)">Back</button>
<button onclick="nextStep(2)">Next</button>
</div>
</div>
<div class="step" id="step3">
<div class="thank-you">
<p>🎉 Thanks for Connecting With Us!</p>
<p>You’re officially part of the community — expect an email from us shortly.</p>
</div>
<div class="buttons">
<button onclick="prevStep(3)">Back</button>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>- CSS CODE
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Inter', sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
/*background: linear-gradient(135deg, #d4fc79, #96e6a1);*/
background: linear-gradient(135deg, #041cfa, #96e6a1);
animation: gradientShift 10s ease infinite;
background-size: 200% 200%;
}
@keyframes gradientShift {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.container {
/*background: rgba(255, 255, 255, 0.15);*/
background: rgba(255, 255, 255, 0.15);
border-radius: 20px;
padding: 2.5rem;
box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
width: 100%;
max-width: 650px;
animation: fadeIn 1.2s ease;
}
.progress-bar {
display: flex;
justify-content: space-between;
margin-bottom: 2rem;
}
.progress-bar span {
width: 100%;
height: 8px;
margin: 0 5px;
border-radius: 4px;
background: #e5e7eb;
transition: background 0.4s ease;
}
.progress-bar span.active {
/*background: linear-gradient(135deg, #7c3aed, #a78bfa);*/
background: greenyellow;
}
.loader {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 6px solid #f3f3f3;
border-top: 6px solid #7c3aed;
border-radius: 50%;
width: 50px;
height: 50px;
animation: spin 1s linear infinite;
z-index: 1000;
}
@keyframes spin {
0% {
transform: translate(-50%, -50%) rotate(0deg);
}
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}
h2 {
text-align: center;
font-weight: 600;
color: #10294a;
margin-bottom: 1rem;
}
.benefits {
text-align: center;
margin-bottom: 2rem;
font-size: 1rem;
color: black;
}
.step {
display: none;
}
.step.active {
display: block;
animation: fadeIn 0.6s ease;
}
.form-group {
margin-bottom: 1.5rem;
}
label {
display: block;
margin-bottom: 0.6rem;
color: #111827;
font-weight: 500;
}
input[type='text'],
input[type='email'],
select {
width: 100%;
padding: 0.8rem;
border: 1px solid #e5e7eb;
border-radius: 12px;
background: rgba(255, 255, 255, 0.8);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
}
input:focus,
select:focus {
border-color: #7c3aed;
outline: none;
box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.3);
}
.buttons {
display: flex;
justify-content: space-between;
margin-top: 2rem;
}
.buttons button {
padding: 0.75rem 1.8rem;
border: none;
border-radius: 12px;
/*background: linear-gradient(135deg, #7c3aed, #a78bfa);*/
background: linear-gradient(135deg, #0a21f0, #a78bfa);
color: #fff;
font-weight: 500;
cursor: pointer;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.buttons button:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(124, 58, 237, 0.4);
}
.thank-you {
text-align: center;
font-size: 1.3rem;
color: #1f2937;
}
.plan-info {
background: linear-gradient(90deg, #e0e7ff, #ede9fe);
border-left: 5px solid #7c3aed;
padding: 1rem;
margin-top: 1rem;
border-radius: 8px;
font-size: 0.95rem;
color: #4b5563;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
}
@media (max-width: 640px) {
.container {
padding: 1.8rem;
}
.buttons {
flex-direction: column;
gap: 1rem;
}
}- JavaScript CODE
function updProgress(step) {
for (let i = 1; i <= 3; i++) {
const bar = document.getElementById(`bar${i}`);
if (i <= step) {
bar.classList.add("active");
} else {
bar.classList.remove("active");
}
}
}
function showLoader(callback) {
const loader = document.getElementById("loader");
loader.style.display = "block";
setTimeout(() => {
loader.style.display = "none";
callback();
}, 1000);
}
function nextStep(currentStep) {
const name = document.getElementById("name").value.trim();
const email = document.getElementById("email").value.trim();
if (currentStep === 1 && name === "") {
alert("Please enter your name");
return;
}
if (currentStep === 2 && email === "") {
alert("Please enter your email");
return;
}
showLoader(() => {
document.getElementById(`step${currentStep}`).classList.remove("active");
document.getElementById(`step${currentStep + 1}`).classList.add("active");
updProgress(currentStep + 1);
gsap.fromTo(`#step${currentStep + 1}`, { opacity: 0, y: 20 }, { opacity: 1, y: 0, duration: 0.6 });
});
}
function prevStep(currentStep) {
showLoader(() => {
document.getElementById(`step${currentStep}`).classList.remove("active");
document.getElementById(`step${currentStep - 1}`).classList.add("active");
updProgress(currentStep - 1);
gsap.fromTo(`#step${currentStep - 1}`, { opacity: 0, y: 20 }, { opacity: 1, y: 0, duration: 0.6 });
});
}
function planInfo() {
const info = document.getElementById("plan-info");
const selected = document.getElementById("plan").value;
if (selected === "basic") {
info.textContent = "The Basic plan provides free entry-level access with the key features you need to begin.";
} else if (selected === "pro") {
info.textContent = "The Pro plan is ideal for professionals seeking deeper analytics and enhanced performance tools.";
} else if (selected === "premium") {
info.textContent = "Enjoy unlimited access, premium features, and dedicated priority support with the Premium plan..";
}
}
planInfo();