Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
WeLeBro authored Sep 30, 2024
1 parent 72003c3 commit baf6928
Show file tree
Hide file tree
Showing 3 changed files with 226 additions and 6 deletions.
127 changes: 126 additions & 1 deletion index.html
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,134 @@

<body>

<section class="mainmenu">
<button id="menu-btn2">
<section id="x-cont">
<div class="x-bar"></div>
<div class="x-bar"></div>
</section>
Close
</button>

<nav>
<ul id="mm-prio1">
<li>
<a href="#">What's on</a>
</li>

<li>
<a href="#">News</a>
</li>

<li>
<a href="#">My tickets</a>
</li>

<li>
<a href="#">Visit</a>
</li>
</ul>

<ul id="mm-prio2">
<li>
<a href="#">About us</a>
</li>

<li>
<a href="#">Membership</a>
</li>

<li>
<a href="#">Archive</a>
</li>

<li>
<a href="#">Webshop</a>
</li>

<li>
<a href="#">Support us</a>
</li>

<li>
<a href="#">Working at Paradiso</a>
</li>

<li>
<a href="#">Contact & Partners</a>
</li>
</ul>

<ul id="mm-prio3">
<li>
<a href="#"><img src="./images/bassline.webp" alt="Bassline logo">Bassline</a>
</li>

<li>
<a href="#"><img src="./images/club-paradiso.webp" alt="Club Paradiso logo">Club Paradiso</a>
</li>

<li>
<a href="#"><img src="./images/indiestad.webp" alt="Indiestad logo">Indiestad</a>
</li>

<li>
<a href="#"><img src="./images/kosmos.webp" alt="Kosmos logo">Kosmos</a>
</li>

<li>
<a href="#"><img src="./images/sugar-mountain-logo.webp" alt="Sugar Mountain logo">Sugar Mountain</a>
</li>

<li>
<a href="#"><img src="./images/jazzlogo.webp" alt="Super-Sonic Jazz logo">Super-Sonic Jazz</a>
</li>

<li>
<a href="#"><img src="./images/TTTT-logo.webp" alt="Tickets to the Tropics logo">Ticket to the Tropics</a>
</li>
</ul>
</nav>

<ul id="socials">
<li>
<a href="https://www.tiktok.com/@paradisoamsterdam" target="_blank"><img src="./images/tiktok.svg" alt="TikTok logo"></a>
</li>

<li>
<a href="https://www.instagram.com/paradisoadam/" target="_blank"><img src="./images/instagram.svg" alt="Instagram logo"></a>
</li>

<li>
<a href="https://open.spotify.com/user/paradisoamsterdam" target="_blank"><img src="./images/spotify.svg" alt="Spotify logo"></a>
</li>

<li>
<a href="https://www.youtube.com/channel/UC7yz0T2iROobE4-GgS9dhWg" target="_blank"><img src="./images/youtube.svg" alt="YouTube logo"></a>
</li>
</ul>

<ul id="partners">
<li>
<a href="https://www.amsterdam.nl/" target="_blank"><img src="./images/gemeente-amsterdam.svg" alt="Gemeente Amsterdam logo"></a>
</li>

<li id="heineken">
<a href="https://www.heineken.com/" target="_blank"><img src="./images/heineken.svg" alt="Heineken logo"></a>
</li>

<li>
<a href="https://re-imagine-europe.eu/" target="_blank"><img src="./images/european-union-funded.svg" alt="European Union Funded logo"></a>
</li>
</ul>

<a href="#"><img id="refresh" src="./images/refresh.svg" alt="refresh icon">Bekijk in het Nederlands</a>

</section>

<header>
<section id="nav">
<button>
<button id="menu-btn">
<section>
<div></div>
<div></div>
Expand Down
8 changes: 7 additions & 1 deletion script.js
Original file line number Diff line number Diff line change
@@ -1 +1,7 @@
// IK WEET HET NIET OKE
document.getElementById('menu-btn').addEventListener('click', function() {
document.querySelector('.mainmenu')?.classList.add('open');
});

document.getElementById('menu-btn2').addEventListener('click', function() {
document.querySelector('.mainmenu')?.classList.remove('open');
});
97 changes: 93 additions & 4 deletions style.css
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,7 @@ body {
border: none;
font-family: inherit;
font-size: inherit;
cursor: pointer;
}

#nav img {
Expand Down Expand Up @@ -531,6 +532,7 @@ iframe:last-of-type {
height: 100%;
width: auto;
object-fit: cover;
object-position: center;
grid-row: 1 / -1;
grid-column: 1 / -1;
}
Expand Down Expand Up @@ -585,17 +587,59 @@ img#refresh {
/* menu */

.mainmenu {
margin: 20px;
position: fixed;
width: 100vw;
height: auto;
background-color: white;
padding: 15px;
z-index: 1;
top: -160%;
transition: top .5s ease;
max-height: 640px;
overflow-y: scroll;
}

.mainmenu button {
color: black;
display: flex;
align-items: center;
background: none;
border: none;
font-family: inherit;
font-size: inherit;
font-size: 17px;
margin-bottom: 35px;
margin-left: -10px;
position: relative;
width: 24px;
height: 24px;
cursor: pointer;
}

.mainmenu.open {
top: 0;
}

#x-cont {
display: flex;
position: relative;
margin-right: 30px;
justify-content: center;
flex-direction: column;
}

.x-bar {
width: 1.25em;
height: 0.13em;
background-color: black;
position: absolute;
}

.x-bar:first-child {
transform: rotate(45deg);
}

.x-bar:last-child {
transform: rotate(-45deg);
}

.mainmenu a {
Expand All @@ -610,15 +654,60 @@ img#refresh {
#mm-prio1 {
font-family: Paradiso-Extra_Bold;
letter-spacing: -2px;
font-size: 45px;
font-size: 43px;
line-height: 50px;
margin-bottom: 20px;
}

#mm-prio2 {
font-family: Paradiso-Bold;
font-size: 20px;
font-size: 19px;
line-height: 30px;
margin-bottom: 20px;
}

#mm-prio3 {
font-family: Paradiso-Bold;
font-size: 19px;
margin-bottom: 60px;
}

#mm-prio3 a {
display: flex;
align-items: center;
}

#mm-prio3 img {
width: 34px;
border-radius: 25px;
margin: 5px 15px 3px 0px;
}

.ticket div h3, h4 {
margin: 0;
}

#socials {
height: 23px;
display: flex;
align-items: center;
margin-bottom: 30px;
}

#socials img {
height: 20px;
margin: 5px 25px 5px 0px;
}

#partners {
margin-bottom: 30px;
}

#partners img {
height: 23px;
margin: 5px 15px 5px 0px;
}

#heineken img {
height: 12px
}

0 comments on commit baf6928

Please sign in to comment.