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: 36%;
  margin-top: 0;
  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>A diary from Habitat (Tredozio, IT), August 2022</h4>
-      <h4>In Habitat (Tredozio, IT)<br />Behind scenes and process</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 />