Antoine/lhoist-stay-safe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

introducing component

Browse Source
This commit is contained in:
Antoine M 2024-03-13 17:51:07 +01:00
parent 936619210f
commit 72bd165a1a
2 changed files with 63 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/assets/css/components/ui/Marquee.scss Normal file
View File

@ -0,0 +1,27 @@
.marquee {
@apply w-screen bg-construction p-4 py-10 text-slate-900 text-zuume uppercase text-6xl xl:text-7xl font-bold;
margin: 2rem calc(50% - 50vw) !important;
rotate: -2deg;
div {
@apply flex;
}
p {
@apply text-zuume w-fit;
white-space: nowrap;
will-change: transform;
animation: marquee 20s linear infinite;
}
span {
@apply text-zuume w-fit;
}
}
@keyframes marquee {
0% {
transform: translateX(0vw);
}
100% {
transform: translateX(-100%);
}
}

36
src/components/ui/Marquee.jsx Normal file
View File

@ -0,0 +1,36 @@
import React from "react";
export default function Marquee({ children }) {
return (
<div className='marquee'>
<div>
<p>
<span lang='fr'>Restez en sécurité</span>
<span lang='en'>Stay Safe</span>
<span lang='es'>Mantente a salvo</span>
<span lang='pt'>Fique seguro</span>
<span lang='de'>Bleib sicher</span>
<span lang='da'>Vær sikker</span>
<span lang='fi'>Pysy turvassa</span>
<span lang='pl'>Bądź bezpieczny</span>
<span lang='cs'>Buď v bezpečí</span>
<span lang='sk'>Buďte v bezpeí</span>
<span lang='ms'>Kekal selamat</span>
</p>
<p>
<span lang='fr'>Restez en sécurité</span>
<span lang='en'>Stay Safe</span>
<span lang='es'>Mantente a salvo</span>
<span lang='pt'>Fique seguro</span>
<span lang='de'>Bleib sicher</span>
<span lang='da'>Vær sikker</span>
<span lang='fi'>Pysy turvassa</span>
<span lang='pl'>Bądź bezpieczny</span>
<span lang='cs'>Buď v bezpečí</span>
<span lang='sk'>Buďte v bezpeí</span>
<span lang='ms'>Kekal selamat</span>
</p>
</div>
</div>
);
}