Hey there, I'm no expert in HTML and CSS, but I can make some changes to existing code. However, when it comes to writing code from scratch, I struggle. I need help turning this block of code into a clickable link. Can someone guide me on how to achieve that?
I'm not sure where exactly I should insert the information for the link.
I tried adding 'a:link' and 'href' attributes, but it didn't work as expected.
Any assistance would be highly appreciated!
<html>
<head>
<style type="text/css">
.word{
display: flex;
font-size: 40px;
font-family: "Bebas Neue";
font-weight: bold;
color: black;
padding-top: 20px;
padding-bottom: 10px;
margin: 5%;
}
.l-anim{
transform: translateY(50%);
width: 100%
}
.c-anim{
transform: translateY(-50%);
width: 100%
}
.ed-anim{
transform: translateY(50%) translateX(-10%) scale(.70);
width: 100%
}
.word:hover .l-anim, .word:hover .c-anim, .word:hover .ed-anim{
transform: translateY(0%);
transition: 1s all;
}
.word:not(:hover) .l-anim{
transform: translateY(50%);
transition: 1s all;
}
.word:not(:hover) .c-anim{
transform: translateY(-50%);
transition: 1s all;
}
.word:not(:hover) .ed-anim{
transform: translateY(-50%);
transition: 1s all;
}
</style>
</head>
<div class="word">
<div>SE</div>
<div class="anim-wrapper">
<div class="l-anim">L</div>
</div>
<div>E</div>
<div class="anim-wrapper">
<div class="c-anim">C</div>
</div>
<div>T</div>
<div class="anim-wrapper">
<div class="ed-anim">ED</div>
</div>
</div>
</html>