From 70da4c87fe7f0c1a60bc6613fd5c4120b760b292 Mon Sep 17 00:00:00 2001
From: Xingan Zhao <2081098605@qq.com>
Date: Sun, 29 Sep 2024 09:06:06 +0800
Subject: [PATCH] fix:footer fade animation

---
 src/components/Footer.tsx  | 21 +++++++++++----------
 src/containers/App/App.css | 26 +++++++++++++++++++++++---
 2 files changed, 34 insertions(+), 13 deletions(-)

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index a6c4056..de77907 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -15,35 +15,36 @@ export function Footer() {
         <div className="bg-rice_yellow"><WaveAnimation /></div>
         
         {/* The following MUST be on every page: license information and link to the repository on gitlab.igem.org */}
-        <div className="row bg-wine-red footer-container">
-          <div className="col-7">
+        <div className="bg-wine-red footer-container">
+
 
             {/* <div className="col-1"></div> */}
             {/* <div className="col-5"> */}
               <div className="slideshow-container mb-5">
-                      <div className="slide fade1 ">
+                      <div className="slide-small fade1 ">
                         <img className="fade-img" src="https://static.igem.wiki/teams/5378/school-badge/gdmu2.webp" alt="Image 1" />
                       </div>
-                      <div className="slide fade2">
+                      <div className="slide-small fade2">
                         <img className="fade-img" src="https://static.igem.wiki/teams/5378/school-badge/smu.webp" alt="Image 2" />
                       </div>
-                      <div className="slide fade3">
+                      <div className="slide-big fade3">
                         <img className="fade-img" src="https://static.igem.wiki/teams/5378/school-badge/yanyintech.webp" alt="Image 3" />
-                    </div>
+                      </div>
               </div>
+              
               {/* <img
                     src="https://static.igem.wiki/teams/5378/school-badge/yanyintech.webp"
                     alt="Yanyin tech"
                     className="responsive-img"
                   /> */}
 
-          </div>
+
         </div>
         <div className="row bg-wine-red footer-container">
           <div>
             <p className="mb-0">
-              <small className="footer-container small-font">
-                © 2024 - Content on this site is licensed under a &nbsp; {" "} 
+              <small className="footer-container-text small-font">
+                © 2024 - Content on this site is licensed under a &nbsp;{" "} 
                 <a
                   className="subfoot small-font"
                   href="https://creativecommons.org/licenses/by/4.0/"
@@ -55,7 +56,7 @@ export function Footer() {
               </small>
             </p>
             <p>
-              <small className="footer-container small-font">
+              <small className="footer-container-text small-font">
                 The repository used to create this website is available at &nbsp;{" "}
                 <a href={`https://gitlab.igem.org/${teamYear}/${teamSlug}`} className="small-font">
                   gitlab.igem.org/{teamYear}/{teamSlug}
diff --git a/src/containers/App/App.css b/src/containers/App/App.css
index 64849ff..a319e50 100644
--- a/src/containers/App/App.css
+++ b/src/containers/App/App.css
@@ -574,17 +574,29 @@ footer a:hover {
 .slideshow-container {
   position: relative;
   max-width: 100%;
+  width: 400px;
   height: 200px; 
-  overflow: hidden;
+  /* overflow: hidden; */
+  justify-content: center; /* Center horizontally */
+  align-items: center; /* Center vertically */
+}
+
+.slide-small {
+  position: absolute;
+  /* width: 100%; */
+  /* height: 100%; */
+  left: 25%;
+  opacity: 0;
+  transition: opacity 1s ease-in-out;
   justify-content: center; /* Center horizontally */
   align-items: center; /* Center vertically */
 }
 
-.slide {
+.slide-big {
   position: absolute;
   /* width: 100%; */
   /* height: 100%; */
-  left: 40%;
+  left: 5%;
   opacity: 0;
   transition: opacity 1s ease-in-out;
   justify-content: center; /* Center horizontally */
@@ -595,6 +607,7 @@ footer a:hover {
   /* width: auto; */
   height: 200px;
   object-fit: cover;
+  z-index: 2 !important;
 }
 
 .fade1 {
@@ -832,6 +845,13 @@ span.formula_line::-webkit-scrollbar-track {
 }
 
 .footer-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.footer-container-text {
   display: flex;
   align-items: center;
   justify-content: center;
-- 
GitLab