diff --git a/web/index.html b/web/index.html
index d0fa63f..2553afe 100644
--- a/web/index.html
+++ b/web/index.html
@@ -23,7 +23,7 @@
@@ -353,6 +353,32 @@
+
+
diff --git a/web/style.css b/web/style.css
index fa661f0..31ac5e9 100644
--- a/web/style.css
+++ b/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;
}
\ No newline at end of file