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

commit css

master
SERNY Sacha 2 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. 19
      machine.html
  2. 41
      stylepagecss/style.css

19
machine.html
View File

@ -14,15 +14,21 @@ 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="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="cadre_rouleaux">
<div class="rouleaux"> <div class="rouleaux">
<div></div> <div></div>
@ -33,12 +39,9 @@ etc...
<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>

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