AJOUT btn règles et Code éthique CSS

Golfier
theo 5 years ago
parent 7c6b343cc2
commit ea982e3760

Binary file not shown.

@ -0,0 +1,7 @@
{
"ExpandedNodes": [
"",
"\\src"
],
"PreviewInSolutionExplorer": false
}

Binary file not shown.

@ -0,0 +1,236 @@
#pageAccueil {
visibility: visible;
}
#cloud {
z-index: 10
}
#mount1 {
z-index: 11;
}
#mount2 {
z-index: 10;
}
/*Bouton info*/
#infosec{
z-index:15;
}
#info {
color: #B7B7B7;
text-decoration: none;
font-size: 45px;
}
#info:hover {
color: #E4E8E7;
}
.activity {
padding: 0;
margin: 2em 0;
list-style: none;
}
li {
-webkit-transition: box-shadow 0.2s ease;
-moz-transition: box-shadow 0.2s ease;
transition: box-shadow 0.2s ease;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
border-radius: 50%;
color: #B7B7B7;
display: inline-block;
font-size: 0.889em;
height: 3em;
margin: 0 1em 1em;
position: relative;
text-align: center;
text-transform: lowercase;
width: 3em;
line-height: 3em;
}
li a {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
li:hover {
box-shadow: 0 0 0 7px #B7B7B7;
}
li:before {
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
transition: all 0.2s ease;
border-radius: 50%;
bottom: 0;
box-shadow: 0 0 0 4px #B7B7B7;
content: '';
left: 0;
position: absolute;
right: 0;
top: 0;
background-color: #B130DE;
}
#infosec {
position: absolute;
left: 57%;
top: 35%;
}
/*Les règles popups*/
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
z-index: 21;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
top:25%;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: #06D85F;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
/* J'ai trop avancé, mode multi*/
#containpseudo {
position: absolute;
height: 15%;
width: 30%;
z-index: 12;
left: 35%;
top: 30%;
}
#pseudoenter {
background-color: red;
height: 100%;
border-radius: 45px;
background-color: #B130DE;
}
#inputpseudo {
position: absolute;
width: 99%;
height: 65%;
border-radius: 30px;
font-size: 3vw;
background-color: transparent;
-moz-appearance: none;
text-align: center;
color: #707070;
border-color: transparent;
font-family: impact, Arial Black;
z-index: 11;
}
#fondinput {
background-color: red;
position: absolute;
width: 97%;
background-color: var(--lightsedonca);
height: 90%;
border-radius: 40px;
left: 1.5%;
top: 5%;
z-index: 10;
}
#buttonadd {
position: absolute;
top: 30%;
right: -12%;
height: 3vw;
width: 3vw;
border-radius: 2vw;
background-color: #B130DE;
z-index: 18;
}
#textplus {
font-size: 3vw;
font-family: arial, Arial Black;
position: absolute;
margin-top: -0.15vw;
margin-left: 0.65vw;
color: var(--lightprima);
}
#containplayers {
position: absolute;
background-color: transparent;
color: var(--lightsedonca);
width: 15vw;
height: 20vw;
z-index: 17;
right: 0%;
top: 8vw;
}
.pseudojoueur {
float: right;
margin-top: 0px;
margin-bottom: 3%;
margin-right: 10%;
font-family: Lucida Console, Arial Black, Arial;
font-size: 2vw;
}
#pseudolist {
width: 100%;
height: 1.7vw;
}

@ -0,0 +1,15 @@
#pageGame {
visibility: hidden;
}
.menuhaut {
height: 10vh;
width: inherit;
display: flex;
}
.retourstp {
position: absolute;
}

@ -0,0 +1,311 @@
/*Demi Ecran*/
@media screen and (max-width: 960px) and (min-height: 600px) {
.anneau {
box-sizing: border-box;
background-color: #FFD100;
border-radius: 3vw;
height: inherit;
width: inherit;
display: table-cell;
vertical-align: middle;
}
.rondinterieur {
background-color: var(--lightsedonca);
height: 3vw;
width: 3vw;
display: table;
margin: 0 auto;
border-radius: 3vw;
}
.containform {
box-sizing: content-box;
height: 6vw;
width: 6vw;
display: table-cell;
vertical-align: middle;
}
.rond {
display: table;
margin: 0 auto;
background-color: #FFD100;
height: 3vw;
width: 3vw;
border-radius: 3vw;
}
/* PARTIE CARRE */
.carre {
background-color: #30C0DE;
height: inherit;
width: inherit;
display: table-cell;
vertical-align: middle
}
.carreinterieur {
background-color: var(--lightsedonca);
height: 3vw;
width: 3vw;
display: table;
margin: 0 auto;
}
.pcarre {
display: table;
margin: 0 auto;
background-color: #30C0DE;
height: 3vw;
width: 3vw;
}
/* PARTIE TRIANGLE */
.triangle {
display: table;
margin: 0 auto;
border-left: 2.5vw solid transparent;
border-right: 2.5vw solid transparent;
border-bottom: 5vw solid #DEA430;
}
.trianglerinterieur {
position: absolute;
margin-left: -1.5vw;
margin-top: 1.25vw;
border-left: 1.5vw solid transparent;
border-right: 1.5vw solid transparent;
border-bottom: 3vw solid var(--lightsedonca);
}
.ptriangle {
display: table;
margin: 0 auto;
margin-top: 0.75vw;
border-left: 1.5vw solid transparent;
border-right: 1.5vw solid transparent;
border-bottom: 3vw solid #DEA430;
}
/* TRAPEZE */
.trapeze {
bottom: 0px;
height: 0;
margin-top: 2.58vw;
border-left: 1.5vw solid transparent;
border-right: 1.5vw solid transparent;
border-top: 3vw solid #6FDE30;
}
.triangletrapeze {
padding-top: 0.1vw;
position: absolute;
border-left: 3vw solid transparent;
border-right: 3vw solid transparent;
border-bottom: 2.5vw solid #6FDE30;
}
.trapezeinte {
position: absolute;
margin-top: 3vw;
margin-left: 1.25vw;
width: 2vw;
border-left: 0.75vw solid transparent;
border-right: 0.75vw solid transparent;
border-top: 1.5vw solid var(--lightsedonca);
z-index: 15;
}
.triangletrapezeinte {
position: absolute;
margin-top: 1.45vw;
margin-left: 1.25vw;
padding-top: 0.1vw;
border-left: 1.75vw solid transparent;
border-right: 1.75vw solid transparent;
border-bottom: 1.5vw solid var(--lightsedonca);
z-index: 15;
}
.trapezep {
display: table;
margin: 0 auto;
margin-top: 2vw;
width: 2vw;
border-left: 0.75vw solid transparent;
border-right: 0.75vw solid transparent;
border-top: 1.5vw solid #6FDE30;
z-index: 15;
}
.triangletrapezep {
position: absolute;
margin-top: 0.55vw;
margin-left: 1.25vw;
border-left: 1.75vw solid transparent;
border-right: 1.75vw solid transparent;
border-bottom: 1.5vw solid #6FDE30;
z-index: 15;
}
.losangephaut {
display: table;
margin: 0 auto;
margin-top: -3vw;
border-left: 3vw solid transparent;
border-right: 3vw solid transparent;
border-bottom: 3vw solid #B130DE;
}
.losangepbas {
position: absolute;
border-left: 3vw solid transparent;
border-right: 3vw solid transparent;
border-top: 3vw solid #B130DE;
}
.losangephauti {
display: table;
margin: 0 auto;
margin-top: -1.5vw;
border-left: 1.5vw solid transparent;
border-right: 1.5vw solid transparent;
border-bottom: 1.5vw solid var(--lightsedonca);
}
.losangepbasi {
position: absolute;
margin-left: 1.5vw;
border-left: 1.5vw solid transparent;
border-right: 1.5vw solid transparent;
border-top: 1.5vw solid var(--lightsedonca);
}
.losangephautc {
display: table;
margin: 0 auto;
margin-top: -1.5vw;
border-left: 1.5vw solid transparent;
border-right: 1.5vw solid transparent;
border-bottom: 1.5vw solid #B130DE;
}
.losangepbasc {
position: absolute;
margin-left: 1.5vw;
border-left: 1.5vw solid transparent;
border-right: 1.5vw solid transparent;
border-top: 1.5vw solid #B130DE;
}
.buttonretour {
position: relative;
height: 4vh;
width: 4vh;
border-radius: 55vw;
background-color: var(--lightsedonca);
z-index: 5;
margin-left: 2vw;
top: 1.75vw;
}
.flex-item {
background: var(--lightsedonca);
width: 15vw;
height: 18vw;
border-radius: 2vw;
padding-right: 0.4vw;
padding-left: 0.4vw;
padding-bottom: 0.8vw;
padding-top: 0.4vw;
list-style: none;
display: flex;
margin-right: 1.75vw;
margin-left: 1.75vw;
-webkit-flex-flow: row wrap;
justify-content: space-around;
}
.item-form {
width: 4vw;
padding-left: 0.1vw;
margin-top: 0.5vw;
height: 4vw;
border-radius: 10px;
background-color: var(--lighttercia);
}
.containcards {
height: 87vh;
overflow-x: auto;
display: flex;
flex-wrap: wrap;
padding-left: 10vw;
padding-top: 2.5vw;
}
.logop2 img {
width: 20vh;
padding-top: 1vh;
position: relative;
left: 38vw;
}
.txt {
position: absolute;
font-family: Arial Black;
color: var(--lightprima);
font-size: 2.5vw;
left: 1vw;
top: -1vh;
}
.logo img {
position: absolute;
width: 25vw;
left: 38vw;
top: 13%;
z-index: 11;
}
.mounts img {
position: absolute;
height: 100%;
width: 100%;
pointer-events: none;
margin-left: -1vw;
margin-top: -1vw;
object-fit: cover;
}
#contourbuttonvalider {
position: absolute;
border-radius: 45px;
left: 3vw;
top: 5.5vw;
height: 9vw;
width: 25vw;
background-color: var(--lightsedonca);
z-index: 15;
}
.bouttonvalider {
position: absolute;
height: 6.8vw;
width: 22.8vw;
top: 1.1vw;
left: 1.1vw;
border-radius: 30px;
background-color: #B130DE;
}
#textjouer {
font-family: Montserrat, impact, Arial Black;
position: absolute;
font-size: 5vw;
margin-top: 0.2vw;
margin-left: 5.5vw;
color: var(--lightsedonca);
}
}

@ -0,0 +1,311 @@
/*DemTéléphone 1i Ecran*/
@media screen and (max-width: 550px) and (max-height: 850px) {
.anneau {
box-sizing: border-box;
background-color: #DE3030;
border-radius: 3vw;
height: inherit;
width: inherit;
display: table-cell;
vertical-align: middle;
}
.rondinterieur {
background-color: var(--lightsedonca);
height: 3vw;
width: 3vw;
display: table;
margin: 0 auto;
border-radius: 3vw;
}
.containform {
box-sizing: content-box;
height: 6vw;
width: 6vw;
display: table-cell;
vertical-align: middle;
}
.rond {
display: table;
margin: 0 auto;
background-color: #DE3030;
height: 3vw;
width: 3vw;
border-radius: 3vw;
}
/* PARTIE CARRE */
.carre {
background-color: #30C0DE;
height: inherit;
width: inherit;
display: table-cell;
vertical-align: middle
}
.carreinterieur {
background-color: var(--lightsedonca);
height: 3vw;
width: 3vw;
display: table;
margin: 0 auto;
}
.pcarre {
display: table;
margin: 0 auto;
background-color: #30C0DE;
height: 3vw;
width: 3vw;
}
/* PARTIE TRIANGLE */
.triangle {
display: table;
margin: 0 auto;
border-left: 2.5vw solid transparent;
border-right: 2.5vw solid transparent;
border-bottom: 5vw solid #DEA430;
}
.trianglerinterieur {
position: absolute;
margin-left: -1.5vw;
margin-top: 1.25vw;
border-left: 1.5vw solid transparent;
border-right: 1.5vw solid transparent;
border-bottom: 3vw solid var(--lightsedonca);
}
.ptriangle {
display: table;
margin: 0 auto;
margin-top: 0.75vw;
border-left: 1.5vw solid transparent;
border-right: 1.5vw solid transparent;
border-bottom: 3vw solid #DEA430;
}
/* TRAPEZE */
.trapeze {
bottom: 0px;
height: 0;
margin-top: 2.58vw;
border-left: 1.5vw solid transparent;
border-right: 1.5vw solid transparent;
border-top: 3vw solid #6FDE30;
}
.triangletrapeze {
padding-top: 0.1vw;
position: absolute;
border-left: 3vw solid transparent;
border-right: 3vw solid transparent;
border-bottom: 2.5vw solid #6FDE30;
}
.trapezeinte {
position: absolute;
margin-top: 3vw;
margin-left: 1.25vw;
width: 2vw;
border-left: 0.75vw solid transparent;
border-right: 0.75vw solid transparent;
border-top: 1.5vw solid var(--lightsedonca);
z-index: 15;
}
.triangletrapezeinte {
position: absolute;
margin-top: 1.45vw;
margin-left: 1.25vw;
padding-top: 0.1vw;
border-left: 1.75vw solid transparent;
border-right: 1.75vw solid transparent;
border-bottom: 1.5vw solid var(--lightsedonca);
z-index: 15;
}
.trapezep {
display: table;
margin: 0 auto;
margin-top: 2vw;
width: 2vw;
border-left: 0.75vw solid transparent;
border-right: 0.75vw solid transparent;
border-top: 1.5vw solid #6FDE30;
z-index: 15;
}
.triangletrapezep {
position: absolute;
margin-top: 0.55vw;
margin-left: 1.25vw;
border-left: 1.75vw solid transparent;
border-right: 1.75vw solid transparent;
border-bottom: 1.5vw solid #6FDE30;
z-index: 15;
}
.losangephaut {
display: table;
margin: 0 auto;
margin-top: -3vw;
border-left: 3vw solid transparent;
border-right: 3vw solid transparent;
border-bottom: 3vw solid #B130DE;
}
.losangepbas {
position: absolute;
border-left: 3vw solid transparent;
border-right: 3vw solid transparent;
border-top: 3vw solid #B130DE;
}
.losangephauti {
display: table;
margin: 0 auto;
margin-top: -1.5vw;
border-left: 1.5vw solid transparent;
border-right: 1.5vw solid transparent;
border-bottom: 1.5vw solid var(--lightsedonca);
}
.losangepbasi {
position: absolute;
margin-left: 1.5vw;
border-left: 1.5vw solid transparent;
border-right: 1.5vw solid transparent;
border-top: 1.5vw solid var(--lightsedonca);
}
.losangephautc {
display: table;
margin: 0 auto;
margin-top: -1.5vw;
border-left: 1.5vw solid transparent;
border-right: 1.5vw solid transparent;
border-bottom: 1.5vw solid #B130DE;
}
.losangepbasc {
position: absolute;
margin-left: 1.5vw;
border-left: 1.5vw solid transparent;
border-right: 1.5vw solid transparent;
border-top: 1.5vw solid #B130DE;
}
.buttonretour {
position: relative;
height: 4vh;
width: 4vh;
border-radius: 55vw;
background-color: var(--lightsedonca);
z-index: 5;
margin-left: 9.5vw;
top: 6.75vw;
}
.flex-item {
background: var(--lightsedonca);
width: 19vw;
height: 30vw;
border-radius: 2vw;
padding-right: 0.4vw;
padding-left: 0.4vw;
padding-bottom: 0.8vw;
padding-top: 0.4vw;
list-style: none;
display: flex;
margin-right: 1.75vw;
margin-left: 1.75vw;
-webkit-flex-flow: row wrap;
justify-content: space-around;
}
.item-form {
width: 5vw;
padding-left: 0.1vw;
margin-top: 1.5vw;
height: 5vw;
border-radius: 10px;
background-color: var(--lighttercia);
}
.containcards {
height: 87vh;
overflow-x: auto;
display: flex;
flex-wrap: wrap;
padding-left: 2.5vw;
padding-top: 2.5vw;
}
.logop2 img {
width: 20vh;
padding-top: 1vh;
position: relative;
left: 27vw;
}
.txt {
position: absolute;
font-family: Arial Black;
color: var(--lightprima);
font-size: 5.5vw;
left: 2.25vw;
top: -1vh;
}
.logo img {
position: absolute;
width: 45vw;
left: 28vw;
top: 13%;
z-index: 11;
}
.mounts img {
position: absolute;
height: 100%;
width: 100%;
pointer-events: none;
margin-left: -1vw;
margin-top: -1vw;
object-fit: cover;
}
#contourbuttonvalider {
position: absolute;
border-radius: 45px;
left: -10vw;
top: 5.5vw;
height: 15vw;
width: 50vw;
background-color: var(--lightsedonca);
z-index: 15;
}
.bouttonvalider {
position: absolute;
height: 13vw;
width: 47vw;
top: 1.1vw;
left: 1.5vw;
border-radius: 30px;
background-color: #B130DE;
}
#textjouer {
font-family: Montserrat, impact, Arial Black;
position: absolute;
font-size: 10vw;
margin-top: 0.2vw;
margin-left: 12.5vw;
color: var(--lightsedonca);
}
}

@ -0,0 +1,311 @@
/*Ecran*/
@media screen and (min-width: 960px) {
.anneau {
box-sizing: border-box;
background-color: #DE3030;
border-radius: 3vw;
height: inherit;
width: inherit;
display: table-cell;
vertical-align: middle;
}
.rondinterieur {
background-color: var(--lightsedonca);
height: 3vw;
width: 3vw;
display: table;
margin: 0 auto;
border-radius: 3vw;
}
.containform {
box-sizing: content-box;
height: 6vw;
width: 6vw;
display: table-cell;
vertical-align: middle;
}
.rond {
display: table;
margin: 0 auto;
background-color: #DE3030;
height: 3vw;
width: 3vw;
border-radius: 3vw;
}
/* PARTIE CARRE */
.carre {
background-color: #30C0DE;
height: inherit;
width: inherit;
display: table-cell;
vertical-align: middle
}
.carreinterieur {
background-color: var(--lightsedonca);
height: 3vw;
width: 3vw;
display: table;
margin: 0 auto;
}
.pcarre {
display: table;
margin: 0 auto;
background-color: #30C0DE;
height: 3vw;
width: 3vw;
}
/* PARTIE TRIANGLE */
.triangle {
display: table;
margin: 0 auto;
border-left: 2.5vw solid transparent;
border-right: 2.5vw solid transparent;
border-bottom: 5vw solid #DEA430;
}
.trianglerinterieur {
position: absolute;
margin-left: -1.5vw;
margin-top: 1.25vw;
border-left: 1.5vw solid transparent;
border-right: 1.5vw solid transparent;
border-bottom: 3vw solid var(--lightsedonca);
}
.ptriangle {
display: table;
margin: 0 auto;
margin-top: 0.75vw;
border-left: 1.5vw solid transparent;
border-right: 1.5vw solid transparent;
border-bottom: 3vw solid #DEA430;
}
/* TRAPEZE */
.trapeze {
bottom: 0px;
height: 0;
margin-top: 2.58vw;
border-left: 1.5vw solid transparent;
border-right: 1.5vw solid transparent;
border-top: 3vw solid #6FDE30;
}
.triangletrapeze {
padding-top: 0.1vw;
position: absolute;
border-left: 3vw solid transparent;
border-right: 3vw solid transparent;
border-bottom: 2.5vw solid #6FDE30;
}
.trapezeinte {
position: absolute;
margin-top: 3vw;
margin-left: 1.25vw;
width: 2vw;
border-left: 0.75vw solid transparent;
border-right: 0.75vw solid transparent;
border-top: 1.5vw solid var(--lightsedonca);
z-index: 15;
}
.triangletrapezeinte {
position: absolute;
margin-top: 1.45vw;
margin-left: 1.25vw;
padding-top: 0.1vw;
border-left: 1.75vw solid transparent;
border-right: 1.75vw solid transparent;
border-bottom: 1.5vw solid var(--lightsedonca);
z-index: 15;
}
.trapezep {
display: table;
margin: 0 auto;
margin-top: 2vw;
width: 2vw;
border-left: 0.75vw solid transparent;
border-right: 0.75vw solid transparent;
border-top: 1.5vw solid #6FDE30;
z-index: 15;
}
.triangletrapezep {
position: absolute;
margin-top: 0.55vw;
margin-left: 1.25vw;
border-left: 1.75vw solid transparent;
border-right: 1.75vw solid transparent;
border-bottom: 1.5vw solid #6FDE30;
z-index: 15;
}
.losangephaut {
display: table;
margin: 0 auto;
margin-top: -3vw;
border-left: 3vw solid transparent;
border-right: 3vw solid transparent;
border-bottom: 3vw solid #B130DE;
}
.losangepbas {
position: absolute;
border-left: 3vw solid transparent;
border-right: 3vw solid transparent;
border-top: 3vw solid #B130DE;
}
.losangephauti {
display: table;
margin: 0 auto;
margin-top: -1.5vw;
border-left: 1.5vw solid transparent;
border-right: 1.5vw solid transparent;
border-bottom: 1.5vw solid var(--lightsedonca);
}
.losangepbasi {
position: absolute;
margin-left: 1.5vw;
border-left: 1.5vw solid transparent;
border-right: 1.5vw solid transparent;
border-top: 1.5vw solid var(--lightsedonca);
}
.losangephautc {
display: table;
margin: 0 auto;
margin-top: -1.5vw;
border-left: 1.5vw solid transparent;
border-right: 1.5vw solid transparent;
border-bottom: 1.5vw solid #B130DE;
}
.losangepbasc {
position: absolute;
margin-left: 1.5vw;
border-left: 1.5vw solid transparent;
border-right: 1.5vw solid transparent;
border-top: 1.5vw solid #B130DE;
}
.buttonretour {
position: relative;
height: 4vh;
width: 4vh;
border-radius: 55vw;
background-color: var(--lightsedonca);
z-index: 5;
margin-left: 2vw;
top: 1.75vw;
}
.flex-item {
background: var(--lightsedonca);
width: 10vw;
height: 15vw;
border-radius: 2vw;
padding-right: 0.4vw;
padding-left: 0.4vw;
padding-bottom: 0.8vw;
padding-top: 0.4vw;
list-style: none;
display: flex;
margin-right: 0.4vw;
margin-left: 0.4vw;
-webkit-flex-flow: row wrap;
justify-content: space-around;
}
.item-form {
width: 3vw;
padding-left: 0.1vw;
margin-top: 0.5vw;
height: 3vw;
border-radius: 10px;
background-color: var(--lighttercia);
}
.containcards {
height: 87vh;
overflow-x: auto;
display: flex;
flex-wrap: wrap;
padding-left: 3vw;
padding-top: 2.5vw;
}
.logop2 img {
width: 20vh;
padding-top: 1vh;
position: relative;
left: 43.5vw;
}
.txt {
position: absolute;
font-family: Arial Black;
color: var(--lightprima);
font-size: 1.5vw;
left: 0.4vw;
top: -1.6vh;
}
.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);
}
}

@ -0,0 +1,96 @@
:root{
/*couleur héhé*/
--lightprima: #DEDEDE;
--lightsedonca: #B7B7B7;
--lighttercia: #E6E6E6;
}
@font-face {
font-family: "Montserrat";
src: url("/fonts/MonstMontserrat-Black.woff") format("woff"),
url("/fonts/MonstMontserrat-Black.woff2") format("woff2");
}
a {
cursor: pointer;
z-index: 60;
}
body {
background-color: var(--lightprima);
height: 100%;
overflow-x: hidden;
overflow-y: hidden;
/*Desactiver la selection*/
-webkit-user-select: none; /* Chrome / Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE 10+ */
user-select: none;
}
#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;
}

File diff suppressed because it is too large Load Diff

@ -3,7 +3,13 @@
<head lang="fr">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>SwishGame</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/Resp1.css">
<link rel="stylesheet" href="css/Resp2.css">
<link rel="stylesheet" href="css/Resp3.css">
<link rel="stylesheet" href="css/PageDaccueil.css">
<link rel="stylesheet" href="css/PartieGame.css">
<script type="text/javascript" src="js/main.js"></script>
</head>
<body onload="ChoisirPseudo()">
@ -11,12 +17,22 @@
<div id="pageAccueil">
<div class="logo">
<div class="logo">
<a onclick="journuit()">
<img src="imgs/swishjour.png" id="imglogo">
</a>
</div>
<div id="infosec">
<div class="inner">
<ul class="activity">
<li>
<a id="info" href="#popup1">i</a>
</li>
</ul>
</div>
</div>
<div id="containpseudo">
<a onclick="lancerpartie()">
<div id="contourbuttonvalider">
@ -27,32 +43,43 @@
</a>
</div>
<div id="popup1" class="overlay">
<div class="popup">
<h2>Les Règles :</h2>
<a class="close" href="#">&times;</a>
<div class="content">
Swish : Jeu de 60 cartes composé chacun de billes et de cerceaux, de 4 couleurs
différentes possibles. 16 cartes sont posés sur une table et le joueur doit faire superposer
des cartes de manière que chaque bille soit dans le cerceau de même couleur dune autre
carte.
</div>
</div>
</div>
<!--
<div id="containpseudo">
<div id="pseudoenter">
<div id="fondinput">
<input onkeypress="ajouterplayer(event)" maxlength="12" id="inputpseudo">
</div>
</div>
<a onclick="EnvoyerNouveauNom()">
<div id="contourbuttonvalider">
<div class="bouttonvalider" >
<h1 id="textjouer">JOUER</h1>
</div>
<!--
<div id="containpseudo">
<div id="pseudoenter">
<div id="fondinput">
<input onkeypress="ajouterplayer(event)" maxlength="12" id="inputpseudo">
</div>
</div>
<a onclick="EnvoyerNouveauNom()">
<div id="contourbuttonvalider">
<div class="bouttonvalider" >
<h1 id="textjouer">JOUER</h1>
</div>
</div>
</a>
<div id="buttonadd">
<a onclick="addplayer()">
<h2 id="textplus">+</h2>
</a>
<div id="buttonadd">
<a onclick="addplayer()">
<h2 id="textplus">+</h2>
</a>
</div>
</div>
</div>
<div id="containplayers">
</div>
-->
<div id="containplayers">
</div>
-->
<div id="ContainBottom">
<!-- Forme : rond-->
@ -70,7 +97,7 @@
<div class="carre">
<div class="carreinterieur inté"></div>
</div>
</div>
</div>
<div class="containform">
<div class="pcarre"></div>
</div>
@ -80,7 +107,7 @@
<div class="triangle">
<div class="trianglerinterieur"></div>
</div>
</div>
</div>
<div class="containform">
<div class="ptriangle"></div>
</div>
@ -92,7 +119,7 @@
<div class="triangletrapeze"></div>
<div class="trapeze"></div>
</div>
<div class="containform">
<div class="triangletrapezep"></div>
<div class="trapezep"></div>
@ -111,44 +138,44 @@
<div class="losangepbasc"></div>
</div>
</div>
<div class="mounts">
<img src="imgs/lightcloud.png" id="cloud">
<img src="imgs/mount1.png" id="mount1">
<img src="imgs/mount2.png" id="mount2">
</div>
<img src="imgs/lightcloud.png" id="cloud">
<img src="imgs/mount1.png" id="mount1">
<img src="imgs/mount2.png" id="mount2">
</div>
</div>
<div id="pageGame">
<div class="menuhaut">
<div id="Redistribution">
<a onclick="creePartie()">
<div id="contourbuttonvalider">
<div class="bouttonvalider">
<h1 id="textjouer">RELANCER</h1>
</div>
<div id="pageGame">
<div class="menuhaut">
<div id="Redistribution">
<a onclick="creecarte()">
<div id="contourbuttonvalider">
<div class="bouttonvalider">
<h1 id="textjouer">RELANCER</h1>
</div>
</div>
</a>
</div>
</a>
</div>
<div class="logop2">
<a onclick="journuit()">
<img src="imgs/swishjour.png" id="imglogo2">
</a>
</div>
<a class="retourstp" onclick="retour()">
<div class="buttonretour">
<h1 class="txt">X</h1>
<div class="logop2">
<a onclick="journuit()">
<img src="imgs/swishjour.png" id="imglogo2">
</a>
</div>
<a class="retourstp" onclick="retour()">
<div class="buttonretour">
<h1 class="txt">X</h1>
</div>
</a>
</div>
</a>
</div>
<div id="containcards" class="containcards">
</div>
</div>
<div id="containcards" class="containcards">
</div>
</div>
</body>
</html>

Loading…
Cancel
Save