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;
+  justify-content: space-between;
-  margin-bottom: 4%;
+  align-items: center;
-  /* align-items: center; */
+  margin-bottom: 7.5%;
 }
 .row img {
 }
 .ani {
-  width: 45%;
+  /* background-color: yellow; */
-  margin: 0 auto;
+  text-align: center;
  border: 1px solid black;
 }
 .ani img {
-  width: 100%;
+  /* width: 80%; */
  border: 1px solid black;
 }
 .text {
-  width: 25%;
+  background-color: antiquewhite;
-  /* background-color: yellow; */
+  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="./habitat_process.jpeg" /></div>
+          <div class="ani"><img src="./img/question.jpg" /></div>
-        <div class="text"><p>TADAAAA</p></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="./draw.jpg" /></div>
+          <div class="ani"><img src="./img/cliche2.png" /></div>
-        <div class="text"><p>TADAAAA</p></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 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 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;
  }
 }