Skip to content
Snippets Groups Projects
Commit 12676afc authored by Liliana Sanfilippo's avatar Liliana Sanfilippo
Browse files

Merge branch 'main' of ssh://gitlab.igem.org/2024/bielefeld-cebitec

parents 08a00134 f70d9825
No related branches found
No related tags found
No related merge requests found
Pipeline #442623 passed
Stage: build
Stage: deploy
Hide whitespace changes
Inline Side-by-side
src/components/Breathe.tsx
+ 139
− 90
View file @ 12676afc
...@@ -47,139 +47,188 @@ export function Breathe(){ ...@@ -47,139 +47,188 @@ export function Breathe(){
observer.observe(domRef5.current!); observer.observe(domRef5.current!);
}, []); }, []);
const Title1 = "Cystic Fibrosis";
const Title2 = "makes life breathtaking"; const [isVisible6, setVisible6] = useState(false);
const Prob11 = "Thick mucus blocking airway and prevents" const domRef6 = useRef(null)!;
const Prob12 = "oxygen absorption, leading to bronchial" useEffect(() => {
const Prob13 = "obstructions, organ failure an death"; const observer = new IntersectionObserver(entries => {
const Prob21 = "Chronic inflammation occurs periodically"; entries.forEach(entry => setVisible6(entry.isIntersecting));
const Prob22 = "due to a high vulnerability to"; });
const Prob23 = "bacterial and viral infections"; observer.observe(domRef6.current!);
const Prob31 = "Heightened safety considerations and"; }, []);
const Prob32 = "emotional stress promote depression";
const Prob33 = "and psychological issues"; const [isVisible7, setVisible7] = useState(false);
const domRef7 = useRef(null)!;
useEffect(() => {
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => setVisible7(entry.isIntersecting));
});
observer.observe(domRef7.current!);
}, []);
const [isVisible8, setVisible8] = useState(false);
const domRef8 = useRef(null)!;
useEffect(() => {
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => setVisible8(entry.isIntersecting));
});
observer.observe(domRef8.current!);
}, []);
return ( return (
<> <>
{/* One */} {/* purple */}
<div <div
className='col' className='col'
style={{ style={{ 'height': '700vh'}}
'height': '100vh',
'transition': 'opacity 0.6s ease-out',
'opacity': `${isVisible ? '1' : '0'}`,
'visibility': `${isVisible ? 'visible' : 'hidden'}`}}
ref={domRef}> ref={domRef}>
<img <img
style={{ style={{
'zIndex': '1',
'position': 'fixed', 'position': 'fixed',
'top': '20vh', 'top': '20vh',
'left': '20vw', 'left': '30vw',
'width': '60vw', 'width': '60vw',
'height': '60vh', 'height': '60vh',
'transition': 'opacity 0.6s ease-out',
'opacity': `${isVisible ? '1' : '0'}`,
'visibility': `${isVisible ? 'visible' : 'hidden'}`
}} }}
src="https://static.igem.wiki/teams/5247/landing/problems/cyfib-1.webp"> src="https://static.igem.wiki/teams/5247/landing/breath/textless/breath-only-1.webp">
</img> </img>
</div> {/* Spacing Block */}
{/* Two */} <div className='col' style={{ 'height': '100vh' }}></div>
<div <div style={{ 'height': '100vh'}} ref={domRef2}>
className='col' <p style={{'fontSize' : '2.5em'}}>Take a moment to</p>
style={{ <p style={{'fontSize' : '2.5em'}}>deeply breathe in...</p>
'height': '100vh', <img style={{
'transition': 'opacity 0.6s ease-out',
'opacity': `${isVisible2 ? '1' : '0'}`,
'visibility': `${isVisible2 ? 'visible' : 'hidden'}`}}
ref={domRef2}>
<img
style={{
'position': 'fixed', 'position': 'fixed',
'top': '20vh', 'top': '20vh',
'left': '20vw', 'left': '30vw',
'width': '60vw', 'width': '60vw',
'height': '60vh', 'height': '60vh',
'transition': 'scale 2.0s ease-out',
'scale': `${isVisible2 ? '1' : '0'}`,
'visibility': `${isVisible2 ? 'visible' : 'hidden'}`
}} }}
src="https://static.igem.wiki/teams/5247/landing/problems/cyfib-2.webp"> src="https://static.igem.wiki/teams/5247/landing/breath/circles/purplecircle.webp"></img>
</img> </div>
<p style={{'position': 'fixed','top': '20vh', 'left': '47vw', 'zIndex': '1', 'fontWeight': 'bold'}}>{Title1}</p> {/* Spacing Block */}
<p style={{'position': 'fixed','top': '22.5vh', 'left': '45vw', 'zIndex': '1', 'fontWeight': 'bold'}}>{Title2}</p> <div className='col' style={{ 'height': '95vh' }}></div>
<p style={{'position': 'fixed','top': '65vh', 'left': '20vw', 'zIndex': '1', 'width': '40vh', 'textAlign': 'center'}}>{Prob11 + " " + Prob12 + " " + Prob13}</p> <div style={{ 'height': '100vh'}} ref={domRef3}>
</div> <p style={{'fontSize' : '2.5em'}}>and deeply.</p>
{/* Three */} <p style={{'fontSize' : '2.5em'}}>breathe out...</p>
<div <img style={{
className='col'
style={{
'height': '100vh',
'transition': 'opacity 0.6s ease-out',
'opacity': `${isVisible3 ? '1' : '0'}`,
'visibility': `${isVisible3 ? 'visible' : 'hidden'}`}}
ref={domRef3}>
<img
style={{
'position': 'fixed', 'position': 'fixed',
'top': '20vh', 'top': '20vh',
'left': '20vw', 'left': '30vw',
'width': '60vw', 'width': '60vw',
'height': '60vh', 'height': '60vh',
'transition': 'scale 2.0s ease-out',
'scale': `${isVisible3 ? '0' : '1'}`,
'visibility': `${isVisible3 ? 'visible' : 'hidden'}`
}} }}
src="https://static.igem.wiki/teams/5247/landing/problems/cyfib-3.webp"> src="https://static.igem.wiki/teams/5247/landing/breath/circles/purplecircle.webp"></img>
</img> </div>
<p style={{'position': 'fixed','top': '20vh', 'left': '47vw', 'zIndex': '1', 'fontWeight': 'bold'}}>{Title1}</p> {/* Spacing Block */}
<p style={{'position': 'fixed','top': '25vh', 'left': '45vw', 'zIndex': '1', 'fontWeight': 'bold'}}>{Title2}</p> <div className='col' style={{ 'height': '100vh' }}></div>
<p style={{'position': 'fixed','top': '65vh', 'left': '20vw', 'zIndex': '1', 'width': '40vh', 'textAlign': 'center'}}>{Prob11 + " " + Prob12 + " " + Prob13}</p> <p style={{'fontSize' : '2.5em'}}>You feel <strong>revitalized</strong></p>
<p style={{'position': 'fixed','top': '65vh', 'left': '40vw', 'zIndex': '1', 'width': '40vh', 'textAlign': 'center'}}>{Prob21 + " " + Prob22 + " " + Prob23}</p> <p style={{'fontSize' : '2.5em'}}>Your body and mind</p>
<p style={{'fontSize' : '2.5em'}}>become <strong>grounded</strong>.</p>
{/* Spacing Block */}
<div className='col' style={{ 'height': '100vh' }}></div>
<p style={{'fontSize' : '2.5em'}}>Now deeply breathe in</p>
<p style={{'fontSize' : '2.5em'}}>and hold your breath.</p>
<div style={{ 'height': '100vh'}} ref={domRef4}>
<img style={{
'position': 'fixed',
'top': '20vh',
'left': '30vw',
'width': '60vw',
'height': '60vh',
'transition': 'scale 2.0s ease-out',
'scale': `${isVisible4 ? '1' : '0'}`,
'visibility': `${isVisible4 ? 'visible' : 'hidden'}`
}}
src="https://static.igem.wiki/teams/5247/landing/breath/circles/purplecircle.webp"></img>
</div>
</div> </div>
{/* Four */} {/* black */}
<div <div
className='col' style={{ 'height': '300vh'}} ref={domRef5}>
style={{
'height': '100vh',
'transition': 'opacity 0.6s ease-out',
'opacity': `${isVisible4 ? '1' : '0'}`,
'visibility': `${isVisible4 ? 'visible' : 'hidden'}`}}
ref={domRef4}>
<img <img
style={{ style={{
'zIndex': '1',
'position': 'fixed', 'position': 'fixed',
'top': '20vh', 'top': '20vh',
'left': '20vw', 'left': '30vw',
'width': '60vw', 'width': '60vw',
'height': '60vh', 'height': '60vh',
'transition': 'opacity 0.6s ease-out',
'opacity': `${isVisible5 ? '1' : '0'}`,
'visibility': `${isVisible5 ? 'visible' : 'hidden'}`
}} }}
src="https://static.igem.wiki/teams/5247/landing/problems/cyfib-4.webp"> src="https://static.igem.wiki/teams/5247/landing/breath/textless/breath-only-2.webp">
</img> </img>
<p style={{'position': 'fixed','top': '20vh', 'left': '47vw', 'zIndex': '1', 'fontWeight': 'bold'}}>{Title1}</p> <div style={{ 'height': '100vh'}} ref={domRef6}>
<p style={{'position': 'fixed','top': '25vh', 'left': '45vw', 'zIndex': '1', 'fontWeight': 'bold'}}>{Title2}</p> <img style={{
<p style={{'position': 'fixed','top': '65vh', 'left': '20vw', 'zIndex': '1', 'width': '40vh', 'textAlign': 'center'}}>{Prob11 + " " + Prob12 + " " + Prob13}</p> 'position': 'fixed',
<p style={{'position': 'fixed','top': '65vh', 'left': '40vw', 'zIndex': '1', 'width': '40vh', 'textAlign': 'center'}}>{Prob21 + " " + Prob22 + " " + Prob23}</p> 'top': '20vh',
<p style={{'position': 'fixed','top': '65vh', 'left': '60vw', 'zIndex': '1', 'width': '40vh', 'textAlign': 'center'}}>{Prob31 + " " + Prob32 + " " + Prob33}</p> 'left': '30vw',
'width': '60vw',
'height': '60vh',
'visibility': `${isVisible6 ? 'visible' : 'hidden'}`
}}
src="https://static.igem.wiki/teams/5247/landing/breath/circles/darkerpurplecircle.webp"></img>
</div>
<p style={{'fontSize' : '2.5em'}}>Not everyone </p>
<p style={{'fontSize' : '2.5em'}}>can breathe freely.</p>
{/* <p style={{'fontSize' : '2.5em'}}>Breathing is essential, </p>
<p style={{'fontSize' : '2.5em'}}>but many people </p>
<p style={{'fontSize' : '2.5em'}}>struggle with it.</p> */}
<div style={{ 'height': '100vh'}} ref={domRef7}>
<img style={{
'position': 'fixed',
'top': '20vh',
'left': '30vw',
'width': '60vw',
'height': '60vh',
'scale': `${isVisible7 ? '1' : '0'}`,
'visibility': `${isVisible7 ? 'visible' : 'hidden'}`
}}
src="https://static.igem.wiki/teams/5247/landing/breath/circles/fullblackcircle.webp"></img>
</div>
{/* Spacing Block */}
<div className='col' style={{ 'height': '100vh' }}></div>
<p style={{'fontSize' : '2.5em'}}>Breathing is essential, </p>
<p style={{'fontSize' : '2.5em'}}>but many people </p>
<p style={{'fontSize' : '2.5em'}}>struggle with it.</p>
</div> </div>
{/* Five */} {/* grey */}
<div <div
className='col' style={{ 'height': '200vh'}} ref={domRef8}>
style={{
'height': '100vh',
'transition': 'opacity 0.6s ease-out',
'opacity': `${isVisible5 ? '1' : '0'}`,
'visibility': `${isVisible5 ? 'visible' : 'hidden'}`}}
ref={domRef5}>
<img <img
style={{ style={{
'zIndex': '1',
'position': 'fixed', 'position': 'fixed',
'top': '20vh', 'top': '20vh',
'left': '20vw', 'left': '30vw',
'width': '60vw', 'width': '60vw',
'height': '60vh', 'height': '60vh',
'transition': 'opacity 0.6s ease-out',
'opacity': `${isVisible8 ? '1' : '0'}`,
'visibility': `${isVisible8 ? 'visible' : 'hidden'}`
}} }}
src="https://static.igem.wiki/teams/5247/landing/problems/cyfib-5.webp"> src="https://static.igem.wiki/teams/5247/landing/breath/textless/breath-only-3.webp">
</img> </img>
<p style={{'position': 'fixed','top': '20vh', 'left': '47vw', 'zIndex': '1', 'fontWeight': 'bold'}}>{Title1}</p> </div>
<p style={{'position': 'fixed','top': '25vh', 'left': '45vw', 'zIndex': '1', 'fontWeight': 'bold'}}>{Title2}</p> <p style={{'fontSize' : '2.5em'}}>texttexttext</p>
<p style={{'position': 'fixed','top': '65vh', 'left': '20vw', 'zIndex': '1', 'width': '40vh', 'textAlign': 'center'}}>{Prob11 + " " + Prob12 + " " + Prob13}</p> <p style={{'fontSize' : '2.5em'}}>texttexttext,</p>
<p style={{'position': 'fixed','top': '65vh', 'left': '40vw', 'zIndex': '1', 'width': '40vh', 'textAlign': 'center'}}>{Prob21 + " " + Prob22 + " " + Prob23}</p> <p style={{'fontSize' : '2.5em'}}>because breathing deeply is a</p>
<p style={{'position': 'fixed','top': '65vh', 'left': '60vw', 'zIndex': '1', 'width': '40vh', 'textAlign': 'center'}}>{Prob31 + " " + Prob32 + " " + Prob33}</p> <p style={{'fontSize' : '2.5em'}}><strong>privilage not everyone can enjoy</strong></p>
<p style={{'position': 'fixed','top': '85vh', 'left': '35vw', 'zIndex': '1'}}>The constant <strong>fear of suffocating</strong> makes life incredibly challenging</p>
</div> {/* Spacing Block */}
<div className='col' style={{ 'height': '100vh' }}></div>
</> </>
); );
} }
\ No newline at end of file
src/components/Problems.tsx
+ 20
− 38
View file @ 12676afc
...@@ -51,10 +51,10 @@ export function Problems(){ ...@@ -51,10 +51,10 @@ export function Problems(){
const Title2 = "makes life breathtaking"; const Title2 = "makes life breathtaking";
const Prob11 = "Thick mucus blocking airway and prevents" const Prob11 = "Thick mucus blocking airway and prevents"
const Prob12 = "oxygen absorption, leading to bronchial" const Prob12 = "oxygen absorption, leading to bronchial"
const Prob13 = "obstructions, organ failure an death"; const Prob13 = "obstructions, organ failue an death";
const Prob21 = "Chronic inflammation occurs periodically"; const Prob21 = "Chronic inflammation occurs periodically";
const Prob22 = "due to a high vulnerability to"; const Prob22 = "due to a high vulnerability ";
const Prob23 = "bacterial and viral infections"; const Prob23 = "to bacterial and viral infections";
const Prob31 = "Heightened safety considerations and"; const Prob31 = "Heightened safety considerations and";
const Prob32 = "emotional stress promote depression"; const Prob32 = "emotional stress promote depression";
const Prob33 = "and psychological issues"; const Prob33 = "and psychological issues";
...@@ -100,11 +100,9 @@ export function Problems(){ ...@@ -100,11 +100,9 @@ export function Problems(){
}} }}
src="https://static.igem.wiki/teams/5247/landing/problems/cyfib-2.webp"> src="https://static.igem.wiki/teams/5247/landing/problems/cyfib-2.webp">
</img> </img>
<p style={{'position': 'fixed','top': '20vh', 'left': '47vw', 'zIndex': '1', 'fontWeight': 'bold'}}>{Title1}</p> <p style={{'position': 'fixed','top': '17vh', 'width': '82vw', 'zIndex': '1','fontSize': '3vw', 'fontWeight': 'bold', 'textAlign': 'center'}}>{Title1}</p>
<p style={{'position': 'fixed','top': '25vh', 'left': '45vw', 'zIndex': '1', 'fontWeight': 'bold'}}>{Title2}</p> <p style={{'position': 'fixed','top': '23vh', 'width': '82vw', 'zIndex': '1','fontSize': '3vw', 'fontWeight': 'bold', 'textAlign': 'center'}}>{Title2}</p>
<p style={{'position': 'fixed','top': '65vh', 'left': '20vw', 'zIndex': '1'}}>{Prob11}</p> <p style={{'position': 'fixed','top': '65vh', 'left': '20vw', 'zIndex': '1', 'width': '40vh', 'textAlign': 'center'}}>{Prob11 + " " + Prob12 + " " + Prob13}</p>
<p style={{'position': 'fixed','top': '70vh', 'left': '20vw', 'zIndex': '1'}}>{Prob12}</p>
<p style={{'position': 'fixed','top': '75vh', 'left': '20vw', 'zIndex': '1'}}>{Prob13}</p>
</div> </div>
{/* Three */} {/* Three */}
<div <div
...@@ -125,14 +123,10 @@ export function Problems(){ ...@@ -125,14 +123,10 @@ export function Problems(){
}} }}
src="https://static.igem.wiki/teams/5247/landing/problems/cyfib-3.webp"> src="https://static.igem.wiki/teams/5247/landing/problems/cyfib-3.webp">
</img> </img>
<p style={{'position': 'fixed','top': '20vh', 'left': '47vw', 'zIndex': '1', 'fontWeight': 'bold'}}>{Title1}</p> <p style={{'position': 'fixed','top': '17vh', 'width': '82vw', 'zIndex': '1','fontSize': '3vw', 'fontWeight': 'bold', 'textAlign': 'center'}}>{Title1}</p>
<p style={{'position': 'fixed','top': '25vh', 'left': '45vw', 'zIndex': '1', 'fontWeight': 'bold'}}>{Title2}</p> <p style={{'position': 'fixed','top': '23vh', 'width': '82vw', 'zIndex': '1','fontSize': '3vw', 'fontWeight': 'bold', 'textAlign': 'center'}}>{Title2}</p>
<p style={{'position': 'fixed','top': '65vh', 'left': '20vw', 'zIndex': '1'}}>{Prob11}</p> <p style={{'position': 'fixed','top': '65vh', 'left': '20vw', 'zIndex': '1', 'width': '40vh', 'textAlign': 'center'}}>{Prob11 + " " + Prob12 + " " + Prob13}</p>
<p style={{'position': 'fixed','top': '70vh', 'left': '20vw', 'zIndex': '1'}}>{Prob12}</p> <p style={{'position': 'fixed','top': '65vh', 'left': '40vw', 'zIndex': '1', 'width': '40vh', 'textAlign': 'center'}}>{Prob21 + " " + Prob22 + " " + Prob23}</p>
<p style={{'position': 'fixed','top': '75vh', 'left': '20vw', 'zIndex': '1'}}>{Prob13}</p>
<p style={{'position': 'fixed','top': '65vh', 'left': '40vw', 'zIndex': '1'}}>{Prob21}</p>
<p style={{'position': 'fixed','top': '70vh', 'left': '40vw', 'zIndex': '1'}}>{Prob22}</p>
<p style={{'position': 'fixed','top': '75vh', 'left': '40vw', 'zIndex': '1'}}>{Prob23}</p>
</div> </div>
{/* Four */} {/* Four */}
<div <div
...@@ -153,17 +147,11 @@ export function Problems(){ ...@@ -153,17 +147,11 @@ export function Problems(){
}} }}
src="https://static.igem.wiki/teams/5247/landing/problems/cyfib-4.webp"> src="https://static.igem.wiki/teams/5247/landing/problems/cyfib-4.webp">
</img> </img>
<p style={{'position': 'fixed','top': '20vh', 'left': '47vw', 'zIndex': '1', 'fontWeight': 'bold'}}>{Title1}</p> <p style={{'position': 'fixed','top': '17vh', 'width': '82vw', 'zIndex': '1','fontSize': '3vw', 'fontWeight': 'bold', 'textAlign': 'center'}}>{Title1}</p>
<p style={{'position': 'fixed','top': '25vh', 'left': '45vw', 'zIndex': '1', 'fontWeight': 'bold'}}>{Title2}</p> <p style={{'position': 'fixed','top': '23vh', 'width': '82vw', 'zIndex': '1','fontSize': '3vw', 'fontWeight': 'bold', 'textAlign': 'center'}}>{Title2}</p>
<p style={{'position': 'fixed','top': '65vh', 'left': '20vw', 'zIndex': '1'}}>{Prob11}</p> <p style={{'position': 'fixed','top': '65vh', 'left': '20vw', 'zIndex': '1', 'width': '40vh', 'textAlign': 'center'}}>{Prob11 + " " + Prob12 + " " + Prob13}</p>
<p style={{'position': 'fixed','top': '70vh', 'left': '20vw', 'zIndex': '1'}}>{Prob12}</p> <p style={{'position': 'fixed','top': '65vh', 'left': '40vw', 'zIndex': '1', 'width': '40vh', 'textAlign': 'center'}}>{Prob21 + " " + Prob22 + " " + Prob23}</p>
<p style={{'position': 'fixed','top': '75vh', 'left': '20vw', 'zIndex': '1'}}>{Prob13}</p> <p style={{'position': 'fixed','top': '65vh', 'left': '60vw', 'zIndex': '1', 'width': '40vh', 'textAlign': 'center'}}>{Prob31 + " " + Prob32 + " " + Prob33}</p>
<p style={{'position': 'fixed','top': '65vh', 'left': '40vw', 'zIndex': '1'}}>{Prob21}</p>
<p style={{'position': 'fixed','top': '70vh', 'left': '40vw', 'zIndex': '1'}}>{Prob22}</p>
<p style={{'position': 'fixed','top': '75vh', 'left': '40vw', 'zIndex': '1'}}>{Prob23}</p>
<p style={{'position': 'fixed','top': '65vh', 'left': '60vw', 'zIndex': '1'}}>{Prob31}</p>
<p style={{'position': 'fixed','top': '70vh', 'left': '60vw', 'zIndex': '1'}}>{Prob32}</p>
<p style={{'position': 'fixed','top': '75vh', 'left': '60vw', 'zIndex': '1'}}>{Prob33}</p>
</div> </div>
{/* Five */} {/* Five */}
<div <div
...@@ -184,17 +172,11 @@ export function Problems(){ ...@@ -184,17 +172,11 @@ export function Problems(){
}} }}
src="https://static.igem.wiki/teams/5247/landing/problems/cyfib-5.webp"> src="https://static.igem.wiki/teams/5247/landing/problems/cyfib-5.webp">
</img> </img>
<p style={{'position': 'fixed','top': '20vh', 'left': '47vw', 'zIndex': '1', 'fontWeight': 'bold'}}>{Title1}</p> <p style={{'position': 'fixed','top': '17vh', 'width': '82vw', 'zIndex': '1','fontSize': '3vw', 'fontWeight': 'bold', 'textAlign': 'center'}}>{Title1}</p>
<p style={{'position': 'fixed','top': '25vh', 'left': '45vw', 'zIndex': '1', 'fontWeight': 'bold'}}>{Title2}</p> <p style={{'position': 'fixed','top': '23vh', 'width': '82vw', 'zIndex': '1','fontSize': '3vw', 'fontWeight': 'bold', 'textAlign': 'center'}}>{Title2}</p>
<p style={{'position': 'fixed','top': '65vh', 'left': '20vw', 'zIndex': '1'}}>{Prob11}</p> <p style={{'position': 'fixed','top': '65vh', 'left': '20vw', 'zIndex': '1', 'width': '40vh', 'textAlign': 'center'}}>{Prob11 + " " + Prob12 + " " + Prob13}</p>
<p style={{'position': 'fixed','top': '70vh', 'left': '20vw', 'zIndex': '1'}}>{Prob12}</p> <p style={{'position': 'fixed','top': '65vh', 'left': '40vw', 'zIndex': '1', 'width': '40vh', 'textAlign': 'center'}}>{Prob21 + " " + Prob22 + " " + Prob23}</p>
<p style={{'position': 'fixed','top': '75vh', 'left': '20vw', 'zIndex': '1'}}>{Prob13}</p> <p style={{'position': 'fixed','top': '65vh', 'left': '60vw', 'zIndex': '1', 'width': '40vh', 'textAlign': 'center'}}>{Prob31 + " " + Prob32 + " " + Prob33}</p>
<p style={{'position': 'fixed','top': '65vh', 'left': '40vw', 'zIndex': '1'}}>{Prob21}</p>
<p style={{'position': 'fixed','top': '70vh', 'left': '40vw', 'zIndex': '1'}}>{Prob22}</p>
<p style={{'position': 'fixed','top': '75vh', 'left': '40vw', 'zIndex': '1'}}>{Prob23}</p>
<p style={{'position': 'fixed','top': '65vh', 'left': '60vw', 'zIndex': '1'}}>{Prob31}</p>
<p style={{'position': 'fixed','top': '70vh', 'left': '60vw', 'zIndex': '1'}}>{Prob32}</p>
<p style={{'position': 'fixed','top': '75vh', 'left': '60vw', 'zIndex': '1'}}>{Prob33}</p>
<p style={{'position': 'fixed','top': '85vh', 'left': '35vw', 'zIndex': '1'}}>The constant <strong>fear of suffocating</strong> makes life incredibly challenging</p> <p style={{'position': 'fixed','top': '85vh', 'left': '35vw', 'zIndex': '1'}}>The constant <strong>fear of suffocating</strong> makes life incredibly challenging</p>
</div> </div>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment