diff --git a/img/book2.png b/img/book2.png new file mode 100644 index 0000000..1a8804a Binary files /dev/null and b/img/book2.png differ diff --git a/index.css b/index.css index 00984e1..7f20ded 100644 --- 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: 0; + margin-top: 36%; 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%; diff --git a/index.html b/index.html index 48367cd..de469de 100644 --- a/index.html +++ b/index.html @@ -15,9 +15,36 @@
+ "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." +
+ +
+
"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..."
+
Procedure (step-by-step):
a: Relay book binding (chae nami also chose tools)