commit css

3 years ago · 314c61f87c
2 changed files with 38 additions and 32 deletions
--- a/machine.html
+++ b/machine.html
@ -14,15 +14,21 @@ etc...
    <head>
        <title>Machine à sous NSI</title>
        <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">
-
+        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>

    <body >
        <div>
            <a href="index.html" class="title">MACHINE A SOUS NSI</a>
        </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="rouleaux">
                <div></div>
@ -33,12 +39,9 @@ etc...
        <div class="button">
            <button onclick="regles()" id="regles">Regle</button>
            <button onclick="jeu()" id="valider">Lancer</button>
+            <div class="mise">
+              <label>Mise : </label><input id="mise">
            </div>
-        <div class="option">
-            <h2>machine coins : <h2 id="machine_coins"> </h2></h2>
-            <h2>player coins : <h2 id="player_coins"> </h2></h2>
-            <input id="mise">
-            <p id="gain"></p>
        </div>
 		<div id="show_rules">
 		    <p>Règles du jeu  <br>Vous allez insérer le nombre de jeton que vous possédez<br>
--- a/stylepagecss/style.css
+++ b/stylepagecss/style.css
@ -1,21 +1,9 @@
 * {
    margin: 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*/
 a {
@ -38,10 +26,11 @@ a:hover {
    transition: 3s;
    text-shadow: 20px 10px 10px black, 0 0 25px blue, 0 0 5px darkblue;
 }
+/* le fond avec un gradient*/
 body {
    display: flex;
    align-items: center;
-    justify-content: center;
+    justify-content: space-around;
    flex-direction: column;
    min-height: 100vh;
    background: rgb(18,79,96);
@ -107,17 +96,31 @@ button:hover {
    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" */
 .option {
-    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
-    top: 50%;
-    right: 3%;
-    transform: translateY(-50%);
 	  color: white;
+    height: 40vh;
 }

 /* titre qui renvoie à la page index.html */