only layout. i havent started working on text yet

master
franklin004 2 years ago
parent 9940820014
commit aa7ea8329d

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

After

Width:  |  Height:  |  Size: 133 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 203 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 181 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 216 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 167 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 216 KiB

@ -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%;
}
/* @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);
}
} */
.cartoon {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 5%;
}
.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 {

@ -14,11 +14,14 @@
</head>
<body>
<div class="container">
<h1>chatty, messy, sticky, <span id="tsss">tsss</span>...</h1>
<h4>A diary from Habitat (Tredozio, IT), August 2022</h4>
<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
@ -40,180 +51,240 @@
became closer in the end. Tssss... the sizzle, the chatty and the
festive sounds still lingers in my ears..."
</p>
</div>
</div>
</div>
<div class="cartoon"></div>
<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>
<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>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>
<div class="cut cut2">
<div class="ani"><img src="./img/bibi_768.jpg" /></div>
<div class="text">
<p>
If we think of the word <i>publishing</i>, we're prone to be stuck
with an idea of working on some documents in Adobe applications,
then print, then glue.
</p>
</div>
</div>
<div class="cut cut3">
<div class="ani"><img src="./img/wasp_1024.jpg" /></div>
<div class="text">
<p>BUT it could be more than this..</p>
<p>The forms of actions should be various...</p>
<p>All-together!</p>
</div>
</div>
</div>
<div class="cut cut2">
<div class="ani"><img src="./img/bibi_768.jpg" /></div>
<div class="text">
<div class="intro intro1">
<h4>Collective book binding</h4>
<p>
If we think of the word <i>publishing</i>, we're prone to be stuck
with an idea of working on some documents in Adobe applications,
then print, then glue.
<b>Procedure (step-by-step):</b><br />
a: Relay book binding (chae nami also chose tools)<br />
a-1) introduce what we're going to do; part one relay book binding
(10-15m)<br /><br />
Start from our title and unpack the (background) story of the workshop
idea. Let participants know that the workshop will recorded as
soundscape and ask if they're okay with it.
</p>
</div>
</div>
<div class="cut cut3">
<div class="ani"><img src="./img/wasp_1024.jpg" /></div>
<div class="text">
<p>BUT it could be more than this..</p>
<p>The forms of actions should be various...</p>
<p>All-together!</p>
<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>
<div class="intro intro1">
<h4>Collective book binding</h4>
<p>
<b>Procedure (step-by-step):</b><br />
a: Relay book binding (chae nami also chose tools)<br />
a-1) introduce what we're going to do; part one relay book binding
(10-15m)<br /><br />
Start from our title and unpack the (background) story of the workshop
idea. Let participants know that the workshop will recorded as
soundscape and ask if they're okay with it.
</p>
</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="text">
<p>
Hmmm indeed...we tend to 'bind' in the end of the book making.<br />One
publication is born when every single different page gets glued
together. <span id="question">Oh wait, glue?</span>
</p>
<div class="cut cut4">
<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
publication is born when every single different page gets glued
together. <span id="question">Oh wait, glue?</span>
</p>
</div>
</div>
</div>
<div class="cut cut5">
<div class="ani">
<img src="./img/binding-2_1024.jpg" />
<div class="cut cut5">
<div class="ani">
<img src="./img/binding_1024.jpg" />
</div>
<div class="text">
<p>
Can <span id="Buchimgae">Buchimgae</span
><span id="Buchimgaepic"> <img src="./img/buchimgae_s.png" /></span
><span id="expl">Buchimage is Korean pancake.</span> be a
publication, involving with the glue? When making the pancake, all
the different ingredients gets mingled and binded through the
batter!
</p>
</div>
</div>
<div class="text">
<p>
Can <span id="Buchimgae">Buchimgae</span
><span id="Buchimgaepic"> <img src="./img/buchimgae_s.png" /></span
><span id="expl">Buchimage is Korean pancake.</span> be a
publication, involving with the glue? When making the pancake, all
the different ingredients gets mingled and binded through the
batter!
</p>
<div class="cut cut6">
<div class="ani"><img src="./img/label_book_1024.jpg" /></div>
<div class="text">
<p>
Also in Korea, we share Buchimgae together! We don't usually have
one pancake per person. We tear the hot pancake together,using
chopsticks..! That's the unique beauty of Buchimgae.
</p>
</div>
</div>
</div>
<div class="cut cut6">
<div class="ani"><img src="./img/label_book_1024.jpg" /></div>
<div class="text">
<div class="intro intro2">
<h4>Cooking Buchimgae (Korean pancake)</h4>
<p>
Also in Korea, we share Buchimgae together! We don't usually have
one pancake per person. We tear the hot pancake together,using
chopsticks..! That's the unique beauty of Buchimgae.
a-2) Play around with tools (15m)<br />
Before get into the binding session, participants have 15 minutes to
play around with the prepared tools. They can touch and use a few of
them and will have the sense of materiality. Participants sit around a
table and each of them has a specific role. (e.g. Person A cuts
papers, person B punches holes, person C tapes, person D folds, etc).
Through the relayed tasks, they will make collaborative
publication(s). During the session, they will share their t
</p>
</div>
</div>
<div class="intro intro2">
<h4>Cooking Buchimgae (Korean pancake)</h4>
<p>
a-2) Play around with tools (15m)<br />
Before get into the binding session, participants have 15 minutes to
play around with the prepared tools. They can touch and use a few of
them and will have the sense of materiality. Participants sit around a
table and each of them has a specific role. (e.g. Person A cuts
papers, person B punches holes, person C tapes, person D folds, etc).
Through the relayed tasks, they will make collaborative
publication(s). During the session, they will share their t
</p>
</div>
<div class="cut cut7">
<div class="ani"><img src="./img/chae-explain_768.jpg" /></div>
<div class="text">
<p>
What if we create a moment of collective book binding?<br />We could
also host a small Buchimgae cooking session! In Korea we actually
say Buchimage one/two/three/.. page when counting the number of it.
Just like a book..! This could be another format of the (book)
binding.
</p>
</div>
</div>
<div class="cut cut7">
<div class="ani"><img src="./img/chae-explain_768.jpg" /></div>
<div class="text">
<p>
What if we create a moment of collective book binding?<br />We could
also host a small Buchimgae cooking session! In Korea we actually
say Buchimage one/two/three/.. page when counting the number of it.
Just like a book..! This could be another format of the (book)
binding.
</p>
<div class="cut cut8">
<div class="ani"><img src="./img/floor-tomato_768.jpg" /></div>
<div class="text">
<p>
Aha, everyone makes their own pages.<br />
Then bind them in a relay format?!
</p>
</div>
</div>
</div>
<div class="cut cut8">
<div class="ani"><img src="./img/floor-tomato_768.jpg" /></div>
<div class="text">
<p>
Aha, everyone makes their own pages.<br />
Then bind them in a relay format?!
</p>
<div class="cut cut9">
<div class="ani"><img src="./img/buchimgae-making_1024.jpg" /></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>
<div class="cut cut9">
<div class="ani"><img src="./img/buchimgae-making_1024.jpg" /></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 class="cut cut10">
<div class="ani"><img src="./img/compositing_768.jpg" /></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>
<div class="cut cut10">
<div class="ani"><img src="./img/compositing_768.jpg" /></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 class="cut cut11">
<div class="ani"><img src="./img/bibi-pancake_768.jpg" /></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>
<div class="cut cut11">
<div class="ani"><img src="./img/bibi-pancake_768.jpg" /></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 class="cut cut12">
<div class="ani"><img src="./img/lino-ilo_768.jpg" /></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>
<div class="cut cut12">
<div class="ani"><img src="./img/lino-ilo_768.jpg" /></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 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>
<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>

Loading…
Cancel
Save