troy-grunt/dings-um-sarah-die-vorzuege-von-git-zu-zeigen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style und defs eingefügt

Browse Source
This commit is contained in:
Troy Grunt 2024-08-31 20:37:50 +02:00
parent bcff9603da
commit 07b36e5844
1 changed files with 26 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
sarahs.html
View File

@ -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" />