only layout. i havent started working on text yet

index.css

@@ -1,3 +1,28 @@
+@font-face {
+  font-family: "Millimetre-Light";
+  src: url(./fonts/Millimetre-Light_web.woff2) format("woff2"),
+    url(./fonts/Millimetre-Light_web.woff) format("woff");
+}
+@font-face {
+  font-family: "Millimetre-Regular";
+  src: url(./fonts/Millimetre-Regular_web.woff2) format("woff2"),
+    url(./fonts/Millimetre-Regular_web.woff) format("woff");
+}
+@font-face {
+  font-family: "Millimetre-Bold";
+  src: url(./fonts/Millimetre-Bold_web.woff2) format("woff2"),
+    url(./fonts/Millimetre-Bold_web.woff) format("woff");
+}
+@font-face {
+  font-family: "Millimetre-Extrablack";
+  src: url(./fonts/Millimetre-Extrablack_web.woff2) format("woff2"),
+    url(./fonts/Millimetre-Extrablack_web.woff) format("woff");
+}
+
+* {
+  box-sizing: border-box;
+}
+
 html,
 body {
   font-size: 16px;
@@ -8,7 +33,8 @@ body {
   height: 100%;
   margin: 0;
   padding: 0;
-  background-color: ivory;
+  background-color: white;
+  font-family: "Millimetre-Light";
   /* background-image: url("./img/banjuk.png");
   background-size: contain;
   background-repeat: no-repeat; */
@@ -20,75 +46,66 @@ body {
   display: block;
   margin: 0 auto;
 }
+.titletext {
+  padding-top: 2%;
+}
+
+.title {
+  font-family: "Millimetre-Bold";
+}
 
 .diary {
-  width: 100%;
-  height: min-content;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  margin-bottom: 20%;
+  width: 80%;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  column-gap: 15px;
+  row-gap: 15px;
+  margin: 5% auto;
 }
 
 .part {
-  width: 22.5%;
-  height: 300px;
+  background-color: blanchedalmond;
 }
 
 .part p {
+  font-family: "Millimetre-Light";
+  font-size: 1.1rem;
+  line-height: 147.5%;
   display: flex;
   align-items: center;
 }
 
-.part {
-  background-color: blanchedalmond;
-  /* animation: circleTransform 4s; */
+.part2,
+.part3 {
+  background-color: transparent;
+}
+.part2 img,
+.part3 img {
+  display: inline-block;
+  width: 50%;
 }
 
-#book {
-  margin-right: 1%;
+.part3 img {
+  float: right;
+}
+.transition {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
-#cook {
-  margin-left: 1%;
-  margin-top: 4%;
+.transition p {
+  font-family: "Millimetre-Extrablack";
+  line-height: 0;
 }
 
-#book img {
-  width: 37.5%;
-  float: right;
-  margin-top: -5%;
+.cartoon {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin-top: 5%;
 }
-/* @keyframes circleTransform {
-  0% {
-    border-radius: 60% 70% 90% 90%;
-    background-color: blanchedalmond;
-  }
-  50% {
-    border-radius: 65% 90% 100% 100%;
-    background-color: rgb(225, 203, 169);
-  }
-  100% {
-    border-radius: 100% 100% 120% 100%;
-    background-color: rgb(222, 177, 108);
-  }
-}
-
-@-webkit-keyframes circleTransform {
-  0% {
-    border-radius: 60% 70% 90% 90%;
-    background-color: blanchedalmond;
-  }
-  50% {
-    border-radius: 65% 90% 100% 100%;
-    background-color: rgb(225, 203, 169);
-  }
-  100% {
-    border-radius: 100% 100% 120% 100%;
-    background-color: rgb(222, 177, 108);
-  }
-} */
 
 .intro {
   width: 50%;
@@ -96,26 +113,27 @@ body {
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 5.5%;
+  box-sizing: border-box;
 }
 
 .intro h4 {
 }
 
 .intro p {
-  background-color: aliceblue;
   border: 1px solid black;
 }
 #tsss {
   text-decoration: underline dotted;
 }
-.cartoon {
-  display: block;
-  background-color: aliceblue;
-}
 
 .cut {
-  width: 100%;
+  width: 80%;
   height: auto;
+  /* display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  column-gap: 15px;
+  row-gap: 15px; */
+
   display: flex;
   flex-direction: row;
   justify-content: space-between;
@@ -125,17 +143,18 @@ body {
 
 .ani {
   /* background-color: yellow; */
-  text-align: center;
 }
 
 .ani img {
-  width: 70%;
+  width: 60%;
   border: 1px solid black;
 }
 .text {
   background-color: antiquewhite;
   width: 40%;
+  max-width: 40%;
   margin-left: 0;
+  padding-left: 0;
 }
 
 .text p,
@@ -147,18 +166,9 @@ body {
 
 .cut3 .text {
   width: 50%;
-  border-radius: 50%;
-  border: 3px red solid;
-  background-color: aquamarine;
-  margin: 0 auto;
 }
 
 .cut3 .text p {
-  text-align: center;
-  font-family: Verdana, Geneva, Tahoma, sans-serif;
-  font-size: 1.4rem;
-  color: red;
-  line-height: 0;
 }
 
 #question {

index.html

@@ -14,11 +14,14 @@
   </head>
   <body>
     <div class="container">
-      <h1>chatty, messy, sticky, <span id="tsss">tsss</span>...</h1>
+      <div class = "titletext">
+        <h1 class = "title">chatty, messy, sticky, <span id="tsss" class = "title">tsss</span>...</h1>
         <h4>A diary from Habitat (Tredozio, IT), August 2022</h4>
+      </div>
+      
 
       <div class="diary">
-        <div class="part" id="book">
+        <div class="part part1" >
           <p>
             "Yesterday I published something. Ah wait, not 'I', I mean 'we'. I
             was with 11 other people and we made our own little book then bound
@@ -28,11 +31,19 @@
             But we persistently and stubbornly stayed together. In the end, what
             we created was a heavy-fat-ugly-cute book thingy."
           </p>
-          <img src="./img/book2.png" />
         </div>
-        <div class="part" id="cook">
+
+         <div class="part part2">
+          <img src="./img/book1_1024.png" />
+         </div>
+
+        <div class="part part3" >
+          <img src="./img/pancake.jpg" />
+        </div>
+
+         <div class="part part4">
           <p>
-            <img src="./img/buchimgae_s.png" /><br />"3, 2, 1, Yayyyy! We
+        "3, 2, 1, Yayyyy! We
             cheered and celebrated our collaborative Buchimgae (Korean pancake)
             cooking. Sharing one Buchimage altogether, we tore it into pieces.
             It was GOOD. The pancake batter was a glue, as it hugged all the
@@ -43,11 +54,16 @@
          </div>
       </div>
 
-      <div class="cartoon"></div>
+      <div class = "transition"><p>.</p><p>.</p><p>.</p></div>
+
+      <div class="cartoon">
         <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>
+            <p>Rotterdam to Eindhoven, Eindhoven to Bologna, Bologna to Faenza, Faenza to Tredozio...<br>
+              Our journey from the Netherlands to Italy was made through winding roads.
+
+              It was orange evening that we arrived at Habitat.</p>
           </div>
         </div>
 
@@ -84,8 +100,26 @@
           </p>
         </div>
 
+        <div class = "cut cut3b">
+          <div class="ani"><img src = "./img/workshop_pic.jpg"></div>
+          <div class="text">
+            <p>
+              Hmmm indeed...we tend to 'bind' in the end of the book making.
+            </p>
+            </div>
+        </div>
+
+        <div class = "cut cut3c">
+          <div class="ani"><img src = "./img/taping-recording_1024.jpg"></div>
+          <div class="text">
+            <p>
+              Hmmm indeed...we tend to 'bind' in the end of the book making.
+            </p>
+          </div>
+        </div>
+
         <div class="cut cut4">
-        <div class="ani"><img src="./img/binding_1024.jpg" /></div>
+          <div class="ani"><img src="./img/binding-2_1024.jpg" /></div>
           <div class="text">
             <p>
               Hmmm indeed...we tend to 'bind' in the end of the book making.<br />One
@@ -97,7 +131,7 @@
 
         <div class="cut cut5">
           <div class="ani">
-          <img src="./img/binding-2_1024.jpg" />
+            <img src="./img/binding_1024.jpg" />
           </div>
           <div class="text">
             <p>
@@ -214,6 +248,43 @@
             </p>
           </div>
         </div>
+
+        <div class = "cut cut13">
+          <div class = "ani"><img src = "./img/pongie-explaining_1024.jpg"></div>
+          <div class="text">
+            <p>
+              Maybe it would have been nicer if we have the participants to sit in
+              mixed composition.
+            </p>
+          </div>
+        </div>
+
+        <div class = "cut cut14">
+          <div class = "ani">
+            <img src = "./img/pongie-explaining_1024.jpg" id = "pongieexplain" />
+            <img src = "./img/i-have-great-idea_1024.jpg" id = "pongieidea" style = "display:none;">
+          </div>
+
+          <div class="text">
+            <p>
+              Maybe it would have been nicer if we have the participants to sit in
+              mixed composition.
+            </p>
+          </div>
+        </div>
+
+        <div class = "cut cut14">
+          <div class = "ani">
+            <img src = "./img/tearing-sharing_1024.jpg">
+          </div>
+          <div class="text">
+            <p>
+              Maybe it would have been nicer if we have the participants to sit in
+              mixed composition.
+            </p>
+          </div>
+        </div>  
+
     </div>
     <script src="./app.js"></script>
   </body>