Mudanças entre as edições de "Widget:Newmenu"
Ir para navegação
Ir para pesquisar
Admiral Akainu has
| Linha 7: | Linha 7: | ||
.mainPage__characterPageLink { | .mainPage__characterPageLink { | ||
color: white; | color: white !important; | ||
font-size: 1.2rem; | font-size: 1.2rem; | ||
font-weight:bold; | font-weight:bold; | ||
Edição das 11h49min de 20 de maio de 2024
<style>
#content {
background: linear-gradient(#23242b, #284460);
border: 1px solid #3283a2;
border-right: 0px;
}
.mainPage__characterPageLink {
color: white !important;
font-size: 1.2rem;
font-weight:bold;
text-align: center;
}
.mainPage__charactersGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
row-gap: 1.5rem;
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;
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;
}
.homePage__newArrivedTitle {
color: white; margin-bottom: 0 !important; margin-top: 0 !important; font-size: 1.8rem!important; font-weight: normal;
}
@keyframes socialIconAnimation {
0% {
left: -110%;
top: 90%;
}
50% {
left: 15%;
top: -30%;
}
100% {
top: -10%;
left: -10%;
}
}
@media screen and (max-width: 1635px) {
.mainPage__containerLinkIcon {
grid-template-columns: repeat(4, 1fr);
}
}
</style>
<header class="mainPage__header">
<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 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>