Content: Difference between revisions
Jump to navigation
Jump to search
Created page with "<noinclude>{{/doc}}</noinclude>__NOTOC__ <div class="mainpage-recent-updates tile-row"> <div class="tile-halves"> <div class="tile-top tile-image">link=Server Rules|alt=Rules</div> <div class="tile-bottom link-button"><h2 style="text-align:center">Server Rules</h2></div> </div> <div class="tile-halves"> <div class="tile-top tile-image">link=Donating|alt=Donating</div> <div class="t..." |
No edit summary Tag: Reverted |
||
Line 1: | Line 1: | ||
< | <style> | ||
<div class="mainpage-recent-updates tile-row"> | .mainpage-section { | ||
margin-bottom: 30px; | |||
} | |||
.tile-row { | |||
display: flex; | |||
flex-wrap: wrap; | |||
justify-content: center; | |||
gap: 15px; | |||
margin-bottom: 20px; | |||
} | |||
.tile-halves { | |||
width: calc(33.33% - 15px); | |||
min-width: 150px; | |||
border-radius: 8px; | |||
overflow: hidden; | |||
box-shadow: 0 4px 8px rgba(0,0,0,0.1); | |||
transition: transform 0.3s ease, box-shadow 0.3s ease; | |||
background-color: #fff; | |||
margin-bottom: 15px; | |||
} | |||
.tile-halves:hover { | |||
transform: translateY(-5px); | |||
box-shadow: 0 8px 16px rgba(0,0,0,0.15); | |||
} | |||
.tile-image { | |||
width: 100%; | |||
height: auto; | |||
overflow: hidden; | |||
} | |||
.tile-image img { | |||
width: 100%; | |||
height: auto; | |||
transition: transform 0.5s ease; | |||
display: block; | |||
} | |||
.tile-halves:hover .tile-image img { | |||
transform: scale(1.05); | |||
} | |||
.tile-bottom { | |||
padding: 10px; | |||
background-color: #202020; | |||
text-align: center; | |||
} | |||
.link-button h2 { | |||
margin: 0; | |||
font-size: 18px; | |||
color: #caaa61; | |||
font-weight: 600; | |||
padding: 5px 0; | |||
} | |||
.section-title { | |||
color: #caaa61; | |||
text-align: center; | |||
margin-bottom: 20px; | |||
font-size: 24px; | |||
font-weight: bold; | |||
text-transform: uppercase; | |||
letter-spacing: 1px; | |||
padding-bottom: 10px; | |||
border-bottom: 2px solid #caaa61; | |||
} | |||
@media (max-width: 768px) { | |||
.tile-halves { | |||
width: calc(50% - 15px); | |||
} | |||
} | |||
@media (max-width: 480px) { | |||
.tile-halves { | |||
width: 100%; | |||
} | |||
} | |||
</style> | |||
<div class="mainpage-section"> | |||
<h1 class="section-title">Server Informatie</h1> | |||
<div class="mainpage-recent-updates tile-row"> | |||
<div class="tile-halves"> | <div class="tile-halves"> | ||
<div class="tile-top tile-image">[[File:Rules3.png|link=Server Rules|alt=Rules]]</div> | |||
<div class="tile-bottom link-button"><h2>[[Server Rules]]</h2></div> | |||
</div> | </div> | ||
<div class="tile-halves"> | <div class="tile-halves"> | ||
<div class="tile-top tile-image">[[File:Donation4.png|link=Donating|alt=Donating]]</div> | |||
<div class="tile-bottom link-button"><h2>[[Donating]]</h2></div> | |||
</div> | </div> | ||
<div class="tile-halves"> | <div class="tile-halves"> | ||
<div class="tile-top tile-image">[[File:Voting.png|link=Voting|alt=Voting]]</div> | |||
<div class="tile-bottom link-button"><h2>[[Voting]]</h2></div> | |||
</div> | </div> | ||
</div> | |||
</div> | </div> | ||
<div class="mainpage-contents tile-row"> | <div class="mainpage-section"> | ||
<div class=" | <h1 class="section-title">Gameplay Informatie</h1> | ||
<div class="mainpage-contents tile-row"> | |||
<div class="tile-halves"> | |||
<div class="tile-top tile-image">[[File:Achievements.png|link=Achievements]]</div> | |||
<div class="tile-bottom link-button"><h2>[[Achievements]]</h2></div> | |||
</div> | </div> | ||
<div class=" | <div class="tile-halves"> | ||
<div class="tile-top tile-image">[[File:Afkzone.png|link=Afk Zone]]</div> | |||
<div class="tile-bottom link-button"><h2>[[Afk Zone]]</h2></div> | |||
</div> | </div> | ||
<div class=" | <div class="tile-halves"> | ||
<div class="tile-top tile-image">[[File:Bosses1.png|link=Bosses]]</div> | |||
<div class="tile-bottom link-button"><h2>[[Bosses]]</h2></div> | |||
</div> | </div> | ||
<div class=" | <div class="tile-halves"> | ||
<div class="tile-top tile-image">[[File:Droprates.png|link=Drop Rates]]</div> | |||
<div class="tile-bottom link-button"><h2>[[Drop Rates]]</h2></div> | |||
</div> | </div> | ||
<div class=" | <div class="tile-halves"> | ||
<div class="tile-top tile-image">[[File:Exprates.png|link=Experience Rates]]</div> | |||
<div class="tile-bottom link-button"><h2>[[Experience Rates]]</h2></div> | |||
</div> | </div> | ||
<div class=" | <div class="tile-halves"> | ||
<div class="tile-top tile-image">[[File:Gamemodes.png|link=Game Modes]]</div> | |||
<div class="tile-bottom link-button"><h2>[[Game Modes]]</h2></div> | |||
</div> | </div> | ||
<div class=" | <div class="tile-halves"> | ||
<div class="tile-top tile-image">[[File:Minigames.png|link=Minigames]]</div> | |||
<div class="tile-bottom link-button"><h2>[[Minigames]]</h2></div> | |||
</div> | </div> | ||
<div class=" | <div class="tile-halves"> | ||
<div class="tile-top tile-image">[[File:Slayer.png|link=Slayer]]</div> | |||
<div class="tile-bottom link-button"><h2>[[Slayer]]</h2></div> | |||
</div> | </div> | ||
<div class=" | <div class="tile-halves"> | ||
<div class="tile-top tile-image">[[File:Home.png|link=Home Area]]</div> | |||
<div class="tile-bottom link-button"><h2>[[Home Area]]</h2></div> | |||
</div> | </div> | ||
<div class=" | <div class="tile-halves"> | ||
<div class="tile-top tile-image">[[File:Upgrades.png|link=Item Upgrades]]</div> | |||
<div class="tile-bottom link-button"><h2>[[Item Upgrades|Item Upgrades]]</h2></div> | |||
</div> | </div> | ||
<div class=" | <div class="tile-halves"> | ||
<div class="tile-top tile-image">[[File:Skillguides.png|link=Skills]]</div> | |||
<div class="tile-bottom link-button"><h2>[[Skill Guides]]</h2></div> | |||
</div> | </div> | ||
<div class=" | <div class="tile-halves"> | ||
<div class="tile-top tile-image">[[File:Skillzone.png|link=Skilling Area]]</div> | |||
<div class="tile-bottom link-button"><h2>[[Skilling Area]]</h2></div> | |||
</div> | </div> | ||
</div> | |||
</div> | </div> |
Revision as of 14:00, 6 March 2025
<style>
.mainpage-section { margin-bottom: 30px; } .tile-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; margin-bottom: 20px; } .tile-halves { width: calc(33.33% - 15px); min-width: 150px; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 8px rgba(0,0,0,0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; background-color: #fff; margin-bottom: 15px; } .tile-halves:hover { transform: translateY(-5px); box-shadow: 0 8px 16px rgba(0,0,0,0.15); } .tile-image { width: 100%; height: auto; overflow: hidden; } .tile-image img { width: 100%; height: auto; transition: transform 0.5s ease; display: block; } .tile-halves:hover .tile-image img { transform: scale(1.05); } .tile-bottom { padding: 10px; background-color: #202020; text-align: center; } .link-button h2 { margin: 0; font-size: 18px; color: #caaa61; font-weight: 600; padding: 5px 0; } .section-title { color: #caaa61; text-align: center; margin-bottom: 20px; font-size: 24px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; padding-bottom: 10px; border-bottom: 2px solid #caaa61; } @media (max-width: 768px) { .tile-halves { width: calc(50% - 15px); } } @media (max-width: 480px) { .tile-halves { width: 100%; } }
</style>