diff --git a/index.html b/index.html index b34a154..9379c1b 100644 --- a/index.html +++ b/index.html @@ -42,14 +42,13 @@
Part-time Music Producer

AI and Startup Enthusiast

- -

- Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar
- Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar
- Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar
- Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar Viral Parmar
-

-
+
+ +
diff --git a/style.css b/style.css index 2a024b5..9b29c3d 100644 --- a/style.css +++ b/style.css @@ -130,4 +130,36 @@ td { font-size: 2em; } +} + +.marquee { + position: relative; + overflow: hidden; + --offset: 20vw; + --move-initial: calc(-10% + var(--offset)); + --move-final: calc(-40% + var(--offset)); +} + +.marquee__inner { + width: fit-content; + display: flex; + position: relative; + transform: translate3d(var(--move-initial), 0, 0); + animation: marquee 5s alternate infinite; + animation-play-state: running; +} + +.marquee span { + font-size: 10vw; + padding: 0 2vw; +} + +@keyframes marquee { + 0% { + transform: translate3d(var(--move-initial), 0, 0); + } + + 100% { + transform: translate3d(var(--move-final), 0, 0); + } } \ No newline at end of file