everything's good besides mobie

Zakinane · May 29, 2024 · c83d9c3 · c83d9c3
1 parent 1df4fae
commit c83d9c3
Show file tree

Hide file tree

Showing 3 changed files with 150 additions and 46 deletions.
diff --git a/game/game.css b/game/game.css
@@ -80,6 +80,7 @@ a:hover {
   .container {
     width: 100vw;
     height: 100vh;
+    /*???*/
   }
   h5{
     display: none;

diff --git a/index.html b/index.html
@@ -30,7 +30,7 @@ <h5>SHOOT</h5>
           <img src="img/SoundON.png" class="SoundButton" />
           <audio src="assets/gameIntro.mp3" autoplay="true"></audio>
         </div>
-        <div>
+        <div class="Coded-by">
           Coded by
           <a href="https://github.com/Zakinane" target="_blank">Zak</a>.
         </div>

diff --git a/style.css b/style.css
@@ -2,6 +2,8 @@
   font-family: "Kraby Patty";
   src: url(assets/Krabby\ Patty.ttf);
 }
+
+/*ALL*/
 * {
   margin: 0px;
 }
@@ -19,38 +21,165 @@ a {
 a:hover {
   cursor: url("img/cursor/cursorHover.png"), auto;
 }
+.Start {
+  padding: 10px;
+  z-index: 101;
+  position: fixed;
+  bottom: 40%;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 125px;
+  background-color: rgb(255, 255, 255);
+  text-align: center;
+  border: solid rgb(132, 132, 132) 3px;
+  animation: clignotte alternate-reverse 1s infinite;
+}
+.screen {
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-image: url("img/title.png");
+  height: 100%;
+  animation: fade-in 6s ease-in forwards;
+}
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+    background-color: #051630;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.title {
+  z-index: 100;
+  position: fixed;
+  top: -500px;
+  left: 50%;
+  transform: translateX(-50%);
+  padding-top: 40px;
+  animation: moveDown 5s ease-in forwards;
+  animation-delay: 5s;
+}
+@keyframes moveDown {
+  0% {
+    top: -500px;
+  }
+  100% {
+    top: 10%;
+  }
+}
+@keyframes clignotte {
+  from {opacity: 0;}
+  to {opacity: 1;}
+}
+
+
+
 /*Mobile*/
-@media screen and (min-width: 320px) {
+@media screen and (max-width: 768px) {
+  .SoundButton {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    height: 40px;
+  }
+  .Coded-by{
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    height: 40px;
+  }
+  .credits {
+    display: none;
+  }
+  .controls {
+    display: none;
+  }
+  .controlsPic {
+   display: none;
+  }
+  .controlsPicture {
+    display: none;
+  }
+  .container {
+    width: 100vw;
+    height: 100vh;
+    /*???*/
+  }
+  h5{
+    display: none;
+  }
+  H2{
+    display: none;
+  }
+.title{
+  width: 200px;
+}
+.ReplayIntro {
+  display: none;
+}
 }
 
 /*Tablette*/
-@media screen and (min-width: 768px) {
+@media screen and (max-width: 1024px) {
+  .credits {
+    color: white;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .controls {
+    color: green;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+  }
+  .controlsPic {
+    display: flex;
+    gap: 20px;
+    align-items: center;
+    color: white;
+  }
+  .controlsPicture {
+    height: 30px;
+  }
+  .container {
+    width: 100vw;
+    height: 100vh;
+    display: grid;
+    grid-template-columns: 1fr 2fr 1fr;
+  }
+
+.title {
+  width: 400px;
+}
+.SoundButton {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  height: 80px;
+  cursor: url("img/cursor/cursorHover.png"), auto;
+}
+.ReplayIntro {
+  position: absolute;
+  top: 100px;
+  right: 10px;
+  cursor: url("img/cursor/cursorHover.png"), auto;
 }
+}
+
+
 
 /*PC*/
-@media screen and (min-width: 1200px) {
+@media screen and (min-width: 1024px) {
   .container {
     width: 100vw;
     height: 100vh;
     display: grid;
     grid-template-columns: 1fr 1.5fr 1fr;
   }
-  .screen {
-    background-repeat: no-repeat;
-    background-size: cover;
-    background-image: url("img/title.png");
-    height: 100%;
-    animation: fade-in 6s ease-in forwards;
-  }
-  @keyframes fade-in {
-    0% {
-      opacity: 0;
-      background-color: #051630;
-    }
-    100% {
-      opacity: 1;
-    }
-  }
+
   .title {
     z-index: 100;
     position: fixed;
@@ -62,32 +191,6 @@ a:hover {
     animation: moveDown 5s ease-in forwards;
     animation-delay: 5s;
   }
-  @keyframes moveDown {
-    0% {
-      top: -500px;
-    }
-    100% {
-      top: 10%;
-    }
-  }
-  .Start {
-    padding: 10px;
-    z-index: 101;
-    position: fixed;
-    bottom: 40%;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 125px;
-    background-color: rgb(255, 255, 255);
-    text-align: center;
-    border: solid rgb(132, 132, 132) 3px;
-    animation: clignotte alternate-reverse 1s infinite;
-  }
-  @keyframes clignotte {
-    from {opacity: 0;}
-    to {opacity: 1;}
-  }
-
   .credits {
     color: white;
     display: flex;