Content: Difference between revisions

From Delve Wiki
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:
<noinclude>{{/doc}}</noinclude>__NOTOC__
<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-top tile-image">[[File:Rules3.png|link=Server Rules|alt=Rules]]</div>
        <div class="tile-bottom link-button"><h2 style="text-align:center">[[Server Rules]]</h2></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-top tile-image">[[File:Donation4.png|link=Donating|alt=Donating]]</div>
        <div class="tile-bottom link-button"><h2>[[Donating]]</h2></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=Pets]]</div>
      <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 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="contents-equipment tile-halves">
  <h1 class="section-title">Gameplay Informatie</h1>
        <div class="tile-top tile-image">[[File:Achievements.png|link=Achievements]]</div>
  <div class="mainpage-contents tile-row">
        <div class="tile-bottom link-button"><h2>[[Achievements]]</h2></div>
     <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="contents-equipment tile-halves">
     <div class="tile-halves">
        <div class="tile-top tile-image">[[File:Afkzone.png|link=Afk Zone]]</div>
      <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 class="tile-bottom link-button"><h2>[[Afk Zone]]</h2></div>
     </div>
     </div>
     <div class="contents-guides tile-halves">
     <div class="tile-halves">
        <div class="tile-top tile-image">[[File:Bosses1.png|link=Bosses]]</div>
      <div class="tile-top tile-image">[[File:Bosses1.png|link=Bosses]]</div>
        <div class="tile-bottom link-button"><h2>[[Bosses]]</h2></div>
      <div class="tile-bottom link-button"><h2>[[Bosses]]</h2></div>
     </div>
     </div>
     <div class="contents-guides tile-halves">
     <div class="tile-halves">
        <div class="tile-top tile-image">[[File:Droprates.png|link=Drop Rates]]</div>
      <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 class="tile-bottom link-button"><h2>[[Drop Rates]]</h2></div>
     </div>
     </div>
     <div class="contents-guides tile-halves">
     <div class="tile-halves">
        <div class="tile-top tile-image">[[File:Exprates.png|link=Experience Rates]]</div>
      <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 class="tile-bottom link-button"><h2>[[Experience Rates]]</h2></div>
     </div>
     </div>
     <div class="contents-guides tile-halves">
     <div class="tile-halves">
        <div class="tile-top tile-image">[[File:Gamemodes.png|link=Game Modes]]</div>
      <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 class="tile-bottom link-button"><h2>[[Game Modes]]</h2></div>
     </div>
     </div>
     <div class="contents-quests tile-halves">
     <div class="tile-halves">
        <div class="tile-top tile-image">[[File:Minigames.png|link=Minigames]]</div>
      <div class="tile-top tile-image">[[File:Minigames.png|link=Minigames]]</div>
        <div class="tile-bottom link-button"><h2>[[Minigames]]</h2></div>
      <div class="tile-bottom link-button"><h2>[[Minigames]]</h2></div>
     </div>
     </div>
     <div class="contents-bestiary tile-halves">
     <div class="tile-halves">
        <div class="tile-top tile-image">[[File:Slayer.png|link=Slayer]]</div>
      <div class="tile-top tile-image">[[File:Slayer.png|link=Slayer]]</div>
        <div class="tile-bottom link-button"><h2>[[Slayer]]</h2></div>
      <div class="tile-bottom link-button"><h2>[[Slayer]]</h2></div>
     </div>
     </div>
     <div class="contents-minigames tile-halves">
     <div class="tile-halves">
        <div class="tile-top tile-image">[[File:Home.png|link=Home Area]]</div>
      <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 class="tile-bottom link-button"><h2>[[Home Area]]</h2></div>
     </div>
     </div>
     <div class="contents-minigames tile-halves">
     <div class="tile-halves">
        <div class="tile-top tile-image">[[File:Upgrades.png|link=Item Upgrades]]</div>
      <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 class="tile-bottom link-button"><h2>[[Item Upgrades|Item Upgrades]]</h2></div>
     </div>
     </div>
     <div class="contents-minigames tile-halves">
     <div class="tile-halves">
        <div class="tile-top tile-image">[[File:Skillguides.png|link=Skills]]</div>
      <div class="tile-top tile-image">[[File:Skillguides.png|link=Skills]]</div>
        <div class="tile-bottom link-button"><h2>[[Skill Guides]]</h2></div>
      <div class="tile-bottom link-button"><h2>[[Skill Guides]]</h2></div>
     </div>
     </div>
     <div class="contents-minigames tile-halves">
     <div class="tile-halves">
        <div class="tile-top tile-image">[[File:Skillzone.png|link=Skilling Area]]</div>
      <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 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>