added company name animation
parent
c9144d519b
commit
f6ed8a891e
38
src/App.css
38
src/App.css
|
@ -1,4 +1,4 @@
|
|||
.CompanyName {
|
||||
.CompanyNameContainer {
|
||||
padding: 12px 12px 0 12px;
|
||||
color: #e67e22;
|
||||
font-weight: bold;
|
||||
|
@ -7,6 +7,42 @@
|
|||
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 {
|
||||
text-align: center;
|
||||
color: #9b59b6;
|
||||
|
|
|
@ -37,7 +37,13 @@ export default function SideMenu({ setUserSession }) {
|
|||
}}
|
||||
>
|
||||
<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>
|
||||
<Menu
|
||||
mode="vertical"
|
||||
|
|
Loading…
Reference in New Issue