Add files via upload

WeLeBro · Sep 19, 2024 · 62de4e2 · 62de4e2
1 parent 21be2fd
commit 62de4e2
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 8 deletions.
diff --git a/index.html b/index.html
@@ -11,12 +11,14 @@
 <body>
 
     <header>
-        <button>Menu</button>
+        <section id="nav">
+            <button>Menu</button>
 
-        <Search>#</Search>
-
-        <a href="https://auth.paradiso.nl/authorize?response_type=id_token%20token&response_mode=query&prompt=login&redirect_uri=https://www.paradiso.nl/en/account/profile&client_id=paradiso&state=3kTW3arfPQJ&ui_locales=en">My Paradiso</a>
+            <img src="./images/search.svg" alt="search icon"></img>
 
+            <a href="https://auth.paradiso.nl/authorize?response_type=id_token%20token&response_mode=query&prompt=login&redirect_uri=https://www.paradiso.nl/en/account/profile&client_id=paradiso&state=3kTW3arfPQJ&ui_locales=en">My Paradiso</a>
+        </section>
+
         <h1>Paradiso</h1>
 
         <h2>56 years of concerts, club nights and <a href="https://www.paradiso.nl/en/subbrand/kosmos/2048821">culture</a></h2>
@@ -220,7 +222,7 @@ <h4>Starts 20:30</h4>
             </ul>
         </section>
 
-        <section>
+        <section id="sort">
             <ul>
                 <li>
                     <button>By date</button>

diff --git a/style.css b/style.css
@@ -3,7 +3,8 @@
 @font-face {
     font-family: 'Paradiso-Regular';
     src: url('./fonts/paradiso_regular.woff2');
-  }
+    font-weight: 400;
+}
 
 @font-face {
     font-family: 'Paradiso-Light';
@@ -18,8 +19,8 @@
 @font-face {
     font-family: 'Paradiso-Extra_Bold';
     src: "./fonts/paradiso_extra_bold.woff2";
-  }
-  
+}
+
 /* VARIABLES */
 
 :root {
@@ -36,6 +37,70 @@ body {
     color: var(--text-color);
 }
 
+/* HEADER */
+
+#nav {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 2em;
+    min-height: 2em;
+    margin: .7em .3em;
+}
+
+#nav a {
+    color: var(--text-color);
+    text-decoration: none;
+}
+
+#nav button {
+    color: var(--text-color);
+    background: none;
+    border: none;
+    font-family: inherit;
+    font-size: inherit;
+}
+
+#nav img {
+    filter: invert(1);
+    min-height: 30px;
+}
+
+h1 {
+    font-family: "Paradiso-Bold";
+    font-size: 13em;
+    margin: 0 .1em;
+}
+
+header > h2 {
+    text-align: center;
+    margin: 0 1em 3em 1em;
+}
+
+/* MAIN */
+
 main img {
     max-width: 20em;
+}
+
+#sort ul {
+    background-color: black;
+    display: flex;
+    gap: 3px;
+    margin: 1em 0;
+    list-style: none;
+}
+
+#sort li > button {
+    color: var(--text-color);
+    background: grey;
+    border: none;
+    font-family: inherit;
+    font-size: inherit;
+}
+
+main > section > ul > li > p {
+    background-color: black;
+    border-radius: 25px;
+    padding: .8em;
 }