Create a page about Vishnu and Shiva, the divine masculine in tantra and the kama sutra.
153b883
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Divine Masculine - Vishnu and Shiva</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Raleway:wght@300;400;500;600&display=swap'); | |
| body { | |
| font-family: 'Raleway', sans-serif; | |
| } | |
| .heading-font { | |
| font-family: 'Playfair Display', serif; | |
| } | |
| .deity-card { | |
| transition: all 0.3s ease; | |
| } | |
| .deity-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .chapter-section { | |
| scroll-margin-top: 80px; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gradient-to-br from-blue-50 to-indigo-50"> | |
| <!-- Navigation --> | |
| <nav class="fixed w-full bg-white bg-opacity-90 backdrop-blur-sm shadow-sm z-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <i data-feather="heart" class="text-blue-500"></i> | |
| <span class="ml-2 text-xl font-bold heading-font text-gray-800">Sacred Union</span> | |
| </div> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-8"> | |
| <a href="index.html#positions" class="text-gray-600 hover:text-blue-600 font-medium">Positions</a> | |
| <a href="index.html#tantra" class="text-gray-600 hover:text-blue-600 font-medium">Tantra</a> | |
| <a href="index.html#history" class="text-gray-600 hover:text-blue-600 font-medium">History</a> | |
| <a href="index.html#philosophy" class="text-gray-600 hover:text-blue-600 font-medium">Philosophy</a> | |
| <a href="index.html#guide" class="text-gray-600 hover:text-blue-600 font-medium">Guide</a> | |
| <a href="kali.html" class="text-gray-600 hover:text-blue-600 font-medium">Kali</a> | |
| <a href="divinemasculine.html" class="text-gray-600 hover:text-blue-600 font-medium">Divine Masculine</a> | |
| </div> | |
| <div class="flex items-center md:hidden"> | |
| <button id="mobile-menu-button" class="text-gray-500 hover:text-gray-700"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div id="mobile-menu" class="hidden md:hidden bg-white"> | |
| <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> | |
| <a href="index.html#positions" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50">Positions</a> | |
| <a href="index.html#tantra" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50">Tantra</a> | |
| <a href="index.html#history" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50">History</a> | |
| <a href="index.html#philosophy" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50">Philosophy</a> | |
| <a href="index.html#guide" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50">Guide</a> | |
| <a href="kali.html" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50">Kali</a> | |
| <a href="divinemasculine.html" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50">Divine Masculine</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <div id="hero" class="relative pt-24 pb-20 px-4 sm:px-6 lg:px-8"> | |
| <div class="absolute inset-0 z-0" id="hero-bg"></div> | |
| <div class="max-w-7xl mx-auto relative z-10"> | |
| <div class="text-center"> | |
| <h1 class="text-4xl md:text-6xl font-bold heading-font text-gray-900 mb-6"> | |
| Vishnu and Shiva: Divine Masculine | |
| </h1> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto mb-10"> | |
| Exploring the cosmic masculine energies in tantric traditions and the Kama Sutra through the lens of Vishnu and Shiva | |
| </p> | |
| <div class="flex justify-center space-x-4"> | |
| <a href="#vishnu" class="bg-blue-600 text-white px-6 py-3 rounded-full font-medium hover:bg-blue-700 transition duration-300"> | |
| Lord Vishnu | |
| </a> | |
| <a href="#shiva" class="border-2 border-blue-600 text-blue-600 px-6 py-3 rounded-full font-medium hover:bg-blue-50 transition duration-300"> | |
| Lord Shiva | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16"> | |
| <!-- Introduction Section --> | |
| <section id="introduction" class="chapter-section mb-20"> | |
| <div class="bg-white rounded-2xl shadow-lg p-8"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl md:text-4xl font-bold heading-font text-gray-900 mb-4">Cosmic Masculine Energies</h2> | |
| <p class="text-gray-600 max-w-3xl mx-auto"> | |
| In Hindu philosophy and tantric traditions, Vishnu and Shiva represent complementary aspects of the divine masculine - preservation and transformation. Understanding these energies enhances intimate connection and spiritual growth. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"> | |
| <div> | |
| <h3 class="text-2xl font-bold heading-font text-gray-900 mb-4">The Dual Nature of Masculine Energy</h3> | |
| <p class="text-gray-600 mb-4"> | |
| The divine masculine in tantric practice encompasses both the nurturing, stabilizing energy of Vishnu and the transformative, destructive energy of Shiva. These forces work in harmony to create balance in intimate relationships. | |
| </p> | |
| <p class="text-gray-600 mb-4"> | |
| In the context of sacred sexuality, these energies manifest as the ability to provide stability and safety (Vishnu) while also embracing change and transformation (Shiva). Both are essential for deep spiritual intimacy. | |
| </p> | |
| <p class="text-gray-600"> | |
| The Kama Sutra recognizes these energies in its descriptions of different masculine approaches to love and intimacy, from the gentle and nurturing to the passionate and transformative. | |
| </p> | |
| </div> | |
| <div class="bg-gradient-to-br from-blue-500 to-indigo-600 rounded-xl p-8 text-white"> | |
| <div class="text-center"> | |
| <i data-feather="users" class="w-16 h-16 mx-auto mb-4"></i> | |
| <h4 class="text-2xl font-bold heading-font mb-2">Unity of Opposites</h4> | |
| <p class="opacity-90"> | |
| True masculine power lies in the integration of Vishnu's preservation and Shiva's transformation, creating a dynamic balance that supports both stability and growth in intimate relationships. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Vishnu Section --> | |
| <section id="vishnu" class="chapter-section mb-20"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold heading-font text-gray-900 mb-4">Lord Vishnu: The Preserver</h2> | |
| <p class="text-gray-600 max-w-3xl mx-auto"> | |
| Vishnu represents the nurturing, protective, and stabilizing aspects of masculine energy in tantric practice and intimate relationships. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-12"> | |
| <div class="bg-white rounded-2xl shadow-lg p-8"> | |
| <h3 class="text-2xl font-bold heading-font text-gray-900 mb-6">Vishnu's Attributes in Sacred Union</h3> | |
| <ul class="space-y-6"> | |
| <li class="flex"> | |
| <div class="flex-shrink-0"> | |
| <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center"> | |
| <i data-feather="shield" class="text-blue-600 w-5 h-5"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="font-bold text-gray-900">Protection</h4> | |
| <p class="text-gray-600 mt-1"> | |
| Creating a safe and secure environment for intimate exploration and vulnerability. | |
| </p> | |
| </div> | |
| </li> | |
| <li class="flex"> | |
| <div class="flex-shrink-0"> | |
| <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center"> | |
| <i data-feather="heart" class="text-indigo-600 w-5 h-5"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="font-bold text-gray-900">Nurturing</h4> | |
| <p class="text-gray-600 mt-1"> | |
| Providing emotional support and care that allows partners to feel cherished and valued. | |
| </p> | |
| </div> | |
| </li> | |
| <li class="flex"> | |
| <div class="flex-shrink-0"> | |
| <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center"> | |
| <i data-feather="anchor" class="text-blue-600 w-5 h-5"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="font-bold text-gray-900">Stability</h4> | |
| <p class="text-gray-600 mt-1"> | |
| Maintaining consistency and reliability in intimate relationships, creating a foundation for deeper connection. | |
| </p> | |
| </div> | |
| </li> | |
| <li class="flex"> | |
| <div class="flex-shrink-0"> | |
| <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center"> | |
| <i data-feather="refresh-cw" class="text-indigo-600 w-5 h-5"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="font-bold text-gray-900">Restoration</h4> | |
| <p class="text-gray-600 mt-1"> | |
| Helping to heal and restore balance when relationships face challenges or disruptions. | |
| </p> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="bg-gradient-to-br from-blue-500 to-indigo-600 rounded-2xl shadow-lg p-8 text-white"> | |
| <h3 class="text-2xl font-bold heading-font mb-6">Vishnu in Tantric Practice</h3> | |
| <div class="space-y-6"> | |
| <div> | |
| <h4 class="font-bold mb-2">The Steady Presence</h4> | |
| <p class="opacity-90"> | |
| Embodying Vishnu's energy means being a reliable and grounded partner who creates a stable foundation for intimate exploration. | |
| </p> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-2">Nurturing Touch</h4> | |
| <p class="opacity-90"> | |
| Using gentle, caring touch that communicates safety and unconditional acceptance to your partner. | |
| </p> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-2">Patient Guidance</h4> | |
| <p class="opacity-90"> | |
| Leading with wisdom and patience, allowing relationships to develop naturally without force or pressure. | |
| </p> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-2">Protective Energy</h4> | |
| <p class="opacity-90"> | |
| Creating boundaries and safe spaces that allow for vulnerable and authentic intimate expression. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Shiva Section --> | |
| <section id="shiva" class="chapter-section mb-20"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold heading-font text-gray-900 mb-4">Lord Shiva: The Transformer</h2> | |
| <p class="text-gray-600 max-w-3xl mx-auto"> | |
| Shiva embodies the transformative, passionate, and liberating aspects of masculine energy in tantric practice and intimate relationships. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-12"> | |
| <div class="bg-gradient-to-br from-purple-500 to-indigo-700 rounded-2xl shadow-lg p-8 text-white"> | |
| <h3 class="text-2xl font-bold heading-font mb-6">Shiva's Attributes in Sacred Union</h3> | |
| <div class="space-y-6"> | |
| <div> | |
| <h4 class="font-bold mb-2">Destruction of Ego</h4> | |
| <p class="opacity-90"> | |
| Breaking down barriers and false personas that prevent authentic intimate connection. | |
| </p> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-2">Raw Passion</h4> | |
| <p class="opacity-90"> | |
| Embracing and channeling intense sexual energy as a force for spiritual awakening. | |
| </p> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-2">Liberation</h4> | |
| <p class="opacity-90"> | |
| Freeing partners from limiting beliefs and conditioning about sexuality and intimacy. | |
| </p> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-2">Transcendence</h4> | |
| <p class="opacity-90"> | |
| Guiding intimate experiences beyond the physical into spiritual realms of consciousness. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-2xl shadow-lg p-8"> | |
| <h3 class="text-2xl font-bold heading-font text-gray-900 mb-6">Shiva in Tantric Practice</h3> | |
| <ul class="space-y-6"> | |
| <li class="flex"> | |
| <div class="flex-shrink-0"> | |
| <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center"> | |
| <i data-feather="zap" class="text-purple-600 w-5 h-5"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="font-bold text-gray-900">Transformative Energy</h4> | |
| <p class="text-gray-600 mt-1"> | |
| Harnessing sexual energy as a catalyst for personal and spiritual transformation. | |
| </p> | |
| </div> | |
| </li> | |
| <li class="flex"> | |
| <div class="flex-shrink-0"> | |
| <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center"> | |
| <i data-feather="eye" class="text-indigo-600 w-5 h-5"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="font-bold text-gray-900">Fierce Presence</h4> | |
| <p class="text-gray-600 mt-1"> | |
| Bringing intensity and focus to intimate moments that cuts through distractions and illusions. | |
| </p> | |
| </div> | |
| </li> | |
| <li class="flex"> | |
| <div class="flex-shrink-0"> | |
| <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center"> | |
| <i data-feather="refresh-cw" class="text-purple-600 w-5 h-5"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="font-bold text-gray-900">Cyclical Awareness</h4> | |
| <p class="text-gray-600 mt-1"> | |
| Understanding the natural cycles of energy and allowing for periods of rest and renewal. | |
| </p> | |
| </div> | |
| </li> | |
| <li class="flex"> | |
| <div class="flex-shrink-0"> | |
| <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center"> | |
| <i data-feather="target" class="text-indigo-600 w-5 h-5"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="font-bold text-gray-900">Focused Intention</h4> | |
| <p class="text-gray-600 mt-1"> | |
| Directing masculine energy with clear purpose and conscious awareness toward spiritual goals. | |
| </p> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Kama Sutra Connection Section --> | |
| <section id="kamasutra" class="chapter-section mb-20"> | |
| <div class="bg-white rounded-2xl shadow-lg p-8"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl md:text-4xl font-bold heading-font text-gray-900 mb-4">Masculine Energy in the Kama Sutra</h2> | |
| <p class="text-gray-600 max-w-3xl mx-auto"> | |
| The Kama Sutra recognizes different masculine approaches to love and intimacy, reflecting both Vishnu's preservation and Shiva's transformation. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <div class="border border-blue-200 rounded-xl p-6"> | |
| <h3 class="text-xl font-bold heading-font text-gray-900 mb-4 flex items-center"> | |
| <i data-feather="shield" class="text-blue-500 mr-2"></i> | |
| The Nurturing Lover (Vishnu) | |
| </h3> | |
| <ul class="space-y-4"> | |
| <li class="flex items-start"> | |
| <i data-feather="check-circle" class="text-blue-500 mt-1 mr-2 flex-shrink-0"></i> | |
| <span>Prioritizes emotional connection and long-term relationship building</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-feather="check-circle" class="text-blue-500 mt-1 mr-2 flex-shrink-0"></i> | |
| <span>Focuses on creating a safe and comfortable environment for intimacy</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-feather="check-circle" class="text-blue-500 mt-1 mr-2 flex-shrink-0"></i> | |
| <span>Emphasizes patience, consistency, and reliability in intimate relationships</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-feather="check-circle" class="text-blue-500 mt-1 mr-2 flex-shrink-0"></i> | |
| <span>Values emotional intelligence and communication skills</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="border border-purple-200 rounded-xl p-6"> | |
| <h3 class="text-xl font-bold heading-font text-gray-900 mb-4 flex items-center"> | |
| <i data-feather="zap" class="text-purple-500 mr-2"></i> | |
| The Passionate Lover (Shiva) | |
| </h3> | |
| <ul class="space-y-4"> | |
| <li class="flex items-start"> | |
| <i data-feather="check-circle" class="text-purple-500 mt-1 mr-2 flex-shrink-0"></i> | |
| <span>Brings intensity and excitement to intimate encounters</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-feather="check-circle" class="text-purple-500 mt-1 mr-2 flex-shrink-0"></i> | |
| <span>Embraces spontaneity and creative exploration in love play</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-feather="check-circle" class="text-purple-500 mt-1 mr-2 flex-shrink-0"></i> | |
| <span>Challenges partners to break through comfort zones and limitations</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-feather="check-circle" class="text-purple-500 mt-1 mr-2 flex-shrink-0"></i> | |
| <span>Focuses on transformation and transcendence through intimate experience</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="mt-12 bg-gradient-to-r from-blue-50 to-indigo-50 rounded-xl p-8"> | |
| <h3 class="text-2xl font-bold heading-font text-gray-900 mb-4 text-center">Balancing the Energies</h3> | |
| <p class="text-gray-600 text-center max-w-2xl mx-auto"> | |
| The most fulfilling intimate relationships integrate both nurturing and passionate masculine energies, creating a dynamic balance that supports both security and growth. | |
| </p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Tantric Integration Section --> | |
| <section id="integration" class="chapter-section mb-20"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold heading-font text-gray-900 mb-4">Integrating Divine Masculine Energies</h2> | |
| <p class="text-gray-600 max-w-3xl mx-auto"> | |
| Practical approaches to embodying both Vishnu's preservation and Shiva's transformation in intimate relationships and spiritual practice. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-12"> | |
| <div class="bg-white rounded-2xl shadow-lg p-8"> | |
| <h3 class="text-2xl font-bold heading-font text-gray-900 mb-6">Personal Practice</h3> | |
| <ul class="space-y-6"> | |
| <li class="flex"> | |
| <div class="flex-shrink-0"> | |
| <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center"> | |
| <i data-feather="sun" class="text-blue-600 w-5 h-5"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="font-bold text-gray-900">Morning Meditation</h4> | |
| <p class="text-gray-600 mt-1"> | |
| Begin each day with a meditation connecting to Vishnu's stabilizing energy for the day ahead. | |
| </p> | |
| </div> | |
| </li> | |
| <li class="flex"> | |
| <div class="flex-shrink-0"> | |
| <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center"> | |
| <i data-feather="moon" class="text-purple-600 w-5 h-5"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="font-bold text-gray-900">Evening Reflection</h4> | |
| <p class="text-gray-600 mt-1"> | |
| End each day with reflection on Shiva's transformative energy and lessons learned. | |
| </p> | |
| </div> | |
| </li> | |
| <li class="flex"> | |
| <div class="flex-shrink-0"> | |
| <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center"> | |
| <i data-feather="heart" class="text-blue-600 w-5 h-5"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="font-bold text-gray-900">Daily Acts of Service</h4> | |
| <p class="text-gray-600 mt-1"> | |
| Express Vishnu's nurturing energy through small acts of care for yourself and others. | |
| </p> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="bg-white rounded-2xl shadow-lg p-8"> | |
| <h3 class="text-2xl font-bold heading-font text-gray-900 mb-6">Partner Practice</h3> | |
| <div class="space-y-6"> | |
| <div> | |
| <h4 class="font-bold text-gray-900 mb-2">The Sacred Embrace</h4> | |
| <p class="text-gray-600"> | |
| Practice alternating between Vishnu's gentle, protective embrace and Shiva's passionate, transformative connection. | |
| </p> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-gray-900 mb-2">Energy Dance</h4> | |
| <p class="text-gray-600"> | |
| Move between periods of calm, nurturing intimacy (Vishnu) and intense, passionate exploration (Shiva) in your intimate encounters. | |
| </p> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-gray-900 mb-2">Balanced Communication</h4> | |
| <p class="text-gray-600"> | |
| Express both the need for safety and stability (Vishnu) and the desire for growth and transformation (Shiva) with your partner. | |
| </p> | |
| </div> | |
| <div class="mt-6 p-4 bg-blue-50 rounded-lg"> | |
| <div class="flex"> | |
| <i data-feather="alert-triangle" class="text-blue-600 mr-2 mt-1"></i> | |
| <p class="text-blue-700"> | |
| <span class="font-bold">Remember:</span> Both energies are equally important and should be expressed authentically without forcing either extreme. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white py-12"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div class="col-span-1 md:col-span-2"> | |
| <div class="flex items-center"> | |
| <i data-feather="heart" class="text-blue-500"></i> | |
| <span class="ml-2 text-xl font-bold heading-font">Sacred Union</span> | |
| </div> | |
| <p class="mt-4 text-gray-400 max-w-md"> | |
| An educational resource exploring ancient wisdom traditions of intimate connection and spiritual sexuality. | |
| </p> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold heading-font mb-4">Chapters</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="index.html#positions" class="text-gray-400 hover:text-white">Kama Sutra Positions</a></li> | |
| <li><a href="index.html#tantra" class="text-gray-400 hover:text-white">Tantric Practices</a></li> | |
| <li><a href="index.html#history" class="text-gray-400 hover:text-white">Historical Context</a></li> | |
| <li><a href="index.html#philosophy" class="text-gray-400 hover:text-white">Philosophy</a></li> | |
| <li><a href="index.html#guide" class="text-gray-400 hover:text-white">Practical Guide</a></li> | |
| <li><a href="kali.html" class="text-gray-400 hover:text-white">Kali</a></li> | |
| <li><a href="divinemasculine.html" class="text-gray-400 hover:text-white">Divine Masculine</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold heading-font mb-4">Resources</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Recommended Reading</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Workshops</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Practitioner Directory</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Ethical Guidelines</a></li> | |
| <li><a href="kali.html" class="text-gray-400 hover:text-white">Kali</a></li> | |
| <li><a href="divinemasculine.html" class="text-gray-400 hover:text-white">Divine Masculine</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="mt-12 pt-8 border-t border-gray-800 text-center text-gray-400"> | |
| <p>© 2023 Sacred Union Guide. Educational content only. This resource is intended for adults over 18.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle | |
| document.getElementById('mobile-menu-button').addEventListener('click', function() { | |
| const menu = document.getElementById('mobile-menu'); | |
| menu.classList.toggle('hidden'); | |
| }); | |
| // Feather icons | |
| feather.replace(); | |
| // Vanta.js background | |
| VANTA.NET({ | |
| el: "#hero-bg", | |
| mouseControls: true, | |
| touchControls: true, | |
| gyroControls: false, | |
| minHeight: 200.00, | |
| minWidth: 200.00, | |
| scale: 1.00, | |
| scaleMobile: 1.00, | |
| color: 0x3b82f6, | |
| backgroundColor: 0xf0f9ff, | |
| points: 10.00, | |
| maxDistance: 20.00, | |
| spacing: 20.00 | |
| }); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| }); | |
| // Deity card hover effect enhancement | |
| const deityCards = document.querySelectorAll('.deity-card'); | |
| deityCards.forEach(card => { | |
| card.addEventListener('mouseenter', () => { | |
| card.style.transform = 'translateY(-5px)'; | |
| }); | |
| card.addEventListener('mouseleave', () => { | |
| card.style.transform = 'translateY(0)'; | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |