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

De Wiki Gla
Ir para navegação Ir para pesquisar
 
(31 revisões intermediárias pelo mesmo usuário não estão sendo mostradas)
Linha 5: Linha 5:
     border-right: 0px;
     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 {
Linha 14: Linha 45:
     margin-top: 0 !important;
     margin-top: 0 !important;
     margin-bottom: 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;
    row-gap: .75rem;
     padding: .75rem 0;
     padding: .75rem 0;
    gap: 1rem;
     grid-template-columns: repeat(8, 1fr);
     grid-template-columns: repeat(8, 1fr);
     place-items: center;
     place-items: center;
Linha 37: Linha 69:
     content: "";
     content: "";
     position: absolute;
     position: absolute;
     top: 18px;
     top: 1.15rem;;
     left: 1.39rem;
     left: 1.39rem;
     width: 7.8rem;
     width: 7.8rem;
Linha 68: Linha 100:
     display: flex;
     display: flex;
     align-items: center;
     align-items: center;
    justify-content: space-between;
     gap: 1rem;
     gap: 1rem;
     padding-inline: 1rem;
     padding-inline: 1rem;
Linha 82: Linha 115:
   gap: .75rem;
   gap: .75rem;
   padding-block: 1rem;
   padding-block: 1rem;
  margin-inline-start: 1.25rem;
}
}
.homePage__socialIcon {
.homePage__socialIcon {
Linha 120: Linha 154:
.homePage__socialIcon:hover::before {
.homePage__socialIcon:hover::before {
   animation: socialIconAnimation 0.7s 1 forwards;
   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;
}
}


Linha 139: Linha 202:
}
}


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


<header class="mainPage__header">  
<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" />
<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">
<div class="homePage__socialIconContainer">
Linha 173: Linha 237:
     </a>
     </a>
   </div>
   </div>
</div>


   <div>  
   <div class="homePage__newArrivedContainer">  
   <img src="/images/thumb/b/b6/Akainu-arrived.webp/150px-Akainu-arrived.webp.png" alt="New character icon" />
   <img src="/images/thumb/b/b6/Akainu-arrived.webp/150px-Akainu-arrived.webp.png" alt="New character icon" />
   <h2> <span> Admiral Akainu <span> has arrived! </h2>
   <h2 class="homePage__newArrivedTitle"> <span style="font-weight:600;"> Admiral Akainu </span> has <br> arrived! </h2>
   </div>
   </div>
</header>
</header>
Linha 218: Linha 283:
       Characters
       Characters
     </h2>
     </h2>
    <div class="mainPage__charactersGrid">
      <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>
    </div>
    <a href="#" class="mainPage__characterPageLink">
    See all characters
    </a>
   </div>
   </div>


Linha 224: Linha 318:
       Active Events
       Active Events
     </h2>
     </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>


Linha 230: Linha 335:
       Weekly Event
       Weekly Event
     </h2>
     </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>

Disponível em “http://wiki.gla.com.br/index.php?title=Widget:Newmenu&oldid=18830”