Add Animation

CarletonComputerScienceSociety · Jul 2, 2023 · 83099c8 · 83099c8
1 parent bd53d5a
commit 83099c8
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 3 deletions.
diff --git a/app/src/layouts/BaseLayout.astro b/app/src/layouts/BaseLayout.astro
@@ -15,6 +15,11 @@ const { title } = Astro.props as Props;
  <meta name="viewport" content="width=device-width" />
  <link rel="icon" type="image/x-icon" href="/favicon.ico" />
  <title>{title}</title>
+ <script
+ src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"
+ >
+
+ </script>
  </head>
  <body>
  <slot></slot>

diff --git a/app/src/layouts/HomeLayout.astro b/app/src/layouts/HomeLayout.astro
@@ -26,8 +26,6 @@ const currentDate: Date = new Date();
  text-decoration: none;
  }
 
- position: absolute;
- bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 4rem;

diff --git a/app/src/pages/index.astro b/app/src/pages/index.astro
@@ -28,6 +28,13 @@ import { Button } from "../components";
  <Button label="comp 2804" />
  </a>
  </div>
+ <div class="animation"><lottie-player
+ src="./lottie/animation.json"
+ background="transparent"
+ speed="1"
+ loop
+ autoplay></lottie-player></div>
+ </div>
  </div>
  </div>
  </HomeLayout>
@@ -76,7 +83,10 @@ import { Button } from "../components";
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
- margin-bottom: 3rem;
  margin-top: 2rem;
  }
+
+ .animation {
+ width: 950px;
+ }
 </style>