Add patrick's events-list exercise

parkejunior · Dec 3, 2022 · 05ab193 · 05ab193
1 parent 440a05e
commit 05ab193
Show file tree

Hide file tree

Showing 2 changed files with 217 additions and 0 deletions.
diff --git a/css/events-list/parkejunior/index.html b/css/events-list/parkejunior/index.html
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Events List</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <main class="content-centered">
+    <section class="container">
+      <h1>Events</h1>
+
+      <div class="list">
+        <div class="list-item">
+          <div class="list-schedule list-bg-lilac">
+            <div class="list-date">Today</div>
+            <div class="list-time">17:00</div>
+          </div>
+          <div class="list-content">
+            <div>
+              <h2>Bergen International Film Festivel</h2>
+              <p>Films from all over the world gather all film enthusiasts for unique moments at the Bergen International Film Festival.</p>
+            </div>
+            <div>
+              <button class="btn btn-light">
+                + Add to calendar
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <div class="list-item">
+          <div class="list-schedule list-bg-pink">
+            <div class="list-date">22 - 31 Oct</div>
+            <div class="list-time">10:00</div>
+          </div>
+          <div class="list-content">
+            <div>
+              <h2>Wool week</h2>
+              <p>ULLVEKA 2021 will be held for the eighth time in the period 22 - 31 Octuber 2021, and will take place in the entire Bergen region.</p>
+            </div>
+            <div>
+              <button class="btn btn-light">
+                + Add to calendar
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <div class="list-item">
+          <div class="list-schedule list-bg-coral">
+            <div class="list-date">22 - 31 Oct</div>
+            <div class="list-time">19:00</div>
+          </div>
+          <div class="list-content">
+            <div>
+              <h2>Light park at Bergenhus Fortress</h2>
+              <p>LUMAGICA - a magical experience for young and old at Bergenhus Fortress, 12 November to 16 December 2021.</p>
+            </div>
+            <div>
+              <button class="btn btn-light">
+                + Add to calendar
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <div class="list-item">
+          <div class="list-schedule list-bg-green">
+            <div class="list-date">13 -31 Dec</div>
+            <div class="list-time">10:00</div>
+          </div>
+          <div class="list-content">
+            <div>
+              <h2>Gingerbread City 2021</h2>
+              <p>The world's largest Gingerbread Town can be found in the Xhibition shopping center, right in the center of Bergen.</p>
+            </div>
+            <div>
+              <button class="btn btn-light">
+                + Add to calendar
+              </button>
+            </div>
+          </div>
+        </div>
+
+      </div>
+    </section>
+  </main>
+</body>
+</html>
diff --git a/css/events-list/parkejunior/style.css b/css/events-list/parkejunior/style.css
@@ -0,0 +1,125 @@
+@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700;800;900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Merriweather+Sans:wght@300;400;500;&display=swap');
+
+:root {
+  --navy-blue: #1c2442;
+}
+
+body {
+  background-color: #eceff8;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  font-family: 'Merriweather Sans', serif;
+  font-weight: 400;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  color: var(--navy-blue);
+  font-family: 'Merriweather', serif;
+}
+
+h1 {
+  font-size: 32px;
+  font-weight: 800;
+}
+
+.content-centered {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+}
+
+.list {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+.container {
+  max-width: 950px;
+}
+
+.list-item {
+  background-color: white;
+  border-radius: 20px;
+  display: flex;
+  padding: 18px;
+  gap: 30px;
+}
+
+.list-item:hover {
+  box-shadow: 0px 5px 15px #00000022;
+}
+
+.list-schedule {
+  color: var(--navy-blue);
+  border-radius: 10px;
+  text-align: center;
+  min-width: 140px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.list-date {
+  font-size: 16px;
+  text-transform: uppercase;
+  font-weight: 500;
+}
+
+.list-time {
+  font-size: 34px;
+  font-weight: bold;
+  font-family: 'Merriweather', serif;
+}
+
+.list-content {
+  display: flex;
+  padding: 15px 0px;
+  gap: 130px;
+}
+
+.list-content h2 {
+  margin: 0 0 10px 0;
+  font-weight: 900;
+}
+
+.list-content p {
+  margin: 0;
+}
+
+.btn {
+  white-space: nowrap;
+  border: none;
+  padding: 15px;
+  border-radius: 15px;
+  font-size: 14px;
+  cursor: pointer;
+}
+
+.btn-light {
+  background-color: white;
+}
+
+.btn-light:hover {
+  background-color: black;
+  color: #eee;
+}
+
+.list-bg-lilac {
+  background-color: #eceff8;
+}
+
+.list-bg-pink {
+  background-color: #f8ecf8;
+}
+
+.list-bg-coral {
+  background-color: #f8ecec;
+}
+
+.list-bg-green {
+  background-color: #eef8ec;
+}