<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fruktur&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fruktur&family=Ma+Shan+Zheng&family=Zhi+Mang+Xing&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fruktur&family=Ma+Shan+Zheng&family=Rock+Salt&family=Zhi+Mang+Xing&display=swap" rel="stylesheet">
</head>
<body>
<pre>My code<strong> <a href="www.google.com" class="doesnt" target="_blank"> DOESN’T</a> </strong> work , I have no idea why.
My code <a href="http://wwworkshop.moritzebeling.com/2/" target="_blank" class="works"><strong>WORKS</strong></a> , I have no idea why. </pre>
</body>
index.html
body {
background-color:black;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
pre {
font-family: 'Rock Salt', cursive;
font-size: 25pt;
color:white;
}
.works{
text-decoration:none;
}
.doesnt {
color: red;
text-decoration: none;
}
.doesnt:hover{
text-decoration: line-through;
cursor:url("data:image/svg+xml;utf8,") 16 0,auto; /*!emojicursor.app*/
}
.works{
color:blue;
}
.works:hover{
background-image: -webkit-linear-gradient(45deg, #f35626, #feab3a);
background-size: 300%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-animation: hue 3s infinite linear;
cursor:url("data:image/svg+xml;utf8,") 16 0,auto; /*!emojicursor.app*/
}
@-webkit-keyframes hue {
from {
-webkit-filter: hue-rotate(0deg);
}
to {
-webkit-filter: hue-rotate(-360deg);
}
}