From 29cdc9de9bedc0277f0faa6aa014815c1eacda4a Mon Sep 17 00:00:00 2001
From: murtaugh <murtaugh@xpub.nl>
Date: Fri, 7 Oct 2022 14:39:32 +0200
Subject: [PATCH] pagedjs workshop

---
 2022/pagedjs/app.js          |  52 ++++
 2022/pagedjs/default.css     | 464 +++++++++++++++++++++++++++++++++++
 2022/pagedjs/hand1.png       |   7 +
 2022/pagedjs/index.html      |  94 +++++++
 2022/pagedjs/laptop_1920.css | 257 +++++++++++++++++++
 5 files changed, 874 insertions(+)
 create mode 100644 2022/pagedjs/app.js
 create mode 100644 2022/pagedjs/default.css
 create mode 100644 2022/pagedjs/hand1.png
 create mode 100644 2022/pagedjs/index.html
 create mode 100644 2022/pagedjs/laptop_1920.css

diff --git a/2022/pagedjs/app.js b/2022/pagedjs/app.js
new file mode 100644
index 0000000..d0d3b4e
--- /dev/null
+++ b/2022/pagedjs/app.js
@@ -0,0 +1,52 @@
+const adobeLogo = document.getElementById("adobe");
+const noMore = document.getElementById("nomore");
+const firstBook = document.querySelector(".bar1");
+const thirdBook = document.querySelector(".bar3");
+const infoInside = document.getElementById("note");
+
+adobeLogo.addEventListener("mouseenter", function () {
+  adobeLogo.style.display = "none";
+  noMore.style.display = "block";
+});
+
+
+noMore.addEventListener("mouseenter", function () {
+  noMore.style.display = "none";
+  adobeLogo.style.display = "block";
+});
+
+
+firstBook.addEventListener("click", function () {
+  adobeLogo.visibility = "hidden";
+});
+
+noMore.addEventListener("click", function () {
+  noMore.style.display = "none";
+  noMore.style.display = "hidden";
+  adobeLogo.style.visibility = "visible";
+});
+
+
+thirdBook.addEventListener("mouseover", function () {
+  thirdBook.style.visibility = "hidden";
+  //thirdBook.style.display="none";
+  infoInside.style.display = "block";
+});
+
+
+infoInside.addEventListener("mouseleave", function () {
+  infoInside.style.display = "none";
+  //thirdBook.style.display = "block";
+  thirdBook.style.visibility = "visible";
+});
+
+
+thirdBook.addEventListener("click", function () {
+  thirdBook.style.visibility = "hidden";
+  infoInside.style.display = "block";
+});
+
+infoInside.addEventListener("click", function () {
+  infoInside.style.display = "none";
+  thirdBook.style.visibility = "visible";
+});
diff --git a/2022/pagedjs/default.css b/2022/pagedjs/default.css
new file mode 100644
index 0000000..c18fed2
--- /dev/null
+++ b/2022/pagedjs/default.css
@@ -0,0 +1,464 @@
+html,
+body {
+  font-size: 16px;
+}
+* {
+  box-sizing: border-box;
+}
+
+/* @import url("ext/4bc3933a35ae5ea64daeeb8eb22e72ff/css2.css");
+@import url("ext/029b1a6408007faa76f8327f6a331806/css2.css");
+@import url("ext/d657bbc9ab54884eb3972b1e9cb18df5/css2.css");
+@import url("ext/8c55abfa9a18d75133542cbd087927d5/css2.css");
+@import url("ext/f6b938a3cf4c7932c69612d18f3f6d47/css2.css"); */
+@import url("ext/8a7380f228a12515c367465bc33bb013/css2.css");
+@import url("ext/becee672c41a09a09c11466c771fb5e5/css2.css");
+
+body {
+  width: 100%;
+  height: 100vh;
+  margin: 0;
+  padding: 0;
+  background-image: url("img/desk2.jpeg");
+  background-size: cover;
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  -o-background-size: cover;
+  background-position: center;
+}
+#home {
+  position: absolute;
+  top: 4%;
+  left: 2.5%;
+  color: black;
+  background: #fb85ff;
+  background: linear-gradient(to bottom right, #fb85ff 16%, #eb5beb 59%);
+  padding: 0.5% 1%;
+  font-family: "Libre Baskerville", serif;
+  font-size: 1rem;
+  cursor: pointer;
+  transform: rotate(-6deg);
+  box-shadow: rgb(0 0 0 / 15%) 6px 4px 0px 0px;
+  cursor: url("img/hand6.png"), auto;
+}
+
+#home a {
+  text-decoration: none;
+  color: black;
+  cursor: url("img/hand6.png"), auto;
+}
+
+#designer{
+  position: absolute;
+    z-index: 999;
+    width: 4%;
+    bottom: 4%;
+    right: 3%;
+    cursor: pointer;
+}
+
+#designer a{
+    text-decoration:none;
+    cursor: pointer;
+}
+.wrapper {
+  position: relative;
+  display: flex;
+  margin: 0 auto;
+  width: 90%;
+  height: 100%;
+  z-index: 3;
+}
+
+#title {
+  display: inline-block;
+  height: min-content;
+  padding: 0 1%;
+  margin: 2.5% auto;
+  background: #ffffff;
+  background: linear-gradient(
+    to bottom right,
+    #ffffff 10%,
+    #e2eeec 55%,
+    #bdc7c5 90%
+  );
+  box-shadow: rgba(0, 0, 0, 0.15) 6px 4px 0px 0px;
+}
+
+#title h1 {
+  /* font-family: "Libre Baskerville", serif; */
+  font-family: "Courgette", cursive;
+  font-size: 2.8rem;
+  font-weight: 400;
+  letter-spacing: 0.03rem;
+  background: -webkit-linear-gradient(#000, rgb(53, 53, 53), #000);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+#tape {
+  position: absolute;
+  z-index: 4;
+  transform: rotate(-40deg);
+    width:5%;
+  left: 30%;
+  top: 2.6%;
+}
+
+#tape img{
+    width:70%;   
+}
+.bar {
+  position: absolute;
+  padding: 0;
+  margin: 0;
+  /* box-shadow: rgba(0, 0, 0, 0.6) px 2px 30px, rgba(0, 0, 0, 0) 0px 7px 13px 3px,
+    rgba(0, 0, 0, 0.1) 0px -3px 0px inset; */
+  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px,
+    rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
+  cursor: url("img/hand1.png"), auto;
+}
+
+.bar h3 {
+  text-align: center;
+}
+
+.bar1 {
+  background: #f0ecca;
+  background: linear-gradient(to bottom right, #f0ecca 14%, #e0dda8 77%);
+  top: 30%;
+  left: 9.5%;
+  width: 18%;
+  height: 33.5%;
+  font-family: Georgia, "Times New Roman", Times, serif;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0%;
+}
+.bar1 .frame {
+  width: 85%;
+  height: 90%;
+  border: 3px navy double;
+  color: navy;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.bar1 h3 {
+  font-size: 2rem;
+  font-style: italic;
+  font-weight: bold;
+  line-height: 0.5;
+  /* background-color: yellow; */
+}
+
+#adobe,
+#nomore {
+  position: absolute;
+  z-index: 10;
+  width: 25%;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  cursor: pointer;
+}
+
+#nomore {
+  display: none;
+}
+
+.bar1 p {
+  /* background-color: yellow; */
+  font-size: 0.9rem;
+  line-height: 130%;
+  padding: 0% 6%;
+  margin-bottom: 5%;
+}
+
+#maintitle /*.bar1 h1*/ {
+  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
+  font-size: 2.2rem;
+  letter-spacing: 0.1rem;
+  margin: 0;
+  padding: 0;
+  color: white;
+}
+
+.bar2 {
+  top: 20%;
+  left: 31.5%;
+  width: 16%;
+  height: 31.5%;
+  background: #fff8eb;
+  background: linear-gradient(
+    to bottom right,
+    #fff8eb 0%,
+    #faebd7 39%,
+    #d4c9bf 90%
+  );
+  display: inline-block;
+}
+
+.bar2:hover {
+  transform: rotate(30deg);
+}
+
+.deco1 {
+  width: 5%;
+  height: 100%;
+  margin-left: 0;
+  background: #d51f03;
+  background: linear-gradient(
+    to bottom right,
+    #d51f03 9%,
+    #b01a02 48%,
+    #d51f03 77%
+  );
+}
+
+.bar2 .frame {
+  position: absolute;
+  /* background-color: yellow; */
+  top: 0;
+  left: 5%;
+  width: 97%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 1% 2%;
+}
+
+.bar2 h3 {
+  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
+  font-size: 1.9rem;
+  width: 100%;
+  margin-bottom: 0;
+  margin-top: -15%;
+  background: -webkit-linear-gradient(#000, rgb(106, 106, 106), #000);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.bar2 p {
+/*   font-family: "Dancing Script", cursive; */
+    font-family: "Verdana";
+  font-size: 0.9rem;
+  line-height: 135%;
+  width: 80%;
+  color: black;
+}
+.bar3 {
+  top: 55%;
+  left: 44.5%;
+  width: 16%;
+  height: 35.5%;
+  background: #fff71c;
+  background: linear-gradient(
+    to bottom right,
+    #fff71c 0%,
+    #ffe142 39%,
+    #cfb71b 90%
+  );
+  display: flex;
+  flex-direction: column;
+  /* justify-content: center; */
+}
+
+.bar3 h3,
+.bar3 p {
+  font-family: "Libre Baskerville", serif;
+}
+
+.bar3 h3 {
+  font-style: bold;
+  font-size: 3rem;
+  line-height: 0;
+  margin-bottom: 7%;
+}
+
+#t1,
+#t5 {
+  color: #2b710c;
+}
+#t2,
+#t6 {
+  color: #c11818;
+}
+#t3,
+#t4 {
+  color: #0b0d7f;
+}
+#t6 {
+  font-style: italic;
+  font-size: 1rem;
+  margin-left: auto;
+  margin-right: auto;
+  padding-top: 10%;
+  /* margin-top: 20%; */
+}
+
+#note {
+  position: absolute;
+  display: none;
+  z-index: 11;
+  top: 55%;
+  left: 44.5%;
+  width: 32%;
+  height: 35.5%;
+  cursor: url("hand1.png"), auto;
+}
+
+.page1,
+.page2 {
+  position: absolute;
+  width: 50%;
+  height: 100%;
+  font-family: "Libre Baskerville", serif;
+}
+
+.page1 {
+  background: #fbfcf7;
+  background: linear-gradient(to right, #fbfcf7 0%, #fffaed 50%, #f0edd3 100%);
+  left: 0;
+}
+.page2 {
+  background: #fbfcf7;
+  background: linear-gradient(to left, #fbfcf7 0%, #fffaed 39%, #d4d1ba 90%);
+  display:flex;
+  justify-content: center;
+  align-items: center;
+  left: 50%;
+  overflow-wrap: break-all;
+}
+.page1 p,
+.page2 p {
+    color: #c11818;
+}
+.page1 p {
+  width: 80%;
+  font-size: 0.75rem;
+  padding: 2% 5%;
+}
+.page2 p {
+  font-size: 1.1rem;
+  line-height: 147%;
+  padding: 2% 8%;
+}
+#time{
+    color:black;
+}
+
+#hostnames{
+    color:black;
+}
+
+#hostnames a{
+    color:black;
+    text-decoration: underline;
+}
+
+.bar4 {
+  top: 32.5%;
+  left: 65.5%;
+  width: 20%;
+  height: 46.5%;
+  background: #d6f1ff;
+  background: linear-gradient(to bottom right, #d6f1ff 5%, #899fa3 90%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.bar4 .frame {
+  font-family: Arial, Helvetica, sans-serif;
+  padding: 1% 1%;
+  width: 76%;
+  height: 100%;
+  padding: 0;
+  overflow-y: auto;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bar4 .frame img {
+  width: 50%;
+  /* margin-top: 3%; */
+}
+.bar4 h3 {
+  font-family: "Archivo Black", sans-serif;
+  color: rgb(24, 42, 146);
+  font-size: 2.8rem;
+  line-height: 1.4;
+  margin-top: 7.5%;
+  margin-bottom: 5.5%;
+  cursor: pointer;
+  text-shadow: -1px 1px 1px rgba(0, 0, 0, 0.4),
+    -1px -1px 0 rgba(255, 255, 255, 1);
+}
+.bar4 h3 a {
+  text-decoration: none;
+  color: rgb(24, 42, 146);
+  cursor: pointer;
+  text-shadow: -1px 1px 1px rgba(0, 0, 0, 0.4),
+    -1px -1px 0 rgba(255, 255, 255, 1);
+}
+.bar4 p {
+  font-family: "Arsenal", sans-serif;
+  color: rgb(24, 42, 146);
+  font-size: 1.05rem;
+  font-weight: 600;
+  line-height: 140%;
+  padding: 1% 2%;
+}
+
+.bar5 {
+  transform: rotate(20deg);
+  top: 50%;
+  left: 50%;
+  width: 20%;
+  padding: 0;
+  display: inline-block;
+  height: min-content;
+  padding: 0;
+  background: #e2eeec;
+  background: linear-gradient(to bottom right, #e2eeec 8%, #d5e0de 59%);
+  /* box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px; */
+  box-shadow: rgba(0, 0, 0, 0.15) 4px 4px 0px 0px;
+}
+
+.bar5 p {
+  /* margin: 0 auto; */
+  padding: 0% 2%;
+  font-family: "Libre Baskerville", serif;
+  font-size: 1.1rem;
+  letter-spacing: 0.02rem;
+}
+
+.bar5 p a {
+  text-decoration: underline;
+  color: blue;
+  cursor: pointer;
+}
+
+#print{
+    display:none;
+    visibility:hidden;
+}
+
+#web{
+    visibility:visible;
+}
+
+#qr {
+  position: absolute;
+  z-index: 11;
+  display: none;
+}
+
diff --git a/2022/pagedjs/hand1.png b/2022/pagedjs/hand1.png
new file mode 100644
index 0000000..f930bc4
--- /dev/null
+++ b/2022/pagedjs/hand1.png
@@ -0,0 +1,7 @@
+<html>
+<head><title>404 Not Found</title></head>
+<body bgcolor="white">
+<center><h1>404 Not Found</h1></center>
+<hr><center>nginx/1.14.2</center>
+</body>
+</html>
diff --git a/2022/pagedjs/index.html b/2022/pagedjs/index.html
new file mode 100644
index 0000000..9f141d5
--- /dev/null
+++ b/2022/pagedjs/index.html
@@ -0,0 +1,94 @@
+<html lang="en"><head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Paged.js workshop</title>
+     
+    <link rel="stylesheet" href="default.css" media="only screen">
+    <link rel="stylesheet" media="screen and (max-width: 1920px)" href="laptop_1920.css">   
+    <link rel="stylesheet" media="only screen and (min-device-width : 1190px) and (max-device-width : 1440px)" href="laptop_big.css">
+    <link rel="stylesheet" media="only screen and (min-device-width : 768px) and (max-device-width : 1189px)" href="laptop_small.css">
+    <link rel="stylesheet" media="only screen and (min-device-width : 360px) and (max-device-width : 767px) and (orientation: portrait)" href="mobile_p.css">
+    <link rel="stylesheet" href="print.css" media="print">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
+ 
+    <link href="ext/becee672c41a09a09c11466c771fb5e5/css2.css?family=Courgette&amp;family=Dancing+Script:wght@400;500;600&amp;display=swap" rel="stylesheet">
+    <link href="ext/8a7380f228a12515c367465bc33bb013/css2.css?family=Archivo+Black&amp;family=Arsenal:ital@0;1&amp;family=Chivo:ital,wght@0,300;0,400;1,300;1,400&amp;family=Libre+Baskerville:wght@700&amp;display=swap" rel="stylesheet">
+  <link rel="original" href="https://hub.xpub.nl/sandbot/Nami_Researchlog/Pagedjs_workshop/index.html"></head>
+  <body>
+    <div id="home"><a href="https://xpub.nl/">Back</a></div>
+    <div id="designer"><a href="https://hub.xpub.nl/sandbot/Nami_Researchlog/"><img src="img/namikim2.svg"></a></div>
+  
+    <div class="wrapper">
+        <div id="tape"><img src="img/tape.png"></div>
+      <div id="title"><h1>XPUB invites you to a Paged.js Workshop!</h1></div>
+      <div class="bar bar1">
+        <div class="frame">
+          <h3>Adobe Again?</h3>
+          <p id="p1">
+            Most people would think making a publication should be done via
+            Adobe applications. Don't we want to explore other possibilities
+            though?
+          </p>
+          <img src="img/adobelogo_s.jpg" id="adobe">
+          <img src="img/nomore.jpg" id="nomore">
+        </div>
+      </div>
+
+      <div class="bar bar2">
+        <div class="deco1"></div>
+
+        <div class="frame">
+          <h3>There should be a way</h3>
+          <p>that I can directly render web pages to print.</p>
+          <img src="img/coverimg1.jpg">
+        </div>
+      </div>
+
+      <div class="bar bar3">
+        <h3 id="t1">On</h3>
+        <h3 id="t2">Thursday</h3>
+        <h3 id="t3">13th October</h3>
+        <h3 id="t4">11am - 6pm</h3>
+        <h3 id="t5">WH.04.115</h3>
+        <p id="t6">Guess what would happen?</p>
+      </div>
+      <div id="note">
+        <div class="page1">
+            <p id="time">11am - 1pm: Lecture 	&amp;<br>2 - 6pm: Workshop</p><p>13th Oct 2022<br>Wijnhaven 04.115</p><p id="time">Piet Zwart Institute, Willem de Kooning Academy</p>
+        </div>
+        <div class="page2">
+          <p>
+              <span id="hostnames"><a href="https://julie-blanc.fr/en/blog/2021-04-16_hackathon-pagedjs/">Julie Blanc</a></span> and <span id="hostnames"><a href="https://www.pagedmedia.org/author/julien/">Julien Taquet</a></span> will introduce Paged.js!
+          </p>
+        </div>
+      </div>
+
+      <div class="bar bar4" data-scroll="">
+        <div class="frame">
+          <h3 class="font-effect-emboss"><a href="https://pagedjs.org/">Paged.js</a></h3>
+          <p>
+            is a rendering tool for previewing, inspecting and designing a PDF
+            in the browser, that is known for specifically accommodating
+            designers using web-to-print techniques in their publications and book making practice.
+            
+          </p>
+       <img src="img/coverimg2.jpg">
+          <p id="hosts">  Julie and Julien both work as developers on
+            the project, so we can also ask them about Paged.js as an open
+            source project, and what it means to develop and maintain it.  </p>
+        </div>
+      </div>
+
+      <div class="bar bar5">
+        <p>Are you interested in joining the workshop? Sign up via <span id="print"><a href="https://pad.xpub.nl/p/pagedjs">xpub.nl.</a></span><span id="web"><a href="https://pad.xpub.nl/p/pagedjs">here.</a></span></p>
+      
+    </div>
+
+    <img src="img/xpubcode.png" id="qr">
+</div>
+    <script src="app.js"></script>
+  
+
+</body></html>
diff --git a/2022/pagedjs/laptop_1920.css b/2022/pagedjs/laptop_1920.css
new file mode 100644
index 0000000..3676994
--- /dev/null
+++ b/2022/pagedjs/laptop_1920.css
@@ -0,0 +1,257 @@
+@media  screen and (max-width: 1920px) {
+  @import url("ext/8a7380f228a12515c367465bc33bb013/css2.css");
+
+  #home {
+    top: 4%;
+    left: 2.5%;
+    font-size: 0.8rem;
+    letter-spacing: 0.03rem;
+    letter-spacing: 0.01rem;
+    padding: 0.5% 0.8%;
+  }
+    
+    #designer{
+    position: absolute;
+    z-index: 999;
+    width: 6%;
+    bottom: 4%;
+    right: 3%;
+    cursor: pointer;
+    }
+
+  #title {
+    padding: 0.2% 1%;
+  }
+
+  #title h1 {
+    font-size: 2rem;
+    letter-spacing: 0.02rem;
+  }
+
+ #tape {
+    transform: rotate(-45deg);
+    width: 4.5%;
+    left: 29.5%;
+    top: 1.6%;
+    }
+
+ #tape img{
+    width:80%;   
+    }
+
+  .bar {
+    position: absolute;
+    padding: 0;
+    margin: 0;
+    box-shadow: rgba(0, 0, 0, 0.6) 0px 2px 16px,
+      rgba(0, 0, 0, 0) 0px 7px 13px 3px, rgba(0, 0, 0, 0.1) 0px -3px 0px inset;
+    cursor: url("hand1.png"), auto;
+    /* box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px; */
+    /* box-shadow: rgba(0, 0, 0, 0.35) 0px -50px 36px -28px inset; */
+  }
+
+  .bar h3 {
+    text-align: center;
+          
+  }
+
+  .bar1 {
+    top: 30%;
+    left: 7.5%;
+    width: 18%;
+    height: 38.5%;
+  }
+  .bar1 .frame {
+    width: 85%;
+    height: 90%;
+  }
+
+  .bar1 h3 {
+    font-size: 1.3rem;
+    line-height: 0.2;
+      padding-top: 4%;
+  }
+
+  #adobe,
+  #nomore {
+    width: 28%;
+    top: 40%;
+  }
+  .bar1 p {
+    font-size: 0.9rem;
+    line-height: 133%;
+    padding: 5% 10%;
+    margin-bottom: 5%;
+  }
+
+  .bar2 {
+    top: 22%;
+    left: 31.5%;
+    width: 16%;
+    height: 31.5%;
+    background: #fff8eb;
+    background: linear-gradient(
+      to bottom right,
+      #fff8eb 0%,
+      #faebd7 39%,
+      #d4c9bf 90%
+    );
+    display: inline-block;
+  }
+
+  .bar2:hover {
+    transform: rotate(30deg);
+  }
+
+  .deco1 {
+    width: 5%;
+    height: 100%;
+    margin-left: 0;
+    background-color: rgb(213, 31, 3);
+  }
+
+  .bar2 .frame {
+    top: 0;
+    left: 5%;
+    width: 97%;
+    height: 100%;
+
+    padding: 1% 2%;
+  }
+
+  .bar2 h3 {
+    font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
+   font-size: 1.35rem;
+    width: 80%;
+    margin-bottom: 0;
+    margin-top: 0;
+  }
+    
+  .bar2 p {
+   font-size: 0.75rem;
+    line-height: 125%;
+      width:65%;
+    margin-top: 5%;
+    margin-bottom: 9%;
+  }
+
+  .bar2 img {
+    width: 42.5%;
+  }
+  .bar3 {
+    top: 58%;
+    left: 45.5%;
+    width: 16%;
+    height: 34.5%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .bar3 h3 {
+    font-style: bold;
+    font-size: 1.75rem;
+    line-height: 0.25;
+    margin-bottom: 7%;
+  }
+
+  #t1,
+  #t5 {
+    color: #2b710c;
+  }
+  #t2,
+  #t6 {
+    color: #c11818;
+  }
+  #t3,
+  #t4 {
+    color: #0b0d7f;
+  }
+  #t6 {
+    text-align: center;
+    width: 100%;
+    font-style: italic;
+    font-size: 0.77rem;
+    line-height: 130%;
+    margin-left: auto;
+    margin-right: auto;
+    padding-top: 0;
+  }
+
+  #note {
+    top: 58%;
+    left: 45.5%;
+    width: 32%;
+    height: 34.5%;
+  }
+
+  .page1 p {
+    font-size: 0.75rem;
+    line-height: 1.5;
+    padding: 2% 5%;
+  }
+  .page2 p {
+    font-size: 0.85rem;
+    line-height: 1.6;
+    padding: 2% 8%;
+  }
+
+  .bar4 {
+    left: 66.5%;
+    width: 22%;
+    height: 44.5%;
+  }
+
+  .bar4 .frame {
+    width: 85%;
+    height: 100%;
+    justify-content: space-around;
+  }
+
+  .bar4 .frame img {
+    width: 38%;
+    margin-top: 0%;
+    margin-bottom: 0%;
+  }
+  .bar4 h3 {
+    font-family: "Archivo Black", sans-serif;
+    color: rgb(24, 42, 146);
+    font-size: 1.7rem;
+    line-height: 1;
+    margin-bottom: 0%;
+  }
+
+  .bar4 p {
+   font-family: "Arsenal", sans-serif;
+    font-size: 0.9rem;
+    line-height: 132%;
+    padding-top: 0;
+    margin-top: 4%;
+    margin-bottom: 0;
+  }
+
+  .bar5 {
+    transform: rotate(20deg);
+    top: 55%;
+    left: 50%;
+    width: 20%;
+    padding: 0;
+
+    display: inline-block;
+    height: min-content;
+    padding: 0 0.75%;
+    margin: 0;
+    background-color: #e2eeec;
+    box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px;
+  }
+
+  .bar5 p {
+    margin: 1% auto;
+    padding: 1% 2%;
+    font-family: "Libre Baskerville", serif;
+    font-size: 0.85rem;
+    letter-spacing: 0.03rem;
+  }
+}
+