230 lines
17 KiB
HTML
230 lines
17 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>join_our_community</title>
|
||
|
|
<link rel="stylesheet" href="style.css" />
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="nav-1-wrapper"><nav class="nav-1-navbar"><div class="nav-1-logo">Serenity Path</div><ul class="nav-1-nav-links"><li><a href="home.html">Home</a></li><li><a href="about.html">About</a></li><li><a href="contact.html">Contact</a></li><li><a href="services.html">Programs</a></li><li><a href="faq.html">FAQs</a></li><li class="nav-1-dropdown"><a href="#">Community<i class="fas fa-chevron-down"><i class="fas fa-chevron-down">🔽</i></i></a></li></ul><div class="nav-1-nav-actions"><button class="nav-1-btn nav-1-outline">Join Us</button><button class="nav-1-btn nav-1-solid">Begin Your Journey</button></div></nav></div>
|
||
|
|
<section id="welcome-benefits" style="padding: 4rem 1.5rem; max-width: 1200px; margin: 0 auto; text-align: center; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color: #333;">
|
||
|
|
<div style="margin-bottom: 3rem;">
|
||
|
|
<h2 style="font-size: 2.5rem; margin-bottom: 1rem; color: #6a0dad; letter-spacing: 0.05rem;">Welcome & Discover Inner Peace</h2>
|
||
|
|
<p style="font-size: 1.15rem; line-height: 1.8; max-width: 800px; margin: 0 auto 2rem;">
|
||
|
|
At [Organization Name], we believe in fostering a community where individuals can explore their spiritual journey, find balance, and cultivate a deeper connection to themselves and the universe.
|
||
|
|
</p>
|
||
|
|
<blockquote style="font-style: italic; font-size: 1.25rem; line-height: 1.6; max-width: 700px; margin: 0 auto; padding: 1.5rem; border-left: 5px solid #d4af37; background-color: #f9f9f9; color: #555;">
|
||
|
|
"The journey of a thousand miles begins with a single step."
|
||
|
|
<footer style="font-size: 0.9rem; margin-top: 0.8rem; display: block; color: #777;">— Ancient Wisdom</footer>
|
||
|
|
</blockquote>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div style="margin-top: 4rem;">
|
||
|
|
<h2 style="font-size: 2.2rem; margin-bottom: 2.5rem; color: #6a0dad; letter-spacing: 0.03rem;">Our Core Offerings</h2>
|
||
|
|
<div style="display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem;">
|
||
|
|
<div style="background-color: #ffffff; border-radius: 10px; padding: 2rem; box-shadow: 0 4px 15px rgba(0,0,0,0.08); width: calc(33% - 2rem); min-width: 280px; text-align: left; transition: transform 0.3s ease, box-shadow 0.3s ease;">
|
||
|
|
<div style="font-size: 3rem; color: #d4af37; margin-bottom: 1rem; text-align: center;">🧘</div>
|
||
|
|
<h3 style="font-size: 1.6rem; margin-bottom: 0.8rem; color: #555;">Guided Meditation Sessions</h3>
|
||
|
|
<p style="font-size: 1rem; line-height: 1.6; color: #666;">
|
||
|
|
Join our tranquil sessions designed to calm your mind, reduce stress, and enhance your focus. Suitable for all experience levels.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div style="background-color: #ffffff; border-radius: 10px; padding: 2rem; box-shadow: 0 4px 15px rgba(0,0,0,0.08); width: calc(33% - 2rem); min-width: 280px; text-align: left; transition: transform 0.3s ease, box-shadow 0.3s ease;">
|
||
|
|
<div style="font-size: 3rem; color: #d4af37; margin-bottom: 1rem; text-align: center;">🗣️</div>
|
||
|
|
<h3 style="font-size: 1.6rem; margin-bottom: 0.8rem; color: #555;">Enlightening Spiritual Talks</h3>
|
||
|
|
<p style="font-size: 1rem; line-height: 1.6; color: #666;">
|
||
|
|
Explore profound spiritual topics and teachings through insightful discussions led by experienced guides.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div style="background-color: #ffffff; border-radius: 10px; padding: 2rem; box-shadow: 0 4px 15px rgba(0,0,0,0.08); width: calc(33% - 2rem); min-width: 280px; text-align: left; transition: transform 0.3s ease, box-shadow 0.3s ease;">
|
||
|
|
<div style="font-size: 3rem; color: #d4af37; margin-bottom: 1rem; text-align: center;">🌳</div>
|
||
|
|
<h3 style="font-size: 1.6rem; margin-bottom: 0.8rem; color: #555;">Wellness & Retreat Programs</h3>
|
||
|
|
<p style="font-size: 1rem; line-height: 1.6; color: #666;">
|
||
|
|
Immerse yourself in nature-based retreats and holistic wellness programs designed for rejuvenation and deep spiritual growth.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div style="background-color: #ffffff; border-radius: 10px; padding: 2rem; box-shadow: 0 4px 15px rgba(0,0,0,0.08); width: calc(33% - 2rem); min-width: 280px; text-align: left; transition: transform 0.3s ease, box-shadow 0.3s ease;">
|
||
|
|
<div style="font-size: 3rem; color: #d4af37; margin-bottom: 1rem; text-align: center;">📚</div>
|
||
|
|
<h3 style="font-size: 1.6rem; margin-bottom: 0.8rem; color: #555;">Study Groups & Workshops</h3>
|
||
|
|
<p style="font-size: 1rem; line-height: 1.6; color: #666;">
|
||
|
|
Participate in interactive groups to delve deeper into spiritual texts, practices, and mindfulness techniques.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
<section id="registration-form" class="py-16 bg-light-soft text-center">
|
||
|
|
<div class="container mx-auto px-4">
|
||
|
|
<h2 class="text-3xl md:text-4xl font-calm text-gold-dark mb-6">Join Our Spiritual Journey</h2>
|
||
|
|
<p class="text-lg text-gray-700 max-w-2xl mx-auto mb-10">Register to receive updates, join our sessions, or simply connect with our community.</p>
|
||
|
|
|
||
|
|
<div class="max-w-md mx-auto bg-white p-8 shadow-lg rounded-lg">
|
||
|
|
<form action="#" method="POST" class="space-y-6">
|
||
|
|
<div>
|
||
|
|
<label for="reg-name" class="block text-left text-gray-800 font-semibold mb-2">Full Name</label>
|
||
|
|
<input type="text" id="reg-name" name="name" placeholder="Your Name" required class="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-lavender-light">
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<label for="reg-email" class="block text-left text-gray-800 font-semibold mb-2">Email Address</label>
|
||
|
|
<input type="email" id="reg-email" name="email" placeholder="you@example.com" required class="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-lavender-light">
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<label for="reg-interest" class="block text-left text-gray-800 font-semibold mb-2">What are you interested in?</label>
|
||
|
|
<select id="reg-interest" name="interest" class="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-lavender-light">
|
||
|
|
<option value="">Please Select</option>
|
||
|
|
<option value="newsletter">Newsletter Updates</option>
|
||
|
|
<option value="meditation">Meditation Sessions</option>
|
||
|
|
<option value="talks">Spiritual Talks</option>
|
||
|
|
<option value="retreats">Retreats & Workshops</option>
|
||
|
|
<option value="general">General Inquiry / Connect</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<label for="reg-message" class="block text-left text-gray-800 font-semibold mb-2">Your Message (Optional)</label>
|
||
|
|
<textarea id="reg-message" name="message" rows="4" placeholder="Share a brief message or question..." class="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-lavender-light resize-y"></textarea>
|
||
|
|
</div>
|
||
|
|
<button type="submit" class="w-full bg-gold-main text-white font-bold py-3 px-6 rounded-md hover:bg-gold-dark transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-gold-main focus:ring-offset-2">Register Now</button>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
<section class="membership-section">
|
||
|
|
<div class="container">
|
||
|
|
<h2 class="section-title">Membership Options</h2>
|
||
|
|
<p class="section-description">
|
||
|
|
Choose the path that resonates with your spiritual journey. Our memberships offer various levels of engagement and support for your growth.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<div class="membership-cards-wrapper">
|
||
|
|
|
||
|
|
<div class="membership-card">
|
||
|
|
<h3 class="card-title">Basic Seeker</h3>
|
||
|
|
<div class="card-price">
|
||
|
|
<span class="price-amount">$0</span><span class="price-period">/month</span>
|
||
|
|
</div>
|
||
|
|
<ul class="card-features">
|
||
|
|
<li>Access to foundational meditations</li>
|
||
|
|
<li>Weekly spiritual insights newsletter</li>
|
||
|
|
<li>Community forum access</li>
|
||
|
|
<li>Limited online resources</li>
|
||
|
|
</ul>
|
||
|
|
<button class="cta-button">Join for Free</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="membership-card featured-card">
|
||
|
|
<h3 class="card-title">Enlightened Path</h3>
|
||
|
|
<div class="card-price">
|
||
|
|
<span class="price-amount">$29</span><span class="price-period">/month</span>
|
||
|
|
</div>
|
||
|
|
<ul class="card-features">
|
||
|
|
<li>All Basic Seeker benefits</li>
|
||
|
|
<li>Unlimited access to meditation library</li>
|
||
|
|
<li>Monthly live spiritual talks</li>
|
||
|
|
<li>Exclusive workshop discounts</li>
|
||
|
|
<li>Access to advanced teachings</li>
|
||
|
|
</ul>
|
||
|
|
<button class="cta-button">Start Your Journey</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="membership-card">
|
||
|
|
<h3 class="card-title">Sacred Circle</h3>
|
||
|
|
<div class="card-price">
|
||
|
|
<span class="price-amount">$49</span><span class="price-period">/month</span>
|
||
|
|
</div>
|
||
|
|
<ul class="card-features">
|
||
|
|
<li>All Enlightened Path benefits</li>
|
||
|
|
<li>Personalized spiritual guidance session (1/year)</li>
|
||
|
|
<li>Early access to new content & events</li>
|
||
|
|
<li>Annual retreat priority booking</li>
|
||
|
|
<li>Exclusive member-only gatherings</li>
|
||
|
|
</ul>
|
||
|
|
<button class="cta-button">Become a Member</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
<footer class="site-footer">
|
||
|
|
<div class="container">
|
||
|
|
<p class="copyright-text">© 2023 Spiritual Community. All rights reserved.</p>
|
||
|
|
<nav class="footer-nav">
|
||
|
|
<a href="#privacy-policy" class="footer-link">Privacy Policy</a>
|
||
|
|
<span class="separator">|</span>
|
||
|
|
<a href="#terms-of-service" class="footer-link">Terms of Service</a>
|
||
|
|
</nav>
|
||
|
|
</div>
|
||
|
|
</footer>
|
||
|
|
<section class="contact-section">
|
||
|
|
<div class="container">
|
||
|
|
<h2 class="section-title">Get in Touch with Us</h2>
|
||
|
|
<p class="section-description">We're here to answer any questions you may have or to provide support. Please reach out to us.</p>
|
||
|
|
|
||
|
|
<div class="contact-grid">
|
||
|
|
<div class="contact-form-wrapper">
|
||
|
|
<h3 class="subsection-title">Send Us a Message</h3>
|
||
|
|
<form class="contact-form">
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="name">Your Name</label>
|
||
|
|
<input type="text" id="name" name="name" placeholder="Enter your name" required>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="email">Your Email</label>
|
||
|
|
<input type="email" id="email" name="email" placeholder="Enter your email" required>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="message">Your Message</label>
|
||
|
|
<textarea id="message" name="message" rows="6" placeholder="Type your message here..." required></textarea>
|
||
|
|
</div>
|
||
|
|
<button type="submit" class="btn btn-primary">Send Message</button>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="contact-info-wrapper">
|
||
|
|
<div class="contact-details">
|
||
|
|
<h3 class="subsection-title">Contact Information</h3>
|
||
|
|
<address class="contact-address">
|
||
|
|
<p><i class="icon-phone"></i> Phone: <a href="tel:+1234567890">+1 (234) 567-890</a></p>
|
||
|
|
<p><i class="icon-email"></i> Email: <a href="mailto:info@spiritualorg.org">info@spiritualorg.org</a></p>
|
||
|
|
<p><i class="icon-location"></i> Address: 123 Spirit Path, Serene City, SC 98765</p>
|
||
|
|
</address>
|
||
|
|
|
||
|
|
<div class="social-media">
|
||
|
|
<h4 class="sub-heading">Connect With Us</h4>
|
||
|
|
<ul class="social-links">
|
||
|
|
<li><a href="#" aria-label="Facebook"><i class="icon-facebook"></i> Facebook</a></li>
|
||
|
|
<li><a href="#" aria-label="Instagram"><i class="icon-instagram"></i> Instagram</a></li>
|
||
|
|
<li><a href="#" aria-label="Twitter"><i class="icon-twitter"></i> Twitter</a></li>
|
||
|
|
<li><a href="#" aria-label="YouTube"><i class="icon-youtube"></i> YouTube</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="location-map">
|
||
|
|
<h3 class="subsection-title">Our Location</h3>
|
||
|
|
<div class="map-placeholder">
|
||
|
|
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3153.220556272551!2d-122.41941558468165!3d37.77492977975971!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80858064b5e0c5d5%3A0x6b4c2b9a7f3f1f3a!2sSan%20Francisco%2C%20CA!5e0!3m2!1sen!2sus!4v1678901234567!5m2!1sen!2sus" width="100%" height="250" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade" aria-label="Location Map"></iframe>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="newsletter-subscription">
|
||
|
|
<h3 class="subsection-title">Subscribe to Our Newsletter</h3>
|
||
|
|
<p>Receive updates, spiritual insights, and event invitations directly to your inbox.</p>
|
||
|
|
<form class="newsletter-form">
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="newsletter-email" class="sr-only">Email for Newsletter</label>
|
||
|
|
<input type="email" id="newsletter-email" name="newsletter-email" placeholder="Your email address" required>
|
||
|
|
</div>
|
||
|
|
<button type="submit" class="btn btn-secondary">Subscribe</button>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
<div class="footer-1-wrapper"><section class="footer-1-section"><div class="footer-1-top"><div class="footer-1-brand"><h3 class="footer-1-logo">The Serenity Collective</h3><p class="footer-1-newsletter-text">Receive soulful insights, event updates, and spiritual wisdom directly in your inbox.</p><div class="footer-1-newsletter-form"><input type="email" placeholder="Your email address"></input><button class="footer-1-subscribe-btn">Connect</button></div><p class="footer-1-privacy-note"><span>By subscribing, you agree to our </span><a href="#">Privacy Policy</a><span> and consent to receive emails from The Serenity Collective.</span></p></div><div class="footer-1-columns"><div class="footer-1-column"><h4>Explore</h4><ul><li><a href="#">Our Teachings</a></li><li><a href="#">Meditation Guides</a></li><li><a href="#">Sacred Retreats</a></li><li><a href="#">Spiritual Talks</a></li><li><a href="#">Community Events</a></li></ul></div><div class="footer-1-column"><h4>About Us</h4><ul><li><a href="#">Our Mission</a></li><li><a href="#">Our Story</a></li><li><a href="#">The Founder</a></li><li><a href="#">Our Values</a></li><li><a href="#">Testimonials</a></li></ul></div><div class="footer-1-column footer-1-social"><h4>Connect with Us</h4><ul><li><i class="fab fa-facebook"></i><span>Facebook</span></li><li><i class="fab fa-instagram"></i><span>Instagram</span></li><li><i class="fab fa-x-twitter"></i><span>X</span></li><li><i class="fab fa-linkedin"></i><span>LinkedIn</span></li><li><i class="fab fa-youtube"></i><span>Youtube</span></li></ul></div></div></div><div class="footer-1-bottom"><p>© 2023 The Serenity Collective. All rights reserved.</p><ul class="footer-1-links"><li><a href="#">Privacy Policy</a></li><li><a href="#">Terms of Service</a></li><li><a href="#">Cookies Settings</a></li></ul></div></section></div>
|
||
|
|
</body>
|
||
|
|
</html>
|