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

De Wiki Gla
Ir para navegação Ir para pesquisar
Linha 1: Linha 1:
  <style>
<style>
    #content {
  #content {
      background: linear-gradient(#23242b, #284460);
    background: linear-gradient(#23242b, #284460);
      border: 1px solid #3283a2;
    border: 1px solid #3283a2;
      border-right: 0px;
    border-right: 0px;
     }
  }
 
  .mainPage__card {
     border: 4px solid #354967;
    border-radius: 4px;
  }


    .mainPage__card {
  .mainPage__cardTitle {
      border: 4px solid #354967;
    margin: 0;
      border-radius: 4px;
    background-color: #354967;
     }
    color: #fff;
    font-weight: 700;
    text-align: center;
     font-size: 1.3rem;
  }


    .mainPage__cardTitle {
  .mainPage__containerLinkIcon {
      background-color: #354967;
    display: grid;
      color: #fff;
    padding: .75rem 0;
      font-weight: 700;
    gap: 1rem;
      text-align: center;
    grid-template-columns: repeat(8, 1fr);
      font-size: 1.3rem;
    place-items: center;
    }
  }


    .mainPage__containerLinkIcon {
  .mainPage__linkIcon {
      display: grid;
    width: 9.5rem;
      padding: .75rem 0;
    margin-bottom: -10px;
      gap: 1rem;
  }
      grid-template-columns: repeat(8, 1fr);
      place-items: center;
    }


     .mainPage__linkIcon {   
  .mainPage__linkIconContainer::before {
      width: 9.5rem;
    content: "";
      margin-bottom: -10px;
    position: absolute;
     }
    top: 18px;
     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::before {
  .mainPage__linkIconContainer {
      content: "";
    width: fit-content;
      position: absolute;
    position: relative;
      top: 18px;
    display: grid;
      left: 1.39rem;
    place-items: center;
      width: 7.8rem;
    padding: .25rem;
      height: 8rem;
    padding-block-end: 0;
      background-image: url(/images/0/0b/Bg-mainPage-icon.png);
  }
      background-size: contain;
      background-repeat: no-repeat;
      z-index: -1;
    }


    .mainPage__linkIconContainer {
  .mainPage__subContentContainer {
      width: fit-content;
    display: flex;
      position: relative;
    justify-content: space-between;
      display: grid;
    gap: 1.5rem;
      place-items: center;
  }
      padding: .25rem;
      padding-block-end: 0;
    }


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




<div class="mainPage__card w-100">
<div class="mainPage__card w-100">
   <div class="mainPage__cardTitle">
   <h2 class="mainPage__cardTitle">
     Menu
     Menu
   </div>
   </h2>


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


<div class="mainPage__card w-100">
<div class="mainPage__subContentContainer">
  <div class="mainPage__card">
    <h2 class="mainPage__cardTitle">
      Characters
    </h2>
  </div>
 
  <div class="mainPage__card">
    <h2 class="mainPage__cardTitle">
      Active Events
    </h2>
  </div>
 
  <div class="mainPage__card">
    <h2 class="mainPage__cardTitle">
      Weekly Event
    </h2>
  </div>
</div>
</div>

Edição das 12h00min de 2 de maio de 2024

<style>

 #content {
   background: linear-gradient(#23242b, #284460);
   border: 1px solid #3283a2;
   border-right: 0px;
 }
 .mainPage__card {
   border: 4px solid #354967;
   border-radius: 4px;
 }
 .mainPage__cardTitle {
   margin: 0;
   background-color: #354967;
   color: #fff;
   font-weight: 700;
   text-align: center;
   font-size: 1.3rem;
 }
 .mainPage__containerLinkIcon {
   display: grid;
   padding: .75rem 0;
   gap: 1rem;
   grid-template-columns: repeat(8, 1fr);
   place-items: center;
 }
 .mainPage__linkIcon {
   width: 9.5rem;
   margin-bottom: -10px;
 }
 .mainPage__linkIconContainer::before {
   content: "";
   position: absolute;
   top: 18px;
   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 {
   display: flex;
   justify-content: space-between;
   gap: 1.5rem;
 }
 @media screen and (max-width: 1635px) {
   .mainPage__containerLinkIcon {
     grid-template-columns: repeat(4, 1fr);
   }
 }

</style>


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

Active Events

Weekly Event