Add files via upload

Samielleuch · Aug 15, 2019 · 93d83ce · 93d83ce
1 parent 7e34d20
commit 93d83ce
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 14 deletions.
diff --git a/index.html b/index.html
@@ -2,32 +2,30 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
     <title>Solve Me!</title>
     <link rel="stylesheet" href="https://bootswatch.com/4/cyborg/bootstrap.min.css">
     <link rel="stylesheet" href="style.css">
 </head>
-<body>
+<body >
 
 
 <div class="canvascard">
     <div class="welcome">
-        <div class="jumbotron">
-            <h1 class="display-4">Solve The Maze To acces the Page !</h1>
+        <div class="jumbotron wlcm">
+            <h1 class="display-4" id="header">Solve The Maze To acces the Page </h1>
             <hr>
             <p class="lead">This is a simple Game , all you have to do is reach the goal , you will be forwarded to the
                 page Upon completion.</p>
             <p class="lead">You can either use the arrow keys to move</p>
             <img class="controls" src="./img/Controls.png" alt="can't load">
-            <p class="lead">or if you're on a touch screen device just swipe to the wanted direction and we reccomend
-                you use Landscape mode</p>
+            <p class="lead">or if you're on a touch screen device just swipe to the wanted direction </p>
             <p class="lead">Press the Start button to generate the maze and start the game </p>
             <hr class="my-4">
             <div class="input-group">
-                <div class="input-group">
-                    <label class=" btn btn-outline-info btn-lg" for="inputGroupSelect02">Difficulty</label>
-                </div>
-                <br>
+
+                    <label class=" btn btn-outline-info btn-lg lbl" for="inputGroupSelect02">Difficulty</label>
+
                 <select class="custom-select" id="inputGroupSelect02">
                     <option value=100 selected>Easy</option>
                     <option value=80>Medium</option>

diff --git a/style.css b/style.css
@@ -1,8 +1,8 @@
-
 html, body {
     height: 100%;
 }
 
+
 body {
     margin: 0;
     display: flex;
@@ -57,22 +57,50 @@ canvas {
 
  }
     .input-group {
-         width: 100px !important;
+
+        box-sizing:content-box !important;
+         width:70px !important;
          display: inline-flex;
 
   }
+    .input-group .lbl {
+        display: block!important;
+        width: 100% !important;
+    }
+    .input-group #inputGroupSelect02 {
+        display: block !important;
+        width: 100% !important;
+    }
+
+
+body { overscroll-behavior: none }
 
 
 
 @media (max-width: 768px)and (orientation: Portrait) {
     html {font-size:  calc(0.65em + 0.3vw) }
-    .controls {
-        width:  calc(15em + 12vw) ;
+
+    .display-4{
+        font-size: 20px;
     }
+    .controls {
+    width:  calc(15em + 12vw) ;
+}
 }
 @media (max-width: 1024px)and (orientation: Landscape) {
     html {font-size:  calc(0.4em + 0.3vw) }
     .controls {
         width:  calc(10em + 10vw) ;
     }
+    .display-4{
+        font-size: 35px;
+    }
+    .wlcm{
+        margin-top: 75px;
+    }
+    .input-group {
+
+        width:90px !important;
+
+    }
 }