Mudanças entre as edições de "Widget:Newmenu"
Ir para navegação
Ir para pesquisar
Admiral Akainu has
| Linha 120: | Linha 120: | ||
.homePage__socialIcon:hover::before { | .homePage__socialIcon:hover::before { | ||
animation: socialIconAnimation 0.7s 1 forwards; | animation: socialIconAnimation 0.7s 1 forwards; | ||
} | |||
.homePage__newArrivedContainer { | |||
flex-direction: column; | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
width: -webkit-fill-available; | |||
} | |||
.homePage__newArrivedTitle { | |||
color: white; | |||
margin: 0; | |||
font-size: 1.8rem; | |||
} | } | ||
| Linha 174: | Linha 188: | ||
</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:bold;"> Admiral Akainu <span> has <br> arrived! </h2> | ||
</div> | </div> | ||
</header> | </header> | ||
Edição das 12h37min de 13 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-top: 0 !important;
margin-bottom: 0!important;
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 {
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;
gap: 1rem;
padding-inline: 1rem;
}
.mainPage__headerBanner {
width: 55rem;
border-radius: 10px;
}
.homePage__socialIconContainer {
display: flex; flex-direction: column; gap: .75rem; padding-block: 1rem;
} .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;
}
.homePage__newArrivedContainer {
flex-direction: column; display: flex; justify-content: center; align-items: center; width: -webkit-fill-available;
}
.homePage__newArrivedTitle {
color: white; margin: 0; font-size: 1.8rem;
}
@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 class="mainPage__headerBanner" src="/images/thumb/2/2a/Home-banner.png/800px-Home-banner.png" alt="Banner de boas vindas" />
<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>