CaptainKCK/prismbreakers
0
1<!DOCTYPE html>2<html lang="en" class="dark">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Learn More - LGBTQ+ Education</title>7 <link rel="icon" type="image/x-icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>📚</text></svg>">8 <script src="https://cdn.tailwindcss.com"></script>9 <script>10 tailwind.config = {11 darkMode: 'class',12 theme: {13 extend: {14 colors: {15 'custom-pink': '#ec4899',16 'custom-violet': '#8b5cf6'17 }18 }19 }20 }21 </script>22 <style>23 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');24 body { font-family: 'Inter', sans-serif; }25 .hover-scale:hover { transform: scale(1.05); }26 </style>27</head>28<body class="bg-gray-900 text-white">29 <!-- Navigation -->30 <nav class="fixed top-0 w-full bg-gray-900/95 backdrop-blur-md z-50 border-b border-gray-800">31 <div class="container mx-auto px-4 py-4">32 <div class="flex justify-between items-center">33 <a href="index.html" class="flex items-center space-x-2">34 <span class="text-2xl">📚</span>35 <span class="font-bold text-xl">Learn More</span>36 </a>37 <div class="flex space-x-6">38 <a href="index.html#home" class="hover:text-pink-400 transition-colors">Home</a>39 <a href="myths-vs-reality.html" class="hover:text-pink-400 transition-colors">Myths vs Reality</a>40 <a href="resources.html" class="hover:text-pink-400 transition-colors">Resources</a>41 </div>42 </div>43 </div>44 </nav>45 46 <!-- Hero -->47 <section class="pt-24 pb-12 px-4">48 <div class="container mx-auto text-center">49 <h1 class="text-5xl font-bold mb-4">50 <span class="bg-gradient-to-r from-pink-500 to-violet-500 bg-clip-text text-transparent">Deep Dive Education</span>51 </h1>52 <p class="text-xl text-gray-400">Understanding the beautiful spectrum of identities</p>53 </div>54 </section>55 56 <!-- Education Cards Grid -->57 <section class="container mx-auto px-4 pb-16">58 <div class="grid md:grid-cols-3 gap-6">59 60 <!-- Gender -->61 <div class="bg-gray-800 rounded-xl p-6 border border-gray-700 hover-scale">62 <h2 class="text-2xl font-bold text-pink-400 mb-4">🌈 Gender</h2>63 <ul class="space-y-3 text-gray-300">64 <li>• Gender ≠ biological sex</li>65 <li>• Exists on a spectrum</li>66 <li>• Gender presentation vs identity</li>67 <li>• Societal roles vs personal truth</li>68 </ul>69 </div>70 71 <!-- Sexuality -->72 <div class="bg-gray-800 rounded-xl p-6 border border-gray-700 hover-scale">73 <h2 class="text-2xl font-bold text-violet-400 mb-4">💞 Sexuality</h2>74 <ul class="space-y-3 text-gray-300">75 <li>• Attraction to genders</li>76 <li>• ≠ behavior or relationships</li>77 <li>• Fluid over lifetime</li>78 <li>• External vs internal labels</li>79 </ul>80 </div>81 82 <!-- Romantic -->83 <div class="bg-gray-800 rounded-xl p-6 border border-gray-700 hover-scale">84 <h2 class="text-2xl font-bold text-pink-400 mb-4">💕 Romantic</h2>85 <ul class="space-y-3 text-gray-300">86 <li>• ≠ sexual attraction</li>87 <li>• QPR (Queer Platonic Relationships)</li>88 <li>• Aromantic spectrum</li>89 <li>• Relationship anarchy</li>90 </ul>91 </div>92 93 </div>94 </section>95 96 <!-- Detailed Topics -->97 <section class="bg-gray-800 py-12">98 <div class="container mx-auto px-4">99 <h2 class="text-3xl font-bold text-center mb-8">📖 Expanded Topics</h2>100 101 <div class="max-w-4xl mx-auto space-y-8">102 103 <!-- Gender Identity -->104 <div class="bg-gray-900 rounded-xl p-6">105 <h3 class="text-2xl font-bold text-pink-400 mb-3">Understanding Gender Identity</h3>106 <p class="text-gray-300 mb-4">107 Gender identity is your internal sense of being male, female, both, neither, or anywhere along the spectrum. It's deeply personal and may or may not align with sex assigned at birth.108 </p>109 <div class="grid md:grid-cols-2 gap-4 text-sm">110 <div>111 <p class="font-semibold text-violet-400">Key Concepts:</p>112 <ul class="text-gray-400 mt-2">113 <li>• Cisgender: Identity matches assigned sex</li>114 <li>• Transgender: Identity differs from assigned sex</li>115 <li>• Non-binary: Identity outside male/female binary</li>116 <li>• Gender fluid: Identity shifts over time</li>117 </ul>118 </div>119 <div>120 <p class="font-semibold text-violet-400">Related Terms:</p>121 <ul class="text-gray-400 mt-2">122 <li>• AFAB/AMAB: Assigned female/male at birth</li>123 <li>• Dysphoria: Discomfort between body/gender</li>124 <li>• Euphoria: Joy from gender affirmation</li>125 <li>• Pronouns: How we want to be referenced</li>126 </ul>127 </div>128 </div>129 </div>130 131 <!-- Sexuality Spectrum -->132 <div class="bg-gray-900 rounded-xl p-6">133 <h3 class="text-2xl font-bold text-violet-400 mb-3">Sexuality Spectrum Explained</h3>134 <p class="text-gray-300 mb-4">135 Sexuality encompasses romantic and sexual attraction patterns. Understanding it as a spectrum helps recognize the infinite ways people experience attraction.136 </p>137 <div class="grid md:grid-cols-3 gap-4">138 <div class="text-center">139 <p class="font-bold text-pink-400">Monosexual</p>140 <p class="text-sm text-gray-400">Attraction to one gender</p>141 <p class="text-xs text-gray-500 mt-1">Ex: Gay, Lesbian, Straight</p>142 </div>143 <div class="text-center">144 <p class="font-bold text-pink-400">Bisexual</p>145 <p class="text-sm text-gray-400">Attraction to 2+ genders</p>146 <p class="text-xs text-gray-500 mt-1">Not always equal attraction</p>147 </div>148 <div class="text-center">149 <p class="font-bold text-pink-400">Pansexual</p>150 <p class="text-sm text-gray-400">Attraction regardless of gender</p>151 <p class="text-xs text-gray-500 mt-1">Person over gender</p>152 </div>153 </div>154 </div>155 156 <!-- Romantic Orientations -->157 <div class="bg-gray-900 rounded-xl p-6">158 <h3 class="text-2xl font-bold text-violet-400 mb-3">Romantic vs Sexual Attraction</h3>159 <p class="text-gray-300 mb-4">160 These can align or differ greatly. Understanding both helps explain diverse relationship structures and personal needs.161 </p>162 <div class="bg-gray-800 rounded-lg p-4">163 <p class="font-bold text-pink-400 mb-2">Split Attraction Model:</p>164 <p class="text-gray-300 mb-2">Describes how romantic and sexual desires may not match (e.g., biromantic asexual)</p>165 <p class="text-sm text-gray-400">Common suffixes: -romantic, -sexual, -aesthetic, -sensual</p>166 </div>167 </div>168 169 </div>170 </div>171 </section>172 173 <!-- Interactive Quiz Section -->174 <section class="py-12">175 <div class="container mx-auto px-4">176 <h2 class="text-3xl font-bold text-center mb-8">🎯 Quick Knowledge Check</h2>177 <div class="max-w-2xl mx-auto bg-gray-800 rounded-xl p-6">178 <p class="text-gray-300 mb-4">Test understanding with these questions:</p>179 <ol class="space-y-3 text-gray-300">180 <li>1. Can non-binary people use binary pronouns? (Yes - it's personal choice)</li>181 <li>2. Does aromantic = antisocial? (No - platonic bonds are valid)</li>182 <li>3. Are bi and pan the same? (Related but distinct - bi has gender consideration, pan specifically "beyond gender")</li>183 <li>4. Do sexuality labels expire? (People explore and evolve)</li>184 </ol>185 </div>186 </div>187 </section>188 189</body>190</html>