new footer

src/components/Footer.tsx

@@ -6,37 +6,33 @@ export function Footer() {
   const teamSlug = stringToSlug(teamName);
 
   return (
-    <footer className="pt-5 pb-5 footer py-5 mt-0 bg-dark text-white">
-      <div className="container">
-        <div className="row mb-4">
-            <div className="col-lg-2 col-xs-12">
-              <img
-                src="https://static.igem.wiki/teams/5378/school-badge/smu.webp"
-                alt="SMU brand"
-                className="responsive-img"
-              />
-            </div>
-            <div className="col-lg-2"></div>
-            <div className="col-lg-2 col-xs-12">
-              <img
-                src="https://static.igem.wiki/teams/5378/school-badge/gdmu.webp"
-                alt="GDMU brand"
-                className="responsive-img"
-              />
-            </div>
-            <div className="col-lg-2"></div>
-          <div className="col-lg-4 col-xs-12 row justify-content-center">
-          <img
+    <footer className="pt-1 pb-1 footer py-5 mt-0 bg-wine-red text-white">
+        <hr />
+        {/* The following MUST be on every page: license information and link to the repository on gitlab.igem.org */}
+        <div className="row">
+          <div className="col-4">
+
+            {/* <div className="col-1"></div> */}
+            {/* <div className="col-5"> */}
+              <div className="slideshow-container">
+                      <div className="slide fade1 ">
+                        <img className="fade-img" src="https://static.igem.wiki/teams/5378/school-badge/gdmu.webp" alt="Image 1" />
+                      </div>
+                      <div className="slide fade2">
+                        <img className="fade-img" src="https://static.igem.wiki/teams/5378/school-badge/smu.webp" alt="Image 2" />
+                      </div>
+                      <div className="slide fade3">
+                        <img className="fade-img" src="https://static.igem.wiki/teams/5378/school-badge/yanyintech.webp" alt="Image 3" />
+                    </div>
+              </div>
+          {/* <img
                 src="https://static.igem.wiki/teams/5378/school-badge/yanyintech.webp"
                 alt="Yanyin tech"
                 className="responsive-img"
-              />
+              /> */}
+
           </div>
-        </div>
-        <hr />
-        {/* The following MUST be on every page: license information and link to the repository on gitlab.igem.org */}
-        <div className="row mt-4">
-          <div className="col">
+          <div className="col-8">
             <p className="mb-0">
               <small>
                 © 2024 - Content on this site is licensed under a{" "}
@@ -61,7 +57,6 @@ export function Footer() {
             </p>
           </div>
         </div>
-      </div>
     </footer>
   );
 }

src/containers/App/App.css

@@ -18,6 +18,9 @@ body {
   background-color: rgb(245, 245, 220);
 }
 
+.bg-wine-red {
+  background-color: #722F37;
+}
 
 /* CALLOUT */
 .bd-callout {
@@ -417,4 +420,68 @@ footer a:hover {
 
 .green-font{
   color: #39d197;
+}
+
+
+/* footer的切换动画 */
+.slideshow-container {
+  position: relative;
+  max-width: 100%;
+  height: 100%; 
+  overflow: hidden;
+  justify-content: center; /* Center horizontally */
+  align-items: center; /* Center vertically */
+}
+
+.slide {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  transition: opacity 1s ease-in-out;
+  justify-content: center; /* Center horizontally */
+  align-items: center; /* Center vertically */
+}
+
+.fade-img {
+  width: auto;
+  height: 100%;
+  object-fit: cover;
+}
+
+.fade1 {
+  animation: fade1 15s infinite;
+}
+
+@keyframes fade1 {
+  0% { opacity: 0; }
+  5% { opacity: 1; }
+  30% { opacity: 1; }
+  35% { opacity: 0; }
+  100% { opacity: 0; }
+}
+
+.fade2 {
+  animation: fade2 15s infinite;
+}
+
+@keyframes fade2 {
+  0% { opacity: 0; }
+  30% { opacity: 0; }
+  35% { opacity: 1; }
+  65% { opacity: 1; }
+  70% { opacity: 0; }
+  100% { opacity: 0; }
+}
+
+.fade3 {
+  animation: fade3 15s infinite;
+}
+
+@keyframes fade3 {
+  0% { opacity: 0; }
+  65% { opacity: 0; }
+  70% { opacity: 1; }
+  95% { opacity: 1; }
+  100% { opacity: 0; }
 }
\ No newline at end of file