tab embed

<body>
<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=Shippori+Mincho+B1:wght@800&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=Gaegu:wght@400;700&family=Mali:wght@400;600;700&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=Gamja+Flower&display=swap" rel="stylesheet"><head><script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script><link href="//fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet"><script src="https://static.tumblr.com/2pnwama/DLppehqvd/feathericons.js"></script><script src="https://dl.dropbox.com/s/vyffmps0ly6ikf4/glenplayer06.js"></script>
</body>
<style>

@font-face { font-family: lovely; src: url(https://dl.dropbox.com/s/xde2bkhiie1bm8r/LovelyRegular.ttf); }
</style>
<style>
/* this centers everything and also controls how big the image is */
#contain {
max-width: 195px; /* controls how big the image can get at max */
margin: 0 auto; /* centers the image */
position: relative; /* so the links are properly spaced */
}

/* holds the image */
#wow {
max-width: 110%; /* no clue i think i put this here out of habit */
position: relative; /* so that i can change the z index */
z-index: 5; /* puts the image in front of the links */
background:white;
border-width:7px;
border-style:solid;
border-image: url("https://media.discordapp.net/attachments/826854899013648384/839700444375810078/tumblr_inline_o98n9dbCl61u2r0ws_540_1_2.png") 8 fill round;
}

/* overall link css */
#links {
text-decoration:none;
font-family: lovely, cursive;
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
color: white;
font-size: 2em;
position: absolute; /* so i can put the links under the image */
width: 150px; /* controls how wide the links are */
top: 50%; /* centering */
transform: translateY(-50%); /* centering */
left: 45%; /* peek out from behind the image */
z-index: 1; /* habit i think */
}
/* css for each link */
#links a {
text-decoration:none;
display: block; /* so they aren't side by side*/
margin-bottom: 9px; /* spaces them out */
background: #FFDEE5;
padding: 5px;
border: 1px solid white;
transition: all 0.5s ease;
}

/* when the links are hovered */
#links a:hover {
transform: translateX(122px); /* makes them pop out */
transition: all 0.5s ease;
}

/* the last link */
#links a:last-child {
text-decoration:none;
margin-bottom: 0px; /* so the last link doesn't have extra space */
}
/* whooooo boy this is how i tried to make it mobile friendly... you'll probably have to mess with this in order to change it for your specific image and text so this'll probably require some code knowledge beforehand */
@media (max-width: 475px) {
#contain {
max-width: 250px;
}
#links {
width: 150px;
left: 50%;
font-size: 2em;
}
#links a {
margin-bottom: 12px;
}
#links a:hover {
transform: translateX(90px);
}
}
@media (max-width: 375px) {
#contain {
max-width: 200px;
}
#links {
width: 120px;
left: 50%;
font-size: 1.75em;
}
#links a {
margin-bottom: 8px;
}
#links a:hover {
transform: translateX(75px);
}
}
</style>
</head>
<body>
<div id="contain">
<div id="wow">
<img src="https://cdn.discordapp.com/attachments/851155413831254076/875519607673356378/2-2.gif"
style="display:block;" width="100%" height="auto">
</div>
<div id="links">
<a href="/#home">home</a>
<a href="/#me">me</a>
<a href="/#rules">rules</a>
<a href="/#music">loves</a>
</div>
</div>
</body>