Content: Difference between revisions
Jump to navigation
Jump to search
No edit summary Tag: Reverted |
No edit summary Tag: Reverted |
||
| Line 1: | Line 1: | ||
<style> | <style> | ||
.tile-row { | .tile-row { | ||
display: flex; | display: flex; | ||
| Line 57: | Line 53: | ||
font-weight: 600; | font-weight: 600; | ||
padding: 5px 0; | padding: 5px 0; | ||
} | } | ||
| Line 84: | Line 68: | ||
</style> | </style> | ||
<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 class="mainpage-contents tile-row"> | |||
<div class="tile-halves"> | <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="tile-halves"> | <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="tile-halves"> | <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="tile-halves"> | <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="tile-halves"> | <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="tile-halves"> | <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="tile-halves"> | <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="tile-halves"> | <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="tile-halves"> | <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="tile-halves"> | <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]]</h2></div> | |||
</div> | </div> | ||
<div class="tile-halves"> | <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="tile-halves"> | <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> | ||
Revision as of 14:02, 6 March 2025
<style>
.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;
}
@media (max-width: 768px) {
.tile-halves {
width: calc(50% - 15px);
}
}
@media (max-width: 480px) {
.tile-halves {
width: 100%;
}
}
</style>
