responsive issues!

Camdah77 · Oct 11, 2023 · 8b85582 · 8b85582
1 parent c397cf8
commit 8b85582
Show file tree

Hide file tree

Showing 5 changed files with 122 additions and 68 deletions.
diff --git a/.gitpod.yml b/.gitpod.yml
@@ -8,12 +8,11 @@ vscode:
   extensions:
     - ms-python.python
     - formulahendry.auto-close-tag
-    - eventyret.bootstrap-4-cdn-snippet
-    - hookyqr.beautify
     - matt-rudge.auto-open-preview-panel
     - ms-toolsai.jupyter
     - ms-toolsai.jupyter-keymap
     - ms-toolsai.jupyter-renderers
     - ms-toolsai.vscode-jupyter-cell-tags
     - ms-toolsai.vscode-jupyter-slideshow
     - Zazmic.palm-api-image-editor
+    - Zazmic.palm-api-image-editor
diff --git a/README.md b/README.md
@@ -1,7 +1,8 @@
 # Art of memory
+python3 -m http.server
 Art of memory is an interactive game that turns artwork into a game. By findind matching cards  the user can practice their memorys with colorful and joyful cards. The game has a timer and number of moves so the user can compete against himself.
 
-![Site view across devices](assets/images/readme/memoryfirsttimg.png)
+![Site view across devices](assets/images/readme/memoryfirsttimg.webp)
 
 ## Table of Contents
 + [UX](#ux "UX")

diff --git a/assets/css/style.css b/assets/css/style.css
@@ -21,65 +21,70 @@ body {
      }
 
 #choicearea {
+  display: flex;
   width: 280px;
   height: 150px;
+  flex-wrap: wrap;
   }
 
 .logo{
   margin-left:-2px;
   margin-top: 11px;
+  width: 150px;
 }
 
 .welcomeimg {
     margin-left: -13px;
-    width: 273px;
+    width: 260px;
     margin-top: -162px;
     margin-bottom: 20px;
 }
-button{
+.startbutton {
   margin-top: -27px;
-  margin-left: -42px;
-  height: 40px;
-  width: 153px;
-  background-color: #567799;
-  color: #ffffff;
-  border-radius: 5px 25px;
+  height: 45px;
+  width: 150px;
   font-size: 14px;
-  text-align: center;
+  border-radius: 5px 25px;
   box-shadow:8px 8px 8px #000000;
+  background-color: #7A9DB5;
+  color: #fffcfc;
+
+}
+.choicearea{
+  display: flex;
+  width: 220px;
+  height: 150px;
+  flex-wrap: wrap;
+  justify-content: center;
  }
+
  button#stop{
-  margin-top: 0px;
-  margin-left: 2px;
+  background-color: #567799;
+  color: #ffffff;
+  font-size: 14px;
+  border-radius: 5px 25px;
+  box-shadow:8px 8px 8px #000000;
+  height: 45px;
+  width: 150px;
    }
 
   .bywho{
     color: #ffffff;
-    font-size: 14px;
+    font-size: 12px;
     font-family: 'montserrat';
-    margin-top: -17px;
+    margin-top: -12px;
       }
-hr{
-  color: #ffffff;
-  width: 100%;
-  display: hide;
-}
-  .social-link{
-     padding-top: 2vh;   
-     padding-right: 5vw;
-  }
-
 /*Gamearea*/
   .wrapper {
     box-sizing: content-box;
-    width: 250px;
-    height: 387px;
+    width: 260px;
+    height: 416px;
     color: #000000;
     position: absolute;
     transform: translate(-50%, -50%);
-    top: 429px;
-    margin-left: 130px;
-    border-radius: 0.6em;
+    top: 416px;
+    left:51%;
+    border-radius: 5px 25px;
     box-shadow:8px 8px 8px #000000;
     background-color: #7A9DB5;
   }
@@ -139,9 +144,9 @@ hr{
     align-items: center;
     justify-content: center;
     flex-direction: column;
+    background-color: #454D61;
     width: 100%;
     height: 100%;
-    background-color: #454D61;
     top: 0;
   }
 
@@ -171,10 +176,11 @@ hr{
     color: #ffffff;
     border-radius: 5px 25px;
     display: inline-block;
-    padding: 8px 25px;
     transition: background .3s;
-    margin-top: -16px;
     box-shadow:8px 8px 8px #000000;
+    height: 29px;
+    width: 145px;
+    font-size: 14px;
   }
 
   .popup {
@@ -223,7 +229,6 @@ hr{
     font-weight: bold;
   }
     .close-popup {
-    background:#567799 ;
     cursor: default;
     position: fixed;
     top: 0;
@@ -245,47 +250,97 @@ hr{
   }
 /* Media query: tablets and larger (768px and up) */
 @media screen and (min-width: 768px) {
-
-.welcomeimg {
-    width: 684px;
-    height: 700px;
-    margin-left: -7px;
+  .welcomeimg {
+    left: 50%;
+    width: 768px;
+   }
+   .controls-container {
+    top: 59px;
+    left: 5px;
   }
- .startbutton{
-  margin-top: -27px;
+   .startbutton {
+    margin-top: -27px;
+    height: 50px;
+    width: 200px;
+    font-size: 18px;    
+  }
+    .wrapper {
+      width: 536px;
+      height: 613px;
+      top: 636px;
+      left: 50%;
+   }
+#choicearea{
+  margin-left: 35vw;
+  margin-top: 10vh;
+}
+.btn{
+  margin-top: 3vh;
+}
+.game-container {
+  height: 468px;
+}
+img.image {
+    height: 100px;
+    width: 100px;
 }
- /*Gamearea*/
- .wrapper {
-  width: 500px;
-  height: 600px;
-  left: 50%;
-  top: 60%;
-  grid-template-columns: repeat(4, auto);
-  gap: 9px;
- }
 .card-container {
   height: 100px;
   width: 100px;
-  row-gap: 20px;
-  justify-content: space-around;
 }
 .card-before,
 .card-after {
-  height: 100px;
-  width: 100px;
-}
-}
+  display: flex;
+  height: 100%;
+  width: 100%;
+  }
+.card-before {
+  background: url("../images/memfront.webp");
+  background-size: 100%;
 
+  }
 /* Large devices (laptops and desktops, 992px and up) */
 @media screen and (min-width: 992px) {
+
+  .controls-container {
+    top: 59px;
+    left: 5px;
+    height: 100%;
+  }
+  #choicearea{
+    margin-left: 9vw;
+    margin-top: 10vh;
+  }
 
-.startbutton{
-  font-size: 20px;
-  margin-left: -42px;
-}
-
+.wrapper{
+    left: 50%;
+    top: 561px;
+  }
+  .game-container {
+    height: 477px;
+  }
+  img.image {
+      height: 100px;
+      width: 100px;
+  }
+  .card-container {
+    height: 100px;
+      width: 100px;
+  }
+  .card-before,
+  .card-after {
+    display: flex;
+    height: 100%;
+    width: 100%;
+    }
+  .card-before {
+    background: url("../images/memfront.webp");
+    background-size: 100%;
+
+    }
 }
 /* Largest devices (laptops and desktops, 1200px and up) */
 @media screen and (min-width: 1200px) {
 }
 
+}
diff --git a/index.html b/index.html
@@ -42,6 +42,10 @@
 <div id="choicearea">
     <img src="assets/images/memlogotype.webp" class="logo" alt="Logotype Art of memory.">
     <div class="bywho">Art & game created by <br>Camilla Dahlström</div><br>
+    <br> <div class="social-link">
+      <a href="https://github.com/Camdah77" target="_blank" aria-label="Link to creator: camilla Dahlstrom´s  GitHub"><i class="fa-brands fa-github" style="color: #ffffff"></i></a>
+      <a href= "mailto: [email protected]" target="_blank" aria-label="Send an mail to creator Camilla Dahlstrom"><i class="fa-regular fa-envelope" style="color: #ffffff"></i></a><br>
+
 
     <a href="#popup1" class="btn">How to play</a>
     <div id="popup1" class="popup">
@@ -53,12 +57,7 @@ <h2>Rules</h2>
          Good luck! 
       </div>
     <a href="#" class="close-popup"></a>
-
-
-         <div class="social-link">
-      <a href="https://github.com/Camdah77" target="_blank" aria-label="Link to creator: camilla Dahlstrom´s  GitHub"><i class="fa-brands fa-github" style="color: #ffffff"></i></a>
-      <a href= "mailto: [email protected]" target="_blank" aria-label="Send an mail to creator Camilla Dahlstrom"><i class="fa-regular fa-envelope" style="color: #ffffff"></i></a>
-
+
 <div id="gamearea"></div>
    <div class="wrapper">
         <div class="stats-container">

diff --git a/assets/js/sale.html → sale.html b/assets/js/sale.html → sale.html