nami first sketch no soundyet

2 years ago · 8b2fcaf4cf
parent 455b8bfffe
commit 8b2fcaf4cf
19 changed files with 164 additions and 24 deletions
--- a/img/.DS_Store
+++ b/img/.DS_Store
--- a/img/cliche.png
+++ b/img/cliche.png
--- a/img/cliche2.png
+++ b/img/cliche2.png
--- a/img/draw.jpg
+++ b/img/draw.jpg
--- a/img/habitat_process.jpeg
+++ b/img/habitat_process.jpeg
--- a/img/habitat_process.jpg
+++ b/img/habitat_process.jpg
--- a/img/imagine1.png
+++ b/img/imagine1.png
--- a/img/imagine3.png
+++ b/img/imagine3.png
--- a/img/italian.png
+++ b/img/italian.png
--- a/img/nocliche.png
+++ b/img/nocliche.png
--- a/img/oh.png
+++ b/img/oh.png
--- a/img/pancake1.png
+++ b/img/pancake1.png
--- a/img/ppl.png
+++ b/img/ppl.png
--- a/img/question.jpg
+++ b/img/question.jpg
--- a/img/relay.png
+++ b/img/relay.png
--- a/img/scissors.png
+++ b/img/scissors.png
--- a/index.css
+++ b/index.css
@ -12,7 +12,7 @@ body {
 }

 .container {
-  width: 70%;
+  width: 50%;
  height: 100%;
  display: block;
  margin: 0 auto;
@ -28,36 +28,59 @@ body {
  margin-bottom: 5%;
  border: 1px solid black;
 }
+#tsss {
+  text-decoration: underline dotted;
+}
+.cartoon {
+  display: block;
+  background-color: aliceblue;
+}

 .row {
  width: 100%;
-  height: 10%;
-
+  height: auto;
  display: flex;
  flex-direction: row;
-  justify-content: center;
-  margin-bottom: 4%;
-  /* align-items: center; */
-}
-
-.row img {
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 7.5%;
 }

 .ani {
-  width: 45%;
-  margin: 0 auto;
-  border: 1px solid black;
+  /* background-color: yellow; */
+  text-align: center;
 }

 .ani img {
-  width: 100%;
+  /* width: 80%; */
+  border: 1px solid black;
 }
 .text {
-  width: 25%;
-  /* background-color: yellow; */
+  background-color: antiquewhite;
+  width: 40%;
  margin-left: 0;
 }

 .text p {
  padding: 2% 4%;
+  font-size: 1rem;
+  line-height: 135%;
+}
+
+.row3 .text,
+.row5 .text {
+  width: 50%;
+  border-radius: 50%;
+  border: 3px red solid;
+  background-color: aquamarine;
+  margin: 0 auto;
+}
+
+.row3 .text p,
+.row5 .text p {
+  text-align: center;
+  font-family: Verdana, Geneva, Tahoma, sans-serif;
+  font-size: 2rem;
+  color: red;
+  line-height: 1;
 }
--- a/index.html
+++ b/index.html
@ -14,9 +14,9 @@
  </head>
  <body>
    <div class="container">
-      <h1>Chae and Nami</h1>
+      <h1>chatty, messy, sticky, <span id="tsss">tsss</span>...</h1>
      <!-- <div class="ani"><img src="./draw.jpg" /></div> -->
-      <h4>chatty, messy, sticky, tsss...</h4>
+      <h4>In Habitat (Tredozio, IT)<br />Behind scenes and process</h4>
      <div class="intro">
        <p>
          <b>Procedure (step-by-step):</b><br />
@ -38,15 +38,89 @@
          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 publishing, we're prone to be stuck with
+              an idea that we work for some documents in Adobe applications,
+              then print, then glue.
+            </p>
+          </div>
+        </div>
+        <div class="row row3">
+          <!-- <div class="ani"></div> -->
+          <div class="text">
+            <p>Could be more than this...</p>
+            <p>Various forms of actions...</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 borned when every single different page gets glued
+              together. Oh wait, it's just like Buchimgae (Korean pancake)
+              making! All the different ingredients gets mingled and binded in
+              the batter!
+            </p>
+          </div>
+        </div>
+        <div class="row row5">
+          <!-- <div class="ani"></div> -->
+          <div class="text"><p>Glued...?</p></div>
+        </div>

-      <div class="row row1">
-        <div class="ani"><img src="./habitat_process.jpeg" /></div>
-        <div class="text"><p>TADAAAA</p></div>
-      </div>
+        <div class="row row6">
+          <div class="ani"><img src="./img/ppl.png" /></div>
+          <div class="text">
+            <p>
+              True! Also in our culture, we share Buchimgae together! We don't
+              usually have one pancake individually. Cooking and tearing the
+              pancake together, we share so many things.
+            </p>
+          </div>
+        </div>

-      <div class="row row2">
-        <div class="ani"><img src="./draw.jpg" /></div>
-        <div class="text"><p>TADAAAA</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? Then
+              cooking Buchingae together! Everyone makes a page and bind
+              together!
+            </p>
+          </div>
+        </div>
+        <div class="row row8">
+          <div class="ani"><img src="./img/relay.png" /></div>
+          <div class="text"><p>Bind in a relay format?!</p></div>
+        </div>
+      </div>
+      <div class="row row9">
+        <div class="ani"><img src="./img/italian.png" /></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>
  </body>
--- a/laptop_s.css
+++ b/laptop_s.css
@ -0,0 +1,43 @@
+@media only screen and (min-device-width: 1190px) and (max-device-width: 1440px) {
+  .container {
+    width: 70%;
+  }
+
+  .intro {
+    width: 70%;
+    padding: 1% 2%;
+  }
+  #tsss {
+    text-decoration: underline dotted;
+  }
+  .cartoon {
+    display: block;
+    background-color: aliceblue;
+  }
+
+  .ani img {
+    width: 80%;
+  }
+  .text {
+    background-color: antiquewhite;
+    width: 40%;
+    margin-left: 0;
+  }
+
+  .text p {
+    padding: 2% 4%;
+    font-size: 1rem;
+    line-height: 135%;
+  }
+
+  .row3 .text,
+  .row5 .text {
+    border: 2px red solid;
+  }
+
+  .row3 .text p,
+  .row5 .text p {
+    font-size: 1.2rem;
+    line-height: 0;
+  }
+}