added more illustration but still testing

master
franklin004 2 years ago
parent 8b2fcaf4cf
commit 5da171d8f0

@ -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

Binary file not shown.

Binary file not shown.

After

Width:  |  Height:  |  Size: 189 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 105 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 501 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 227 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 56 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 30 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 53 KiB

@ -12,7 +12,7 @@ body {
}
.container {
width: 50%;
width: 60%;
height: 100%;
display: block;
margin: 0 auto;
@ -43,7 +43,7 @@ body {
flex-direction: row;
justify-content: space-between;
align-items: center;
margin-bottom: 7.5%;
margin-bottom: 4.5%;
}
.ani {
@ -52,7 +52,7 @@ body {
}
.ani img {
/* width: 80%; */
width: 70%;
border: 1px solid black;
}
.text {
@ -67,8 +67,7 @@ body {
line-height: 135%;
}
.row3 .text,
.row5 .text {
.row3 .text {
width: 50%;
border-radius: 50%;
border: 3px red solid;
@ -76,11 +75,51 @@ body {
margin: 0 auto;
}
.row3 .text p,
.row5 .text p {
.row3 .text p {
text-align: center;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 2rem;
font-size: 1.4rem;
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%;
}

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

Loading…
Cancel
Save