From 60e28a312fce7ae68d6ab426c4dba519a43ca3a1 Mon Sep 17 00:00:00 2001
From: "Benjamin.sitbon" <benjamin.sitbon@etu.hesge.ch>
Date: Sun, 9 May 2021 23:21:31 +0200
Subject: [PATCH] version mobile
---
frontend/css/button.css | 14 +++++-
frontend/css/index.css | 95 ++++++++++++++++++++++++++++++++++++++++-
frontend/css/menu.css | 57 +++++++++++++++++++++++--
frontend/css/style.css | 34 ++++++++++-----
frontend/index.html | 8 +++-
frontend/js/index.js | 11 -----
6 files changed, 189 insertions(+), 30 deletions(-)
diff --git a/frontend/css/button.css b/frontend/css/button.css
index b10e00e..4284afc 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 0ed5998..3fc32a4 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 ddd3f26..67774eb 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 889ed60..98f921e 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 8be6d47..4b0f852 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 8db0779..20d3d46 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(){
--
GitLab