diff --git a/frontend/css/button.css b/frontend/css/button.css
index b10e00ecd89ced67a5ed87f76e0d30fdf4577d0a..4284afc3bd969c73fe01655e9d8ef36d4f6df961 100644
--- a/frontend/css/button.css
+++ b/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
diff --git a/frontend/css/index.css b/frontend/css/index.css
index 0ed59982d6aea4cfbe12fa32a2e5e0098c5149a6..3fc32a4408571bca4f0749321387305c276b3c95 100644
--- a/frontend/css/index.css
+++ b/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
diff --git a/frontend/css/menu.css b/frontend/css/menu.css
index ddd3f263610eb2edc31ca54b4b870de75d2a866f..67774ebba225c52d2b68d6a71c46a8ef5269b903 100644
--- a/frontend/css/menu.css
+++ b/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
diff --git a/frontend/css/style.css b/frontend/css/style.css
index 889ed60cc6e7d3b14e708b1b3c41eeb2b925b088..98f921e3b5d21385c0288cb6ffa9cb9df2cd11d6 100644
--- a/frontend/css/style.css
+++ b/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
diff --git a/frontend/index.html b/frontend/index.html
index 8be6d47851ca68ba05cca24aece704e8440f32f1..4b0f8520e6b38ada53b89db6ebce4df605c669b7 100644
--- a/frontend/index.html
+++ b/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">
diff --git a/frontend/js/index.js b/frontend/js/index.js
index 8db07795207bd5ebd39544c8f387cb617a66cd1f..20d3d461a08b2eb8164b4ae642b8090a0a824142 100644
--- a/frontend/js/index.js
+++ b/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(){