Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

correct video and image #49

Merged
merged 1 commit into from
Feb 28, 2024
Merged

correct video and image #49

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
188 changes: 153 additions & 35 deletions src/views/page/About/Mobile/About.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,16 @@ import styles from "../../../../styles/About/Mobile/About.module.css";
function About() {
return (
<div className={styles.Mcontainer}>
<img className={styles.responsiveImage} src="./img/aboutMimg1.png" alt="description" autoPlay loop muted playsInline/>

<img
className={styles.responsiveImage}
src="./img/aboutMimg1.png"
alt="description"
autoPlay
loop
muted
playsInline
/>

<div className={styles.Mpage}>
<div className={styles.MLinecontainer}></div>
<div className={styles.MC1}>
Expand All @@ -17,13 +25,24 @@ function About() {
<p>In a row</p>
</div>
<div className={styles.MC3}>
<p>삶의 기나긴 선상에 놓인 우리는 마치 하나의 카세트처럼
움직이는 것 같아요. 같은 동작을 반복하며 느슨해졌다가,
무언가의 힘을 빌려 본래의 선율을 되찾기 때문이죠.</p>
<p>
삶의 기나긴 선상에 놓인 우리는 마치 하나의 카세트처럼 움직이는 것
같아요. 같은 동작을 반복하며 느슨해졌다가, 무언가의 힘을 빌려 본래의
선율을 되찾기 때문이죠.
</p>
</div>
</div>
<video className={styles.responsiveImage} src="./img/About_1.mp4" alt="description" autoPlay loop muted playsInline />

<video
className={styles.responsiveImage}
alt="description"
autoPlay
loop
muted
playsInline
>
<source src="./img/About_1.mp4" type="video/mp4" />
</video>

<div className={styles.Mpage}>
<div className={styles.MLinecontainer}></div>
<div className={styles.MC1}>
Expand All @@ -34,12 +53,21 @@ function About() {
<p1>릴을 돌려 팽팽하게</p1>
</div>
<div className={styles.MC3}>
<p1>릴이 돌아가다 보면 느슨해졌던 테이프가 다시금 팽팽해집니다.
그렇게 제자리로 돌아온 우리는 잡음을 줄이고, 또다시 하루하루
를 살아갑니다.</p1>
<p1>
릴이 돌아가다 보면 느슨해졌던 테이프가 다시금 팽팽해집니다. 그렇게
제자리로 돌아온 우리는 잡음을 줄이고, 또다시 하루하루 를 살아갑니다.
</p1>
</div>
</div>
<video className={styles.responsiveImage} src="./img/About_2.mp4" alt="description" autoPlay loop muted playsInline/>
<video
className={styles.responsiveImage}
src="./img/About_2.mp4"
alt="description"
autoPlay
loop
muted
playsInline
/>
<div className={styles.Mpage}>
<div className={styles.MLinecontainer}></div>
<div className={styles.MC1}>
Expand All @@ -50,12 +78,22 @@ function About() {
<p1>나를 감싸던 것</p1>
</div>
<div className={styles.MC3}>
<p1>테이프 커버에 곡에 대한 정보가 빼곡히 적혀있듯이, 내 주변에
는 그동안 쌓아온 삶과 경험들로 가득해요. 이것들을 차근차근
돌아보면, 내가 좋아하는 것들이 무엇인지 알 수 있어요.</p1>
<p1>
테이프 커버에 곡에 대한 정보가 빼곡히 적혀있듯이, 내 주변에 는
그동안 쌓아온 삶과 경험들로 가득해요. 이것들을 차근차근 돌아보면,
내가 좋아하는 것들이 무엇인지 알 수 있어요.
</p1>
</div>
</div>
<video className={styles.responsiveImage} src="./img/About_3.mp4" alt="description" autoPlay loop muted playsInline/>
<video
className={styles.responsiveImage}
src="./img/About_3.mp4"
alt="description"
autoPlay
loop
muted
playsInline
/>
<div className={styles.Mpage}>
<div className={styles.MLinecontainer}></div>
<div className={styles.MC1}>
Expand All @@ -66,35 +104,108 @@ function About() {
<p1>일상으로의 회복</p1>
</div>
<div className={styles.MC3}>
<p1>지루했던 일상이 다채로워 보이고, 무엇이든지 해낼 수 있을 거
같은 자신감도 생겨요. 언제 다시 번아웃과 슬럼프가 찾아올 지
모르지만, 지금의 감정은 이루 다 말할 수 없어요.</p1>
<p1>
지루했던 일상이 다채로워 보이고, 무엇이든지 해낼 수 있을 거 같은
자신감도 생겨요. 언제 다시 번아웃과 슬럼프가 찾아올 지 모르지만,
지금의 감정은 이루 다 말할 수 없어요.
</p1>
</div>
</div>
<video className={styles.responsiveImage} src="./img/About_4.mp4" alt="description" autoPlay loop muted playsInline/>
<video
className={styles.responsiveImage}
src="./img/About_4.mp4"
alt="description"
autoPlay
loop
muted
playsInline
/>
<div className={styles.Mpage}>
<div className={styles.MC3}>
<p>알파벳 순서대로 보면 보다 쾌적하게 전시를 관람할수 있습니다. 또한 기프트존을 따로 마련해두었습니다.
다른 관람객들을 위해, 방문자님의 소중한 마음은 꼭 기프트존에만 놓아주세요.</p>
<p>
알파벳 순서대로 보면 보다 쾌적하게 전시를 관람할수 있습니다. 또한
기프트존을 따로 마련해두었습니다. 다른 관람객들을 위해, 방문자님의
소중한 마음은 꼭 기프트존에만 놓아주세요.
</p>
</div>
</div>
<img className={styles.responsiveImage} src="./img/aboutMimg6.png" alt="description" autoPlay loop muted playsInline/>
<img
className={styles.responsiveImage}
src="./img/aboutMimg6.png"
alt="description"
autoPlay
loop
muted
playsInline
/>
<div className={styles.Mpage}>
<div className={styles.MC3}>
<p>온라인으로도 전시를 관람하실 수 있습니다. About 페이지에서 이번 전시에 대한 전문을 읽어보실 수 있으
며, Projects 페이지에서 각 팀 별 도슨트와 슬럼프에 대한 이야기를 팟캐스트 형식으로 들어볼 수 있습니다.
마지막으로 REC 페이지에서는 나만의 자극 카드를 만드는 인터랙티브한 경험을 즐기실 수 있습니다.</p>
<p>
온라인으로도 전시를 관람하실 수 있습니다. About 페이지에서 이번
전시에 대한 전문을 읽어보실 수 있으 며, Projects 페이지에서 각 팀 별
도슨트와 슬럼프에 대한 이야기를 팟캐스트 형식으로 들어볼 수
있습니다. 마지막으로 REC 페이지에서는 나만의 자극 카드를 만드는
인터랙티브한 경험을 즐기실 수 있습니다.
</p>
</div>
</div>
<img className={styles.responsiveImage} src="./img/aboutMimg7.png" alt="description" autoPlay loop muted playsInline/>
<img
className={styles.responsiveImage}
src="./img/aboutMimg7.png"
alt="description"
autoPlay
loop
muted
playsInline
/>
<div className={styles.MC4}>
<p>Graphic Detail</p>
</div>
<img className={styles.responsiveImage} src="./img/aboutMimg8.png" alt="description" autoPlay loop muted playsInline/>
<img className={styles.responsiveImage} src="./img/aboutMimg9.png" alt="description" autoPlay loop muted playsInline/>
<img className={styles.responsiveImage} src="./img/aboutMimg10.png" alt="description" autoPlay loop muted playsInline/>
<img className={styles.responsiveImage} src="./img/aboutMimg11.png" alt="description" autoPlay loop muted playsInline/>
<img className={styles.responsiveImage} src="./img/aboutMimg12.png" alt="description" autoPlay loop muted playsInline/>
<img
className={styles.responsiveImage}
src="./img/aboutMimg8.png"
alt="description"
autoPlay
loop
muted
playsInline
/>
<img
className={styles.responsiveImage}
src="./img/aboutMimg9.png"
alt="description"
autoPlay
loop
muted
playsInline
/>
<img
className={styles.responsiveImage}
src="./img/aboutMimg10.png"
alt="description"
autoPlay
loop
muted
playsInline
/>
<img
className={styles.responsiveImage}
src="./img/aboutMimg11.png"
alt="description"
autoPlay
loop
muted
playsInline
/>
<img
className={styles.responsiveImage}
src="./img/aboutMimg12.png"
alt="description"
autoPlay
loop
muted
playsInline
/>
<div className={styles.MC5}>
<p>Thanks to</p>
</div>
Expand Down Expand Up @@ -196,7 +307,11 @@ function About() {
<div className={styles.Mpage}>
<div className={styles.MLinecontainer}></div>
<div className={styles.MC6}>
<p0>VIBE<br/>MAKERS</p0>
<p0>
VIBE
<br />
MAKERS
</p0>
<p1>04</p1>
</div>
<div className={styles.MC7}>
Expand Down Expand Up @@ -229,12 +344,15 @@ function About() {
<div className={styles.Mpage}>
<div className={styles.MLinecontainer}></div>
<div className={styles.MC6}>
<p0>도파민<br/>중독자들</p0>
<p0>
도파민
<br />
중독자들
</p0>
<p1>05</p1>
</div>
<div className={styles.MC7}>
<p0>Dopamine Addiction:
Visualization of symptoms</p0>
<p0>Dopamine Addiction: Visualization of symptoms</p0>
<p1>SIDE PROJECT</p1>
</div>
<div className={styles.MC8}>
Expand Down
12 changes: 6 additions & 6 deletions src/views/page/Projects/Mobile/Projects.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ function Projects() {
</div>
</div>
<div className={styles.ps}>
<img alt="" src="../../../img/MAMap.png" autoPlay loop muted playsInline/>
<img alt="" src="/img/MAMap.png" autoPlay loop muted playsInline />
</div>

<div className={styles.descriptionContainer}>
Expand Down Expand Up @@ -78,7 +78,7 @@ function Projects() {
</div>
</div>
<div className={styles.ps}>
<img alt="" src="../../../img/MBMap.png" autoPlay loop muted playsInline/>
<img alt="" src="/img/MBMap.png" autoPlay loop muted playsInline />
</div>
<div className={styles.descriptionContainer}>
<div className={styles.titleBox}>
Expand Down Expand Up @@ -139,7 +139,7 @@ function Projects() {
</div>
</div>
<div className={styles.ps}>
<img alt="" src="../../../img/MCMap.png" autoPlay loop muted playsInline/>
<img alt="" src="/img/MCMap.png" autoPlay loop muted playsInline />
</div>
<div className={styles.descriptionContainer}>
<div className={styles.titleBox}>
Expand Down Expand Up @@ -200,7 +200,7 @@ function Projects() {
</div>
</div>
<div className={styles.ps}>
<img alt="" src="../../../img/MDMap.png" autoPlay loop muted playsInline/>
<img alt="" src="/img/MDMap.png" autoPlay loop muted playsInline />
</div>
<div className={styles.descriptionContainer}>
<div className={styles.titleBox}>
Expand Down Expand Up @@ -261,7 +261,7 @@ function Projects() {
</div>
</div>
<div className={styles.ps}>
<img alt="" src="../../../img/MEMap.png" autoPlay loop muted playsInline/>
<img alt="" src="/img/MEMap.png" autoPlay loop muted playsInline />
</div>
<div className={styles.descriptionContainer}>
<div className={styles.titleBox}>
Expand Down Expand Up @@ -320,7 +320,7 @@ function Projects() {
</div>
</div>
<div className={styles.ps}>
<img alt="" src="../../../img/MFMap.png" autoPlay loop muted playsInline/>
<img alt="" src="/img/MFMap.png" autoPlay loop muted playsInline />
</div>
<div className={styles.descriptionContainer}>
<div className={styles.titleBox}>
Expand Down
Loading