XPUB
/
SI24
19
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

make mobile compatible

Browse Source
main
victor 5 months ago
parent 060cd6057f
commit 5a686ec6b6
3 changed files with 80 additions and 27 deletions
Show Stats Download Patch File Download Diff File

15
web/index.html
Unescape Escape View File

@ -5,14 +5,19 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Counter Tourist Tnformation</title> <title>Counter Tourist Tnformation</title>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head> </head>
<body> <body>
<div class="nav"> <div class="nav">
<h3>Counter <br> Tourist <br> Information</h3>
<h4>The surroundings</h4> <h3 onclick="togglemenu()">Counter <br> Tourist <br> Information</h3>
<h4>Events</h4>
<h4>Visitors disinfo</h4> <div class="menu" id="menu">
<h4>Sutainability</h4> <h4>The surroundings</h4>
<h4>Events</h4>
<h4>Visitors disinfo</h4>
<h4>Sutainability</h4>
</div>
</div> </div>
<div class="landingimage"> <div class="landingimage">
<div class="imagedescription">Beautiful Breda | photo Person With a Smartphone</div> <div class="imagedescription">Beautiful Breda | photo Person With a Smartphone</div>

9
web/script.js
Unescape Escape View File

@ -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";
}
}

83
web/style.css
Unescape Escape View File

@ -14,34 +14,43 @@
src: url(fonts/VG5000-Regular.otf); src: url(fonts/VG5000-Regular.otf);
} }
*{
overflow-x: hidden;
}
body{ body{
font-family: Montserrat; font-family: Montserrat;
} }
.nav{ .nav{
width: 80vw; width: 100%;
z-index: 9001; z-index: 9001;
display: flex;
background-color: #212529; background-color: #212529;
justify-content: space-around;
align-items: center;
position: fixed; position: fixed;
left: 10vw; top: -2%;
left: 0;
} }
.nav>h3{ .nav>h3{
font-size: 2em;
color: #81d742; color: #81d742;
padding: .5em;
font-family: VG5000; font-family: VG5000;
padding-left: 10vw;
} }
.nav>h4{ .menu{
display: none;
width: fit-content;
margin: auto;
color: white; color: white;
font-weight: lighter; font-weight: lighter;
padding-bottom: 2vh;
} }
.landingimage{ .landingimage{
@ -55,15 +64,16 @@ body{
.imagedescription{ .imagedescription{
background: rgba(5, 5, 5, 0.3); background: rgba(5, 5, 5, 0.3);
position: relative; position: relative;
top: 93%; top: 92%;
left: 2%; left: 2%;
padding: 4px; padding: 4px;
width: fit-content; width: fit-content;
color: white; color: rgba(255,255,255,0.7);
pointer-events: none;
} }
h1{ h1{
font-family: VG5000; font-family: VG5000;
font-size: 4em; font-size: clamp(1.5rem, 1rem + 9vw, 6rem);
} }
p{ p{
@ -72,11 +82,12 @@ p{
.index{ .index{
background: #81d742; background: #81d742;
width: 100%;
} }
.index>*{ .index>*{
padding: 10px; padding: 2%;
max-width: 50ch; max-width: 70ch;
text-align: center; text-align: center;
margin: auto; margin: auto;
@ -88,28 +99,56 @@ p{
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-around; justify-content: space-around;
margin-top: 50px; margin-top: 50px;
max-width: 2000px;
} }
.tourcard{ .tourcard{
position: relative; position: relative;
width: 33%;
min-width: 350px;
max-width: 500px; max-width: 500px;
margin-bottom: 50px; margin: 2%;
flex-grow: 1;
} }
.tourcard >img{ .tourcard >img{
width: 90%; width: 100%;
} }
.tour-text{ .tour-text{
position: absolute; position: absolute;
bottom:5%; width: 80%;
left: 5%; bottom:8%;
padding: 5%; left: 8%;
padding: 2%;
font-family:Montserrat; font-family:Montserrat;
font-size: .7em; font-size: .7em;
background: white; 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;
}
}
Write Preview
Loading…
Cancel
Save