menu debut

index.html

@@ -11,6 +11,9 @@
         <script>0</script>
         <h1>Bloub Bloub Studio</h1>
         <nav>
+            <img id="menu-icon" src="/menu-burger.png" alt="menu icon" />
+        </nav>
+        <menu>
             <a href="/">
                 <img src="/forum-logo.svg" alt="forum" />
                 <h3>FORUM</h3>
@@ -20,16 +23,12 @@
                 <h3>STEAM</h3>
             </a>
             <a href="/">
-                <img src="/twitter-logo.png" alt="twitter" />
+                <img src="/youtube-logo.png" alt="youtube" />
                 <h3>TWITTER</h3>
             </a>
             <a href="/">
-                <img src="/instagram-logo.png" alt="instagram" />
-                <h3>INSTAGRAM</h3>
-            </a>
-            <a href="/">
-                <img src="/tik-tok-logo.png" alt="tik tok" />
-                <h3>TIK TOK</h3>
+                <img src="/twitter-logo.png" alt="twitter" />
+                <h3>TWITTER</h3>
             </a>
             <a href="/">
                 <img src="/email-logo.png" alt="email us" />
@@ -43,8 +42,7 @@
                 <img src="/press-kit-logo.png" alt="press kit" />
                 <h3>PRESS KIT</h3>
             </a>
-        </nav>
-        <h2>OUR GAME :</h2>
+        </menu>
         <main class="games">
             <a href="/game0.html" class="game">
                 <img src="/miniature.png" alt="GAME 0" />
@@ -107,9 +105,11 @@
                 </video>
             </a>
         </main>
+        <!--
         <div id="notif">
             <img id="notif-close" src="close.svg" alt="close button" onclick="document.getElementById('notif').style.display = 'none'" />
             <a href="/game0.html">BUY OUR LAST GAME NOW!</a>
         </div>
+        -->
     </body>
 </html>

style.css

@@ -7,13 +7,14 @@ h1, h2 {
     text-align: center;
 }
 
-nav {
+menu {
     display: flex;
     flex-wrap: wrap;
     color: white;
     text-align: center;
+    padding: 0px;
 }
-nav a {
+menu a {
     margin-left: auto;
     margin-right: auto;
     padding-left: 1rem;
@@ -21,20 +22,46 @@ nav a {
     padding-bottom: 1rem;
 }
 
-nav a img {
+menu a img {
     width: 60px;
     height: 60px;
 }
-nav a:hover img {
+menu a:hover img {
     width: 75px;
     height: 75px;
     transition: 0.1s ease;
 }
 
-nav a h3 {
+menu a h3 {
     margin: 0px;
 }
 
+nav {
+    display: none;
+}
+
+@media (max-width: 900px) {
+    menu {
+        display: none;
+    }
+    nav {
+        display: block;
+        color: red;
+        margin: 1rem;
+        position: absolute;
+        top: 0px;
+        right: 0px;
+    }
+    h1 {
+        padding-right: 50px;
+    }
+}
+
+#menu-icon {
+    margin-top: 10px;
+    width: 42px;
+}
+
 #notif {
     position: fixed;
     margin: 1rem;