HackYourFutureBelgium · nuttyproducer · Apr 25, 2026 · Apr 25, 2026 · Apr 25, 2026 · Apr 26, 2026
diff --git a/Sprint-3/reading-list/index.html b/Sprint-3/reading-list/index.html
@@ -8,7 +8,7 @@
   </head>
   <body>
     <div id="content">
-      <ul id="reading-list"></ul>
+      <ul id="readingList" class="reading-list"></ul>
     </div>
     <script src="script.js"></script>
   </body>

diff --git a/Sprint-3/reading-list/script.js b/Sprint-3/reading-list/script.js
@@ -21,3 +21,29 @@ const books = [
   },
 ];
 
+document.title = "Reading list app";
+
+const bookList = document.getElementById("readingList");
+
+books.forEach((book) => {
+  const list = document.createElement("li");
+  list.classList.add("book-card");
+  if (book.alreadyRead) {
+    list.classList.add("bookRead");
+  } else {
+    list.classList.add("bookNotRead");
+  }
+
+  const bookTitle = document.createElement("h3");
+  const author = document.createElement("p");
+  const bookImage = document.createElement("img");
+
+  bookTitle.textContent = book.title;
+  list.appendChild(bookTitle);
+  author.textContent = book.author;
+  list.appendChild(author);
+  bookImage.src = book.bookCoverImage;
+  list.appendChild(bookImage);
+
+  bookList.appendChild(list);
+});
diff --git a/Sprint-3/reading-list/style.css b/Sprint-3/reading-list/style.css
@@ -1,159 +1,136 @@
-/**
- * Base styles to use at the start of the class
- *
- * Module: HTML/CSS
- * Lesson: 1,2
- * Class: Scotland 2017
- */
-
 html,
 body {
-  font-family: "Source Sans Pro", -apple-system, system-ui, BlinkMacSystemFont,
-    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-}
-
-.site-footer {
-  margin-top: 4em;
-}
-
-.site-footer p {
-  border-top: 1px solid #dccdc6;
-  padding-top: 2em;
-  padding-bottom: 2em;
-}
-
-.navbar-brand > img {
-  max-height: 40px;
-  width: auto;
+  font-family:
+    "Source Sans Pro",
+    -apple-system,
+    system-ui,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    "Helvetica Neue",
+    Arial,
+    sans-serif;
+}
+
+.bookRead {
+  background-color: red;
 }
 
-.navbar-light .navbar-nav .nav-link {
-  color: #292b2c;
-  font-weight: 600;
-  text-transform: uppercase;
+.bookNotRead {
+  background-color: green;
 }
 
-/* Buttons */
-.btn {
-  border-radius: 0.15em;
+.reading-list {
+  list-style: none;
+  max-width: 1080px;
+  margin: 0 auto;
+  padding: 1.5rem;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(252px, 252px));
+  justify-content: center;
+  gap: 1.6rem;
 }
 
-/* Alert */
-.alert {
+.book-card {
   position: relative;
-  margin-top: 2em;
-  margin-bottom: 3em;
-  padding-top: 1.5em;
-  padding-bottom: 1.5em;
-  border: 1px solid #dccdc6;
-  border-radius: 0;
-  font-size: 0.85rem;
-  line-height: 1.3em;
-  background: transparent;
-  color: #292b2c;
-}
-
-.alert:before {
+  overflow: hidden;
+  border-radius: 0.8rem;
+  padding: 1rem;
+  box-shadow:
+    0 12px 22px rgba(15, 23, 42, 0.24),
+    0 5px 12px rgba(15, 23, 42, 0.16);
+  border: 1px solid rgba(255, 255, 255, 0.35);
+  transition:
+    transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
+    box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1),
+    border-color 220ms ease;
+  will-change: transform;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.55rem;
+
+  transform-style: preserve-3d;
+  transform-origin: center center;
+}
+
+.book-card:hover {
+  transform: perspective(1000px) translateY(-6px) rotateX(2deg) rotateY(-2deg);
+  box-shadow:
+    0 18px 30px rgba(15, 23, 42, 0.28),
+    0 8px 18px rgba(15, 23, 42, 0.18);
+  border-color: rgba(255, 255, 255, 0.5);
+}
+
+.book-card::before {
   content: "";
   position: absolute;
-  left: -1px;
-  top: 0;
-  height: 100%;
-  width: 1px;
-  background: #ce5f31;
-}
-
-/* Jumbotron */
-.jumbotron {
-  border-radius: 0;
-}
-
-/* Headings */
-.heading-underline {
+  inset: 0;
+  background: linear-gradient(
+    to top,
+    rgba(255, 255, 255, 0.28) 0%,
+    rgba(255, 255, 255, 0.48) 45%,
+    rgba(255, 255, 255, 0.86) 100%
+  );
+  z-index: 1;
+}
+
+.book-card:hover::before {
+  background: linear-gradient(
+    to top,
+    rgba(255, 255, 255, 0.18) 0%,
+    rgba(255, 255, 255, 0.36) 45%,
+    rgba(255, 255, 255, 0.8) 100%
+  );
+}
+
+.book-card > * {
   position: relative;
-  margin-bottom: 2em;
-  padding-bottom: 0.5em;
-  border-bottom: 1px solid #dccdc6;
-  font-size: 1rem;
-  font-weight: 600;
-  text-transform: uppercase;
+  z-index: 2;
 }
 
-.heading-underline:before {
-  content: "";
-  position: absolute;
-  bottom: -1px;
-  left: 0;
-  width: 25%;
-  height: 1px;
-  max-width: 100px;
-  background: #ce5f31;
-}
-
-/* Article */
-.article {
-  margin-bottom: 2em;
+.book-card img {
+  width: 200px;
+  height: 280px;
+  object-fit: cover;
+  display: block;
+  border-radius: 0.4rem;
 }
 
-.article-title {
-  margin-bottom: 0.5em;
-  font-weight: 700;
+.book-card h3,
+.book-card p {
+  width: 200px;
+  text-align: left;
 }
 
-.article-read-more a {
-  font-size: 0.85em;
+.book-card h3 {
+  margin: 0.15rem 0 0;
+  min-height: calc(1.28em * 2);
+  font-size: 1.12rem;
   font-weight: 700;
-  text-decoration: uppercase;
+  line-height: 1.28;
+  letter-spacing: -0.02em;
+  color: #1f2937;
 }
 
-.article-read-more a:hover,
-.article-read-more a:focus {
-  text-decoration: none;
+.book-card p {
+  margin: 0;
+  font-size: 0.95rem;
+  font-weight: 500;
+  line-height: 1.35;
+  color: #4b5563;
 }
 
-.article-read-more .fa {
-  margin-right: 0.5em;
-  color: #ce5f31;
-}
-
-.article-read-more:last-child {
-  margin-bottom: 0;
-}
-
-.red {
-  background-color: red;
-}
-
-.addArticle {
-  margin-bottom: 10px;
-}
-
-#addArticleBtn {
-  margin-left: 20px;
-  height: 37px;
-}
-
-.colorButton {
-  margin-bottom: 20px;
-  margin-right: 20px;
-  width: 100px;
-  height: 50px;
-}
-
-#blueBtn {
-  background: #588fbd;
-}
-
-#orangeBtn {
-  background: #f0ad4e;
-}
-
-#greenBtn {
-  background: #87ca8a;
-}
+@media (prefers-reduced-motion: reduce) {
+  .book-card {
+    transition: none;
+  }
 
-@media screen and (min-width: 992px) {
-  .navbar-brand > img {
-    max-height: 80px;
+  .book-card:hover {
+    transform: none;
+    box-shadow:
+      0 12px 22px rgba(15, 23, 42, 0.24),
+      0 5px 12px rgba(15, 23, 42, 0.16);
   }
 }