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,40 +43,16 @@
         </div>
       </div>
 
-      <div class="intro">
-        <h4>Behind scenes and process</h4>
-        <p>
-          <b>Procedure (step-by-step):</b><br />
-          a: Relay book binding (chae nami also chose tools)<br />
-          a-1) introduce what we're going to do; part one relay book binding
-          (10-15m)<br /><br />
-
-          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 />
-
-          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
-          them and will have the sense of materiality. Participants sit around a
-          table and each of them has a specific role. (e.g. Person A cuts
-          papers, person B punches holes, person C tapes, person D folds, etc).
-          Through the relayed tasks, they will make collaborative
-          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="cartoon"></div>
+      <div class="cut cut1">
+        <div class="ani"><img src="./img/ex.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>
+          <p>It was orange evening that we arrived at Habitat.</p>
         </div>
       </div>
-        <div class="row row2">
-          <div class="ani"><img src="./img/cliche2.png" /></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
@@ -85,16 +61,31 @@
           </p>
         </div>
       </div>
-        <div class="row row3">
-          <!-- <div class="ani"></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="row row4">
-          <div class="ani"><img src="./img/pancake1.png" /></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 />
+          a-1) introduce what we're going to do; part one relay book binding
+          (10-15m)<br /><br />
+
+          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.
+        </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
@@ -103,16 +94,15 @@
           </p>
         </div>
       </div>
-        <div class="row row5">
+
+      <div class="cut cut5">
         <div class="ani">
-            <img src="./img/pancake2.jpg" id="illu" />
-            <img src="./img/buchimgae_l.png" id="photo" />
+          <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="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
@@ -121,8 +111,8 @@
         </div>
       </div>
 
-        <div class="row row6">
-          <div class="ani"><img src="./img/sharing.jpg" /></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
@@ -131,21 +121,36 @@
           </p>
         </div>
       </div>
-        <div class="row row7">
-          <div class="ani"><img src="./img/habitat_process.jpg" /></div>
-          <div class="text">
+
+      <div class="intro intro2">
+        <h4>Cooking Buchimgae (Korean pancake)</h4>
         <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.
+          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
+          them and will have the sense of materiality. Participants sit around a
+          table and each of them has a specific role. (e.g. Person A cuts
+          papers, person B punches holes, person C tapes, person D folds, etc).
+          Through the relayed tasks, they will make collaborative
+          publication(s). During the session, they will share their t
         </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>
-      <div class="row row8">
-        <div class="ani"><img src="./img/relay.png" /></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 />
@@ -154,8 +159,50 @@
         </div>
       </div>
 
-      <div class="row row8">
-        <div class="ani"><img src="./img/italian.png" /></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>
+
+      <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="cut cut11">
+        <div class="ani"><img src="./img/bibi-pancake_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="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