diff --git a/src/components/FadeIn.tsx b/src/components/FadeIn.tsx index 17bd333c9ba930f6b022e24c7d007e2a94eb7704..94bcfc8e2b0b4cd9afd8a6050be118e97e89c936 100644 --- a/src/components/FadeIn.tsx +++ b/src/components/FadeIn.tsx @@ -16,14 +16,16 @@ export function FadeIn({filepath}:{filepath: string}){ return ( <> <div - className='row col' + className='col' style={{ 'height': '100vh'}} ref={domRef}> <img style={{ 'position': 'fixed', - 'bottom': '0', - 'right': '0', + 'top': '20vh', + 'left': '20vw', + 'width': '60vw', + 'height': '60vh', 'transition': 'opacity 0.6s ease-out, transform 1.2s ease-out', 'opacity': `${isVisible ? '1' : '0'}`, 'visibility': `${isVisible ? 'visible' : 'hidden'}` diff --git a/src/contents/Home.tsx b/src/contents/Home.tsx index f22423290196b3e11eade4c0619a04928dd743ff..204348cffccea163b99a101be06ec883a49c0ca6 100644 --- a/src/contents/Home.tsx +++ b/src/contents/Home.tsx @@ -7,6 +7,29 @@ export function Home() { <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/firstbreathin.webp"></FadeIn> <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/firstbreathoutrelease.webp"></FadeIn> <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/firstbreathoutdone.webp"></FadeIn> + <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/revitalized.webp"></FadeIn> + <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/breathdeepin.webp"></FadeIn> + <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/breathhold.webp"></FadeIn> + <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/holdbad.webp"></FadeIn> + <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/holdpanic.webp"></FadeIn> + <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/holdrelief.webp"></FadeIn> + <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/holdreliefdone.webp"></FadeIn> + <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/privilage.webp"></FadeIn> + <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/threecircles.webp"></FadeIn> + <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/threepeople.webp"></FadeIn> + <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/blockedairway.webp"></FadeIn> + <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/infection.webp"></FadeIn> + <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/maskpsych.webp"></FadeIn> + <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/fear.webp"></FadeIn> + <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/twenty.webp"></FadeIn> + <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/oneintwenty.webp"></FadeIn> + <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/treatmentnoloop.gif"></FadeIn> + <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/precyse.gif"></FadeIn> + <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/airbuddy.gif"></FadeIn> + <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/primeguide.webp"></FadeIn> + + {/* Spacing Block */} + <div className='col' style={{ 'height': '80vh' }}></div> </> ); }