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 @@
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