update

friesenkatharina · Nov 13, 2023 · e87e73d · e87e73d
1 parent 9616da4
commit e87e73d
Show file tree

Hide file tree

Showing 12 changed files with 134 additions and 119 deletions.
diff --git a/ASSETS/pics/BunteMonster.png b/ASSETS/pics/BunteMonster.png
diff --git a/ASSETS/pics/goldCircle.png b/ASSETS/pics/goldCircle.png
diff --git a/ASSETS/pics/handWink.png b/ASSETS/pics/handWink.png
diff --git a/Mario/index.html b/Mario/index.html
@@ -5,14 +5,15 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="stylesheet" href="./style.css" />
-    <title>Document</title>
+    <link rel="stylesheet" href="." />
+    <title>DogAnimationGameJS</title>
   </head>
   <body>
     <!-- <div id="mario">
       <img src="../Mario/assets/mario-walk.gif" alt="Mario" />
     </div> -->
 
-    <!-- <div class="controls">
+    <div class="controls">
       <label for="animations">Choose</label>
       <select id="animations" name="animations" id="animations">
         <option value="idle">idle</option>
@@ -26,19 +27,19 @@
         <option value="ko">ko</option>
         <option value="getHit">getHit</option>
       </select>
-    </div> -->
+    </div>
 
-    <!-- <canvas id="canvas1"></canvas> -->
+    <canvas id="canvas1"></canvas>
 
-    <canvas id="canvas2"></canvas>
+    <!-- <canvas id="canvas2"></canvas> -->
 
     <!-- <div id="control">
       <button class="start">select start</button>
       <button class="left">left</button>
       <button class="right">right</button>
       <img src="./assets/control.png" alt="" />
     </div> -->
-
+    <script src="../src/dog.js"></script>
     <script src="../Mario/script.js"></script>
   </body>
 </html>
diff --git a/Mario/style.css b/Mario/style.css
@@ -1,6 +1,6 @@
-body {
+/* body {
   background-color: black;
-}
+} */
 
 /* #mario {
   position: absolute;
@@ -46,32 +46,30 @@ body {
 } */
 /* Animation */
 #canvas1 {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 600px;
-  height: 600px;
-}
-.controls {
-  position: absolute;
-  z-index: 10;
-  top: 100px;
-  left: 50%;
-  transform: translateX(-50%);
-}
-.controls,
-select,
-option {
-  font-size: 25px;
-}
+  #canvas1 {
+    position: absolute;
+    top: 50%;
+    left: 5%;
+    width: 600px;
+    height: 600px;
+    margin-top: 100px;
+    margin-bottom: 150px;
+    cursor: pointer;
+  }
+  .controls {
+    position: relative;
+    top: 10%;
+    left: 10%;
+  }
+  .controls,
+  select,
+  option {
+    margin-top: 150px;
+    font-size: 25px;
+    cursor: pointer;
+  }
 
-#canvas2 {
-  position: absolute;
-  border: 3px solid white;
-  width: 800px;
-  height: 700px;
-  transform: translate(-50%, -50%);
-  left: 50%;
-  top: 50%;
+  option:hover {
+    background-color: palevioletred;
+  }
 }
diff --git a/Phrases/phrase.css b/Phrases/phrase.css
@@ -1,66 +1,72 @@
 body {
-    background-color: mistyrose;
-    margin: 0;
-    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
-    color: #444;
-  }
-
-  .page {
-    min-height: 100vh;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  blockquote {
-    max-width: 800px;
-    font-size: 28px;
-  }
-  .sidenav {
-    height: 100%;
-    width: 0;
-    position: fixed;
-    z-index: 1;
-    top: 0;
-    left: 0;
-    background-color: #111;
-    overflow-x: hidden;
-    transition: 0.5s;
-    padding-top: 60px;
-  }
-
-  .sidenav a {
-    padding: 8px 8px 8px 32px;
-    text-decoration: none;
-    font-size: 25px;
-    color: #818181;
-    display: block;
-    transition: 0.3s;
-  }
-  .sidenav a:hover {
-    color: #f1f1f1;
-  }
-
-  .sidenav .closebtn {
-    position: absolute;
-    top: 0;
-    right: 25px;
-    font-size: 36px;
-    margin-left: 50px;
-  }
-
+  width: 100%;
+  background-color: mistyrose;
+  margin: 0;
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+  color: #444;
+}
+
+.page {
+  min-height: 50vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+blockquote {
+  max-width: 800px;
+  font-size: 28px;
+}
+.sidenav {
+  height: 100%;
+  width: 0;
+  position: fixed;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  background-color: #111;
+  overflow-x: hidden;
+  transition: 0.5s;
+  padding-top: 60px;
+  cursor: pointer;
+}
+
+.sidenav a {
+  padding: 8px 8px 8px 32px;
+  text-decoration: none;
+  font-size: 25px;
+  color: #818181;
+  display: block;
+  transition: 0.3s;
+}
+.sidenav .gold:hover {
+  border: 4px solid goldenrod;
+}
+.sidenav a:hover {
+  color: lightgreen;
+}
+
+.sidenav .closebtn {
+  position: absolute;
+  top: 0;
+  right: 25px;
+  font-size: 36px;
+  margin-left: 50px;
+}
+
+#mySidenav,
+#main i {
+  display: block;
+}
+
+#main i {
+  transition: margin-left 0.7s;
+  padding: 16px;
+}
+/* Media Query für größere Bildschirme */
+@media screen and (min-width: 768px) {
   #mySidenav,
   #main i {
     display: block;
   }
-
-  #main i {
-    transition: margin-left 0.7s;
-    padding: 16px;
-  }
-  /* Media Query für größere Bildschirme */
-  @media screen and (min-width: 768px) {
-    #mySidenav,
-    #main i {
-      display: none;
-    }
+}
diff --git a/Phrases/phrase.html b/Phrases/phrase.html
@@ -19,18 +19,21 @@
       <a href="javascript:void(0)" class="closebtn" onclick="closeNav()"
         ><i class="fa-solid fa-circle-xmark"></i
       ></a>
-      <a href="https://www.southernliving.com/positive-thinking-quotes-7255842"
+      <a class="gold" href="https://www.southernliving.com/positive-thinking-quotes-7255842"
         >positiv Link
       </a>
-      <a href="#">Services</a>
-      <a href="#">Clients</a>
-      <a href="#">Contact</a>
-    </div>
+      <a class="gold" href="#">Services</a>
+      <a class="gold" href="../Phrases/phrase.html">Clients</a>
+      <a class="gold" href="../contact.html">Contact</a>
+    </div> 
 
-    <div id="main">
+     <div id="main">
       <i class="fa-solid fa-gears" onclick="openNav()"></i>
     </div>
 
+
+      <!-- Container für den Text  -->
+    </div>
     <main class="page" id="Home">
       <section>
         <blockquote class="quote">

diff --git a/index.html b/index.html
@@ -81,13 +81,13 @@
         <i class="fa-solid fa-circle-xmark"></i>
       </a>
 
-      <a class="sidenav_hover" href="#">About</a>
+      <a class="sidenav_hover" href="./Phrases/phrase.html">About</a>
       <a class="sidenav_hover" href="#">Services</a>
       <a class="sidenav_hover" href="./RockPaperScissors-JS-Game/index.html"
         >Projects</a
       >
       <a class="sidenav_hover" href="#">Skills</a>
-      <a class="sidenav_hover" href="#">Contact</a>
+      <a class="sidenav_hover" href="./contact.html">Contact</a>
     </div>
 
     <div id="main">
@@ -189,6 +189,9 @@ <h3 class="about__subtitle">
         <span id="close-lightbox">&times;</span>
         <img id="lightbox-image" src="./ASSETS/pics/sparkel-background.jpg" />
       </div>
+      <div id="lightbox-text">
+
+      </div>
     </section>
 
     <!-- ----------- END OF ABOUT SECTION -------------------------- -->

diff --git a/src/dog.js b/src/dog.js
@@ -1,5 +1,5 @@
 // Sprite Animation Advance Methode
-let playerState = "sit";
+let playerState = "idle";
 const dropdown = document.getElementById("animations");
 dropdown.addEventListener("change", function (e) {
   // call back function

diff --git a/src/script.js b/src/script.js
@@ -38,18 +38,6 @@ document
     document.getElementById("lightbox-modal").style.display = "none";
   });
 
-// Skills Nav ********************
-
-function myFunction() {
-  let txt;
-  if (confirm("Content for this Page is in progress 🏖")) {
-    txt = "You pressed OK!";
-  } else {
-    txt = "You pressed Cancel!";
-  }
-  document.getElementById("demo").innerHTML = txt;
-}
-
 // Mobile NAV *********************
 function initialize() {
   closeNav(); // Schließt den Side-Nav beim Laden der Seite
@@ -66,8 +54,21 @@ function closeNav() {
 // Fügen Sie diesen Code hinzu, um die Initialisierung beim Laden der Seite zu gewährleisten
 document.addEventListener("DOMContentLoaded", initialize);
 
+// Skills Nav ********************
+
+function myFunction() {
+  let txt;
+  if (confirm("Content for this Page is in progress 🏖")) {
+    txt = "You pressed OK!";
+  } else {
+    txt = "You pressed Cancel!";
+  }
+  document.getElementById("demo").innerHTML = txt;
+}
+
 // ReadMoreButton in Project section***************************************
 
+// IMG
 document
   .getElementById("read-more-button-one")
   .addEventListener("click", function () {

diff --git a/styles/dog.css b/styles/dog.css
@@ -20,3 +20,7 @@ option {
   font-size: 25px;
   cursor: pointer;
 }
+
+option:hover {
+  background-color: palevioletred;
+}
diff --git a/styles/footer.css b/styles/footer.css
@@ -21,7 +21,6 @@ footer {
 }
 .socialIcons a img {
   width: 50px;
-
   opacity: 0.9;
 }
 
@@ -46,7 +45,7 @@ footer {
   text-transform: uppercase;
   letter-spacing: 1px;
   font-weight: 400;
-  margin: 0px 5px;
+  margin: 0px auto;
 }
 
 /* Anpassungen für Bildschirme  275px */