Start Here: Difference between revisions
Jump to navigation
Jump to search
Redesigned Start Here with modern card-based grid layout |
No edit summary |
||
| Line 1: | Line 1: | ||
<div style="max-width: | <div style="max-width:980px; margin:0 auto; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; background:#111; border-radius:16px; overflow:hidden; padding-bottom:32px;"> | ||
<!-- HERO BANNER --> | <!-- HERO BANNER --> | ||
<div style="background: linear-gradient( | <div style="background:linear-gradient(160deg,#1a0a00 0%,#2d1200 40%,#1a1a1a 100%); padding:52px 40px 44px; position:relative; overflow:hidden; border-bottom:3px solid #FF6B1A;"> | ||
< | <div style="position:relative; z-index:2;"> | ||
< | <div style="display:inline-block; background:#FF6B1A; color:#fff; font-size:10px; font-weight:800; letter-spacing:3px; padding:4px 12px; border-radius:4px; margin-bottom:16px; text-transform:uppercase;">KINKIPEDIA</div> | ||
<h1 style="font-size:42px; font-weight:900; color:#fff; margin:0 0 4px; letter-spacing:-1px;">AlphaX<span style="color:#FF6B1A;">.Wiki</span></h1> | |||
<p style="color:#aaa; font-size:15px; margin:12px 0 0; max-width:500px; line-height:1.6;">A curated knowledge base for gay culture, intimacy, kink communities, and LGBTQ+ identity. Choose a path below to start exploring.</p> | |||
</div> | |||
</div> | </div> | ||
<!-- | <!-- CHOOSE YOUR PATH — App-style photo cards --> | ||
<div style="font-size: | <div style="padding:32px 32px 0;"> | ||
<div style="font-size:11px; font-weight:800; letter-spacing:3px; color:#666; text-transform:uppercase; margin-bottom:16px;">CHOOSE YOUR PATH</div> | |||
<div style="display:grid; grid-template-columns: | <div style="display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; margin-bottom:14px;"> | ||
<!-- Card 1 --> | <!-- Card 1: New / Curious --> | ||
< | <a href="/Entering_the_Gay_Scene_for_the_First_Time" style="text-decoration:none; display:block; border-radius:14px; overflow:hidden; position:relative; height:220px; background:#1a1a1a; border:2px solid #2a2a2a;"> | ||
<div style="font-size: | <div style="position:absolute;inset:0;background:url('https://images.unsplash.com/photo-1529156069898-49953e39b3ac?w=600&q=60&fit=crop') center/cover no-repeat; opacity:0.5;"></div> | ||
<div style="font- | <div style="position:absolute;left:0;top:0;bottom:0;width:4px;background:#FF6B1A;"></div> | ||
<div style="font-size:0. | <div style="position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.93) 0%,rgba(0,0,0,0.35) 55%,transparent 100%);"></div> | ||
<div style="font-size: | <div style="position:absolute;bottom:0;left:0;right:0;padding:16px 16px 18px 20px;"> | ||
<div style="font-size:18px; margin-bottom:5px;">🟢</div> | |||
<div style="color:#fff;font-weight:800;font-size:14px;line-height:1.3;margin-bottom:4px;">I'm New / Just Curious</div> | |||
<div style="color:#ccc;font-size:11px;line-height:1.4;">Start with community, health & consent basics.</div> | |||
</div> | |||
</div> | </a> | ||
<div style=" | |||
</div> | <!-- Card 2: Explore Kink --> | ||
<a href="/Fetish_%26_Kink_Library" style="text-decoration:none; display:block; border-radius:14px; overflow:hidden; position:relative; height:220px; background:#1a1a1a; border:2px solid #2a2a2a;"> | |||
<div style="position:absolute;inset:0;background:url('https://images.unsplash.com/photo-1508214751196-bcfd4ca60f91?w=600&q=60&fit=crop') center/cover no-repeat; opacity:0.5;"></div> | |||
<div style="position:absolute;left:0;top:0;bottom:0;width:4px;background:#FF6B1A;"></div> | |||
<div style="position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.93) 0%,rgba(0,0,0,0.35) 55%,transparent 100%);"></div> | |||
<div style="position:absolute;bottom:0;left:0;right:0;padding:16px 16px 18px 20px;"> | |||
<div style="font-size:18px; margin-bottom:5px;">🔥</div> | |||
<div style="color:#fff;font-weight:800;font-size:14px;line-height:1.3;margin-bottom:4px;">I Want to Explore Kink</div> | |||
<div style="color:#ccc;font-size:11px;line-height:1.4;">BDSM, fetishes & power dynamics.</div> | |||
</div> | |||
</a> | |||
<!-- Card 3: Relationships --> | |||
<a href="/Dynamics_%26_Relationships" style="text-decoration:none; display:block; border-radius:14px; overflow:hidden; position:relative; height:220px; background:#1a1a1a; border:2px solid #2a2a2a;"> | |||
<div style="position:absolute;inset:0;background:url('https://images.unsplash.com/photo-1516589178581-6cd7833ae3b2?w=600&q=60&fit=crop') center/cover no-repeat; opacity:0.5;"></div> | |||
<div style="position:absolute;left:0;top:0;bottom:0;width:4px;background:#FF6B1A;"></div> | |||
<div style="position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.93) 0%,rgba(0,0,0,0.35) 55%,transparent 100%);"></div> | |||
<div style="position:absolute;bottom:0;left:0;right:0;padding:16px 16px 18px 20px;"> | |||
<div style="font-size:18px; margin-bottom:5px;">💬</div> | |||
<div style="color:#fff;font-weight:800;font-size:14px;line-height:1.3;margin-bottom:4px;">Improve My Relationship</div> | |||
<div style="color:#ccc;font-size:11px;line-height:1.4;">Communication, trust & power dynamics.</div> | |||
</div> | |||
</a> | |||
</div> | |||
</div> | |||
<div style="display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:36px;"> | |||
<div style=" | |||
<!-- Card 4 --> | <!-- Card 4: Safety --> | ||
< | <a href="/Safety_%26_Consent" style="text-decoration:none; display:block; border-radius:14px; overflow:hidden; position:relative; height:190px; background:#1a1a1a; border:2px solid #2a2a2a;"> | ||
<div style=" | <div style="position:absolute;inset:0;background:url('https://images.unsplash.com/photo-1576091160399-112ba8d25d1d?w=700&q=60&fit=crop') center/cover no-repeat; opacity:0.45;"></div> | ||
<div style=" | <div style="position:absolute;left:0;top:0;bottom:0;width:4px;background:#FF6B1A;"></div> | ||
<div style=" | <div style="position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.93) 0%,rgba(0,0,0,0.35) 55%,transparent 100%);"></div> | ||
<div style="font-size: | <div style="position:absolute;bottom:0;left:0;right:0;padding:16px 16px 18px 20px;"> | ||
<div style="font-size:18px; margin-bottom:5px;">🛡️</div> | |||
<div style="color:#fff;font-weight:800;font-size:14px;line-height:1.3;margin-bottom:4px;">I Care About Safety</div> | |||
<div style="color:#ccc;font-size:11px;line-height:1.4;">Harm reduction, safe sex, BDSM safety & consent frameworks.</div> | |||
</div> | |||
</div> | </a> | ||
<div style=" | |||
</div> | |||
<!-- Card 5 --> | <!-- Card 5: Advanced --> | ||
< | <a href="/Advanced_Practices" style="text-decoration:none; display:block; border-radius:14px; overflow:hidden; position:relative; height:190px; background:#1a1a1a; border:2px solid #2a2a2a;"> | ||
<div style=" | <div style="position:absolute;inset:0;background:url('https://images.unsplash.com/photo-1481627834876-b7833e8f5570?w=700&q=60&fit=crop') center/cover no-repeat; opacity:0.45;"></div> | ||
<div style=" | <div style="position:absolute;left:0;top:0;bottom:0;width:4px;background:#FF6B1A;"></div> | ||
<div style=" | <div style="position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.93) 0%,rgba(0,0,0,0.35) 55%,transparent 100%);"></div> | ||
<div style="font-size: | <div style="position:absolute;bottom:0;left:0;right:0;padding:16px 16px 18px 20px;"> | ||
<div style="font-size:18px; margin-bottom:5px;">🧠</div> | |||
<div style="color:#fff;font-weight:800;font-size:14px;line-height:1.3;margin-bottom:4px;">I Want Advanced Knowledge</div> | |||
<div style="color:#ccc;font-size:11px;line-height:1.4;">Psychology, advanced BDSM, identity theory & history.</div> | |||
</div> | |||
</div> | </a> | ||
<div style=" | |||
</div> | |||
</div> | </div> | ||
<!-- | <!-- EXPLORE ALL SECTIONS --> | ||
<div style="font-size: | <div style="font-size:11px; font-weight:800; letter-spacing:3px; color:#666; text-transform:uppercase; margin-bottom:16px;">EXPLORE ALL SECTIONS</div> | ||
<div style="display:grid; grid-template-columns: repeat(auto-fill, minmax( | <div style="display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:10px;"> | ||
< | <a href="/Safety_%26_Consent" style="text-decoration:none; display:flex; align-items:center; gap:14px; background:#1c1c1c; border:1px solid #2a2a2a; border-left:4px solid #FF6B1A; border-radius:10px; padding:14px 16px;"> | ||
< | <span style="font-size:22px;">🛡️</span> | ||
<div style="font-weight:700; | <div> | ||
<div style="font-size: | <div style="color:#fff;font-weight:700;font-size:13px;">Safety & Consent</div> | ||
</div> | <div style="color:#666;font-size:11px;margin-top:2px;">STI health · harm reduction · consent frameworks</div> | ||
</div> | |||
</a> | |||
< | <a href="/Fetish_%26_Kink_Library" style="text-decoration:none; display:flex; align-items:center; gap:14px; background:#1c1c1c; border:1px solid #2a2a2a; border-left:4px solid #FF6B1A; border-radius:10px; padding:14px 16px;"> | ||
< | <span style="font-size:22px;">🔥</span> | ||
<div style="font-weight:700; | <div> | ||
<div style="font-size: | <div style="color:#fff;font-weight:700;font-size:13px;">Fetish & Kink Library</div> | ||
</div> | <div style="color:#666;font-size:11px;margin-top:2px;">BDSM · bondage · leather · fetish culture</div> | ||
</div> | |||
</a> | |||
< | <a href="/Dynamics_%26_Relationships" style="text-decoration:none; display:flex; align-items:center; gap:14px; background:#1c1c1c; border:1px solid #2a2a2a; border-left:4px solid #FF6B1A; border-radius:10px; padding:14px 16px;"> | ||
< | <span style="font-size:22px;">💑</span> | ||
<div style="font-weight:700; | <div> | ||
<div style="font-size: | <div style="color:#fff;font-weight:700;font-size:13px;">Dynamics & Relationships</div> | ||
</div> | <div style="color:#666;font-size:11px;margin-top:2px;">Dom/sub · open relationships · intimacy</div> | ||
</div> | |||
</a> | |||
< | <a href="/Psychology_%26_Identity" style="text-decoration:none; display:flex; align-items:center; gap:14px; background:#1c1c1c; border:1px solid #2a2a2a; border-left:4px solid #FF6B1A; border-radius:10px; padding:14px 16px;"> | ||
< | <span style="font-size:22px;">🧠</span> | ||
<div style="font-weight:700; | <div> | ||
<div style="font-size: | <div style="color:#fff;font-weight:700;font-size:13px;">Psychology & Identity</div> | ||
</div> | <div style="color:#666;font-size:11px;margin-top:2px;">Body image · anxiety · identity labels · trauma</div> | ||
</div> | |||
</a> | |||
< | <a href="/Advanced_Practices" style="text-decoration:none; display:flex; align-items:center; gap:14px; background:#1c1c1c; border:1px solid #2a2a2a; border-left:4px solid #FF6B1A; border-radius:10px; padding:14px 16px;"> | ||
< | <span style="font-size:22px;">⚡</span> | ||
<div style="font-weight:700; | <div> | ||
<div style="font-size: | <div style="color:#fff;font-weight:700;font-size:13px;">Advanced Practices</div> | ||
</div> | <div style="color:#666;font-size:11px;margin-top:2px;">Edge play · contracts · dungeons · advanced power exchange</div> | ||
</div> | |||
</a> | |||
< | <a href="/Culture_%26_Nightlife" style="text-decoration:none; display:flex; align-items:center; gap:14px; background:#1c1c1c; border:1px solid #2a2a2a; border-left:4px solid #FF6B1A; border-radius:10px; padding:14px 16px;"> | ||
< | <span style="font-size:22px;">🌃</span> | ||
<div style="font-weight:700; | <div> | ||
<div style="font-size: | <div style="color:#fff;font-weight:700;font-size:13px;">Culture & Nightlife</div> | ||
</div> | <div style="color:#666;font-size:11px;margin-top:2px;">Circuit parties · leather bars · history · community</div> | ||
</div> | |||
</a> | |||
</div> | </div> | ||
</div> | </div> | ||
</div> | </div> | ||