added new illustration and adjusted layout

index.css

@@ -8,7 +8,10 @@ body {
   height: 100%;
   margin: 0;
   padding: 0;
-  background-color: white;
+  background-color: ivory;
+  /* background-image: url("./img/banjuk.png");
+  background-size: contain;
+  background-repeat: no-repeat; */
 }
 
 .container {
@@ -19,9 +22,6 @@ body {
 }
 
 .diary {
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
   width: 100%;
   height: min-content;
   display: flex;
@@ -92,10 +92,10 @@ body {
 
 .intro {
   width: 50%;
-  margin-top: 36%;
+  margin-top: 2.5%;
   margin-left: auto;
   margin-right: auto;
-  margin-bottom: 5%;
+  margin-bottom: 5.5%;
 }
 
 .intro h4 {
@@ -113,7 +113,7 @@ body {
   background-color: aliceblue;
 }
 
-.row {
+.cut {
   width: 100%;
   height: auto;
   display: flex;
@@ -145,7 +145,7 @@ body {
   line-height: 135%;
 }
 
-.row3 .text {
+.cut3 .text {
   width: 50%;
   border-radius: 50%;
   border: 3px red solid;
@@ -153,7 +153,7 @@ body {
   margin: 0 auto;
 }
 
-.row3 .text p {
+.cut3 .text p {
   text-align: center;
   font-family: Verdana, Geneva, Tahoma, sans-serif;
   font-size: 1.4rem;
@@ -165,14 +165,11 @@ body {
   font-size: 1.2rem;
 }
 
-.row5 .text span,
-.row5 .ani {
+.cut5 .text span,
+.cut5 .ani {
   cursor: pointer;
 }
 
-#illu {
-}
-
 #photo {
   display: none;
 }

index.html

@@ -43,8 +43,35 @@
         </div>
       </div>
 
-      <div class="intro">
-        <h4>Behind scenes and process</h4>
+      <div class="cartoon"></div>
+      <div class="cut cut1">
+        <div class="ani"><img src="./img/ex.jpg" /></div>
+        <div class="text">
+          <p>It was orange evening that we arrived at Habitat.</p>
+        </div>
+      </div>
+
+      <div class="cut cut2">
+        <div class="ani"><img src="./img/bibi_768.jpg" /></div>
+        <div class="text">
+          <p>
+            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>
+      </div>
+      <div class="cut cut3">
+        <div class="ani"><img src="./img/wasp_1024.jpg" /></div>
+        <div class="text">
+          <p>BUT it could be more than this..</p>
+          <p>The forms of actions should be various...</p>
+          <p>All-together!</p>
+        </div>
+      </div>
+
+      <div class="intro intro1">
+        <h4>Collective book binding</h4>
         <p>
           <b>Procedure (step-by-step):</b><br />
           a: Relay book binding (chae nami also chose tools)<br />
@@ -53,8 +80,51 @@
 
           Start from our title and unpack the (background) story of the workshop
           idea. Let participants know that the workshop will recorded as
-          soundscape and ask if they're okay with it. <br />
+          soundscape and ask if they're okay with it.
+        </p>
+      </div>
+
+      <div class="cut cut4">
+        <div class="ani"><img src="./img/binding_1024.jpg" /></div>
+        <div class="text">
+          <p>
+            Hmmm indeed...we tend to 'bind' in the end of the book making.<br />One
+            publication is born when every single different page gets glued
+            together. <span id="question">Oh wait, glue?</span>
+          </p>
+        </div>
+      </div>
+
+      <div class="cut cut5">
+        <div class="ani">
+          <img src="./img/binding-2_1024.jpg" />
+        </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="cut cut6">
+        <div class="ani"><img src="./img/label_book_1024.jpg" /></div>
+        <div class="text">
+          <p>
+            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="intro intro2">
+        <h4>Cooking Buchimgae (Korean pancake)</h4>
+        <p>
           a-2) Play around with tools (15m)<br />
           Before get into the binding session, participants have 15 minutes to
           play around with the prepared tools. They can touch and use a few of
@@ -65,97 +135,74 @@
           publication(s). During the session, they will share their t
         </p>
       </div>
-      <div class="cartoon">
-        <div class="row row1">
-          <div class="ani"><img src="./img/question.jpg" /></div>
-          <div class="text">
-            <p>
-              One munday evening, we were talking about random topics then ended
-              up asking <i>what publishing really is</i>?
-            </p>
-          </div>
-        </div>
-        <div class="row row2">
-          <div class="ani"><img src="./img/cliche2.png" /></div>
-          <div class="text">
-            <p>
-              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>
-        </div>
-        <div class="row row3">
-          <!-- <div class="ani"></div> -->
-          <div class="text">
-            <p>BUT it could be more than this..</p>
-            <p>The forms of actions should be various...</p>
-            <p>All-together!</p>
-          </div>
-        </div>
-        <div class="row row4">
-          <div class="ani"><img src="./img/pancake1.png" /></div>
-          <div class="text">
-            <p>
-              Hmmm indeed...we tend to 'bind' in the end of the book making.<br />One
-              publication is born when every single different page gets glued
-              together. <span id="question">Oh wait, glue?</span>
-            </p>
-          </div>
+
+      <div class="cut cut7">
+        <div class="ani"><img src="./img/chae-explain_768.jpg" /></div>
+        <div class="text">
+          <p>
+            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 class="row row5">
-          <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="cut cut8">
+        <div class="ani"><img src="./img/floor-tomato_768.jpg" /></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 row6">
-          <div class="ani"><img src="./img/sharing.jpg" /></div>
-          <div class="text">
-            <p>
-              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 class="cut cut9">
+        <div class="ani"><img src="./img/buchimgae-making_1024.jpg" /></div>
+        <div class="text">
+          <p>
+            Maybe it would have been nicer if we have the participants to sit in
+            mixed composition.
+          </p>
+          <p>
+            Some participants were already close eacch other and mainly spoke in
+            Italian in their own group.
+          </p>
         </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?<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="cut cut10">
+        <div class="ani"><img src="./img/compositing_768.jpg" /></div>
+        <div class="text">
+          <p>
+            Maybe it would have been nicer if we have the participants to sit in
+            mixed composition.
+          </p>
+          <p>
+            Some participants were already close eacch other and mainly spoke in
+            Italian in their own group.
+          </p>
         </div>
       </div>
-      <div class="row row8">
-        <div class="ani"><img src="./img/relay.png" /></div>
+
+      <div class="cut cut11">
+        <div class="ani"><img src="./img/bibi-pancake_768.jpg" /></div>
         <div class="text">
           <p>
-            Aha, everyone makes their own pages.<br />
-            Then bind them in a relay format?!
+            Maybe it would have been nicer if we have the participants to sit in
+            mixed composition.
+          </p>
+          <p>
+            Some participants were already close eacch other and mainly spoke in
+            Italian in their own group.
           </p>
         </div>
       </div>
 
-      <div class="row row8">
-        <div class="ani"><img src="./img/italian.png" /></div>
+      <div class="cut cut12">
+        <div class="ani"><img src="./img/lino-ilo_768.jpg" /></div>
         <div class="text">
           <p>
             Maybe it would have been nicer if we have the participants to sit in