From 3608c1f401df60ecbc515d5eb91379a0ae3b4a7a Mon Sep 17 00:00:00 2001
From: Troy Grunt <git@troy-grunt.de>
Date: Sat, 31 Aug 2024 20:59:52 +0200
Subject: [PATCH] kommentieren

---
 sarahs.html | 37 ++++++++++++++++++++++++-------------
 1 file changed, 24 insertions(+), 13 deletions(-)
diff --git a/sarahs.html b/sarahs.html
index add2e35..09bbb08 100644
--- a/sarahs.html
+++ b/sarahs.html
@@ -1,43 +1,54 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>Visit us on Youtube</title>
+    <title>Visit us on Youtube</title> <!-- Der Titel der Webseite, der oben im Browser-Tab angezeigt wird. -->
     <style>
-      /* set colors */:root {
-        --blue: #5cc3f0; /*main1*/
-        --yellow: #ffff00; /*main2*/
-        --black: #1a1a1a; /*background*/
-        --lightblue: #bae8fc; /*accent1*/
-        --darkblue: #012f43; /*accent2*/
+      /* Hier werden einige Farben als CSS-Variablen definiert, die später im Code verwendet werden. */
+      :root {
+        --blue: #5cc3f0; /* Ein helles Blau */
+        --yellow: #ffff00; /* Gelb */
+        --black: #1a1a1a; /* Dunkelschwarz */
+        --lightblue: #bae8fc; /* Ein sehr helles Blau */
+        --darkblue: #012f43; /* Ein sehr dunkles Blau */
       }
 
+      /* Diese Regel legt fest, dass sich bestimmte SVG-Elemente (wie 'path' und '.hex-hover') über eine halbe Sekunde hinweg sanft verändern, wenn sie ein- oder ausgeblendet werden. */
       .hex path, .hex-hover {
-        transition: fill 0.5s ease;
+        transition: fill 0.5s ease; /* Animiert die Farbänderung über 0,5 Sekunden. */
       }
 
+      /* Wenn die Maus über das Element mit der Klasse '.hex' fährt, ändern sich die Farben von '.hex-hover' und '.icon-hover'. */
       .hex:hover .hex-hover {
-        fill: var(--yellow);
+        fill: var(--yellow); /* Ändert die Füllfarbe des Sechsecks auf Gelb. */
       }
 
       .hex:hover .icon-hover {
-        fill: var(--black);
+        fill: var(--black); /* Ändert die Füllfarbe des Icons auf Schwarz. */
       }
     </style>
   </head>
   <body>
-    <div>
+    <div> <!-- Ein Container-DIV, der das SVG-Grafikobjekt enthält. -->
       <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+        <!-- Definiert das SVG-Element, das eine Grafik in einem festgelegten Bereich von 200x200 Pixeln enthält. -->
         <defs>
           <desc>Hier wird das Hexagon definiert, das mit use über die ID positioniert werden kann</desc>
+          <!-- 'symbol' erstellt ein wiederverwendbares Grafikobjekt. In diesem Fall ein Sechseck (Hexagon). -->
           <symbol id="hex-svg" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
             <polygon points="100,10 190,50 190,150 100,190 10,150 10,50" />
+            <!-- Das Polygon (ein Vieleck) hat sechs Ecken, wodurch es ein Sechseck ist. Die Punkte (points) geben die Position der Ecken an. -->
           </symbol>
         </defs>
+          <!-- Das 'a'-Element ist ein Link. Wenn man darauf klickt, wird eine neue Seite in einem neuen Tab geöffnet. -->
           <a id="YouTube-Link-2" xlink:href="https://www.youtube.com/@PitbullPitTv" target="_blank" class="hex">
+            <!-- 'use' verwendet das zuvor definierte Sechseck ('symbol') durch seine ID. Es wird als Hintergrund des Links verwendet. -->
             <use href="#hex-svg" class="hex-hover" shape="regularPoly" sides="6" stroke="var(--lightblue)" fill="var(--black)" stroke-width="5" fill-rule="evenodd" />
-            <path d="m13,5l3,9l0,6l2,0l0,-6l3,-9l-2,0l-2,6l-2,-6l-2,0zm11,4c-1.07,0 -1.59,0.17 -2.24,0.7c-0.63,0.53 -0.8,0.94 -0.76,2.3l0,5c0,1 0.16,1.65 0.77,2.23c0.62,0.59 1.21,0.77 2.23,0.77c1.07,0 1.65,-0.18 2.25,-0.77c0.63,-0.55 0.75,-1.23 0.75,-2.23l0,-5c0,-0.88 -0.16,-1.72 -0.76,-2.28c-0.63,-0.57 -1.27,-0.72 -2.24,-0.72zm5,0l0,9c0,0.97 0.98,2 2,2c1.02,0 1.56,-0.51 2,-1l0,1l2,0l0,-11l-2,0l0,8c-0.01,0.68 -0.82,1 -1,1c-0.21,0 -1,-0.04 -1,-1l0,-8l-2,0zm-5,2c0.3,0 1,0 1,1l0,5c0,0.97 -0.68,1 -1,1c-0.3,0 -1,-0.01 -1,-1l0,-5c0,-0.82 0.43,-1 1,-1zm1.46,10.92c-5.05,-0.01 -10.08,0 -15.13,0.08c-0.68,0.02 -1.36,0.12 -2.01,0.33c-0.52,0.17 -1.02,0.42 -1.47,0.73c-0.54,0.38 -1,0.85 -1.36,1.39c-0.25,0.38 -0.45,0.8 -0.61,1.23c-0.25,0.69 -0.36,1.42 -0.38,2.15c-0.05,3.28 -0.05,6.56 0,9.84c0.02,0.63 0.1,1.24 0.27,1.85c0.31,1.14 0.92,2.21 1.8,3.01c0.25,0.23 0.53,0.43 0.82,0.61c0.36,0.23 0.75,0.41 1.15,0.55c0.58,0.19 1.18,0.29 1.79,0.31c10.11,0.19 20.23,0.16 30.34,0c0.68,-0.02 1.36,-0.12 2.01,-0.33c0.52,-0.17 1.02,-0.42 1.47,-0.73c0.54,-0.38 1,-0.85 1.36,-1.39c0.25,-0.38 0.45,-0.8 0.61,-1.23c0.25,-0.69 0.36,-1.42 0.38,-2.15c0.05,-3.42 0.02,-6.84 0,-10.25c-0.01,-0.74 -0.12,-1.48 -0.36,-2.17c-0.14,-0.44 -0.34,-0.86 -0.59,-1.24c-0.35,-0.55 -0.81,-1.03 -1.34,-1.4c-0.47,-0.34 -0.99,-0.6 -1.53,-0.78c-0.68,-0.22 -1.39,-0.32 -2.1,-0.33c-5.04,-0.02 -10.08,-0.07 -15.12,-0.08zm7.63,2.02c2.52,0 5.03,0.02 7.54,0.06c0.39,0.01 0.79,0.06 1.18,0.16c0.62,0.16 1.21,0.47 1.65,0.93c0.16,0.16 0.29,0.32 0.41,0.51c0.17,0.26 0.3,0.54 0.4,0.84c0.15,0.46 0.21,0.95 0.23,1.44c0.05,3.41 0.05,6.83 0,10.25c-0.02,0.48 -0.08,0.97 -0.23,1.43c-0.1,0.3 -0.23,0.58 -0.4,0.84c-0.12,0.19 -0.25,0.35 -0.41,0.51c-0.44,0.46 -1.03,0.77 -1.65,0.93c-0.39,0.1 -0.79,0.15 -1.18,0.16c-10.06,0.16 -20.13,0.06 -30.19,0c-0.43,-0.01 -0.85,-0.07 -1.26,-0.21c-0.26,-0.09 -0.51,-0.2 -0.74,-0.35c-0.19,-0.11 -0.37,-0.24 -0.53,-0.39c-0.61,-0.57 -1.02,-1.32 -1.23,-2.12c-0.11,-0.42 -0.16,-0.86 -0.18,-1.3c-0.05,-3.23 -0.02,-6.46 0,-9.69c0.01,-0.49 0.07,-0.98 0.22,-1.45c0.09,-0.3 0.22,-0.59 0.39,-0.85c0.12,-0.2 0.27,-0.39 0.43,-0.55c0.46,-0.48 1.06,-0.79 1.7,-0.95c0.42,-0.1 0.84,-0.14 1.26,-0.14c7.54,0 15.07,-0.09 22.59,-0.06zm-22.09,2.06l0,2l2,0l0,12l2,0l0,-12l2,0l0,-2l-6,0zm15,0l0,14l2,0l0,-1c0.39,0.45 0.95,1.01 2,1c0.62,-0.01 1.1,-0.51 1.42,-0.9c0.33,-0.4 0.58,-0.86 0.58,-1.6l0,-6c0,-0.86 -0.27,-1.45 -0.62,-1.89c-0.35,-0.44 -0.86,-0.67 -1.5,-0.67c-0.33,0 -0.66,0.09 -0.98,0.26c-0.33,0.16 -0.67,0.44 -0.9,0.8l0,-4l-2,0zm-8,3l0,9c0,0.63 0.27,0.93 0.5,1.23c0.26,0.33 0.81,0.77 1.29,0.77c0.39,0 0.82,0.02 1.23,-0.22c0.42,-0.21 0.61,-0.34 0.98,-0.78l0,1l2,0l0,-11l-2,0l0,8c-0.18,0.23 -0.19,0.99 -1,1c-0.73,0.01 -1,-0.77 -1,-1l0,-8l-2,0zm18.2,0c-0.95,0 -1.83,0.23 -2.3,0.71c-0.58,0.6 -0.9,1.27 -0.9,2.18l0,4.7c0,1.02 0.28,1.82 0.81,2.39c0.53,0.58 1.28,0.86 2.23,0.86c1.03,0 1.83,-0.25 2.34,-0.81c0.53,-0.53 0.62,-1.35 0.62,-2.44l0,-0.59l-2,0l0,0.5c0,0.6 -0.06,1.07 -0.2,1.23c-0.14,0.18 -0.39,0.27 -0.8,0.27c-0.37,0 -0.64,-0.1 -0.78,-0.33c-0.15,-0.21 -0.22,-0.56 -0.22,-1.12l0,-1.55l4,0l0,-3.11c0,-1 -0.16,-1.62 -0.68,-2.16c-0.5,-0.53 -1.17,-0.73 -2.12,-0.73zm-7.2,1.5c0.55,0 1,0.5 1,1.5l0,5.02c0,0.55 -0.45,0.98 -1,0.98c-0.55,0 -0.99,-0.21 -1,-0.5l0,-6c0.01,-0.5 0.45,-1 1,-1zm7,0.5c0.55,0 1,0.39 1,1l0,1l-2,0l0,-1c0.01,-0.54 0.45,-1 1,-1z" fill-rule="evenodd" class="icon-hover" fill="var(--lightblue)" stroke="var(--lightblue)" stroke-width="0" style="transform: scale(2.5) translate(14px, 12px);"/>
+            <!-- Hier wird das Sechseck mit einer hellblauen Kontur und einer schwarzen Füllung dargestellt. -->
+            <!-- Das 'path'-Element zeichnet das YouTube-Logo (Buchstaben und Formen). Es ist in einem Pfad beschrieben, der Koordinaten und Linien enthält. -->
+            <path d="M13,5L16,14V20H18V14L21,5H19L17,11L15,5H13ZM24,9C22.93,9 22.41,9.17 21.76,9.7C21.13,10.23 20.96,10.64 21,12V17C21,18 21.16,18.65 21.77,19.23C22.39,19.82 22.98,20 24,20C25.07,20 25.65,19.82 26.25,19.23C26.88,18.68 27,18 27,17V12C27,11.12 26.84,10.28 26.24,9.72C25.61,9.15 24.97,9 24,9ZM29,9V18C29,18.97 29.98,20 31,20C32.02,20 32.56,19.49 33,19V20H35V9H33V17C32.99,17.68 32.18,18 32,18C31.79,18 31,17.96 31,17V9H29ZM24,11C24.3,11 25,11 25,12V17C25,17.97 24.32,18 24,18C23.7,18 23,17.99 23,17V12C23,11.18 23.43,11 24,11ZM25.46,21.92C20.41,21.91 15.38,21.91 10.33,21.99C9.65,22.01 8.97,22.11 8.32,22.32C7.8,22.49 7.3,22.74 6.85,23.05C6.31,23.43 5.85,23.9 5.49,24.44C5.24,24.82 5.04,25.24 4.88,25.67C4.63,26.36 4.52,27.09 4.5,27.82C4.45,31.1 4.45,34.38 4.5,37.66C4.52,38.29 4.6,38.9 4.77,39.51C5.08,40.65 5.69,41.72 6.57,42.52C6.82,42.75 7.1,42.95 7.39,43.13C7.75,43.36 8.14,43.54 8.54,43.68C9.12,43.87 9.72,43.97 10.33,43.99C20.44,44.18 30.55,44.15 40.66,43.99C41.34,43.97 42.02,43.87 42.67,43.66C43.19,43.49 43.69,43.24 44.14,42.93C44.68,42.55 45.14,42.08 45.5,41.54C45.75,41.16 45.95,40.74 46.11,40.31C46.36,39.62 46.47,38.89 46.49,38.16C46.54,34.74 46.51,31.32 46.49,27.91C46.48,27.17 46.37,26.43 46.13,25.74C45.99,25.3 45.79,24.88 45.54,24.5C45.19,23.95 44.73,23.47 44.2,23.1C43.73,22.76 43.21,22.5 42.63,22.28C41.95,22.06 41.24,21.96 40.53,21.95C35.49,21.93 30.45,21.88 25.41,21.88ZM33,23.94C35.52,23.94 38.03,23.96 40.54,24C40.93,24.01 41.33,24.06 41.72,24.16C42.34,24.32 42.93,24.63 43.37,25.09C43.53,25.25 43.66,25.41 43.78,25.6C43.95,25.86 44.08,26.14 44.18,26.44C44.33,26.9 44.39,27.39 44.41,27.88C44.46,31.29 44.46,34.71 44.41,38.12C44.39,38.6 44.33,39.09 44.18,39.55C44.08,39.85 43.95,40.13 43.78,40.39C43.34,40.85 42.75,41.16 42.12,41.32C41.74,41.43 41.35,41.49 40.96,41.5C30.98,41.65 21,41.69 11.02,41.5C10.63,41.49 10.24,41.43 9.87,41.31C9.18,41.11 8.59,40.7 8.14,40.13C7.95,39.89 7.82,39.61 7.72,39.31C7.57,38.85 7.51,38.37 7.5,37.88C7.45,34.47 7.46,31.06 7.5,27.65C7.51,27.17 7.57,26.68 7.72,26.22C7.82,25.92 7.95,25.64 8.14,25.39C8.59,24.81 9.18,24.41 9.87,24.21C10.25,24.1 10.64,24.05 11.03,24.04C17.03,23.96 23.02,23.94 29.02,23.94C30.01,23.93 31.01,23.94 32,23.94H33ZM20.21,28.96V36.01L27.2,32.48L20.21,28.96ZM20.21,28.96" transform="scale(4.16667,4.16667) translate(-160,-80)" class="icon-hover" fill="var(--blue)" />
+            <!-- Dieses Pfadelement enthält das eigentliche YouTube-Logo, das über Koordinaten beschrieben wird. Die Transformation skaliert und verschiebt das Logo. -->
           </a>
       </svg>
     </div>
   </body>
-</html>
\ No newline at end of file
+</html>
