diff --git a/src/css/style.css b/src/css/style.css index c4309b4..9fdd04c 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -29,182 +29,86 @@ body{ } /* versions mobiles, tablette à faire*/ -/*Version mobile V1*/ -@media only screen and (min-width: 500px) { - - - .logo img{ - position: absolute; - width: 50vw; - left: 25vw; - top: 13%; - z-index: 11; - } - - .mounts img { - object-fit: cover; - position: absolute; - height: 100%; - width: 100%; - pointer-events: none; - margin-left: -10px; - } - - #contourbuttonvalider{ +.logo img{ position: absolute; - border-radius: 45px; - left: -12vw; - top: 6vw; - height: 13vw; - width: 55vw; - background-color: var(--lightsedonca); - z-index: 15; - } - - .bouttonvalider{ - position: absolute; - height: 11vw; - width: 53vw; - top: 1vw; - left: 1vw; - border-radius: 40px; - background-color: #B130DE; - } - - #textjouer{ - font-family: Montserrat, impact, Arial Black; - position: absolute; - font-size: 10vw; - margin-top: -0.7vw; - margin-left: 13.5vw; - color: var(--lightsedonca); - } - - #ContainBottom { - position: absolute; - margin-left: 18vw; - height: 25vw; - width: auto; - bottom: 0; - z-index: 20; - } - - #clic{ - visibility: hidden; - } - - #card-conteneur{ - z-index: 20; - position: absolute; - left: 0vw; - height: 100%; - } - - .flex-container { - padding: 0; - margin: 0; - list-style: none; - display: flex; - height: 100%; - - -webkit-flex-flow: row wrap; - justify-content: space-around; - margin-top: -3vw; - } - -} - - -/*Grande version*/ -@media only screen and (min-width: 1280px) { - - .logo img{ - position: absolute; - width: 12vw; - left: 44vw; - top: 13%; - z-index: 11; - } - - .mounts img { - position: absolute; - height: 100%; - width: 100%; - pointer-events: none; - margin-left: -10px; - } - - #contourbuttonvalider{ - position: absolute; - border-radius: 45px; - left: 9.2vw; - top: 5.5vw; - height: 4vw; width: 12vw; - background-color: var(--lightsedonca); - z-index: 15; - } - - .bouttonvalider{ - position: absolute; - height: 3.4vw; - width: 11.4vw; - top: 0.3vw; - left: 0.3vw; - border-radius: 30px; - background-color: #B130DE; - } - - #textjouer{ - font-family: Montserrat, impact, Arial Black; - position: absolute; - font-size: 2.5vw; - margin-top: 0.2vw; - margin-left: 2.7vw; - color: var(--lightsedonca); - } - - #ContainBottom { - position: absolute; - margin-left: 25vw; - height: 12vw; - width: auto; - bottom: 0; - z-index: 20; - } - - #clic{ + left: 44vw; + top: 13%; + z-index: 11; +} +.mounts img { + position: absolute; + height: 100%; + width: 100%; + pointer-events: none; + margin-left: -10px; +} +#contourbuttonvalider{ +position: absolute; +border-radius: 45px; +left: 9.2vw; +top: 5.5vw; +height: 4vw; +width: 12vw; +background-color: var(--lightsedonca); +z-index: 15; +} + +.bouttonvalider{ position: absolute; - left: 55vw; - top : 7vw; - height: auto; - width: 15vw; - } - - #card-conteneur{ - z-index: 20; + height: 3.4vw; + width: 11.4vw; + top: 0.3vw; + left: 0.3vw; + border-radius: 30px; + background-color: #B130DE; +} +#textjouer{ + font-family: Montserrat, impact, Arial Black; position: absolute; - left: 0vw; - } - - .flex-container { - padding: 0; - margin: 0; - list-style: none; - - display: -webkit-box; - display: -moz-box; - display: -ms-flexbox; - display: -webkit-flex; - display: flex; - - -webkit-flex-flow: row wrap; - justify-content: space-around; - margin-top: -7vw; - } + font-size: 2.5vw; + margin-top: 0.2vw; + margin-left: 2.7vw; + color: var(--lightsedonca); +} +#ContainBottom { +position: absolute; +margin-left: 25vw; +height: 12vw; +width: auto; +bottom: 0; +z-index: 20; +} +#clic{ +position: absolute; +left: 55vw; +top : 7vw; +height: auto; +width: 15vw; +} +#card-conteneur{ +z-index: 20; +position: absolute; +left: 0vw; +} +.flex-container { + padding: 0; + margin: 0; + list-style: none; + + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + + -webkit-flex-flow: row wrap; + justify-content: space-around; + margin-top: -7vw; } + #pageGame{ visibility: hidden; } @@ -229,9 +133,9 @@ body{ .flex-item { background: var(--lightsedonca); - width: auto; - height: auto; - border-radius: 25px; + width: 10vw; + height: 15vw; + border-radius: 2vw; padding-right: 0.4vw; padding-left: 0.4vw; padding-bottom: 0.8vw; @@ -472,6 +376,10 @@ body{ .containcards{ height: 87vh; overflow-x:auto; + display: flex; + flex-wrap: wrap; + padding-left: 3vw; + padding-top: 2.5vw; } diff --git a/src/index.html b/src/index.html index 107c5f4..d90c6c8 100644 --- a/src/index.html +++ b/src/index.html @@ -117,7 +117,6 @@
- @@ -141,6 +140,232 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +