Homepage: Difference between revisions
Modern homepage redesign: removed languages sidebar menu, added AlphaX banner, modernized hero animations |
Rebrand real landing page (Homepage): logo, brand text, domain-relative links |
||
| Line 121: | Line 121: | ||
@media(max-width:600px){.nav-links-wrap{display:none;}.fg{grid-template-columns:1fr;}} | @media(max-width:600px){.nav-links-wrap{display:none;}.fg{grid-template-columns:1fr;}} | ||
/* | /* BigBro Know Banner */ | ||
. | .bigbro-banner{width:100%;background:linear-gradient(135deg,#0D0D0D 0%,#1a0800 50%,#0D0D0D 100%);border-bottom:1px solid rgba(255,106,33,.2);padding:80px 2rem 80px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;margin-top:60px;} | ||
. | .bigbro-banner::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 80% at 50% 50%,rgba(255,106,33,.12) 0%,transparent 70%);pointer-events:none;} | ||
. | .bigbro-banner::after{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.015) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.015) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(ellipse 90% 90% at 50% 50%,black 10%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse 90% 90% at 50% 50%,black 10%,transparent 100%);pointer-events:none;} | ||
.ab-inner{position:relative;z-index:1;text-align:center;max-width:900px;} | .ab-inner{position:relative;z-index:1;text-align:center;max-width:900px;} | ||
.ab-eyebrow{display:inline-flex;align-items:center;gap:.5rem;background:rgba(255,106,33,.1);border:1px solid rgba(255,106,33,.3);border-radius:100px;padding:.3rem .9rem;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--or);margin-bottom:1.5rem;} | .ab-eyebrow{display:inline-flex;align-items:center;gap:.5rem;background:rgba(255,106,33,.1);border:1px solid rgba(255,106,33,.3);border-radius:100px;padding:.3rem .9rem;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--or);margin-bottom:1.5rem;} | ||
| Line 148: | Line 148: | ||
<nav class="nav"> | <nav class="nav"> | ||
<a href=" | <a href="/wiki/Homepage"> | ||
<img src=" | <img src="/images/0/0c/BigBro_Know_logo.png" alt="BigBro Know Wiki" style="height:32px;width:auto;"> | ||
</a> | </a> | ||
<div class="nav-links-wrap" style="display:flex;gap:2.5rem;"> | <div class="nav-links-wrap" style="display:flex;gap:2.5rem;"> | ||
| Line 159: | Line 159: | ||
<div class="nav-right"> | <div class="nav-right"> | ||
<div class="lsw"> | <div class="lsw"> | ||
<a href=" | <a href="/wiki/Homepage" class="lb on">EN</a> | ||
<a href=" | <a href="/wiki/Homepage/de" class="lb av">DE</a> | ||
<span class="lb dim">FR</span> | <span class="lb dim">FR</span> | ||
<span class="lb dim">ES</span> | <span class="lb dim">ES</span> | ||
| Line 166: | Line 166: | ||
</div> | </div> | ||
<button class="tbtn" id="tbtn" onclick="toggleTheme()">🌙</button> | <button class="tbtn" id="tbtn" onclick="toggleTheme()">🌙</button> | ||
<a href=" | <a href="/radmin" style="color:var(--tx3);text-decoration:none;font-size:.8rem;">Admin</a> | ||
<a href="#topics" class="btn-p">Explore Free</a> | <a href="#topics" class="btn-p">Explore Free</a> | ||
</div> | </div> | ||
| Line 172: | Line 172: | ||
<div class=" | <div class="bigbro-banner"> | ||
<div class="ab-glow"></div> | <div class="ab-glow"></div> | ||
<div class="ab-inner"> | <div class="ab-inner"> | ||
| Line 178: | Line 178: | ||
<div class="ab-logo"><span class="ab-logo-a">Alpha</span><span class="ab-logo-x">X</span></div> | <div class="ab-logo"><span class="ab-logo-a">Alpha</span><span class="ab-logo-x">X</span></div> | ||
<p class="ab-tagline">The free knowledge platform for gay communities worldwide</p> | <p class="ab-tagline">The free knowledge platform for gay communities worldwide</p> | ||
<a href="/wiki/Start_Here" class="ab-cta">Explore | <a href="/wiki/Start_Here" class="ab-cta">Explore BigBro Know →</a> | ||
</div> | </div> | ||
</div> | </div> | ||
| Line 211: | Line 211: | ||
<div class="sec-in"> | <div class="sec-in"> | ||
<div class="sec-hd fade-up"> | <div class="sec-hd fade-up"> | ||
<div class="stag">Why | <div class="stag">Why BigBro Know</div> | ||
<h2 class="stitle">Knowledge that actually matters</h2> | <h2 class="stitle">Knowledge that actually matters</h2> | ||
</div> | </div> | ||
| Line 220: | Line 220: | ||
<div class="bc fade-up"><div class="b-ic">✍️</div><div class="b-ti">Community authors</div><div class="b-de">Written by people who live this life. Reviewed for accuracy. Never by outside journalists.</div></div> | <div class="bc fade-up"><div class="b-ic">✍️</div><div class="b-ti">Community authors</div><div class="b-de">Written by people who live this life. Reviewed for accuracy. Never by outside journalists.</div></div> | ||
<div class="bc fade-up"><div class="b-ic">🔍</div><div class="b-ti">Fully searchable</div><div class="b-de">Find exactly what you need across all 500+ articles in seconds.</div></div> | <div class="bc fade-up"><div class="b-ic">🔍</div><div class="b-ti">Fully searchable</div><div class="b-de">Find exactly what you need across all 500+ articles in seconds.</div></div> | ||
<div class="bc fade-up"><div class="b-ic">💙</div><div class="b-ti">Always free</div><div class="b-de">No paywall. No premium tier. | <div class="bc fade-up"><div class="b-ic">💙</div><div class="b-ti">Always free</div><div class="b-de">No paywall. No premium tier. BigBro Know is free and will always be free.</div></div> | ||
</div> | </div> | ||
</div> | </div> | ||
| Line 233: | Line 233: | ||
</div> | </div> | ||
<div class="tg"> | <div class="tg"> | ||
<a href=" | <a href="/wiki/Category:Sexual_Health" class="tc"><img src="/images/c/c2/Sexual_health.png" alt="Sexual Health" loading="lazy"><div class="to"><span class="tn">Sexual Health</span></div></a> | ||
<a href=" | <a href="/wiki/Category:Dating,_Sex_%26_Relationships" class="tc"><img src="/images/6/6c/Dating_and_relationships.png" alt="Dating, Sex & Relationships" loading="lazy"><div class="to"><span class="tn">Dating, Sex & Relationships</span></div></a> | ||
<a href=" | <a href="/wiki/Category:Kink_%26_BDSM" class="tc"><img src="/images/a/a1/Chain-image.png" alt="Kink & BDSM" loading="lazy"><div class="to"><span class="tn">Kink & BDSM</span></div></a> | ||
<a href=" | <a href="/wiki/Category:Culture,_History_%26_Politics" class="tc"><img src="/images/2/25/Culture_History_Politics_Hero.png" alt="Culture, History & Politics" loading="lazy"><div class="to"><span class="tn">Culture, History & Politics</span></div></a> | ||
<a href=" | <a href="/wiki/Category:Fashion_%26_Visual_Signaling" class="tc"><img src="/images/8/86/Screenshot_2026-04-26_at_15.06.46.png" alt="Fashion & Visual Signaling" loading="lazy"><div class="to"><span class="tn">Fashion & Visual Signaling</span></div></a> | ||
<a href=" | <a href="/wiki/Category:Community_%26_Identity" class="tc"><img src="/images/e/ed/Community_Identity_Hero.png" alt="Community & Identity" loading="lazy"><div class="to"><span class="tn">Community & Identity</span></div></a> | ||
<a href=" | <a href="/wiki/Category:Drugs,_Party_Culture_%26_Harm_Reduction" class="tc"><img src="/images/3/38/Drugs_Party_Culture_Hero.png" alt="Drugs, Party Culture & Harm Reduction" loading="lazy"><div class="to"><span class="tn">Drugs, Party Culture & Harm Reduction</span></div></a> | ||
<a href=" | <a href="/wiki/Category:Life_Planning" class="tc"><img src="/images/7/74/Life_Planning_Hero.jpg" alt="Life Planning" loading="lazy"><div class="to"><span class="tn">Life Planning</span></div></a> | ||
</div> | </div> | ||
</div> | </div> | ||
| Line 260: | Line 260: | ||
</div> | </div> | ||
<div class="pg"> | <div class="pg"> | ||
<a href=" | <a href="/wiki/Category:Sexual_Health" class="pc"><div class="pi">🏥</div><div class="pt">I want to stay healthy</div><div class="ps">Health, PrEP, STI testing, mental health</div></a> | ||
<a href=" | <a href="/wiki/Category:Dating,_Sex_%26_Relationships" class="pc"><div class="pi">💬</div><div class="pt">I'm navigating relationships</div><div class="ps">Dating, intimacy, communication, boundaries</div></a> | ||
<a href=" | <a href="/wiki/Category:Kink_%26_BDSM" class="pc"><div class="pi">🔗</div><div class="pt">I'm exploring kink</div><div class="ps">Consent, safety, roles, practices</div></a> | ||
<a href=" | <a href="/wiki/Category:Community_%26_Identity" class="pc"><div class="pi">🏳️🌈</div><div class="pt">I'm finding community</div><div class="ps">Identity, belonging, visibility</div></a> | ||
<a href=" | <a href="/wiki/Category:Drugs,_Party_Culture_%26_Harm_Reduction" class="pc"><div class="pi">🌙</div><div class="pt">I'm going out</div><div class="ps">Nightlife, harm reduction, chemsex</div></a> | ||
</div> | </div> | ||
</div> | </div> | ||
| Line 276: | Line 276: | ||
</div> | </div> | ||
<div class="art-sc"> | <div class="art-sc"> | ||
<a href=" | <a href="/wiki/Entering_the_Gay_Scene_for_the_First_Time" class="ac"><div class="atag">Community</div><div class="ati">Entering the Gay Scene for the First Time</div><div class="ade">What to expect, how to prepare, and where to start.</div></a> | ||
<a href=" | <a href="/wiki/Understanding_PrEP_and_Modern_HIV_Prevention" class="ac"><div class="atag">Health</div><div class="ati">Understanding PrEP and Modern HIV Prevention</div><div class="ade">A complete guide to PrEP, how it works, and how to access it.</div></a> | ||
<a href=" | <a href="/wiki/Body_Image_Pressure_in_Gay_Communities" class="ac"><div class="atag">Identity</div><div class="ati">Body Image Pressure in Gay Communities</div><div class="ade">Beauty ideals, self-perception, and navigating expectations.</div></a> | ||
<a href=" | <a href="/wiki/Understanding_Consent_in_Power_Exchange" class="ac"><div class="atag">Kink & BDSM</div><div class="ati">Understanding Consent in Power Exchange</div><div class="ade">What consent truly means and how it's practiced.</div></a> | ||
<a href=" | <a href="/wiki/Loneliness,_Hookup_Culture,_and_Emotional_Well-Being" class="ac"><div class="atag">Relationships</div><div class="ati">Loneliness, Hookup Culture, and Emotional Well-Being</div><div class="ade">The tension between sexual freedom and connection.</div></a> | ||
<a href=" | <a href="/wiki/Navigating_Intimacy_After_Sexual_Trauma" class="ac"><div class="atag">Health</div><div class="ati">Navigating Intimacy After Sexual Trauma</div><div class="ade">Processing, healing, and the path back to connection.</div></a> | ||
</div> | </div> | ||
</div> | </div> | ||
| Line 293: | Line 293: | ||
</div> | </div> | ||
<div class="edg"> | <div class="edg"> | ||
<a href=" | <a href="/wiki/Sexual_Health_in_the_Gay_Community" class="ec"><div class="etag">Health</div><div class="eti">Sexual Health in the Gay Community</div></a> | ||
<a href=" | <a href="/wiki/What_Is_BDSM" class="ec"><div class="etag">Kink & BDSM</div><div class="eti">What Is BDSM?</div></a> | ||
<a href=" | <a href="/wiki/Body_Diversity_and_Attraction_in_Gay_Communities" class="ec"><div class="etag">Identity</div><div class="eti">Body Diversity and Attraction in Gay Communities</div></a> | ||
<a href=" | <a href="/wiki/Understanding_Routine_STI_Testing_in_Gay_Communities" class="ec"><div class="etag">Health</div><div class="eti">Understanding Routine STI Testing</div></a> | ||
<a href=" | <a href="/wiki/First_Time_at_a_Private_Gay_Sex_Party" class="ec"><div class="etag">Nightlife</div><div class="eti">First Time at a Private Gay Sex Party</div></a> | ||
<a href=" | <a href="/wiki/Recovering_Sexual_Confidence_After_Relationship_Breakups" class="ec"><div class="etag">Relationships</div><div class="eti">Recovering Sexual Confidence After Breakups</div></a> | ||
</div> | </div> | ||
</div> | </div> | ||
| Line 310: | Line 310: | ||
</div> | </div> | ||
<div class="tsg"> | <div class="tsg"> | ||
<div class="tsc fade-up"><div class="tsq">"</div><div class="tst">The PrEP article literally saved my life. I didn't even know what it was before I found | <div class="tsc fade-up"><div class="tsq">"</div><div class="tst">The PrEP article literally saved my life. I didn't even know what it was before I found BigBro Know. Now I'm on it and feel safe.</div><div class="tsa"><div class="tsav">J</div><div><div class="tsn">James</div><div class="tsc2">Manchester, UK</div></div></div></div> | ||
<div class="tsc fade-up"><div class="tsq">"</div><div class="tst">When I came out I had no idea where to start. The articles on identity and community made me feel less alone — and actually helped me find my people.</div><div class="tsa"><div class="tsav">D</div><div><div class="tsn">Daniel</div><div class="tsc2">Berlin, Germany</div></div></div></div> | <div class="tsc fade-up"><div class="tsq">"</div><div class="tst">When I came out I had no idea where to start. The articles on identity and community made me feel less alone — and actually helped me find my people.</div><div class="tsa"><div class="tsav">D</div><div><div class="tsn">Daniel</div><div class="tsc2">Berlin, Germany</div></div></div></div> | ||
<div class="tsc fade-up"><div class="tsq">"</div><div class="tst">Finally honest information about chemsex and harm reduction — no judgment, no moralising, just practical knowledge that actually helps.</div><div class="tsa"><div class="tsav">A</div><div><div class="tsn">Aviv</div><div class="tsc2">Tel Aviv, Israel</div></div></div></div> | <div class="tsc fade-up"><div class="tsq">"</div><div class="tst">Finally honest information about chemsex and harm reduction — no judgment, no moralising, just practical knowledge that actually helps.</div><div class="tsa"><div class="tsav">A</div><div><div class="tsn">Aviv</div><div class="tsc2">Tel Aviv, Israel</div></div></div></div> | ||
| Line 332: | Line 332: | ||
<div class="fg"> | <div class="fg"> | ||
<div> | <div> | ||
<img src=" | <img src="/images/0/0c/BigBro_Know_logo.png" alt="BigBro Know Wiki" style="height:28px;"> | ||
<p class="fbp">A free, independent knowledge platform for gay communities worldwide.</p> | <p class="fbp">A free, independent knowledge platform for gay communities worldwide.</p> | ||
</div> | </div> | ||
<div><div class="fct">Health</div><div class="fl"><a href=" | <div><div class="fct">Health</div><div class="fl"><a href="/wiki/Category:Sexual_Health">Sexual Health</a><a href="/wiki/Category:HIV_Prevention_%26_Treatment">HIV Prevention</a><a href="/wiki/Category:STI_Awareness_%26_Testing">STI Testing</a><a href="/wiki/Category:Sexual_Function_%26_Mental_Health">Mental Health</a></div></div> | ||
<div><div class="fct">Lifestyle</div><div class="fl"><a href=" | <div><div class="fct">Lifestyle</div><div class="fl"><a href="/wiki/Category:Dating,_Sex_%26_Relationships">Dating & Relationships</a><a href="/wiki/Category:Kink_%26_BDSM">Kink & BDSM</a><a href="/wiki/Category:Culture,_History_%26_Politics">Culture & History</a><a href="/wiki/Category:Fashion_%26_Visual_Signaling">Fashion & Style</a></div></div> | ||
<div><div class="fct">Site</div><div class="fl"><a href=" | <div><div class="fct">Site</div><div class="fl"><a href="/wiki/Homepage">Home</a><a href="/wiki/Topics">All Topics</a><a href="/wiki/Special:AllPages">All Articles</a><a href="/radmin">Admin</a></div></div> | ||
</div> | </div> | ||
<div class="fb"> | <div class="fb"> | ||
<span>© 2024 | <span>© 2024 BigBro Know · All content is for educational purposes only.</span> | ||
<span>No account · No tracking · Always free</span> | <span>No account · No tracking · Always free</span> | ||
</div> | </div> | ||