Toggle search
Toggle menu
31
40
7.2K
2.1K
WikiOasis Meta
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

User:Globe/Main page redesign: Difference between revisions

From WikiOasis Meta
More actions
Browse history interactively
← Older edit
VisualWikitext
Globe (talk | contribs)
staff, Administrators
302 edits
Fix
Tags: Mobile edit Mobile web edit
Globe (talk | contribs)
staff, Administrators
302 edits
fix link
 
(9 intermediate revisions by the same user not shown)
Line 8: Line 8:
}}
}}


<div class="wikioasis-container" style="
<div style="max-width: 1200px; margin: 0 auto; padding: 0 5vw 20px 5vw; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;">
  max-width: 1200px;
  margin: 0 auto;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
">


<!-- Hero Section -->
<!-- Hero Section -->
 
<div style="background: linear-gradient(135deg, #3650b8 0%, #0050b4 100%); border-radius: min(16px, 4vw); padding: min(2rem, 8vw) min(2rem, 6vw); color: white; text-align: center; margin-bottom: min(2rem, 6vw); box-shadow: 0 10px 30px rgba(54, 80, 184, 0.2); position: relative; overflow: hidden;">
<div class="hero-section" style="
<div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: radial-gradient(circle at 20% 80%, rgba(255,255,255,0.1) 2px, transparent 2px), radial-gradient(circle at 80% 20%, rgba(255,255,255,0.08) 1.5px, transparent 1.5px), radial-gradient(circle at 40% 40%, rgba(255,255,255,0.06) 1px, transparent 1px); background-size: 100px 100px, 150px 150px, 75px 75px; -webkit-animation: breathe-pulse 4s ease-in-out infinite alternate; -moz-animation: breathe-pulse 4s ease-in-out infinite alternate; -o-animation: breathe-pulse 4s ease-in-out infinite alternate; animation: breathe-pulse 4s ease-in-out infinite alternate;"></div>
  background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 50%, #1e40af 100%);
<div style="position: relative; z-index: 1;">
  border-radius: 16px;
<div style="font-size: clamp(2rem, 8vw, 3.5rem); font-weight: 800; margin-bottom: 1rem; text-shadow: 0 2px 4px rgba(0,0,0,0.1); line-height: 1.1;">'''Welcome to WikiOasis!'''</div>
  padding: 3rem 2rem;
<div style="font-size: clamp(1rem, 3.5vw, 1.3rem); margin-bottom: 2rem; opacity: 0.95; font-weight: 300; padding: 0 min(1rem, 3vw); line-height: 1.4;">Your wiki hosting partner, home to <span style="font-weight: 700; color: white; text-shadow: 0 1px 2px rgba(0,0,0,0.2);">'''{{formatnum:{{NUMBEROFWIKIS}}}}'''</span> active communities for over '''{{formatnum:{{NUMBEROFUSERS}}}}''' users.</div>
  text-align: center;
<div style="display: flex; gap: min(1rem, 3vw); justify-content: center; flex-wrap: wrap; flex-direction: column; align-items: center;">
  margin-bottom: 2rem;
[[Special:CreateAccount|<span style="display: inline-block; padding: min(0.9rem, 3vw) min(2rem, 5vw); background: rgba(255, 255, 255, 0.15); color: white; text-decoration: none; border-radius: 50px; font-weight: 600; transition: all 0.3s ease; border: 1px solid rgba(255, 255, 255, 0.2); margin: 0.25rem; width: min(280px, 80vw); text-align: center; font-size: clamp(0.9rem, 4vw, 1rem);" onmouseover="this.style.background='rgba(255, 255, 255, 0.25)'; this.style.transform='translateY(-2px)'; this.style.boxShadow='0 8px 25px rgba(0,0,0,0.2)'" onmouseout="this.style.background='rgba(255, 255, 255, 0.15)'; this.style.transform='translateY(0px)'; this.style.boxShadow='none'">Create an account</span>]]
  box-shadow: 0 10px 25px rgba(30, 58, 138, 0.3);
[[Special:RequestWiki|<span style="display: inline-block; padding: min(0.9rem, 3vw) min(2rem, 5vw); background: rgba(255, 255, 255, 0.15); color: white; text-decoration: none; border-radius: 50px; font-weight: 600; transition: all 0.3s ease; border: 1px solid rgba(255, 255, 255, 0.2); margin: 0.25rem; width: min(280px, 80vw); text-align: center; font-size: clamp(0.9rem, 4vw, 1rem);" onmouseover="this.style.background='rgba(255, 255, 255, 0.25)'; this.style.transform='translateY(-2px)'; this.style.boxShadow='0 8px 25px rgba(0,0,0,0.2)'" onmouseout="this.style.background='rgba(255, 255, 255, 0.15)'; this.style.transform='translateY(0px)'; this.style.boxShadow='none'">Request a wiki</span>]]
  position: relative;
[[Fundraiser|<span style="display: inline-block; padding: min(0.9rem, 3vw) min(2rem, 5vw); background: rgba(255, 255, 255, 0.15); color: white; text-decoration: none; border-radius: 50px; font-weight: 600; transition: all 0.3s ease; border: 1px solid rgba(255, 255, 255, 0.2); margin: 0.25rem; width: min(280px, 80vw); text-align: center; font-size: clamp(0.9rem, 4vw, 1rem);" onmouseover="this.style.background='rgba(255, 255, 255, 0.25)'; this.style.transform='translateY(-2px)'; this.style.boxShadow='0 8px 25px rgba(0,0,0,0.2)'" onmouseout="this.style.background='rgba(255, 255, 255, 0.15)'; this.style.transform='translateY(0px)'; this.style.boxShadow='none'">Support our mission</span>]]
  overflow: hidden;
</div>
">
  <div style="
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    animation: pulse 4s ease-in-out infinite;
  "></div>
 
  <div style="position: relative; z-index: 2;">
    <h1 style="
      font-size: 3.5rem;
      font-weight: 700;
      color: white;
      margin: 0 0 1rem 0;
      text-shadow: 0 2px 4px rgba(0,0,0,0.3);
      letter-spacing: -0.025em;
    ">Welcome to WikiOasis!</h1>
 
```
<p style="
  font-size: 1.25rem;
  color: rgba(255,255,255,0.9);
  margin: 0 0 2rem 0;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
">Your premium wiki hosting partner, currently hosting <strong>{{formatnum:{{NUMBEROFWIKIS}}}}</strong> active communities</p>
 
<div class="cta-buttons" style="
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
">
  [[Special:CreateAccount|<span style="
    display: inline-block;
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(10px);
    color: white;
    padding: 1rem 2rem;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    border: 2px solid rgba(255,255,255,0.3);
    transition: all 0.3s ease;
    font-size: 1.1rem;
  " onmouseover="this.style.background='rgba(255,255,255,0.3)'; this.style.transform='translateY(-2px)'" onmouseout="this.style.background='rgba(255,255,255,0.2)'; this.style.transform='translateY(0)'">🚀 Create Account</span>]]
 
  [[Special:RequestWiki|<span style="
    display: inline-block;
    background: white;
    color: #1e40af;
    padding: 1rem 2rem;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 1.1rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  " onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 8px 25px rgba(0,0,0,0.3)'" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 15px rgba(0,0,0,0.2)'">✨ Request Wiki</span>]]
</div>
</div>
```
  </div>
</div>
</div>


<!-- Features Grid -->
<!-- Features Grid -->
<div style="display: block; margin-bottom: min(2rem, 6vw);">


<div class="features-grid" style="
<!-- Why WikiOasis Card -->
  display: grid;
<div style="background: white; border-radius: min(12px, 3vw); padding: min(2rem, 6vw) min(1.5rem, 4vw); box-shadow: 0 4px 20px rgba(0,0,0,0.08); transition: all 0.3s ease; border-top: 4px solid #3675b8; position: relative; margin-bottom: min(2rem, 5vw);" onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 8px 30px rgba(0,0,0,0.12)'" onmouseout="this.style.transform='translateY(0px)'; this.style.boxShadow='0 4px 20px rgba(0,0,0,0.08)'">
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
<div style="display: flex; align-items: center; justify-content: center; margin-bottom: min(1.5rem, 4vw); gap: min(0.5rem, 2vw); flex-wrap: wrap;">
  gap: 2rem;
<div style="width: min(40px, 10vw); height: min(40px, 10vw); min-width: 30px; min-height: 30px; background: linear-gradient(135deg, #3675b8, #0050b4); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: white; font-size: min(1.2rem, 4vw); flex-shrink: 0;"><span style="filter: brightness(0) invert(1); display: inline-block; line-height: 1;">[[File:OOjs UI icon userGroup-ltr.svg|20px|link=]]</span></div>
  margin-bottom: 2rem;
<h3 style="font-size: clamp(1.2rem, 5vw, 1.5rem); font-weight: 700; color: #2d3748; margin: 0; line-height: 1.2; text-align: center;">Why WikiOasis?</h3>
">
</div>
 
<div style="list-style: none;">
  <!-- Why WikiOasis Card -->
<div style="margin-bottom: min(1rem, 3vw); padding-left: min(1.5rem, 5vw); position: relative; color: #4a5568; line-height: 1.6; font-size: clamp(0.9rem, 3.5vw, 1rem);"><span style="position: absolute; left: 0; color: #48bb78; font-weight: bold; font-size: min(1.1rem, 4vw);">✓</span><strong>Free, forever.</strong> Host a wiki at no cost with access to all features. We'll never charge you to host a wiki on WikiOasis.</div>
 
<div style="margin-bottom: min(1rem, 3vw); padding-left: min(1.5rem, 5vw); position: relative; color: #4a5568; line-height: 1.6; font-size: clamp(0.9rem, 3.5vw, 1rem);"><span style="position: absolute; left: 0; color: #48bb78; font-weight: bold; font-size: min(1.1rem, 4vw);">✓</span><strong>No advertisements. Ever.</strong> Adverts annoy us just as much as they annoy you, so we'll never show them on your wiki.</div>
  <div class="feature-card" style="
<div style="margin-bottom: min(1rem, 3vw); padding-left: min(1.5rem, 5vw); position: relative; color: #4a5568; line-height: 1.6; font-size: clamp(0.9rem, 3.5vw, 1rem);"><span style="position: absolute; left: 0; color: #48bb78; font-weight: bold; font-size: min(1.1rem, 4vw);">✓</span><strong>Fully customizable.</strong> Your wiki is yours, and you can customise it as much as you want. Let your creativity run wild!</div>
    background: white;
<div style="margin-bottom: min(1rem, 3vw); padding-left: min(1.5rem, 5vw); position: relative; color: #4a5568; line-height: 1.6; font-size: clamp(0.9rem, 3.5vw, 1rem);"><span style="position: absolute; left: 0; color: #48bb78; font-weight: bold; font-size: min(1.1rem, 4vw);">✓</span><strong>Unmatched support.</strong> From simple advice to technical help, our experienced staff team will assist every step of the way.</div>
    border-radius: 16px;
</div>
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    border: 1px solid rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
  " onmouseover="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 12px 40px rgba(0,0,0,0.15)'" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 20px rgba(0,0,0,0.08)'">
 
```
<div style="
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #3b82f6, #8b5cf6);
"></div>
 
<div style="text-align: center; margin-bottom: 1.5rem;">
  <div style="
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    border-radius: 16px;
    margin-bottom: 1rem;
  ">
    [[File:OOjs UI icon userGroup-ltr.svg|30px|link=|style=filter: brightness(0) invert(1);]]
  </div>
  <h3 style="
    font-size: 1.5rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0;
  ">Why WikiOasis?</h3>
</div>
</div>


<div class="feature-list" style="space-y: 1rem;">
<!-- Quick Links Card -->
  <div style="
<div style="background: white; border-radius: min(12px, 3vw); padding: min(2rem, 6vw) min(1.5rem, 4vw); box-shadow: 0 4px 20px rgba(0,0,0,0.08); transition: all 0.3s ease; border-top: 4px solid #3675b8; position: relative; margin-bottom: min(2rem, 5vw);" onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 8px 30px rgba(0,0,0,0.12)'" onmouseout="this.style.transform='translateY(0px)'; this.style.boxShadow='0 4px 20px rgba(0,0,0,0.08)'">
    display: flex;
<div style="display: flex; align-items: center; justify-content: center; margin-bottom: min(1.5rem, 4vw); gap: min(0.5rem, 2vw); flex-wrap: wrap;">
    align-items: flex-start;
<div style="width: min(40px, 10vw); height: min(40px, 10vw); min-width: 30px; min-height: 30px; background: linear-gradient(135deg, #3675b8, #0050b4); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: white; font-size: min(1.2rem, 4vw); flex-shrink: 0;"><span style="filter: brightness(0) invert(1); display: inline-block; line-height: 1;">[[File:OOjs_UI_icon_academic.svg|20px|link=]]</span></div>
    gap: 0.75rem;
<h3 style="font-size: clamp(1.2rem, 5vw, 1.5rem); font-weight: 700; color: #2d3748; margin: 0; line-height: 1.2; text-align: center;">Quick Links</h3>
    margin-bottom: 1rem;
  ">
    <div style="
      width: 6px;
      height: 6px;
      background: #10b981;
      border-radius: 50%;
      margin-top: 0.5rem;
      flex-shrink: 0;
    "></div>
    <p style="margin: 0; color: #4b5563; line-height: 1.6;"><strong>Free, forever.</strong> Host a wiki at no cost with access to all features. We'll never charge you to host a wiki on WikiOasis.</p>
  </div>
 
  <div style="
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1rem;
  ">
    <div style="
      width: 6px;
      height: 6px;
      background: #10b981;
      border-radius: 50%;
      margin-top: 0.5rem;
      flex-shrink: 0;
    "></div>
    <p style="margin: 0; color: #4b5563; line-height: 1.6;"><strong>No advertisements.</strong> We mean it. Adverts annoy us just as much as they annoy you, so we'll never show them on your wiki.</p>
  </div>
 
  <div style="
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
  ">
    <div style="
      width: 6px;
      height: 6px;
      background: #10b981;
      border-radius: 50%;
      margin-top: 0.5rem;
      flex-shrink: 0;
    "></div>
    <p style="margin: 0; color: #4b5563; line-height: 1.6;"><strong>Fully customizable.</strong> Your wiki is yours, and you can customize it exactly as you envision.</p>
  </div>
</div>
</div>
```
<div style="list-style: none;">
 
<div style="font-weight: bold; margin-bottom: min(0.5rem, 2vw); color: #2d3748; font-size: clamp(1rem, 3.8vw, 1.1rem);">Requests</div>
  </div>
<div style="margin-bottom: min(1rem, 3vw); padding-left: min(1.5rem, 5vw); position: relative; color: #4a5568; line-height: 1.6; font-size: clamp(0.9rem, 3.5vw, 1rem);"><span style="position: absolute; left: 0; color: #48bb78; font-weight: bold; font-size: min(1.1rem, 4vw);">✓</span>[[Community portal|<span style="color: #3675b8; text-decoration: none; font-weight: 500;">Community portal</span>]] – Ask your fellow community members for help and discuss topics of global interest</div>
 
<div style="margin-bottom: min(1rem, 3vw); padding-left: min(1.5rem, 5vw); position: relative; color: #4a5568; line-height: 1.6; font-size: clamp(0.9rem, 3.5vw, 1rem);"><span style="position: absolute; left: 0; color: #48bb78; font-weight: bold; font-size: min(1.1rem, 4vw);">✓</span>[[Steward requests|<span style="color: #3675b8; text-decoration: none; font-weight: 500;">Steward requests</span>]] – Solicit help from Stewards for tasks only they can do</div>
  <!-- Quick Links Card -->
<div style="margin-bottom: min(1rem, 3vw); padding-left: min(1.5rem, 5vw); position: relative; color: #4a5568; line-height: 1.6; font-size: clamp(0.9rem, 3.5vw, 1rem);"><span style="position: absolute; left: 0; color: #48bb78; font-weight: bold; font-size: min(1.1rem, 4vw);">✓</span>[[Special:RequestWiki|<span style="color: #3675b8; text-decoration: none; font-weight: 500;">Request a wiki</span>]] – Start your own wiki community</div>
 
<div style="margin-bottom: min(1rem, 3vw); padding-left: min(1.5rem, 5vw); position: relative; color: #4a5568; line-height: 1.6; font-size: clamp(0.9rem, 3.5vw, 1rem);"><span style="position: absolute; left: 0; color: #48bb78; font-weight: bold; font-size: min(1.1rem, 4vw);">✓</span>[[Special:GlobalRenameRequest|<span style="color: #3675b8; text-decoration: none; font-weight: 500;">Request a username change</span>]] – Request that your username be changed.</div>
  <div class="feature-card" style="
    background: white;
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    border: 1px solid rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
  " onmouseover="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 12px 40px rgba(0,0,0,0.15)'" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 20px rgba(0,0,0,0.08)'">
 
```
<div style="
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #f59e0b, #ef4444);
"></div>
 
<div style="text-align: center; margin-bottom: 1.5rem;">
  <div style="
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #f59e0b, #ef4444);
    border-radius: 16px;
    margin-bottom: 1rem;
  ">
    [[File:OOjs_UI_icon_academic.svg|30px|link=|style=filter: brightness(0) invert(1);]]
  </div>
  <h3 style="
    font-size: 1.5rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0;
  ">Quick Links</h3>
</div>
</div>
<div class="quick-links" style="space-y: 0.75rem;">
  <h4 style="
    font-size: 0.875rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 1rem 0;
  ">Community & Requests</h4>
 
  <div style="margin-bottom: 0.75rem;">
    [[Community portal|<span style="
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.5rem;
      border-radius: 8px;
      transition: background-color 0.2s ease;
      text-decoration: none;
      color: #4b5563;
    " onmouseover="this.style.backgroundColor='#f3f4f6'" onmouseout="this.style.backgroundColor='transparent'">🏛️ Community Portal</span>]]
  </div>
 
  <div style="margin-bottom: 0.75rem;">
    [[Steward requests|<span style="
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.5rem;
      border-radius: 8px;
      transition: background-color 0.2s ease;
      text-decoration: none;
      color: #4b5563;
    " onmouseover="this.style.backgroundColor='#f3f4f6'" onmouseout="this.style.backgroundColor='transparent'">⚖️ Steward Requests</span>]]
  </div>
 
  <div style="margin-bottom: 0.75rem;">
    [[Special:RequestWiki|<span style="
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.5rem;
      border-radius: 8px;
      transition: background-color 0.2s ease;
      text-decoration: none;
      color: #4b5563;
    " onmouseover="this.style.backgroundColor='#f3f4f6'" onmouseout="this.style.backgroundColor='transparent'">🌟 Request a Wiki</span>]]
  </div>
 
  <div>
    [[Special:GlobalRenameRequest|<span style="
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.5rem;
      border-radius: 8px;
      transition: background-color 0.2s ease;
      text-decoration: none;
      color: #4b5563;
    " onmouseover="this.style.backgroundColor='#f3f4f6'" onmouseout="this.style.backgroundColor='transparent'">👤 Username Change</span>]]
  </div>
</div>
</div>
```
  </div>


</div>
</div>


<!-- Contact Section -->
<!-- Contact Section -->
 
<div style="background: white; border-radius: min(12px, 3vw); padding: min(2rem, 6vw) min(1.5rem, 4vw); box-shadow: 0 4px 20px rgba(0,0,0,0.08); border-top: 4px solid #3675b8;">
<div class="contact-section" style="
<div style="display: flex; align-items: center; justify-content: center; margin-bottom: min(1.5rem, 4vw); gap: min(0.5rem, 2vw); flex-wrap: wrap;">
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
<div style="width: min(40px, 10vw); height: min(40px, 10vw); min-width: 30px; min-height: 30px; background: linear-gradient(135deg, #3675b8, #2196F3); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: white; font-size: min(1.2rem, 4vw); flex-shrink: 0;"><span style="filter: brightness(0) invert(1); display: inline-block; line-height: 1;">[[File:OOjs UI icon help-ltr.svg|20px|link=]]</span></div>
  border-radius: 16px;
<h3 style="font-size: clamp(1.2rem, 5vw, 1.5rem); font-weight: 700; color: #2d3748; margin: 0; line-height: 1.2; text-align: center;">Contact Us</h3>
  padding: 2rem;
  text-align: center;
  border: 1px solid rgba(0,0,0,0.05);
">
  <div style="
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #10b981, #059669);
    border-radius: 16px;
    margin-bottom: 1rem;
  ">
    [[File:OOjs UI icon help-ltr.svg|30px|link=|style=filter: brightness(0) invert(1);]]
  </div>
 
  <h3 style="
    font-size: 1.5rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 1.5rem 0;
  ">Get in Touch</h3>
 
  <div style="
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
  ">
    <div>
      [mailto:[email protected] <span style="
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        background: white;
        padding: 0.75rem 1.5rem;
        border-radius: 50px;
        text-decoration: none;
        color: #374151;
        font-weight: 500;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        transition: all 0.3s ease;
      " onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 4px 20px rgba(0,0,0,0.15)'" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 2px 10px rgba(0,0,0,0.1)'">📧 Email Us</span>]
    </div>
 
```
<div>
  [https://discord.gg/Hc249nXbak <span style="
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #5865f2;
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 500;
    box-shadow: 0 2px 10px rgba(88, 101, 242, 0.3);
    transition: all 0.3s ease;
  " onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 4px 20px rgba(88, 101, 242, 0.4)'" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 2px 10px rgba(88, 101, 242, 0.3)'">💬 Discord</span>]
</div>
</div>
 
<div style="list-style: none; display: flex; flex-direction: column; gap: min(1rem, 3vw);">
<div>
<div style="padding: min(1rem, 3vw); background: #f7fafc; border-radius: min(8px, 2vw); transition: background 0.2s ease; font-size: clamp(0.9rem, 3.5vw, 1rem);" onmouseover="this.style.background='#edf2f7'" onmouseout="this.style.background='#f7fafc'"><strong>Email:</strong> [mailto:[email protected] <span style="color: #3675b8; text-decoration: none; font-weight: 500;">[email protected]</span>]</div>
  [https://phorge.wikioasis.org/ <span style="
<div style="padding: min(1rem, 3vw); background: #f7fafc; border-radius: min(8px, 2vw); transition: background 0.2s ease; font-size: clamp(0.9rem, 3.5vw, 1rem);" onmouseover="this.style.background='#edf2f7'" onmouseout="this.style.background='#f7fafc'"><strong>Discord:</strong> [https://discord.gg/Hc249nXbak <span style="color: #3675b8; text-decoration: none; font-weight: 500;">Join our Discord</span>]</div>
    display: inline-flex;
<div style="padding: min(1rem, 3vw); background: #f7fafc; border-radius: min(8px, 2vw); transition: background 0.2s ease; font-size: clamp(0.9rem, 3.5vw, 1rem);" onmouseover="this.style.background='#edf2f7'" onmouseout="this.style.background='#f7fafc'"><strong>Phorge:</strong> [https://phorge.wikioasis.org/ <span style="color: #3675b8; text-decoration: none; font-weight: 500;">Phorge</span>]</div>
    align-items: center;
    gap: 0.5rem;
    background: white;
    padding: 0.75rem 1.5rem;
    border-radius: 50px;
    text-decoration: none;
    color: #374151;
    font-weight: 500;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
  " onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 4px 20px rgba(0,0,0,0.15)'" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 2px 10px rgba(0,0,0,0.1)'">🔧 Phorge</span>]
</div>
</div>
```
  </div>
</div>
</div>


</div>
</div>
<style>
@keyframes pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0.8; }
}
@media (max-width: 768px) {
  .hero-section h1 {
    font-size: 2.5rem !important;
  }
 
  .cta-buttons {
    flex-direction: column !important;
    align-items: center !important;
  }
 
  .features-grid {
    grid-template-columns: 1fr !important;
  }
}
</style>
Retrieved from "https://meta.wikioasis.org/wiki/User:Globe/Main_page_redesign"
Cookies help us deliver our services. By using our services, you agree to our use of cookies.
More information