include some events

web/index.html

@@ -23,7 +23,7 @@
 
         <div class="menu" id="menu">
             <h4><a href="#surroundings">The surroundings</a></h4>
-            <h4>Events</h4>
+            <h4><a href="#events">Events</a></h4>
             <h4>Visitors disinfo</h4>
             <h4>Sustainability</h4>
         </div>
@@ -353,6 +353,32 @@
 
         </div>
 
+        <div id="events" class="container container--events">
+            <h2>Top 10 things to do</h2>
+            <ul class="events">
+                <li class="event">
+                    <img src="images/breda.JPG" alt="" class="event__img">
+                    <h3 class="event__title">1. The Counter-Tourist Information Center</h3>
+                </li>
+                <li class="event">
+                    <img src="images/breda.JPG" alt="" class="event__img">
+                    <h3 class="event__title">1. The Counter-Tourist Information Center</h3>
+                </li>
+                <li class="event">
+                    <img src="images/breda.JPG" alt="" class="event__img">
+                    <h3 class="event__title">1. The Counter-Tourist Information Center</h3>
+                </li>
+                <li class="event">
+                    <img src="images/breda.JPG" alt="" class="event__img">
+                    <h3 class="event__title">1. The Counter-Tourist Information Center</h3>
+                </li>
+                <li class="event">
+                    <img src="images/breda.JPG" alt="" class="event__img">
+                    <h3 class="event__title">1. The Counter-Tourist Information Center</h3>
+                </li>
+            </ul>
+        </div>
+
         <footer class="annoying">
             Do you have our card already?
         </footer>

web/style.css

@@ -1,3 +1,10 @@
+:root {
+    --green: #81d742;
+    --black: #212529;
+    --container: 1200px;
+    --container-lg: 1500px;
+}
+
 @font-face {
     font-family: Montserrat;
     src: url(fonts/Montserrat-VariableFont_wght.ttf);
@@ -15,12 +22,15 @@
 }
 
 * {
-    overflow-x: hidden;
+    /* overflow-x: hidden; */
+    box-sizing: border-box;
+}
+html {
+    scroll-behavior: smooth;
 }
-
 body {
     font-family: Montserrat;
-    scroll-behavior: smooth;
+    color: var(--black);
     margin: 0 0;
     padding: 0 0;
     width: 100%;
@@ -29,15 +39,18 @@ body {
 }
 
 .nav {
-
     width: 100%;
     z-index: 9001;
-    background-color: #212529;
+    background-color: var(--black);
     position: fixed;
-    top: -2%;
+    top: 1rem;
     left: 0;
-}
+    padding: .5rem;
 
+}
+.nav > * {
+    margin: 0 0;
+}
 .nav a {
     text-decoration: none;
     color: inherit;
@@ -51,7 +64,7 @@ body {
 
 .nav>h3 {
     font-size: 1.25em;
-    color: #81d742;
+    color: var(--green);
     font-family: VG5000;
     width: fit-content;
 }
@@ -69,7 +82,7 @@ body {
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center;
-    width: 100vw;
+    width: 100%;
     height: 600px;
 }
 
@@ -93,11 +106,11 @@ h2 {
 }
 
 p {
-    font-size: larger;
+    font-size: 18px;
 }
 
 .index {
-    background: #81d742;
+    background: var(--green);
     width: 100%;
 }
 
@@ -118,7 +131,6 @@ p {
     max-width: 2000px;
     gap: 2rem;
 }
-
 .tourcard {
     position: relative;
     flex-basis: 50%;
@@ -126,6 +138,14 @@ p {
     flex-grow: 1;
 }
 
+
+@media only screen and (max-width: 801px) {
+    .tourcard {
+        flex-basis: 100%;
+        max-width: 100%;
+    }
+}
+
 .tourcard>img {
     width: 100%;
 }
@@ -142,7 +162,7 @@ p {
 }
 
 .reviews {
-    width: 90vw;
+    width: var(--container-lg);
     text-wrap: wrap;
 }
 
@@ -157,17 +177,17 @@ p {
 @media only screen and (min-width: 801px) {
     .nav {
         width: 90vw;
-        max-width: 1500px;
+        max-width: var(--container-lg);
         z-index: 9001;
         display: flex;
         align-items: center;
         position: fixed;
-        left: 5vw;
+        left: 50%;
+        transform: translateX(-50%);
     }
 
     .nav>h3 {
-        color: #81d742;
-        padding-left: 2%;
+        color: var(--green);
         font-family: VG5000;
     }
 
@@ -204,7 +224,9 @@ section {
 }
 
 @keyframes slide {
-    0%, 80% {
+
+    0%,
+    80% {
         transform: translateX(200%);
     }
 
@@ -213,13 +235,71 @@ section {
     }
 }
 
+
 footer.annoying {
     animation-fill-mode: forwards;
     position: fixed;
     bottom: .5rem;
     right: .5rem;
-    background-color: #81d742;
+    background-color: var(--green);
     animation: slide 10s ease-in-out;
     padding: .5rem;
     font-size: 16px;
+}
+
+.container--events {
+    display: grid;
+    grid-template-columns: 1fr 3fr;
+    grid-gap: 2rem;
+    align-items: center;
+    max-width: var(--container-lg);
+    max-width: min(var(--container-lg), calc(100vw - 2rem));
+}
+
+
+@media only screen and (max-width: 801px) {
+    .container--events {
+        grid-template-columns: 1fr;
+    }
+}
+
+
+.events {
+    display: flex;
+    overflow-x: scroll !important;
+    grid-auto-columns: 400px;
+    column-gap: 2rem;
+    padding: 0 0;
+    list-style: none;
+}
+.events .event {
+    overflow: hidden;
+    position: relative;
+    min-width: 300px;
+}
+.event img {
+    aspect-ratio: 3/4;
+    width: 100%;
+    transform: scale(1);
+    transition: .2s cubic-bezier(0.25, .5, 0.5, 1);
+}
+
+.event h3 {
+    background-color: white;
+    position: absolute;
+    bottom: 1rem;
+    left: 1rem;
+    right: 1rem;
+    z-index: 2;
+    transition: .2s cubic-bezier(0.25, .5, 0.5, 1);
+    padding: .5rem;
+}
+
+.event:hover img {
+    transform: scale(1.2);
+}
+
+.event:hover h3 {
+    background-color: var(--black);
+    color: white;
 }