version mobile

frontend/css/button.css

@@ -30,7 +30,6 @@
     position: relative;
     left: -4px;
     top: -1px;
-    
     background-color: rgba(255,27,0,1);
     text-align: center;
     -webkit-transform: skew(-42deg) translate(300px,0);
@@ -206,4 +205,17 @@
   .btn-2:hover:after{
     width:100%;
     transition:800ms ease all;
+  }
+
+
+  @media screen and (max-width: 600px) {
+
+    p.css-button-text {
+      font-size: 5vw;
+    }
+
+    .css-button-inner-text {
+      font-size: 5vw;
+    }
+
   }
\ No newline at end of file

frontend/css/index.css

@@ -119,8 +119,8 @@ main {
     position: relative;
     left: 50%;
     width: 75%;
-    margin-top: 10vw;
-    margin-bottom: 10vw;
+    margin-top: 5vw;
+    margin-bottom: 5vw;
     background-color: rgba(0, 0, 0, 0.597);
     backdrop-filter: blur(20px);
     border-radius: 10px;
@@ -132,12 +132,15 @@ main {
 #title{
 
     font-size: 4vw;
+    padding-left: 2vw;
 
 }
 
 #text{
     margin-top: 2vh;
     margin-bottom: 2vh;
+    padding-left: 2vw;
+    padding-right: 2vw;
     font-size: 2vw;
 
 }
@@ -201,7 +204,95 @@ footer > p {
     color: white;
 }
 
+iframe {
+    border: none;
+    position: relative;
+    left: 50%;
+    width: 50%;
+    height: 30vw;
+    transform: translate(-50%);
+}
+
 
 @media screen and (max-width: 600px) {
     
+
+    .fill {
+    
+        width: 25vw;
+        height: 10vw;
+        font-size: 6vw;
+        margin-top: 2.5vh;
+        
+    }
+    
+    #fill {
+        width: 50vw;
+        display: none;
+    }
+
+    #desc {
+        width: 100%;
+        border-radius: 0;
+    }
+
+    #title{
+        font-size: 10vw;
+        padding-left: 2vw;
+    }
+    
+    #text{
+        font-size: 6vw;
+    }
+
+    #prices{
+        flex-direction: column;
+    }
+
+
+    .box {
+
+        width: 60%;
+        height: 40%;
+        margin-left: 20%;
+        margin-right: 20%;
+        border-radius: 20px;
+        margin-top: 1vh;
+        margin-bottom: 1vh;
+    
+    
+    }
+    
+    .lititle {
+    
+        font-size: 5vw;
+        margin-top: 0vh;
+    }
+    
+    .prices {
+    
+        color: white;
+        font-size: 5vw;
+        text-align: center;
+    }
+
+
+    footer {
+        height: 25vw;
+    }
+
+    img{
+        margin-top: 2vh;
+        width: 6vw;
+        height: 6vw;
+    }
+
+
+    iframe {
+       
+        width: 100%;
+        height: 70vw;
+        overflow-y: hidden;
+      
+    }
 }
\ No newline at end of file

frontend/css/menu.css

@@ -99,15 +99,12 @@ nav {
 }
 
 #sac {
-    
     width: 100%;
     height: 7.5vh;
     position: relative;
     left:80%;
     top: 50%;
     transform: translate(0,-50%);
-
-
 }
 
 #sac::before {
@@ -162,4 +159,58 @@ nav {
 
 #back:hover{
     color: rgb(0, 102, 255);
+}
+
+@media screen and (max-width: 600px) {
+
+    nav {
+        background-image: url(../img/Dym19R.jpg);
+    }
+
+    #fill{
+        border-radius: 5px 5px;
+        margin-top: 6.5vh;
+        margin-left: 2vw;
+        color: gray;
+        width: 35vw;
+        height: 7vw;
+        font-size: 6vw;
+    }
+
+    #back {
+        position: absolute;
+        top: 0;
+        left: 20%;
+        box-shadow:inset 2px 2px 10px 0px rgba(255,255,255,.5), 2px 2px 10px 0px rgba(0,0,0,.1), 2px 2px 10px 0px rgba(0,0,0,.1);
+        width: 25vw;
+        height: 5vw; 
+        font-size: 3.5vw;
+        color: gray;
+        margin-top: 7vh;
+        
+    }
+
+
+    #sac {
+        left:70%;
+    }
+
+    .after{
+
+    
+        font-size: 5vw;
+        text-align: center;
+        background-color: rgba(255,27,0,1);
+
+        color: white;
+        width: 10%;
+        position: relative;
+        left: 70%;
+        transform: translateX(-50%);
+        font-size: large;
+        border-radius: 20px 20px;
+    }
+
+    
+
 }
\ No newline at end of file

frontend/css/style.css

@@ -53,8 +53,6 @@ input:focus {
     width: 100vw;
     padding-top: 5vh;
     padding-bottom: 5vh;
-
-
 }
 
 .box {
@@ -95,11 +93,6 @@ input:focus {
     border-radius: 100%;
 }
 
-
-
-
-
-
 .typebox {
 
     display: flex;
@@ -110,13 +103,32 @@ input:focus {
 }
 
 .type {
-
-  
     width: 4vw;
     height: 1vw;
-    
     margin-left: 5px;
     margin-right: 2px;
-    
+}
+
+
+@media screen and (max-width: 600px) {
+    .tab {
+        grid-template-columns: auto auto;
+        gap:20px;
+    }
+
+    .box {
+        width: 45vw;
+        height: 45vw;
+    }
+
+
+    .type {
+        width: 16vw;
+        height: 4vw;
+ 
+    }
 
+    input {
+        width: 75vw;
+    }
 }
\ No newline at end of file

frontend/index.html

@@ -24,9 +24,9 @@
         <div id = "sub"></div>
 
         <div id="desc">
-            <p id="title">Description</p>
+            <p id="title">Welcome !</p>
             <p id= "text">
-                This website is a webshop where you can buy pokemons to play with on your switch. You 
+                PokeShop is made for you, here you can buy pokemons to play with on your switch. You 
                 can buy every pokemon from the official pokedex and chose their attacks and talents,
                 you can also have it in shiny if you want. 
 
@@ -34,6 +34,10 @@
 
         </div>
 
+
+        <iframe width="420" height="315"
+        src="https://www.youtube.com/embed/yBNxTE5sMpA">
+        </iframe> 
        
         <div id = "prices">
 

frontend/js/index.js

@@ -86,8 +86,6 @@
 
             button.onclick = function(){
 
-                
-
                 let pokemon = document.getElementById(i).children;
               
                 let name = pokemon[1].innerHTML;
@@ -180,15 +178,6 @@
         }
     }
 
-
-    function sleep(milliseconds) {
-        const date = Date.now();
-        let currentDate = null;
-        do {
-          currentDate = Date.now();
-        } while (currentDate - date < milliseconds);
-    }
-
     
     function scrollEffect(){