chae
/
cms_project
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

only layout. i havent started working on text yet

Browse Source
master
franklin004 2 years ago
parent 9940820014
commit aa7ea8329d
17 changed files with 299 additions and 218 deletions
Show Stats Download Patch File Download Diff File

BIN
fonts/Millimetre-Bold_web.woff
View File

Binary file not shown.

BIN
fonts/Millimetre-Bold_web.woff2
View File

Binary file not shown.

BIN
fonts/Millimetre-Extrablack_web.woff
View File

Binary file not shown.

BIN
fonts/Millimetre-Extrablack_web.woff2
View File

Binary file not shown.

BIN
fonts/Millimetre-Light_web.woff
View File

Binary file not shown.

BIN
fonts/Millimetre-Light_web.woff2
View File

Binary file not shown.

BIN
fonts/Millimetre-Regular_web.woff
View File

Binary file not shown.

BIN
fonts/Millimetre-Regular_web.woff2
View File

Binary file not shown.

BIN
img/bibi-pancake_pic.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 133 KiB

BIN
img/binding_pic.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 203 KiB

BIN
img/book1_1024.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 MiB

BIN
img/chae_pic.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 181 KiB

BIN
img/index.css
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 216 KiB

BIN
img/pancake.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 167 KiB

BIN
img/workshop_pic.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 216 KiB

148
index.css
Unescape Escape View File

@ -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, html,
body { body {
font-size: 16px; font-size: 16px;
@ -8,7 +33,8 @@ body {
height: 100%; height: 100%;
margin: 0; margin: 0;
padding: 0; padding: 0;
background-color: ivory; background-color: white;
font-family: "Millimetre-Light";
/* background-image: url("./img/banjuk.png"); /* background-image: url("./img/banjuk.png");
background-size: contain; background-size: contain;
background-repeat: no-repeat; */ background-repeat: no-repeat; */
@ -20,75 +46,66 @@ body {
display: block; display: block;
margin: 0 auto; margin: 0 auto;
} }
.titletext {
padding-top: 2%;
}
.title {
font-family: "Millimetre-Bold";
}
.diary { .diary {
width: 100%; width: 80%;
height: min-content; display: grid;
display: flex; grid-template-columns: repeat(2, 1fr);
flex-direction: row; column-gap: 15px;
justify-content: center; row-gap: 15px;
align-items: center; margin: 5% auto;
margin-bottom: 20%;
} }
.part { .part {
width: 22.5%; background-color: blanchedalmond;
height: 300px;
} }
.part p { .part p {
font-family: "Millimetre-Light";
font-size: 1.1rem;
line-height: 147.5%;
display: flex; display: flex;
align-items: center; align-items: center;
} }
.part { .part2,
background-color: blanchedalmond; .part3 {
/* animation: circleTransform 4s; */ background-color: transparent;
}
.part2 img,
.part3 img {
display: inline-block;
width: 50%;
} }
#book { .part3 img {
margin-right: 1%; float: right;
}
.transition {
display: flex;
flex-direction: column;
align-items: center;
} }
#cook { .transition p {
margin-left: 1%; font-family: "Millimetre-Extrablack";
margin-top: 4%; line-height: 0;
} }
#book img { .cartoon {
width: 37.5%; display: flex;
float: right; flex-direction: column;
margin-top: -5%; justify-content: center;
} align-items: center;
/* @keyframes circleTransform { margin-top: 5%;
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 { .intro {
width: 50%; width: 50%;
@ -96,26 +113,27 @@ body {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
margin-bottom: 5.5%; margin-bottom: 5.5%;
box-sizing: border-box;
} }
.intro h4 { .intro h4 {
} }
.intro p { .intro p {
background-color: aliceblue;
border: 1px solid black; border: 1px solid black;
} }
#tsss { #tsss {
text-decoration: underline dotted; text-decoration: underline dotted;
} }
.cartoon {
display: block;
background-color: aliceblue;
}
.cut { .cut {
width: 100%; width: 80%;
height: auto; height: auto;
/* display: grid;
grid-template-columns: repeat(2, 1fr);
column-gap: 15px;
row-gap: 15px; */
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
@ -125,17 +143,18 @@ body {
.ani { .ani {
/* background-color: yellow; */ /* background-color: yellow; */
text-align: center;
} }
.ani img { .ani img {
width: 70%; width: 60%;
border: 1px solid black; border: 1px solid black;
} }
.text { .text {
background-color: antiquewhite; background-color: antiquewhite;
width: 40%; width: 40%;
max-width: 40%;
margin-left: 0; margin-left: 0;
padding-left: 0;
} }
.text p, .text p,
@ -147,18 +166,9 @@ body {
.cut3 .text { .cut3 .text {
width: 50%; width: 50%;
border-radius: 50%;
border: 3px red solid;
background-color: aquamarine;
margin: 0 auto;
} }
.cut3 .text p { .cut3 .text p {
text-align: center;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 1.4rem;
color: red;
line-height: 0;
} }
#question { #question {

369
index.html
Unescape Escape View File

@ -14,11 +14,14 @@
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<h1>chatty, messy, sticky, <span id="tsss">tsss</span>...</h1> <div class = "titletext">
<h4>A diary from Habitat (Tredozio, IT), August 2022</h4> <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="diary">
<div class="part" id="book"> <div class="part part1" >
<p> <p>
"Yesterday I published something. Ah wait, not 'I', I mean 'we'. I "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 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 But we persistently and stubbornly stayed together. In the end, what
we created was a heavy-fat-ugly-cute book thingy." we created was a heavy-fat-ugly-cute book thingy."
</p> </p>
<img src="./img/book2.png" />
</div> </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> <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) cheered and celebrated our collaborative Buchimgae (Korean pancake)
cooking. Sharing one Buchimage altogether, we tore it into pieces. cooking. Sharing one Buchimage altogether, we tore it into pieces.
It was GOOD. The pancake batter was a glue, as it hugged all the 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 became closer in the end. Tssss... the sizzle, the chatty and the
festive sounds still lingers in my ears..." festive sounds still lingers in my ears..."
</p> </p>
</div> </div>
</div> </div>
<div class="cartoon"></div> <div class = "transition"><p>.</p><p>.</p><p>.</p></div>
<div class="cut cut1">
<div class="ani"><img src="./img/ex.jpg" /></div> <div class="cartoon">
<div class="text"> <div class="cut cut1">
<p>It was orange evening that we arrived at Habitat.</p> <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>
<div class="cut cut2"> <div class="intro intro1">
<div class="ani"><img src="./img/bibi_768.jpg" /></div> <h4>Collective book binding</h4>
<div class="text">
<p> <p>
If we think of the word <i>publishing</i>, we're prone to be stuck <b>Procedure (step-by-step):</b><br />
with an idea of working on some documents in Adobe applications, a: Relay book binding (chae nami also chose tools)<br />
then print, then glue. 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> </p>
</div> </div>
</div>
<div class="cut cut3"> <div class = "cut cut3b">
<div class="ani"><img src="./img/wasp_1024.jpg" /></div> <div class="ani"><img src = "./img/workshop_pic.jpg"></div>
<div class="text"> <div class="text">
<p>BUT it could be more than this..</p> <p>
<p>The forms of actions should be various...</p> Hmmm indeed...we tend to 'bind' in the end of the book making.
<p>All-together!</p> </p>
</div>
</div> </div>
</div>
<div class="intro intro1"> <div class = "cut cut3c">
<h4>Collective book binding</h4> <div class="ani"><img src = "./img/taping-recording_1024.jpg"></div>
<p> <div class="text">
<b>Procedure (step-by-step):</b><br /> <p>
a: Relay book binding (chae nami also chose tools)<br /> Hmmm indeed...we tend to 'bind' in the end of the book making.
a-1) introduce what we're going to do; part one relay book binding </p>
(10-15m)<br /><br /> </div>
</div>
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 cut4"> <div class="cut cut4">
<div class="ani"><img src="./img/binding_1024.jpg" /></div> <div class="ani"><img src="./img/binding-2_1024.jpg" /></div>
<div class="text"> <div class="text">
<p> <p>
Hmmm indeed...we tend to 'bind' in the end of the book making.<br />One 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 publication is born when every single different page gets glued
together. <span id="question">Oh wait, glue?</span> together. <span id="question">Oh wait, glue?</span>
</p> </p>
</div>
</div> </div>
</div>
<div class="cut cut5"> <div class="cut cut5">
<div class="ani"> <div class="ani">
<img src="./img/binding-2_1024.jpg" /> <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>
<div class="text">
<p> <div class="cut cut6">
Can <span id="Buchimgae">Buchimgae</span <div class="ani"><img src="./img/label_book_1024.jpg" /></div>
><span id="Buchimgaepic"> <img src="./img/buchimgae_s.png" /></span <div class="text">
><span id="expl">Buchimage is Korean pancake.</span> be a <p>
publication, involving with the glue? When making the pancake, all Also in Korea, we share Buchimgae together! We don't usually have
the different ingredients gets mingled and binded through the one pancake per person. We tear the hot pancake together,using
batter! chopsticks..! That's the unique beauty of Buchimgae.
</p> </p>
</div>
</div> </div>
</div>
<div class="cut cut6"> <div class="intro intro2">
<div class="ani"><img src="./img/label_book_1024.jpg" /></div> <h4>Cooking Buchimgae (Korean pancake)</h4>
<div class="text">
<p> <p>
Also in Korea, we share Buchimgae together! We don't usually have a-2) Play around with tools (15m)<br />
one pancake per person. We tear the hot pancake together,using Before get into the binding session, participants have 15 minutes to
chopsticks..! That's the unique beauty of Buchimgae. 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> </p>
</div> </div>
</div>
<div class="intro intro2"> <div class="cut cut7">
<h4>Cooking Buchimgae (Korean pancake)</h4> <div class="ani"><img src="./img/chae-explain_768.jpg" /></div>
<p> <div class="text">
a-2) Play around with tools (15m)<br /> <p>
Before get into the binding session, participants have 15 minutes to What if we create a moment of collective book binding?<br />We could
play around with the prepared tools. They can touch and use a few of also host a small Buchimgae cooking session! In Korea we actually
them and will have the sense of materiality. Participants sit around a say Buchimage one/two/three/.. page when counting the number of it.
table and each of them has a specific role. (e.g. Person A cuts Just like a book..! This could be another format of the (book)
papers, person B punches holes, person C tapes, person D folds, etc). binding.
Through the relayed tasks, they will make collaborative </p>
publication(s). During the session, they will share their t </div>
</p> </div>
</div>
<div class="cut cut7"> <div class="cut cut8">
<div class="ani"><img src="./img/chae-explain_768.jpg" /></div> <div class="ani"><img src="./img/floor-tomato_768.jpg" /></div>
<div class="text"> <div class="text">
<p> <p>
What if we create a moment of collective book binding?<br />We could Aha, everyone makes their own pages.<br />
also host a small Buchimgae cooking session! In Korea we actually Then bind them in a relay format?!
say Buchimage one/two/three/.. page when counting the number of it. </p>
Just like a book..! This could be another format of the (book) </div>
binding.
</p>
</div> </div>
</div>
<div class="cut cut8"> <div class="cut cut9">
<div class="ani"><img src="./img/floor-tomato_768.jpg" /></div> <div class="ani"><img src="./img/buchimgae-making_1024.jpg" /></div>
<div class="text"> <div class="text">
<p> <p>
Aha, everyone makes their own pages.<br /> Maybe it would have been nicer if we have the participants to sit in
Then bind them in a relay format?! mixed composition.
</p> </p>
<p>
Some participants were already close eacch other and mainly spoke in
Italian in their own group.
</p>
</div>
</div> </div>
</div>
<div class="cut cut9"> <div class="cut cut10">
<div class="ani"><img src="./img/buchimgae-making_1024.jpg" /></div> <div class="ani"><img src="./img/compositing_768.jpg" /></div>
<div class="text"> <div class="text">
<p> <p>
Maybe it would have been nicer if we have the participants to sit in Maybe it would have been nicer if we have the participants to sit in
mixed composition. mixed composition.
</p> </p>
<p> <p>
Some participants were already close eacch other and mainly spoke in Some participants were already close eacch other and mainly spoke in
Italian in their own group. Italian in their own group.
</p> </p>
</div>
</div> </div>
</div>
<div class="cut cut10"> <div class="cut cut11">
<div class="ani"><img src="./img/compositing_768.jpg" /></div> <div class="ani"><img src="./img/bibi-pancake_768.jpg" /></div>
<div class="text"> <div class="text">
<p> <p>
Maybe it would have been nicer if we have the participants to sit in Maybe it would have been nicer if we have the participants to sit in
mixed composition. mixed composition.
</p> </p>
<p> <p>
Some participants were already close eacch other and mainly spoke in Some participants were already close eacch other and mainly spoke in
Italian in their own group. Italian in their own group.
</p> </p>
</div>
</div> </div>
</div>
<div class="cut cut11"> <div class="cut cut12">
<div class="ani"><img src="./img/bibi-pancake_768.jpg" /></div> <div class="ani"><img src="./img/lino-ilo_768.jpg" /></div>
<div class="text"> <div class="text">
<p> <p>
Maybe it would have been nicer if we have the participants to sit in Maybe it would have been nicer if we have the participants to sit in
mixed composition. mixed composition.
</p> </p>
<p> <p>
Some participants were already close eacch other and mainly spoke in Some participants were already close eacch other and mainly spoke in
Italian in their own group. Italian in their own group.
</p> </p>
</div>
</div> </div>
</div>
<div class="cut cut12"> <div class = "cut cut13">
<div class="ani"><img src="./img/lino-ilo_768.jpg" /></div> <div class = "ani"><img src = "./img/pongie-explaining_1024.jpg"></div>
<div class="text"> <div class="text">
<p> <p>
Maybe it would have been nicer if we have the participants to sit in Maybe it would have been nicer if we have the participants to sit in
mixed composition. mixed composition.
</p> </p>
<p> </div>
Some participants were already close eacch other and mainly spoke in
Italian in their own group.
</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> </div>
<script src="./app.js"></script> <script src="./app.js"></script>
</body> </body>

Write Preview
Loading…
Cancel
Save