From 5a686ec6b609794fb7abf7eeb82c73f817bf8273 Mon Sep 17 00:00:00 2001 From: victor Date: Mon, 17 Jun 2024 22:15:55 +0200 Subject: [PATCH] make mobile compatible --- web/index.html | 15 ++++++--- web/script.js | 9 ++++++ web/style.css | 83 +++++++++++++++++++++++++++++++++++++------------- 3 files changed, 80 insertions(+), 27 deletions(-) create mode 100644 web/script.js diff --git a/web/index.html b/web/index.html index 21c7c67..51398ae 100644 --- a/web/index.html +++ b/web/index.html @@ -5,14 +5,19 @@ Counter Tourist Tnformation +
-

Counter
Tourist
Information

-

The surroundings

-

Events

-

Visitors disinfo

-

Sutainability

+ +

Counter
Tourist
Information

+ +
Beautiful Breda | photo Person With a Smartphone
diff --git a/web/script.js b/web/script.js new file mode 100644 index 0000000..f25adec --- /dev/null +++ b/web/script.js @@ -0,0 +1,9 @@ + +function togglemenu(){ + let menu = document.getElementById("menu"); + if(menu.style.display !== "none"){ + menu.style.display = "none"; + } else { + menu.style.display = "block"; + } +} \ No newline at end of file diff --git a/web/style.css b/web/style.css index a83f141..1cef89f 100644 --- a/web/style.css +++ b/web/style.css @@ -14,34 +14,43 @@ src: url(fonts/VG5000-Regular.otf); } +*{ + overflow-x: hidden; +} body{ font-family: Montserrat; + } .nav{ - - width: 80vw; + + width: 100%; z-index: 9001; - display: flex; background-color: #212529; - justify-content: space-around; - align-items: center; position: fixed; - left: 10vw; - + top: -2%; + left: 0; } + + .nav>h3{ + font-size: 2em; color: #81d742; - padding: .5em; font-family: VG5000; + padding-left: 10vw; } -.nav>h4{ +.menu{ + display: none; + width: fit-content; + margin: auto; color: white; font-weight: lighter; + padding-bottom: 2vh; + } .landingimage{ @@ -55,15 +64,16 @@ body{ .imagedescription{ background: rgba(5, 5, 5, 0.3); position: relative; - top: 93%; + top: 92%; left: 2%; padding: 4px; width: fit-content; - color: white; + color: rgba(255,255,255,0.7); + pointer-events: none; } h1{ font-family: VG5000; - font-size: 4em; + font-size: clamp(1.5rem, 1rem + 9vw, 6rem); } p{ @@ -72,11 +82,12 @@ p{ .index{ background: #81d742; + width: 100%; } .index>*{ - padding: 10px; - max-width: 50ch; + padding: 2%; + max-width: 70ch; text-align: center; margin: auto; @@ -88,28 +99,56 @@ p{ flex-wrap: wrap; justify-content: space-around; margin-top: 50px; + max-width: 2000px; } .tourcard{ position: relative; - width: 33%; - min-width: 350px; max-width: 500px; - margin-bottom: 50px; + margin: 2%; + flex-grow: 1; } .tourcard >img{ - width: 90%; + width: 100%; } .tour-text{ position: absolute; - bottom:5%; - left: 5%; - padding: 5%; + width: 80%; + bottom:8%; + left: 8%; + padding: 2%; font-family:Montserrat; font-size: .7em; background: white; - width: 70%; + } +@media only screen and (min-width: 801px) { + .nav{ + width: 80vw; + z-index: 9001; + display: flex; + background-color: #212529; + justify-content: space-around; + align-items: center; + position: fixed; + left: 10vw; + } + + .nav>h3{ + color: #81d742; + padding: .5em; + font-family: VG5000; + } + + .menu{ + width: 100%; + display: flex; + color: white; + font-weight: lighter; + justify-content: space-around; + + } +} \ No newline at end of file