chae
/
cms_project
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

added more illustration but still testing

Browse Source
master
franklin004 2 years ago
parent 8b2fcaf4cf
commit 5da171d8f0
12 changed files with 119 additions and 34 deletions
Show Stats Download Patch File Download Diff File

27
app.js
Unescape Escape View File

@ -0,0 +1,27 @@
const BuchimgaePic = document.getElementById("Buchimgaepic");
const Buchimgae = document.getElementById("Buchimgae");
const BuchimgaeExpl = document.getElementById("expl");
const BuchimgaeIllu = document.getElementById("illu");
const BuchimgaePhoto = document.getElementById("photo");
Buchimgae.addEventListener("click", function () {
Buchimgae.style.display = "none";
BuchimgaePic.style.display = "inline-block";
BuchimgaeExpl.style.display = "inline-block";
});
BuchimgaePic.addEventListener("click", function () {
BuchimgaePic.style.display = "none";
BuchimgaeExpl.style.display = "none";
Buchimgae.style.display = "inline-block";
});
BuchimgaeIllu.addEventListener("click", function () {
BuchimgaeIllu.style.display = "none";
BuchimgaePhoto.style.display = "inline-block";
});
BuchimgaePhoto.addEventListener("click", function () {
BuchimgaePhoto.style.display = "none";
BuchimgaeIllu.style.display = "inline-block";
});

BIN
img/.DS_Store vendored
View File

Binary file not shown.

BIN
img/Cms Illus-5.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 189 KiB

BIN
img/Cms Illus-6.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 105 KiB

BIN
img/buchimgae_l.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 501 KiB

BIN
img/buchimgae_m.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 227 KiB

BIN
img/buchimgae_s.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

BIN
img/pancake2.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 56 KiB

BIN
img/ppl_l.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 30 KiB

BIN
img/sharing.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 53 KiB

57
index.css
Unescape Escape View File

@ -12,7 +12,7 @@ body {
} }
.container { .container {
width: 50%; width: 60%;
height: 100%; height: 100%;
display: block; display: block;
margin: 0 auto; margin: 0 auto;
@ -43,7 +43,7 @@ body {
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 7.5%; margin-bottom: 4.5%;
} }
.ani { .ani {
@ -52,7 +52,7 @@ body {
} }
.ani img { .ani img {
/* width: 80%; */ width: 70%;
border: 1px solid black; border: 1px solid black;
} }
.text { .text {
@ -67,8 +67,7 @@ body {
line-height: 135%; line-height: 135%;
} }
.row3 .text, .row3 .text {
.row5 .text {
width: 50%; width: 50%;
border-radius: 50%; border-radius: 50%;
border: 3px red solid; border: 3px red solid;
@ -76,11 +75,51 @@ body {
margin: 0 auto; margin: 0 auto;
} }
.row3 .text p, .row3 .text p {
.row5 .text p {
text-align: center; text-align: center;
font-family: Verdana, Geneva, Tahoma, sans-serif; font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 2rem; font-size: 1.4rem;
color: red; color: red;
line-height: 1; line-height: 0;
}
#question {
font-size: 1.2rem;
}
.row5 .text span,
.row5 .ani {
cursor: pointer;
}
#illu {
}
#photo {
display: none;
}
#Buchimgae {
text-decoration: dotted underline;
display: inline-block;
}
#Buchimgaepic {
display: none;
padding: 0;
margin: 0;
width: 20%;
}
#expl {
position: absolute;
display: none;
font-size: 0.8rem;
line-height: 1.4;
background-color: white;
color: magenta;
}
#Buchimgaepic img {
width: 100%;
} }

69
index.html
Unescape Escape View File

@ -6,11 +6,11 @@
<meta http-equiv="X-UA-Compatible" content="ie=edge" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Testinggg</title> <title>Testinggg</title>
<link rel="stylesheet" href="index.css" media="only screen" /> <link rel="stylesheet" href="index.css" media="only screen" />
<!-- <link <link
rel="stylesheet" rel="stylesheet"
media="only screen and (min-device-width : 1190px) and (max-device-width : 1440px)" media="only screen and (min-device-width : 1190px) and (max-device-width : 1440px)"
href="./laptop_big.css" href="./laptop_s.css"
/> --> />
</head> </head>
<body> <body>
<div class="container"> <div class="container">
@ -52,8 +52,8 @@
<div class="ani"><img src="./img/cliche2.png" /></div> <div class="ani"><img src="./img/cliche2.png" /></div>
<div class="text"> <div class="text">
<p> <p>
If we think of the word publishing, we're prone to be stuck with If we think of the word <i>publishing</i>, we're prone to be stuck
an idea that we work for some documents in Adobe applications, with an idea of working on some documents in Adobe applications,
then print, then glue. then print, then glue.
</p> </p>
</div> </div>
@ -61,8 +61,8 @@
<div class="row row3"> <div class="row row3">
<!-- <div class="ani"></div> --> <!-- <div class="ani"></div> -->
<div class="text"> <div class="text">
<p>Could be more than this...</p> <p>BUT it could be more than this..</p>
<p>Various forms of actions...</p> <p>The forms of actions should be various...</p>
<p>All-together!</p> <p>All-together!</p>
</div> </div>
</div> </div>
@ -71,45 +71,63 @@
<div class="text"> <div class="text">
<p> <p>
Hmmm indeed...we tend to 'bind' in the end of the book making.<br />One Hmmm indeed...we tend to 'bind' in the end of the book making.<br />One
publication is borned when every single different page gets glued publication is born when every single different page gets glued
together. Oh wait, it's just like Buchimgae (Korean pancake) together. <span id="question">Oh wait, glue?</span>
making! All the different ingredients gets mingled and binded in
the batter!
</p> </p>
</div> </div>
</div> </div>
<div class="row row5"> <div class="row row5">
<!-- <div class="ani"></div> --> <div class="ani">
<div class="text"><p>Glued...?</p></div> <img src="./img/pancake2.jpg" id="illu" />
<img src="./img/buchimgae_l.png" id="photo" />
</div>
<div class="text">
<p>
Can <span id="Buchimgae">Buchimgae</span
><span id="Buchimgaepic">
<img src="./img/buchimgae_s.png" /></span
><span id="expl">Buchimage is Korean pancake.</span> be a
publication, involving with the glue? When making the pancake, all
the different ingredients gets mingled and binded through the
batter!
</p>
</div>
</div> </div>
<div class="row row6"> <div class="row row6">
<div class="ani"><img src="./img/ppl.png" /></div> <div class="ani"><img src="./img/sharing.jpg" /></div>
<div class="text"> <div class="text">
<p> <p>
True! Also in our culture, we share Buchimgae together! We don't Also in Korea, we share Buchimgae together! We don't usually have
usually have one pancake individually. Cooking and tearing the one pancake per person. We tear the hot pancake together,using
pancake together, we share so many things. chopsticks..! That's the unique beauty of Buchimgae.
</p> </p>
</div> </div>
</div> </div>
<div class="row row7"> <div class="row row7">
<div class="ani"><img src="./img/habitat_process.jpg" /></div> <div class="ani"><img src="./img/habitat_process.jpg" /></div>
<div class="text"> <div class="text">
<p> <p>
What if we create a moment of collective book binding? Then What if we create a moment of collective book binding?<br />We
cooking Buchingae together! Everyone makes a page and bind could also host a small Buchimgae cooking session! In Korea we
together! actually say Buchimage one/two/three/.. page when counting the
number of it. Just like a book..! This could be another format of
the (book) binding.
</p> </p>
</div> </div>
</div> </div>
<div class="row row8"> </div>
<div class="ani"><img src="./img/relay.png" /></div> <div class="row row8">
<div class="text"><p>Bind in a relay format?!</p></div> <div class="ani"><img src="./img/relay.png" /></div>
<div class="text">
<p>
Aha, everyone makes their own pages.<br />
Then bind them in a relay format?!
</p>
</div> </div>
</div> </div>
<div class="row row9">
<div class="row row8">
<div class="ani"><img src="./img/italian.png" /></div> <div class="ani"><img src="./img/italian.png" /></div>
<div class="text"> <div class="text">
<p> <p>
@ -123,5 +141,6 @@
</div> </div>
</div> </div>
</div> </div>
<script src="./app.js"></script>
</body> </body>
</html> </html>

Write Preview
Loading…
Cancel
Save