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

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

parents 9447b587 f5c0d560
No related branches found
No related tags found
No related merge requests found
Pipeline #426721 passed
Stage: build
Stage: deploy
Hide whitespace changes
Inline Side-by-side
src/components/Breathe.tsx
+ 29
− 31
View file @ 95194b9c
...@@ -87,7 +87,7 @@ export function Breathe(){ ...@@ -87,7 +87,7 @@ export function Breathe(){
'zIndex': '1', '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', 'transition': 'opacity 0.6s ease-out',
...@@ -99,12 +99,12 @@ export function Breathe(){ ...@@ -99,12 +99,12 @@ export function Breathe(){
{/* Spacing Block */} {/* Spacing Block */}
<div className='col' style={{ 'height': '100vh' }}></div> <div className='col' style={{ 'height': '100vh' }}></div>
<div style={{ 'height': '100vh'}} ref={domRef2}> <div style={{ 'height': '100vh'}} ref={domRef2}>
<p>Take a moment to</p> <p style={{'fontSize' : '2.5em'}}>Take a moment to</p>
<p>deeply breathe in...</p> <p style={{'fontSize' : '2.5em'}}>deeply breathe in...</p>
<img style={{ <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', 'transition': 'scale 2.0s ease-out',
...@@ -116,12 +116,12 @@ export function Breathe(){ ...@@ -116,12 +116,12 @@ export function Breathe(){
{/* Spacing Block */} {/* Spacing Block */}
<div className='col' style={{ 'height': '95vh' }}></div> <div className='col' style={{ 'height': '95vh' }}></div>
<div style={{ 'height': '100vh'}} ref={domRef3}> <div style={{ 'height': '100vh'}} ref={domRef3}>
<p>and deeply.</p> <p style={{'fontSize' : '2.5em'}}>and deeply.</p>
<p>breathe out...</p> <p style={{'fontSize' : '2.5em'}}>breathe out...</p>
<img style={{ <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', 'transition': 'scale 2.0s ease-out',
...@@ -132,18 +132,18 @@ export function Breathe(){ ...@@ -132,18 +132,18 @@ export function Breathe(){
</div> </div>
{/* Spacing Block */} {/* Spacing Block */}
<div className='col' style={{ 'height': '100vh' }}></div> <div className='col' style={{ 'height': '100vh' }}></div>
<p>Your feel <strong>revitalized</strong></p> <p style={{'fontSize' : '2.5em'}}>Your feel <strong>revitalized</strong></p>
<p>Your body and mind</p> <p style={{'fontSize' : '2.5em'}}>Your body and mind</p>
<p>become <strong>grounded</strong>.</p> <p style={{'fontSize' : '2.5em'}}>become <strong>grounded</strong>.</p>
{/* Spacing Block */} {/* Spacing Block */}
<div className='col' style={{ 'height': '100vh' }}></div> <div className='col' style={{ 'height': '100vh' }}></div>
<p>Now deeply breathe in</p> <p style={{'fontSize' : '2.5em'}}>Now deeply breathe in</p>
<p>and hold your breath.</p> <p style={{'fontSize' : '2.5em'}}>and hold your breath.</p>
<div style={{ 'height': '100vh'}} ref={domRef4}> <div style={{ 'height': '100vh'}} ref={domRef4}>
<img style={{ <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', 'transition': 'scale 2.0s ease-out',
...@@ -155,13 +155,13 @@ export function Breathe(){ ...@@ -155,13 +155,13 @@ export function Breathe(){
</div> </div>
{/* black */} {/* black */}
<div <div
style={{ 'height': '400vh'}} ref={domRef5}> style={{ 'height': '300vh'}} ref={domRef5}>
<img <img
style={{ style={{
'zIndex': '1', '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', 'transition': 'opacity 0.6s ease-out',
...@@ -174,25 +174,23 @@ export function Breathe(){ ...@@ -174,25 +174,23 @@ export function Breathe(){
<img style={{ <img style={{
'position': 'fixed', 'position': 'fixed',
'top': '20vh', 'top': '20vh',
'left': '20vw', 'left': '30vw',
'width': '60vw', 'width': '60vw',
'height': '60vh', 'height': '60vh',
'visibility': `${isVisible6 ? 'visible' : 'hidden'}` 'visibility': `${isVisible6 ? 'visible' : 'hidden'}`
}} }}
src="https://static.igem.wiki/teams/5247/landing/breath/circles/darkpurplecircle.webp"></img> src="https://static.igem.wiki/teams/5247/landing/breath/circles/darkpurplecircle.webp"></img>
</div> </div>
{/* Spacing Block */} <p style={{'fontSize' : '2.5em'}}>With every second,</p>
<div className='col' style={{ 'height': '100vh' }}></div> <p style={{'fontSize' : '2.5em'}}>you feel more stressed.</p>
<p>With every second,</p> <p style={{'fontSize' : '2.5em'}}>Your body fights</p>
<p>you feel more stressed.</p> <p style={{'fontSize' : '2.5em'}}>against it, and your</p>
<p>Your body fights</p> <p style={{'fontSize' : '2.5em'}}>mind begins to panic...</p>
<p>against it, and your</p>
<p>mind begins to panic...</p>
<div style={{ 'height': '100vh'}} ref={domRef7}> <div style={{ 'height': '100vh'}} ref={domRef7}>
<img style={{ <img style={{
'position': 'fixed', 'position': 'fixed',
'top': '20vh', 'top': '20vh',
'left': '20vw', 'left': '30vw',
'width': '60vw', 'width': '60vw',
'height': '60vh', 'height': '60vh',
'scale': `${isVisible7 ? '1' : '0'}`, 'scale': `${isVisible7 ? '1' : '0'}`,
...@@ -202,8 +200,8 @@ export function Breathe(){ ...@@ -202,8 +200,8 @@ export function Breathe(){
</div> </div>
{/* Spacing Block */} {/* Spacing Block */}
<div className='col' style={{ 'height': '100vh' }}></div> <div className='col' style={{ 'height': '100vh' }}></div>
<p>Breathe out!</p> <p style={{'fontSize' : '2.5em'}}>Breathe out!</p>
<p>Feel the relief!</p> <p style={{'fontSize' : '2.5em'}}>Feel the relief!</p>
</div> </div>
{/* grey */} {/* grey */}
<div <div
...@@ -213,7 +211,7 @@ export function Breathe(){ ...@@ -213,7 +211,7 @@ export function Breathe(){
'zIndex': '1', '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', 'transition': 'opacity 0.6s ease-out',
...@@ -223,10 +221,10 @@ export function Breathe(){ ...@@ -223,10 +221,10 @@ export function Breathe(){
src="https://static.igem.wiki/teams/5247/landing/breath/textless/breath-only-3.webp"> src="https://static.igem.wiki/teams/5247/landing/breath/textless/breath-only-3.webp">
</img> </img>
</div> </div>
<p>Imagine yourself living in</p> <p style={{'fontSize' : '2.5em'}}>Imagine yourself living in</p>
<p>constant fear of suffocation,</p> <p style={{'fontSize' : '2.5em'}}>constant fear of suffocation,</p>
<p>because breathing deeply is a</p> <p style={{'fontSize' : '2.5em'}}>because breathing deeply is a</p>
<p><strong>privilage not everyone can enjoy</strong></p> <p style={{'fontSize' : '2.5em'}}><strong>privilage not everyone can enjoy</strong></p>
{/* Spacing Block */} {/* Spacing Block */}
<div className='col' style={{ 'height': '100vh' }}></div> <div className='col' style={{ 'height': '100vh' }}></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