diff --git a/client/src/app/home/home.css b/client/src/app/home/home.css index e69de29..f54fb81 100644 --- a/client/src/app/home/home.css +++ b/client/src/app/home/home.css @@ -0,0 +1,94 @@ +ul { + list-style: none; + padding: 0; + margin: 0; +} + +#one { + transform: translateY(-200vh); + animation: slide-down 2s forwards; + font-size: 1.3rem; +} + +#two { + transform: translateY(200vh); + animation: slide-up 2s forwards 2s; +} + +#three { + transform: translateX(-200vw); + animation: slide-left 2s forwards 4s; +} + +#four { + transform: translateX(200vw); + animation: slide-right 2s forwards 6s; +} + +#five { + transform: translateX(-200vw); + animation: slide-left 2s forwards 8s; +} + +#six { + transform: translateX(200vw); + animation: slide-right 2s forwards 10s; +} + +#fade { + opacity: 0; + animation: fade-in 2s forwards 12s; + display: flex; + flex-direction: row; + justify-content: space-evenly; + align-items: center; + flex-wrap: wrap; +} + +.btn { + display: inline-block; + padding: 10px 20px; + background-color: var(--foreground); + color: var(--background); + text-decoration: none; + border-radius: 50px; + border: 2px solid white; +} + +.btn:hover { + background-color: var(--background); + color: var(--foreground); + transition: background-color 0.3s, color 0.3s; +} + +@keyframes slide-left { + 100% { transform: translateX(0%); } +} + +@keyframes slide-right { + 100% { transform: translateX(0%); } +} + +@keyframes slide-up { + 100% { transform: translateY(0%); } +} + +@keyframes slide-down { + 100% { transform: translateY(0%); } +} + +@keyframes fade-in { + 100% { opacity: 1; } +} + +@keyframes background-color { + 0% { background-color: var(--foreground); } + 100% { background-color: var(--background); } +} + +@media screen and (prefers-reduced-motion: reduce) { + * { + animation: none !important; + transform: none !important; + } +} diff --git a/client/src/app/home/home.html b/client/src/app/home/home.html index 2652c7b..a03f754 100644 --- a/client/src/app/home/home.html +++ b/client/src/app/home/home.html @@ -1,8 +1,16 @@
- I am here to help you with all of NHCarrigan's products, including things like managing your subscriptions and configuring applications! -
-- Naomi is still hard at work bringing me to life! We would love to hear your thoughts in our community~! -
+How may I help you today?
+I can assist you with:
+