serny.s
/
MSJS_WANG_SERNY
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

commit css

master
SERNY Sacha 3 years ago
parent
07e176a641
commit
314c61f87c
2 changed files with 38 additions and 32 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 29
      machine.html
  2. 41
      stylepagecss/style.css

29
machine.html
View File

@ -1,6 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="fr"> <html lang="fr">
<!-- <!--
id="mise" entrer une valeur (si possible input) id="mise" entrer une valeur (si possible input)
id="machine_coins" affiche jetons machines id="machine_coins" affiche jetons machines
@ -10,35 +10,38 @@ qui sont forcément 3 enfants
id=""valider bouton pour lancer peut importe ce que c'update_stats id=""valider bouton pour lancer peut importe ce que c'update_stats
etc... etc...
--> -->
<head> <head>
<title>Machine à sous NSI</title> <title>Machine à sous NSI</title>
<meta charset="utf-8"> <meta charset="utf-8">
<link href="stylepagecss/menu.css" rel="stylesheet"> <link href="stylepagecss/style.css" rel="stylesheet">
<link rel="icon" type="image/jpg" sizes="16x16" href="icon.jpg"> <link rel="icon" type="image/jpg" sizes="16x16" href="icon.jpg">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head> </head>
<body > <body >
<div> <div>
<a href="index.html" class="title">MACHINE A SOUS NSI</a> <a href="index.html" class="title">MACHINE A SOUS NSI</a>
</div> </div>
<div class="cadre_rouleaux"> <div class="option">
<h2>machine coins : <h2 id="machine_coins"> </h2></h2>
<h2>player coins : <h2 id="player_coins"> </h2></h2>
<p id="gain"></p>
</div>
<div class="cadre_rouleaux">
<div class="rouleaux"> <div class="rouleaux">
<div></div> <div></div>
<div></div> <div></div>
<div></div> <div></div>
</div> </div>
</div> </div>
<div class="button"> <div class="button">
<button onclick="regles()" id="regles">Regle</button> <button onclick="regles()" id="regles">Regle</button>
<button onclick="jeu()" id="valider">Lancer</button> <button onclick="jeu()" id="valider">Lancer</button>
</div> <div class="mise">
<div class="option"> <label>Mise : </label><input id="mise">
<h2>machine coins : <h2 id="machine_coins"> </h2></h2> </div>
<h2>player coins : <h2 id="player_coins"> </h2></h2>
<input id="mise">
<p id="gain"></p>
</div> </div>
<div id="show_rules"> <div id="show_rules">
<p>Règles du jeu <br>Vous allez insérer le nombre de jeton que vous possédez<br> <p>Règles du jeu <br>Vous allez insérer le nombre de jeton que vous possédez<br>
@ -52,7 +55,7 @@ etc...
Dans tous les cas sauf le jackpot, le joueur perd sa mise<br> Dans tous les cas sauf le jackpot, le joueur perd sa mise<br>
Bien évidemment, pour ne pas vous anarquer, si le bac possède moins de 500 jetons, alors le jeu s'arrêtera<br> Bien évidemment, pour ne pas vous anarquer, si le bac possède moins de 500 jetons, alors le jeu s'arrêtera<br>
Et puis il faut également pas oublier que si vous n'avez plus de jeton, alors vous ne pourrez plus jouer</p> Et puis il faut également pas oublier que si vous n'avez plus de jeton, alors vous ne pourrez plus jouer</p>
<script src="app.js"></script> <script src="app.js"></script>
</body> </body>
</html> </html>

41
stylepagecss/style.css
View File

@ -1,21 +1,9 @@
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
box-sizing: border-box;
} }
/* le fond avec un gradient*/
body {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
min-height: 100vh;
background: rgb(18,79,96);
background: -moz-linear-gradient(180deg, rgba(18,79,96,1) 0%, rgba(84,33,163,1) 100%);
background: -webkit-linear-gradient(180deg, rgba(18,79,96,1) 0%, rgba(84,33,163,1) 100%);
background: linear-gradient(180deg, rgba(18,79,96,1) 0%, rgba(84,33,163,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#124f60",endColorstr="#5421a3",GradientType=1);
}
/* lien "machine à sous NSI" qui nous mène vers la page avec l'interface graphique de la machine à sous*/ /* lien "machine à sous NSI" qui nous mène vers la page avec l'interface graphique de la machine à sous*/
a { a {
@ -38,10 +26,11 @@ a:hover {
transition: 3s; transition: 3s;
text-shadow: 20px 10px 10px black, 0 0 25px blue, 0 0 5px darkblue; text-shadow: 20px 10px 10px black, 0 0 25px blue, 0 0 5px darkblue;
} }
/* le fond avec un gradient*/
body { body {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: space-around;
flex-direction: column; flex-direction: column;
min-height: 100vh; min-height: 100vh;
background: rgb(18,79,96); background: rgb(18,79,96);
@ -107,17 +96,31 @@ button:hover {
transition: all 0.7s; transition: all 0.7s;
} }
.mise {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
.mise > * {
padding: 5px;
}
.mise label {
font-size: 18px;
}
.mise input {
filter: invert(1);
border-radius: 2%;
}
/* affichage des "coin player et machine" */ /* affichage des "coin player et machine" */
.option { .option {
position: absolute;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
top: 50%; color: white;
right: 3%; height: 40vh;
transform: translateY(-50%);
color: white;
} }
/* titre qui renvoie à la page index.html */ /* titre qui renvoie à la page index.html */

Write Preview
Loading…
Cancel
Save