55 lines
5.5 KiB
HTML
55 lines
5.5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Visit us on Youtube</title> <!-- Der Titel der Webseite, der oben im Browser-Tab angezeigt wird. -->
|
|
<style>
|
|
/* 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; /* 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); /* Ändert die Füllfarbe des Sechsecks auf Gelb. */
|
|
}
|
|
|
|
.hex:hover .icon-hover {
|
|
fill: var(--black); /* Ändert die Füllfarbe des Icons auf Schwarz. */
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<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" />
|
|
<!-- 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>
|