added company name animation

main
alex 2023-05-12 21:02:27 +02:00
parent c9144d519b
commit f6ed8a891e
2 changed files with 44 additions and 2 deletions

View File

@ -1,4 +1,4 @@
.CompanyName { .CompanyNameContainer {
padding: 12px 12px 0 12px; padding: 12px 12px 0 12px;
color: #e67e22; color: #e67e22;
font-weight: bold; font-weight: bold;
@ -7,6 +7,42 @@
letter-spacing: 6px; letter-spacing: 6px;
} }
.CompanyNameContainer span {
animation: light 10s infinite;
}
@keyframes light {
20% {
color: #e67e22;
}
25% {
color: #ffd700;
}
30% {
color: #e67e22;
}
}
.CompanyNameContainer span:nth-child(1) {
animation-delay: 200ms;
}
.CompanyNameContainer span:nth-child(2) {
animation-delay: 400ms;
}
.CompanyNameContainer span:nth-child(3) {
animation-delay: 600ms;
}
.CompanyNameContainer span:nth-child(4) {
animation-delay: 800ms;
}
.CompanyNameContainer span:nth-child(5) {
animation-delay: 1000ms;
}
.Subtitle { .Subtitle {
text-align: center; text-align: center;
color: #9b59b6; color: #9b59b6;

View File

@ -37,7 +37,13 @@ export default function SideMenu({ setUserSession }) {
}} }}
> >
<div> <div>
<div className="CompanyName">JANEX</div> <div className="CompanyNameContainer">
<span>J</span>
<span>A</span>
<span>N</span>
<span>E</span>
<span>X</span>
</div>
<div className="Subtitle">Admin Dashboard</div> <div className="Subtitle">Admin Dashboard</div>
<Menu <Menu
mode="vertical" mode="vertical"