add our diary text

2 years ago · 63e3dad8cc
parent 5da171d8f0
commit 63e3dad8cc
3 changed files with 111 additions and 6 deletions
--- a/img/book2.png
+++ b/img/book2.png
--- a/index.css
+++ b/index.css
@ -16,16 +16,93 @@ body {
  height: 100%;
  display: block;
  margin: 0 auto;
-  /* background-color: bisque; */
 }

+.diary {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 100%;
+  height: min-content;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 20%;
+}
+
+.part {
+  width: 22.5%;
+  height: 300px;
+}
+
+.part p {
+  display: flex;
+  align-items: center;
+}
+
+.part {
+  background-color: blanchedalmond;
+  /* animation: circleTransform 4s; */
+}
+
+#book {
+  margin-right: 1%;
+}
+
+#cook {
+  margin-left: 1%;
+  margin-top: 4%;
+}
+
+#book img {
+  width: 37.5%;
+  float: right;
+  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%;
-  background-color: aliceblue;
-  margin-top: 0;
+  margin-top: 36%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 5%;
+}
+
+.intro h4 {
+}
+
+.intro p {
+  background-color: aliceblue;
  border: 1px solid black;
 }
 #tsss {
@ -61,7 +138,8 @@ body {
  margin-left: 0;
 }

-.text p {
+.text p,
+.part p {
  padding: 2% 4%;
  font-size: 1rem;
  line-height: 135%;
--- a/index.html
+++ b/index.html
@ -15,9 +15,36 @@
  <body>
    <div class="container">
      <h1>chatty, messy, sticky, <span id="tsss">tsss</span>...</h1>
-      <!-- <div class="ani"><img src="./draw.jpg" /></div> -->
-      <h4>In Habitat (Tredozio, IT)<br />Behind scenes and process</h4>
+      <h4>A diary from Habitat (Tredozio, IT), August 2022</h4>
+
+      <div class="diary">
+        <div class="part" id="book">
+          <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
+            everything together. Pfff... it was not easy to bind all the
+            different pieces into one, because everyone made various contents
+            with different intentions. We were so chatty thus it was chaotic.
+            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">
+          <p>
+            <img src="./img/buchimgae_s.png" /><br />"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
+            ingredients. Looking back, cooking was also a glue, because we
+            became closer in the end. Tssss... the sizzle, the chatty and the
+            festive sounds still lingers in my ears..."
+          </p>
+        </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 />