Mudanças entre as edições de "Widget:Newmenu"

De Wiki Gla
Ir para navegação Ir para pesquisar
 
(54 revisões intermediárias pelo mesmo usuário não estão sendo mostradas)
Linha 2: Linha 2:
   #content {
   #content {
     background: linear-gradient(#23242b, #284460);
     background: linear-gradient(#23242b, #284460);
     box-shadow: rgb(21,87,119) 0px 8px 24px, rgb(21,87,119) 0px 0px 0px 2px;
     border: 1px solid #3283a2;
    border-right: 0px;
   }
   }
  .mainPage__eventBoss {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80%;
  }
  .mainPage__characterPageLink {
    color: white !important;
    font-size: 1.2rem;
    font-weight:bold;
    text-align: center;
  }
  .mainPage__charactersGrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    row-gap: 1.25rem;
    column-gap: 1rem;
    padding: .75rem;
  }
  .mainPage__characterLink {
    max-width: 7.5rem;
  }
  .mainPage__characterLink img {
    width: 100%;
    border-radius: 8px;
  }


   .mainPage__card {
   .mainPage__card {
     border: 4px solid #354967;
     border: 4px solid #354967;
    border-radius: 4px;
   }
   }


   .mainPage__cardTitle {
   .mainPage__cardTitle {
    margin-top: 0 !important;
    margin-bottom: 0!important;
padding: .15rem !important;
     background-color: #354967;
     background-color: #354967;
     color: #fff;
     color: #fff;
     font-weight: 700;
     font-weight: 700;
     text-align: center;
     text-align: center;
     font-size: 1.3rem;
     font-size: 1.55rem!important;
   }
   }


   .mainPage__containerLinkIcon {
   .mainPage__containerLinkIcon {
     display: grid;
     display: grid;
     grid-template-columns: repeat(9, 1fr);
    row-gap: .75rem;
    padding: .75rem 0;
     grid-template-columns: repeat(8, 1fr);
    place-items: center;
   }
   }


   .mainPage__linkIcon {
   .mainPage__linkIcon {
     width: 100%;
     width: 9.5rem;
    margin-bottom: -10px;
  }
 
  .mainPage__linkIconContainer::before {
    content: "";
    position: absolute;
    top: 1.15rem;;
    left: 1.39rem;
    width: 7.8rem;
    height: 8rem;
    background-image: url(/images/0/0b/Bg-mainPage-icon.png);
    background-size: contain;
    background-repeat: no-repeat;
    z-index: -1;
  }
 
  .mainPage__linkIconContainer {
    width: fit-content;
    position: relative;
    display: grid;
    place-items: center;
    padding: .25rem;
    padding-block-end: 0;
  }
 
  .mainPage__subContentContainer {
    margin-top: 1.5rem;
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
  }
 
  .mainPage__header {
    margin-top: 3rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-inline: 1rem;
  }
 
  .mainPage__headerBanner {
    width: 55rem;
    border-radius: 10px;
  }
 
.homePage__socialIconContainer {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding-block: 1rem;
  margin-inline-start: 1.25rem;
}
.homePage__socialIcon {
  width: 3rem;
  height: 3rem;
  background: #f1f1f1;
  border-radius: 15px;
  color: #354967!important;
  box-shadow: 0 5px 15px -5px #00000070;
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
}
 
.homePage__socialIcon svg {
  line-height: 5.5rem;
  width:1.3rem;
  transition: 0.2s;
}
 
.homePage__socialIcon:hover svg {
  transform: scale(1.3);
  color: #f1f1f1;
}
 
.homePage__socialIcon::before {
  content: "";
  position: absolute;
  width: 120%;
  height: 120%;
  background: #354967;
  left: -110%;
  top: 90%;
  transform: rotate(45deg);
}
 
.homePage__socialIcon:hover::before {
  animation: socialIconAnimation 0.7s 1 forwards;
}
 
.mainPage__bannerContainer {
  display: flex;
  align-items: center;
}
 
.homePage__newArrivedContainer {
    flex-direction: column;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-right: 4rem;
}
 
.homePage__newArrivedTitle {
    color: white;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    font-size: 1.8rem!important;
  font-weight: normal;
}
 
.mainPage__timerContainer {
  padding: .75rem;
  display:flex;
  flex-direction: column;
  gap: 1rem;
 
}
 
@keyframes socialIconAnimation {
  0% {
    left: -110%;
    top: 90%;
  }
 
  50% {
    left: 15%;
    top: -30%;
  }
 
  100% {
    top: -10%;
    left: -10%;
  }
}
 
  @media screen and (max-width: 1024px) {
    .mainPage__containerLinkIcon {
      grid-template-columns: repeat(4, 1fr);
    }
   }
   }
</style>
</style>


<header class="mainPage__header">
<div class="mainPage__bannerContainer">
<img class="mainPage__headerBanner" src="/images/thumb/2/2a/Home-banner.png/800px-Home-banner.png" alt="Banner de boas vindas" />
<div class="homePage__socialIconContainer">
    <a class="homePage__socialIcon" href="#">
      <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-instagram"
        viewBox="0 0 16 16">
        <path
          d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.9 3.9 0 0 0-1.417.923A3.9 3.9 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.9 3.9 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.9 3.9 0 0 0-.923-1.417A3.9 3.9 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599s.453.546.598.92c.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.5 2.5 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.5 2.5 0 0 1-.92-.598 2.5 2.5 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233s.008-2.388.046-3.231c.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92s.546-.453.92-.598c.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92m-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217m0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334" />
      </svg>
    </a>
    <a class="homePage__socialIcon" href="#">
      <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-youtube" viewBox="0 0 16 16">
        <path d="M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.01 2.01 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.01 2.01 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31 31 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.01 2.01 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A100 100 0 0 1 7.858 2zM6.4 5.209v4.818l4.157-2.408z"/>
      </svg>
    </a>
    <a class="homePage__socialIcon" href="#">
      <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-facebook" viewBox="0 0 16 16">
        <path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951"/>
      </svg>
    </a>
    <a class="homePage__socialIcon" href="#">
      <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-discord" viewBox="0 0 16 16">
        <path d="M13.545 2.907a13.2 13.2 0 0 0-3.257-1.011.05.05 0 0 0-.052.025c-.141.25-.297.577-.406.833a12.2 12.2 0 0 0-3.658 0 8 8 0 0 0-.412-.833.05.05 0 0 0-.052-.025c-1.125.194-2.22.534-3.257 1.011a.04.04 0 0 0-.021.018C.356 6.024-.213 9.047.066 12.032q.003.022.021.037a13.3 13.3 0 0 0 3.995 2.02.05.05 0 0 0 .056-.019q.463-.63.818-1.329a.05.05 0 0 0-.01-.059l-.018-.011a9 9 0 0 1-1.248-.595.05.05 0 0 1-.02-.066l.015-.019q.127-.095.248-.195a.05.05 0 0 1 .051-.007c2.619 1.196 5.454 1.196 8.041 0a.05.05 0 0 1 .053.007q.121.1.248.195a.05.05 0 0 1-.004.085 8 8 0 0 1-1.249.594.05.05 0 0 0-.03.03.05.05 0 0 0 .003.041c.24.465.515.909.817 1.329a.05.05 0 0 0 .056.019 13.2 13.2 0 0 0 4.001-2.02.05.05 0 0 0 .021-.037c.334-3.451-.559-6.449-2.366-9.106a.03.03 0 0 0-.02-.019m-8.198 7.307c-.789 0-1.438-.724-1.438-1.612s.637-1.613 1.438-1.613c.807 0 1.45.73 1.438 1.613 0 .888-.637 1.612-1.438 1.612m5.316 0c-.788 0-1.438-.724-1.438-1.612s.637-1.613 1.438-1.613c.807 0 1.451.73 1.438 1.613 0 .888-.631 1.612-1.438 1.612"/>
      </svg>
    </a>
  </div>
</div>
  <div class="homePage__newArrivedContainer">
  <img src="/images/thumb/b/b6/Akainu-arrived.webp/150px-Akainu-arrived.webp.png" alt="New character icon" />
  <h2 class="homePage__newArrivedTitle"> <span style="font-weight:600;"> Admiral Akainu </span> has <br> arrived! </h2>
  </div>
</header>


<div class="mainPage__card w-100">
<div class="mainPage__card w-100">
   <div class="mainPage__cardTitle">
   <h2 class="mainPage__cardTitle">
     Menu
     Menu
  </h2>
  <div class="mainPage__containerLinkIcon">
    <a href="#" class="mainPage__linkIconContainer">
      <img src="/images/d/dc/Boost-mainPage-icon.png" alt="Icone de boost de equipamentos" class="mainPage__linkIcon" />
    </a>
    <a href="#" class="mainPage__linkIconContainer">
      <img src="/images/a/a4/Characters-mainPage-icon.png" alt="Icone de personagens" class="mainPage__linkIcon" />
    </a>
    <a href="#" class="mainPage__linkIconContainer">
      <img src="/images/b/bd/Chests-mainPage-icon.png" alt="Icone de baus" class="mainPage__linkIcon" />
    </a>
    <a href="#" class="mainPage__linkIconContainer">
      <img src="/images/6/65/Items-mainPage-icon.png" alt="Icone de items" class="mainPage__linkIcon" />
    </a>
    <a href="#" class="mainPage__linkIconContainer">
      <img src="/images/9/99/Noland-mainPage-icon.png" alt="Icone do Noland" class="mainPage__linkIcon" />
    </a>
    <a href="#" class="mainPage__linkIconContainer">
      <img src="/images/a/ab/Wb-mainPage-icon.png" alt="Icone dos world bosses" class="mainPage__linkIcon" />
    </a>
    <a href="#" class="mainPage__linkIconContainer">
      <img src="/images/5/5e/Weekly-mainPage-icon.png" alt="Icone dos weekly bosses" class="mainPage__linkIcon" />
    </a>
    <a href="#" class="mainPage__linkIconContainer">
      <img src="/images/b/be/Wanted-mainPage-icon.png" alt="Icone dos wanted pirates" class="mainPage__linkIcon" />
    </a>
   </div>
   </div>
   <div class="mainPage__containerLinkIcon">
</div>
     <img
 
       src="https://media.discordapp.net/attachments/1063632353597079592/1231337192387776612/chests.png?ex=6636971f&is=6624221f&hm=5fc2eaa17580af5f65453c0622eb3e5e88f781f59861450acb790a3decf85b65&=&format=webp&quality=lossless"
<div class="mainPage__subContentContainer">
       alt="" class="mainPage__linkIcon" />
   <div class="mainPage__card">
    <img
     <h2 class="mainPage__cardTitle">
      src="https://media.discordapp.net/attachments/1063632353597079592/1231337192786497567/items.png?ex=6636971f&is=6624221f&hm=da92e7fcc9a7f60648f459adb28e5d56e869849ec8242e3a7c0ccb09ccde2a71&=&format=webp&quality=lossless"
      Characters
       alt="" class="mainPage__linkIcon" />
    </h2>
    <img
    <div class="mainPage__charactersGrid">
      src="https://media.discordapp.net/attachments/1063632353597079592/1231337193084157972/noland.png?ex=6625739f&is=6624221f&hm=25e92a93c75d400c505be453a66c57406e2f6009c818fb152a7f56d9016f7dba&=&format=webp&quality=lossless"
       <a class="mainPage__characterLink" href="#">
       alt="" class="mainPage__linkIcon" />
        <img src="https://picsum.photos/300/300" alt="Imagem de personagem do GLA" />
    <img
      </a>   
      src="https://media.discordapp.net/attachments/1063632353597079592/1231337193348272268/wb.png?ex=66369720&is=66242220&hm=09507552dfaf7b2b0eb05b15455321f6cb6b79d0570e6ad747ea9f336dba63d1&=&format=webp&quality=lossless"
      <a class="mainPage__characterLink" href="#">
       alt="" class="mainPage__linkIcon" />
        <img src="https://picsum.photos/300/300" alt="Imagem de personagem do GLA" />
    <img
       </a>
      src="https://media.discordapp.net/attachments/1063632353597079592/1231337193612775504/wb2.png?ex=66369720&is=66242220&hm=ed63108541803845a1139c36fec9ae7480f081f514cb00e01862083b5e0b4cdf&=&format=webp&quality=lossless"
      <a class="mainPage__characterLink" href="#">
       alt="" class="mainPage__linkIcon" />
        <img src="https://picsum.photos/300/300" alt="Imagem de personagem do GLA" />
    <img
      </a>
      src="https://media.discordapp.net/attachments/1063632353597079592/1231337193847521501/wb3.png?ex=66369720&is=66242220&hm=80972e8183f27915695c231c44135f8ad72f009f22f407687effc33259395fdd&=&format=webp&quality=lossless"
      <a class="mainPage__characterLink" href="#">
      alt="" class="mainPage__linkIcon" />
        <img src="https://picsum.photos/300/300" alt="Imagem de personagem do GLA" />
    <img
       </a>
      src="https://media.discordapp.net/attachments/1063632353597079592/1231337194086731897/wp.png?ex=662573a0&is=66242220&hm=403a59682f734caed88424db0f5f4d9eb8d52e0a94bab485cfb6dc6796d4e1a2&=&format=webp&quality=lossless"
      <a class="mainPage__characterLink" href="#">
      alt="" class="mainPage__linkIcon" />
        <img src="https://picsum.photos/300/300" alt="Imagem de personagem do GLA" />
    <img
      </a>
      src="https://media.discordapp.net/attachments/1063632353597079592/1231337194694643843/boost.png?ex=662573a0&is=66242220&hm=586157744b204a046dab014a128c127fa94a9871d31b7ac41b239566e665c832&=&format=webp&quality=lossless"
       <a class="mainPage__characterLink" href="#">
      alt="" class="mainPage__linkIcon" />
        <img src="https://picsum.photos/300/300" alt="Imagem de personagem do GLA" />
     <img
      </a>
      src="https://media.discordapp.net/attachments/1063632353597079592/1231337194950623293/characters.png?ex=66369720&is=66242220&hm=2eb77625af9d4e46547ee8d5154a35b49e42f625acec6068ca6c6a19d66432bf&=&format=webp&quality=lossless"
       <a class="mainPage__characterLink" href="#">
      alt="" class="mainPage__linkIcon" />
        <img src="https://picsum.photos/300/300" alt="Imagem de personagem do GLA" />
      </a>
       <a class="mainPage__characterLink" href="#">
        <img src="https://picsum.photos/300/300" alt="Imagem de personagem do GLA" />
      </a>
    </div>
    <a href="#" class="mainPage__characterPageLink">
    See all characters
    </a>
  </div>
 
  <div class="mainPage__card">
    <h2 class="mainPage__cardTitle">
      Active Events
    </h2>
    <div class="mainPage__timerContainer">
<a href="" class="image d-block relative">
<img alt="Evento atual" src="/images/e/e4/Event_count.png" decoding="async" width="175" height="50" class="event-image" data-file-width="175" data-file-height="50">
<span id="event-time">00:00:00</span>
</a>
<a href="" class="image d-block relative">
<img alt="Evento atual" src="/images/e/e4/Event_count.png" decoding="async" width="175" height="50" class="event-image" data-file-width="175" data-file-height="50">
<span id="event-time2">00:00:00</span>
</a>
 
    </div>
  </div>
 
  <div class="mainPage__card">
    <h2 class="mainPage__cardTitle">
      Weekly Event
    </h2>
     <div class="mainPage__eventBoss">
    <a style="padding: .75rem;" href="/index.php/Bananawani" title="Bananawani">
<img alt="Bananawaniwbof.png" src="/images/b/be/Bananawaniwbof.png" decoding="async" width="263" height="216" data-file-width="175" data-file-height="144">
</a>
    </div>
   </div>
   </div>
</div>
</div>

Edição atual tal como às 12h34min de 29 de maio de 2024

<style>

 #content {
   background: linear-gradient(#23242b, #284460);
   border: 1px solid #3283a2;
   border-right: 0px;
 }
 .mainPage__eventBoss {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 80%;
 }
 .mainPage__characterPageLink {
    color: white !important;
    font-size: 1.2rem;
    font-weight:bold;
    text-align: center;
 }
 .mainPage__charactersGrid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   row-gap: 1.25rem;
   column-gap: 1rem;
   padding: .75rem;
 }
 .mainPage__characterLink {
   max-width: 7.5rem;
 }
 .mainPage__characterLink img {
    width: 100%;
    border-radius: 8px;
  }
 .mainPage__card {
   border: 4px solid #354967;
   border-radius: 4px;
 }
 .mainPage__cardTitle {
   margin-top: 0 !important;
   margin-bottom: 0!important;

padding: .15rem !important;

   background-color: #354967;
   color: #fff;
   font-weight: 700;
   text-align: center;
   font-size: 1.55rem!important;
 }
 .mainPage__containerLinkIcon {
   display: grid;
   row-gap: .75rem;
   padding: .75rem 0;
   grid-template-columns: repeat(8, 1fr);
   place-items: center;
 }
 .mainPage__linkIcon {
   width: 9.5rem;
   margin-bottom: -10px;
 }
 .mainPage__linkIconContainer::before {
   content: "";
   position: absolute;
   top: 1.15rem;;
   left: 1.39rem;
   width: 7.8rem;
   height: 8rem;
   background-image: url(/images/0/0b/Bg-mainPage-icon.png);
   background-size: contain;
   background-repeat: no-repeat;
   z-index: -1;
 }
 .mainPage__linkIconContainer {
   width: fit-content;
   position: relative;
   display: grid;
   place-items: center;
   padding: .25rem;
   padding-block-end: 0;
 }
 .mainPage__subContentContainer {
   margin-top: 1.5rem;
   display: flex;
   justify-content: space-between;
   gap: 1.5rem;
 }
 .mainPage__header {
   margin-top: 3rem;
   margin-bottom: 1.5rem;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
   padding-inline: 1rem;
 }
 .mainPage__headerBanner {
    width: 55rem;
    border-radius: 10px;
 }

.homePage__socialIconContainer {

 display: flex;
 flex-direction: column;
 gap: .75rem;
 padding-block: 1rem;
 margin-inline-start: 1.25rem;

} .homePage__socialIcon {

 width: 3rem;
 height: 3rem;
 background: #f1f1f1;
 border-radius: 15px;
 color: #354967!important;
 box-shadow: 0 5px 15px -5px #00000070;
 position: relative;
 overflow: hidden;
 display: grid;
 place-items: center;

}

.homePage__socialIcon svg {

 line-height: 5.5rem;
 width:1.3rem;
 transition: 0.2s;

}

.homePage__socialIcon:hover svg {

 transform: scale(1.3);
 color: #f1f1f1;

}

.homePage__socialIcon::before {

 content: "";
 position: absolute;
 width: 120%;
 height: 120%;
 background: #354967;
 left: -110%;
 top: 90%;
 transform: rotate(45deg);

}

.homePage__socialIcon:hover::before {

 animation: socialIconAnimation 0.7s 1 forwards;

}

.mainPage__bannerContainer {

 display: flex;
 align-items: center;

}

.homePage__newArrivedContainer {

   flex-direction: column;
   display: flex;
   justify-content: center;
   align-items: center;
   padding-right: 4rem;

}

.homePage__newArrivedTitle {

   color: white;
   margin-bottom: 0 !important;
   margin-top: 0 !important;
   font-size: 1.8rem!important;
  font-weight: normal;

}

.mainPage__timerContainer {

 padding: .75rem;
 display:flex;
 flex-direction: column;
 gap: 1rem;

}

@keyframes socialIconAnimation {

 0% {
   left: -110%;
   top: 90%;
 }
 50% {
   left: 15%;
   top: -30%;
 }
 100% {
   top: -10%;
   left: -10%;
 }

}

 @media screen and (max-width: 1024px) {
   .mainPage__containerLinkIcon {
     grid-template-columns: repeat(4, 1fr);
   }
 }

</style>


<header class="mainPage__header">

<img class="mainPage__headerBanner" src="/images/thumb/2/2a/Home-banner.png/800px-Home-banner.png" alt="Banner de boas vindas" />

   <a class="homePage__socialIcon" href="#">
     <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-instagram"
       viewBox="0 0 16 16">
       <path
         d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.9 3.9 0 0 0-1.417.923A3.9 3.9 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.9 3.9 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.9 3.9 0 0 0-.923-1.417A3.9 3.9 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599s.453.546.598.92c.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.5 2.5 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.5 2.5 0 0 1-.92-.598 2.5 2.5 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233s.008-2.388.046-3.231c.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92s.546-.453.92-.598c.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92m-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217m0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334" />
     </svg>
   </a>
   <a class="homePage__socialIcon" href="#">
     <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-youtube" viewBox="0 0 16 16">
       <path d="M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.01 2.01 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.01 2.01 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31 31 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.01 2.01 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A100 100 0 0 1 7.858 2zM6.4 5.209v4.818l4.157-2.408z"/>
     </svg>
   </a>
   <a class="homePage__socialIcon" href="#">
     <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-facebook" viewBox="0 0 16 16">
       <path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951"/>
     </svg>
   </a>
   <a class="homePage__socialIcon" href="#">
     <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-discord" viewBox="0 0 16 16">
       <path d="M13.545 2.907a13.2 13.2 0 0 0-3.257-1.011.05.05 0 0 0-.052.025c-.141.25-.297.577-.406.833a12.2 12.2 0 0 0-3.658 0 8 8 0 0 0-.412-.833.05.05 0 0 0-.052-.025c-1.125.194-2.22.534-3.257 1.011a.04.04 0 0 0-.021.018C.356 6.024-.213 9.047.066 12.032q.003.022.021.037a13.3 13.3 0 0 0 3.995 2.02.05.05 0 0 0 .056-.019q.463-.63.818-1.329a.05.05 0 0 0-.01-.059l-.018-.011a9 9 0 0 1-1.248-.595.05.05 0 0 1-.02-.066l.015-.019q.127-.095.248-.195a.05.05 0 0 1 .051-.007c2.619 1.196 5.454 1.196 8.041 0a.05.05 0 0 1 .053.007q.121.1.248.195a.05.05 0 0 1-.004.085 8 8 0 0 1-1.249.594.05.05 0 0 0-.03.03.05.05 0 0 0 .003.041c.24.465.515.909.817 1.329a.05.05 0 0 0 .056.019 13.2 13.2 0 0 0 4.001-2.02.05.05 0 0 0 .021-.037c.334-3.451-.559-6.449-2.366-9.106a.03.03 0 0 0-.02-.019m-8.198 7.307c-.789 0-1.438-.724-1.438-1.612s.637-1.613 1.438-1.613c.807 0 1.45.73 1.438 1.613 0 .888-.637 1.612-1.438 1.612m5.316 0c-.788 0-1.438-.724-1.438-1.612s.637-1.613 1.438-1.613c.807 0 1.451.73 1.438 1.613 0 .888-.631 1.612-1.438 1.612"/>
     </svg>
   </a>
  <img src="/images/thumb/b/b6/Akainu-arrived.webp/150px-Akainu-arrived.webp.png" alt="New character icon" />

Admiral Akainu has
arrived!

</header>

Menu

   <a href="#" class="mainPage__linkIconContainer">
     <img src="/images/d/dc/Boost-mainPage-icon.png" alt="Icone de boost de equipamentos" class="mainPage__linkIcon" />
   </a>
   <a href="#" class="mainPage__linkIconContainer">
     <img src="/images/a/a4/Characters-mainPage-icon.png" alt="Icone de personagens" class="mainPage__linkIcon" />
   </a>
   <a href="#" class="mainPage__linkIconContainer">
     <img src="/images/b/bd/Chests-mainPage-icon.png" alt="Icone de baus" class="mainPage__linkIcon" />
   </a>
   <a href="#" class="mainPage__linkIconContainer">
     <img src="/images/6/65/Items-mainPage-icon.png" alt="Icone de items" class="mainPage__linkIcon" />
   </a>
   <a href="#" class="mainPage__linkIconContainer">
     <img src="/images/9/99/Noland-mainPage-icon.png" alt="Icone do Noland" class="mainPage__linkIcon" />
   </a>
   <a href="#" class="mainPage__linkIconContainer">
     <img src="/images/a/ab/Wb-mainPage-icon.png" alt="Icone dos world bosses" class="mainPage__linkIcon" />
   </a>
   <a href="#" class="mainPage__linkIconContainer">
     <img src="/images/5/5e/Weekly-mainPage-icon.png" alt="Icone dos weekly bosses" class="mainPage__linkIcon" />
   </a>
   <a href="#" class="mainPage__linkIconContainer">
     <img src="/images/b/be/Wanted-mainPage-icon.png" alt="Icone dos wanted pirates" class="mainPage__linkIcon" />
   </a>

Characters

     <a class="mainPage__characterLink" href="#">
        <img src="https://picsum.photos/300/300" alt="Imagem de personagem do GLA" />
     </a>    
     <a class="mainPage__characterLink" href="#">
        <img src="https://picsum.photos/300/300" alt="Imagem de personagem do GLA" />
     </a>
     <a class="mainPage__characterLink" href="#">
        <img src="https://picsum.photos/300/300" alt="Imagem de personagem do GLA" />
     </a>
     <a class="mainPage__characterLink" href="#">
        <img src="https://picsum.photos/300/300" alt="Imagem de personagem do GLA" />
     </a>
     <a class="mainPage__characterLink" href="#">
        <img src="https://picsum.photos/300/300" alt="Imagem de personagem do GLA" />
     </a>
     <a class="mainPage__characterLink" href="#">
        <img src="https://picsum.photos/300/300" alt="Imagem de personagem do GLA" />
     </a>
     <a class="mainPage__characterLink" href="#">
        <img src="https://picsum.photos/300/300" alt="Imagem de personagem do GLA" />
     </a>
     <a class="mainPage__characterLink" href="#">
        <img src="https://picsum.photos/300/300" alt="Imagem de personagem do GLA" />
     </a>
   <a href="#" class="mainPage__characterPageLink">
    See all characters
   </a>

Active Events

<a href="" class="image d-block relative"> <img alt="Evento atual" src="/images/e/e4/Event_count.png" decoding="async" width="175" height="50" class="event-image" data-file-width="175" data-file-height="50"> 00:00:00 </a> <a href="" class="image d-block relative"> <img alt="Evento atual" src="/images/e/e4/Event_count.png" decoding="async" width="175" height="50" class="event-image" data-file-width="175" data-file-height="50"> 00:00:00 </a>

Weekly Event

    <a style="padding: .75rem;" href="/index.php/Bananawani" title="Bananawani">

<img alt="Bananawaniwbof.png" src="/images/b/be/Bananawaniwbof.png" decoding="async" width="263" height="216" data-file-width="175" data-file-height="144"> </a>