From 07b36e58447e8731f4f2da3b1816e1af5430f9f2 Mon Sep 17 00:00:00 2001
From: Troy Grunt <git@troy-grunt.de>
Date: Sat, 31 Aug 2024 20:37:50 +0200
Subject: [PATCH] =?UTF-8?q?style=20und=20defs=20eingef=C3=BCgt?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 sarahs.html | 26 ++++++++++++++++++++++++++
 1 file changed, 26 insertions(+)
diff --git a/sarahs.html b/sarahs.html
index 5be4904..f1c3603 100644
--- a/sarahs.html
+++ b/sarahs.html
@@ -2,10 +2,36 @@
 <html>
   <head>
     <title>Visit us on Youtube</title>
+    <style>
+      /* set colors */:root {
+      --blue: #5cc3f0; /*main1*/    --yellow: #ffff00; /*main2*/
+      --black: #1a1a1a; /*background*/    --lightblue: #bae8fc; /*accent1*/
+      --darkblue: #012f43; /*accent2*/  }
+
+      /* Hover-Effects */.hex:hover .hex-hover{
+      fill: var(--yellow); transition: fill 0.5s ease-in; /* Smooth transition */
+      }
+      .hex:hover .icon-hover{ fill: var(--black);
+      transition: fill 0.5s ease-out; /* Smooth transition */}
+
+      /* Hover-Effects */
+      .hex-1:hover .hex-1{
+      fill: var(--yellow);
+      transition: fill 0.5s ease-in; /* Smooth transition */}
+      .hex-1:hover .icon-hover{
+      fill: var(--black); transition: fill 0.5s ease-out; /* Smooth transition */
+      }
+    </style>
   </head>
   <body>
     <div>
       <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">
+        <defs>
+          <desc>Hier wird das Hexagon definiert, das mit use über die ID positioniert werden kann</desc>
+          <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" />
+          </symbol>
+        </defs>
         <g class="hex">
           <a id="YouTube-Link-2" xlink:href="https://www.youtube.com/@PitbullPitTv" target="_blank">
             <use href="#hex-svg" class="hex-hover" id="hex-1" shape="regularPoly" sides="6" stroke="var(--lightblue)" fill="var(--black)" stroke-width="5" fill-rule="evenodd" />
