added more illustration but still testing

2 years ago · 5da171d8f0
parent 8b2fcaf4cf
commit 5da171d8f0
12 changed files with 119 additions and 34 deletions
--- a/app.js
+++ b/app.js
@ -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";
+});
--- a/img/.DS_Store
+++ b/img/.DS_Store
--- a/Illus-5.jpg
+++ b/Illus-5.jpg
--- a/Illus-6.jpg
+++ b/Illus-6.jpg
--- a/img/buchimgae_l.png
+++ b/img/buchimgae_l.png
--- a/img/buchimgae_m.png
+++ b/img/buchimgae_m.png
--- a/img/buchimgae_s.png
+++ b/img/buchimgae_s.png
--- a/img/pancake2.jpg
+++ b/img/pancake2.jpg
--- a/img/ppl_l.png
+++ b/img/ppl_l.png
--- a/img/sharing.jpg
+++ b/img/sharing.jpg
--- a/index.css
+++ b/index.css
@ -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%;
 }
--- a/index.html
+++ b/index.html
@ -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 class="row row8">
-          <div class="ani"><img src="./img/relay.png" /></div>
-          <div class="text"><p>Bind in a relay format?!</p></div>
+      </div>
+      <div class="row row8">
+        <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 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>