<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Yoga for Kids - Fun & Mindful Movement</title>
<style>
body {
font-family: 'Comic Sans MS', Arial, sans-serif;
margin: 0;
padding: 0;
background: #f0f8ff;
color: #333;
line-height: 1.6;
}
header {
background: linear-gradient(to right, #ffeb3b, #4caf50);
color: white;
text-align: center;
padding: 2rem;
}
header h1 { font-size: 2.5rem; margin: 0; }
header p { font-size: 1.2rem; }
nav {
background: #2196f3;
padding: 1rem;
text-align: center;
}
nav a {
color: white;
margin: 0 1.5rem;
text-decoration: none;
font-size: 1.1rem;
}
nav a:hover { text-decoration: underline; }
section {
max-width: 900px;
margin: 2rem auto;
padding: 0 1rem;
}
h2 { color: #e91e63; text-align: center; }
.benefits, .classes {
display: flex;
flex-wrap: wrap;
gap: 1rem;
justify-content: center;
}
.benefit-card, .class-card {
background: #fff;
border: 2px solid #ffeb3b;
border-radius: 10px;
padding: 1rem;
width: 250px;
text-align: center;
}
.benefit-card img, .class-card img {
width: 100%;
height: 150px;
object-fit: cover;
border-radius: 5px;
}
#pose-of-day {
background: #e1bee7;
padding: 1rem;
border-radius: 10px;
text-align: center;
margin: 1rem auto;
max-width: 500px;
}
#pose-of-day button {
background: #4caf50;
color: white;
border: none;
padding: 0.5rem 1rem;
border-radius: 5px;
cursor: pointer;
font-size: 1rem;
}
form {
display: flex;
flex-direction: column;
gap: 0.5rem;
max-width: 500px;
margin: 0 auto;
}
input, textarea {
padding: 0.5rem;
border: 1px solid #2196f3;
border-radius: 5px;
}
button[type="submit"] {
background: #e91e63;
color: white;
border: none;
padding: 0.7rem;
border-radius: 5px;
cursor: pointer;
}
footer {
background: #333;
color: white;
text-align: center;
padding: 1rem;
margin-top: 2rem;
}
@media (max-width: 600px) {
header h1 { font-size: 1.8rem; }
nav a { display: block; margin: 0.5rem 0; }
}
</style>
</head>
<body>
<header>
<h1>Yoga for Kids</h1>
<p>Fun, Mindful Movement for Happy Kids!</p>
</header>
<nav>
<a href="#about">About</a>
<a href="#benefits">Benefits</a>
<a href="#classes">Classes</a>
<a href="#contact">Contact</a>
</nav>
<section id="about">
<h2>Welcome to Yoga for Kids!</h2>
<p>Our program brings yoga to children aged 4-12 in a playful, engaging way. Through games, stories, and poses, we help kids build strength, focus, and confidence while having a blast!</p>
</section>
<section id="benefits">
<h2>Why Yoga for Kids?</h2>
<div class="benefits">
<div class="benefit-card">
<img src="https://via.placeholder.com/250x150?text=Focus" alt="Focus">
<h3>Boosts Focus</h3>
<p>Yoga helps kids improve concentration and stay calm.</p>
</div>
<div class="benefit-card">
<img src="https://via.placeholder.com/250x150?text=Strength" alt="Strength">
<h3>Builds Strength</h3>
<p>Poses strengthen muscles and improve flexibility.</p>
</div>
<div class="benefit-card">
<img src="https://via.placeholder.com/250x150?text=Fun" alt="Fun">
<h3>Super Fun!</h3>
<p>Kids love our games and storytelling approach.</p>
</div>
</div>
</section>
<section id="pose-of-day">
<h2>Pose of the Day</h2>
<p id="pose-text">Click the button to discover today's fun yoga pose!</p>
<button onclick="showPose()">Get Pose!</button>
</section>
<section id="classes">
<h2>Our Classes</h2>
<div class="classes">
<div class="class-card">
<img src="https://via.placeholder.com/250x150?text=Tiny+Yogis" alt="Tiny Yogis">
<h3>Tiny Yogis (4-6)</h3>
<p>Fun poses and games for little ones. 30 mins, $10/session.</p>
</div>
<div class="class-card">
<img src="https://via.placeholder.com/250x150?text=Junior+Yogis" alt="Junior Yogis">
<h3>Junior Yogis (7-9)</h3>
<p>Build strength and focus. 45 mins, $12/session.</p>
</div>
<div class="class-card">
<img src="https://via.placeholder.com/250x150?text=Tween+Yogis" alt="Tween Yogis">
<h3>Tween Yogis (10-12)</h3>
<p>Mindfulness and teamwork. 1 hr, $15/session.</p>
</div>
</div>
</section>
<section id="contact">
<h2>Get in Touch</h2>
<form>
<input type="text" name="name" placeholder="Your Name" required>
<input type="email" name="email" placeholder="Your Email" required>
<textarea name="message" placeholder="Your Message" rows="4" required></textarea>
<button type="submit">Send Message</button>
</form>
</section>
<footer>
<p>Yoga for Kids © 2025 | Email: info@yogaforkids.com | Follow us on Twitter: @YogaKidsFun</p>
</footer>
<script>
// Smooth scrolling for nav links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({ behavior: 'smooth' });
});
});
// Pose of the Day feature
const poses = [
"Tree Pose: Stand tall like a tree and balance!",
"Cat-Cow: Meow and moo while stretching your back!",
"Downward Dog: Bark like a puppy in this fun stretch!",
"Butterfly Pose: Flap your wings like a butterfly!"
];
function showPose() {
const randomPose = poses[Math.floor(Math.random() * poses.length)];
document.getElementById('pose-text').textContent = randomPose;
}
</script>
</body>
</html>