Mudanças entre as edições de "Widget:Newmenu"
Ir para navegação
Ir para pesquisar
| Linha 1: | Linha 1: | ||
<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> | } | ||
</style> | |||
<div class="mainPage__card w-100"> | <div class="mainPage__card w-100"> | ||
< | <h2 class="mainPage__cardTitle"> | ||
Menu | Menu | ||
</ | </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" /> | ||
</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" /> | ||
</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" /> | ||
</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" /> | ||
</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" /> | ||
</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" /> | ||
</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" /> | ||
</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" /> | ||
</a> | </a> | ||
</div> | </div> | ||
</div> | </div> | ||
<div class="mainPage__card | <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>