Skip to content

Commit

Permalink
Website Redesign: "Learn" Page 3- Common Calls Section- UI orcasound#43
Browse files Browse the repository at this point in the history
  • Loading branch information
@Adeniyi-Bella
Adeniyi-Bella committed Mar 19, 2023
1 parent fea7dec commit cfb4175
Show file tree
Hide file tree
Showing 2 changed files with 191 additions and 100 deletions.
289 changes: 190 additions & 99 deletions src/pages/learn.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import learnStyles from '../styles/Learn.module.css'

export const learn = () => {
return (
<div className={learnStyles.learn}>
<>
<Head>
<title>Orcasound</title>
</Head>
Expand All @@ -36,110 +36,201 @@ export const learn = () => {
<li>Souther Resident Killer Whale Call Catalog</li>
<li>Exhibits</li>
</ul>
<Typography
variant="h1"
fontFamily={'Mukta'}
fontSize="34px"
fontWeight={'600'}
mb={{ xs: 3, sm: 4 }}
mt={{ xs: 3 }}
>
Sounds of the Salish Sea
<br></br>
</Typography>
<Typography
variant="body1"
textAlign="justify"
width={{ md: '100%', xl: '70%', lg: '70%' }}
sx={{ marginBottom: '20px' }}
>
{`Explore common sounds of the Salish Sea by selecting the animals and
<Box>
<Typography
variant="h1"
fontFamily={'Mukta'}
fontSize="34px"
fontWeight={'600'}
mb={{ xs: 3, sm: 4 }}
mt={{ xs: 3 }}
>
Sounds of the Salish Sea
<br></br>
</Typography>
<Typography
variant="body1"
textAlign="justify"
width={{ md: '100%', xl: '70%', lg: '70%' }}
sx={{ marginBottom: '20px' }}
>
{`Explore common sounds of the Salish Sea by selecting the animals and
other objects in this anoramic soundscape of the inlandwaters of
Washington State(USA) and British Columbia(Canada)`}
</Typography>
<Image
alt="Sounds Of The Salish Sea"
src={salishsea}
sx={{ objectFit: 'contain' }}
width={1300}
height={700}
layout="intrinsic"
quality={65}
/>
</Container>
</Box>
<div id="learn" />
<div className={learnStyles.orca}>
<Image
src={roundorca}
alt="OrcaImage"
width={400}
height={350}
layout="intrinsic"
quality={65}
/>
</div>
<h2 className={learnStyles.calls}>3 Common Calls</h2>
<div>
<div className={learnStyles.gallery}>
<Image src={frequency1} alt="J pod's call - Frequency and Time" />
<h6>{`J pod's Favorite call:501`}</h6>
<p>{`More description goes here`}</p>
<div>
<ReactAudioPlayer
className={learnStyles.audio}
src={audio}
autoPlay={false}
controls
</Typography>
<Image
alt="Sounds Of The Salish Sea"
src={salishsea}
sx={{ objectFit: 'contain' }}
width={1300}
height={700}
layout="intrinsic"
quality={65}
/>
</div>
</div>
</Box>
<Box mt={'50px'} mb={{ sm: '50px' }}>
<Box
display={{ lg: 'flex', sm: 'flex', md: 'flex-direction: row' }}
sx={{ justifyContent: 'space-between' }}
height={{ lg: '250px', sm: '300px', md: '250px' }}
>
<Box mb={{ md: '50px' }}>
<Typography
variant="h2"
fontFamily={'Mukta'}
fontSize="34px"
fontWeight={'600'}
mb={{ xs: 3, sm: 4 }}
mt={{ xs: 3 }}
>
3 Common Calls
</Typography>
<Typography
variant="body1"
textAlign="justify"
display="inline-block"
lineHeight="2"
letterSpacing="normal"
width={{ lg: '500px', sm: '350px', xs: '320px' }}
mb={{ md: '50px' }}
>
{`Conveniently, a few calls are used almost exclusively by each
southern resident pod. This means that by memorizing just 3 calls,
you can tell with great certainty that you are hearing a particular
pod of orcas!`}
</Typography>
</Box>
<Box>
<Image
src={roundorca}
alt="OrcaImage"
width={500}
// width={{ md: '300px', xl: '100px', lg: '300px' }}
height={500}
layout="intrinsic"
quality={65}
/>
</Box>
</Box>
<Box
display={{ lg: 'flex', sm: 'flex', md: 'flex-direction: row' }}
position={'relative'}
pt={{ sm: '50px' }}
>
<Box pl={'20px'} marginBottom={'20px'}>
<Box
backgroundColor={'skyblue'}
width={'fit-content'}
marginBottom={'20px'}
>
<Image
// width={'500px'}
src={frequency1}
alt="J pod's call - Frequency and Time"
/>
<Box pl={'20px'}>
<h6>{`J pod's Favorite call:501`}</h6>
<p>{`More description goes here`}</p>
<div>
<ReactAudioPlayer src={audio} autoPlay={false} controls />
</div>
</Box>
</Box>
<Typography
variant="body1"
textAlign="justify"
display="inline-block"
lineHeight="2"
letterSpacing="normal"
width={{ lg: '500px', sm: '350px', xs: '320px' }}
>{`Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatem praesentium, ducimus eaque adipisci quam placeat perspiciatis! Est deserunt quasi, ad inventore consequuntur beatae maxime! In exercitationem debitis corporis iusto sequi.`}</Typography>
</Box>
<Box
pl={'20px'}
position={{ lg: 'absolute', sm: 'absolute', md: 'absolute' }}
left={'50%'}
bottom={'-40%'}
>
<Box
// position={'absolute'}
backgroundColor={'skyblue'}
width={'fit-content'}
marginBottom={'20px'}
>
<Image
// width={'500px'}
src={frequency1}
alt="K pod's call - Frequency and Time"
/>
<Box pl={'20px'}>
<h6>{`K pod's Favorite call:501`}</h6>
<p>{`More description goes here`}</p>
<div>
<ReactAudioPlayer src={audio} autoPlay={false} controls />
</div>
</Box>
</Box>
<Typography
variant="body1"
textAlign="justify"
display="inline-block"
lineHeight="2"
letterSpacing="normal"
width={{ lg: '500px', sm: '350px', xs: '320px' }}
>{`Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatem praesentium, ducimus eaque adipisci quam placeat perspiciatis! Est deserunt quasi, ad inventore consequuntur beatae maxime! In exercitationem debitis corporis iusto sequi.`}</Typography>
</Box>
</Box>
<Box pl={'20px'} left={'50%'} bottom={'-40%'}>
<Box
// position={'absolute'}
backgroundColor={'skyblue'}
width={'fit-content'}
marginTop={'40px'}
marginBottom={'20px'}
>
<Image
// width={'500px'}
minWidth={'300px'}
src={frequency1}
alt="K pod's call - Frequency and Time"
/>
<Box pl={'20px'}>
<h6>{`K pod's Favorite call:501`}</h6>
<p>{`More description goes here`}</p>
<div>
<ReactAudioPlayer src={audio} autoPlay={false} controls />
</div>
</Box>
</Box>
<Typography
variant="body1"
textAlign="justify"
display="inline-block"
lineHeight="2"
letterSpacing="normal"
width={{ lg: '500px', sm: '350px', xs: '320px' }}
>{`Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatem praesentium, ducimus eaque adipisci quam placeat perspiciatis! Est deserunt quasi, ad inventore consequuntur beatae maxime! In exercitationem debitis corporis iusto sequi.`}</Typography>
</Box>
</Box>

<div className={learnStyles.image}>
<Image src={frequency1} alt="K pod's call - Frequency and Time" />
<h6>{`K pod's Favorite call:516`}</h6>
<p>{`More description goes here`}</p>
<div>
<ReactAudioPlayer
className={learnStyles.audio}
src={audio}
autoPlay={false}
controls
/>
<div className={learnStyles.property}>
<h2>Exhibits</h2>
<p className={learnStyles.exhibit}>
{`Learn About the Marine acoustic landscape and the hydrophone network`}
<br></br>
{`by exploring these Orcasound Exhibit screens designed for
educational organizations in the Pudget Sound regions`}
</p>
</div>
</div>

<div className={learnStyles.gallery2}>
<Image src={frequency1} alt="L pod's cal - Frequency and Time" />
<h6>{`L pod's Favorite call:519`}</h6>
<p>{`More description goes here`}</p>
<div>
<ReactAudioPlayer
className={learnStyles.audio}
src={audio}
autoPlay={false}
controls
alt="l pod favorite call"
/>
<div className={learnStyles.org}>
<Image src={organization1} alt="Seattle aquarium exhibit" />
<a href="https://killerwhaletales.org/">
<Image src={organization2} alt="Marine Science Center Logo" />
</a>
</div>
</div>
</div>
<div className={learnStyles.property}>
<h2 className={learnStyles.exhibits}>Exhibits</h2>
<p className={learnStyles.exhibit}>
{`Learn About the Marine acoustic landscape and the hydrophone network`}
<br></br>
{`by exploring these Orcasound Exhibit screens designed for
educational organizations in the Pudget Sound regions`}
</p>
</div>
<div className={learnStyles.org}>
<Image src={organization1} alt="Seattle aquarium exhibit" />
<a href="https://killerwhaletales.org/">
<Image src={organization2} alt="Marine Science Center Logo" />
</a>
</div>
</div>
</Container>
</Box>
</>
)
}

Expand Down
2 changes: 1 addition & 1 deletion src/styles/Learn.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,6 +108,6 @@
display: flex;
margin-top: 80px;
text-align: center;
margin-left: 300px;
/* margin-left: 300px; */
padding: 5px 5px;
}

0 comments on commit cfb4175

Please sign in to comment.