Whii/html or css(?)

## html or css(?)
<html><head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Product+Sans" rel="stylesheet">
<link href='https://image.ibb.co/gJNpRd/37.png' rel='shortcut icon' type='image/x-icon'/>

<meta content="a page for whii's links, i guess" name=description>
<meta content="whii's" property=og:title>
<meta content=https://www.whii.cf/ property=og:url>
<meta content="hello, i'm whii." property=og:site_name>

<title>whii's</title>

<style>

body {
  background: #000;
  background: url(https://image.ibb.co/e1bnCJ/38.jpg);
  cursor: default;
  font-family: Product Sans;
  transition: All .8s ease;
}

.subtitle {
  background: #fff;
  font-size: 12px;
  padding: 10px;
  position: fixed;
  left: 138px;
  top: 31px;
}

@-webkit-keyframes flashy {
  0% {
    background: #ececec;
  }
  20% {
    background: #545454;
  }
  40% {
    background: #343434;
  }
  60% {
    background: #9f9f9f;
  }
  80% {
    background: #7e7e7e;
  }
  to {
    background: #c1c1c1;
  }
}

@-webkit-keyframes flashy1 {
  0% {
    color: #ececec;
  }
  20% {
    color: #545454;
  }
  40% {
    color: #343434;
  }
  60% {
    color: #9f9f9f;
  }
  80% {
    color: #7e7e7e;
  }
  to {
    color: #c1c1c1;
  }
}

.color {
  -webkit-animation: flashy 2.5s infinite;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  font-size: 8px;
  padding:3px;
}

::selection, ::-moz-selection {
  background: #fff;
  color: #000;
}

.tooltip {
  display: inline-block;
  border-bottom: 0 dotted #000;
  background: #fff;
  font-size: 40px;
  padding: 10px;
  position: fixed;
  top: 205px;
  left: 545px;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 237px;
  height: 255px;
  background-color: #fff;
  color: #000;
  text-align: left;
  padding: 10px 10px;
  border-radius: 1px;
  top: 113%;
  left: 60px;
  margin-left: -60px;
  opacity: 0;
  transition: opacity .3s;
  position: absolute;
  z-index: 1;
  font-size: 14px;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

.tooltip .tooltiptext:after {
  content: " ";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #fff transparent;
}

a {
  text-decoration: none;
  color: #000;
  background: #fff;
}

a.link:hover, a.creditbox:hover {
  color: #fff;
  background: #000;
  transition: All .3s ease;
}

a.link {
  padding: 10px;
  position: fixed;
  left: 35px;
  font-size: 12px;
  width: 236px;
  font-weight:bold;
  text-align: center;
}

.container {
  position: fixed;
  width: 80px;
  bottom: 49px;
  right: 9px;
}

.image {
  display: block;
  width: 80px;
  height: auto;
  border-radius: 80px;
  color: #fff;
  text-align: center;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .3s ease;
  background: rgba(0,0,0,.7);
  border-radius: 80px;
}

.container:hover .overlay {
  opacity: 1;
}

.text {
  color: #fff;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  text-align: center;
}

a.creditbox {
  position: fixed;
  left: 5px;
  bottom: 5px;
  font-size: 7px;
  padding: 3px;
}

</style></head><body>

<a class="link" style="top: 349px;" href="https://anilist.co/user/Whii/favorites">more favorites</a>
<a class="link" title="discord" style="top: 133px">Yoshioka#6904</a>
<a class="link" style="top: 176px" href="https://notify.moe/+Yoshioka">notify.moe</a>
<a class="link" style="top: 219px;" href="https://anilist.co/user/Whii/">anilist</a>
<a class="link" style="top: 262px;" href="https://twitter.com/whii__">twitter</a>
<a class="link" style="top: 306px;" href="https://steamcommunity.com/id/whiing">steam</a>

<div class="tooltip"><$BlogTitle$>
<span class="tooltiptext">

i'm an editor for <b>notify.moe</b>, an anime tracker that is great to use. i also use <b>anilist</b> pretty frequently. i use <b>discord</b> to chat with people, so contact me there I guess. i <b>tweet</b> uncool stuff. i also occasionally use <b>steam</b>. my grammar <b>sucks</b>, so pardon me if i make mistakes. favorite anime includes <b>clannad</b>, <b>hyouka</b> and <b>ouran</b>. that music embed sure describes my taste of music.

<br><br><b>random thoughts</b>: <blogger><$BlogItemTitle$> <BlogItemCommentsEnabled><a href="https://www.blogger.com/comment.g?blogID=<$BlogID$>&postID=<$BlogItemNumber$>&isPopup=true" onclick="window.open('https://www.blogger.com/comment.g?blogID=<$BlogID$>&postID=<$BlogItemNumber$>&isPopup=true', 'bloggerPopup', 'toolbar=0,scrollbars=1,location=0,statusbar=1,menubar=0,resizable=1,width=400,height=450');return false;">+</a></BlogItemCommentsEnabled></blogger>

</span></div>

<div class="subtitle">also known as yoshioka</div>
<div class="color"></div>
<a class="creditbox" title="layout by me" href="/">©</a>

<div class="container">
<div class="image">♪</div>
<div class="overlay">
<div class="text">
<iframe src="https://open.spotify.com/embed/user/51llgla36z9v5yzm7xi7g7vux/playlist/7zh3soSIolYwecmfZeQFRD" width="80" height="80" frameborder="0" style="border-radius: 90px;" allowtransparency="true" allow="encrypted-media"></iframe>
</div></div></div>

</body>
</html>
	<html><head>

	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link href="https://fonts.googleapis.com/css?family=Product+Sans" rel="stylesheet">
	<link href='https://image.ibb.co/gJNpRd/37.png' rel='shortcut icon' type='image/x-icon'/>

	<meta content="a page for whii's links, i guess" name=description>
	<meta content="whii's" property=og:title>
	<meta content=https://www.whii.cf/ property=og:url>
	<meta content="hello, i'm whii." property=og:site_name>

	<title>whii's</title>

	<style>

	body {
	background: #000;
	background: url(https://image.ibb.co/e1bnCJ/38.jpg);
	cursor: default;
	font-family: Product Sans;
	transition: All .8s ease;
	}

	.subtitle {
	background: #fff;
	font-size: 12px;
	padding: 10px;
	position: fixed;
	left: 138px;
	top: 31px;
	}

	@-webkit-keyframes flashy {
	0% {
	background: #ececec;
	}
	20% {
	background: #545454;
	}
	40% {
	background: #343434;
	}
	60% {
	background: #9f9f9f;
	}
	80% {
	background: #7e7e7e;
	}
	to {
	background: #c1c1c1;
	}
	}

	@-webkit-keyframes flashy1 {
	0% {
	color: #ececec;
	}
	20% {
	color: #545454;
	}
	40% {
	color: #343434;
	}
	60% {
	color: #9f9f9f;
	}
	80% {
	color: #7e7e7e;
	}
	to {
	color: #c1c1c1;
	}
	}

	.color {
	-webkit-animation: flashy 2.5s infinite;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 4px;
	font-size: 8px;
	padding:3px;
	}

	::selection, ::-moz-selection {
	background: #fff;
	color: #000;
	}

	.tooltip {
	display: inline-block;
	border-bottom: 0 dotted #000;
	background: #fff;
	font-size: 40px;
	padding: 10px;
	position: fixed;
	top: 205px;
	left: 545px;
	}

	.tooltip .tooltiptext {
	visibility: hidden;
	width: 237px;
	height: 255px;
	background-color: #fff;
	color: #000;
	text-align: left;
	padding: 10px 10px;
	border-radius: 1px;
	top: 113%;
	left: 60px;
	margin-left: -60px;
	opacity: 0;
	transition: opacity .3s;
	position: absolute;
	z-index: 1;
	font-size: 14px;
	}

	.tooltip:hover .tooltiptext {
	visibility: visible;
	opacity: 1;
	}

	.tooltip .tooltiptext:after {
	content: " ";
	position: absolute;
	bottom: 100%;
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: transparent transparent #fff transparent;
	}

	a {
	text-decoration: none;
	color: #000;
	background: #fff;
	}

	a.link:hover, a.creditbox:hover {
	color: #fff;
	background: #000;
	transition: All .3s ease;
	}

	a.link {
	padding: 10px;
	position: fixed;
	left: 35px;
	font-size: 12px;
	width: 236px;
	font-weight:bold;
	text-align: center;
	}

	.container {
	position: fixed;
	width: 80px;
	bottom: 49px;
	right: 9px;
	}

	.image {
	display: block;
	width: 80px;
	height: auto;
	border-radius: 80px;
	color: #fff;
	text-align: center;
	}

	.overlay {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100%;
	width: 100%;
	opacity: 0;
	transition: .3s ease;
	background: rgba(0,0,0,.7);
	border-radius: 80px;
	}

	.container:hover .overlay {
	opacity: 1;
	}

	.text {
	color: #fff;
	font-size: 20px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	text-align: center;
	}

	a.creditbox {
	position: fixed;
	left: 5px;
	bottom: 5px;
	font-size: 7px;
	padding: 3px;
	}

	</style></head><body>

	<a class="link" style="top: 349px;" href="https://anilist.co/user/Whii/favorites">more favorites</a>
	<a class="link" title="discord" style="top: 133px">Yoshioka#6904</a>
	<a class="link" style="top: 176px" href="https://notify.moe/+Yoshioka">notify.moe</a>
	<a class="link" style="top: 219px;" href="https://anilist.co/user/Whii/">anilist</a>
	<a class="link" style="top: 262px;" href="https://twitter.com/whii__">twitter</a>
	<a class="link" style="top: 306px;" href="https://steamcommunity.com/id/whiing">steam</a>

	<div class="tooltip"><$BlogTitle$>
	<span class="tooltiptext">

	i'm an editor for <b>notify.moe</b>, an anime tracker that is great to use. i also use <b>anilist</b> pretty frequently. i use <b>discord</b> to chat with people, so contact me there I guess. i <b>tweet</b> uncool stuff. i also occasionally use <b>steam</b>. my grammar <b>sucks</b>, so pardon me if i make mistakes. favorite anime includes <b>clannad</b>, <b>hyouka</b> and <b>ouran</b>. that music embed sure describes my taste of music.

	<br><br><b>random thoughts</b>: <blogger><$BlogItemTitle$> <BlogItemCommentsEnabled><a href="https://www.blogger.com/comment.g?blogID=<$BlogID$>&postID=<$BlogItemNumber$>&isPopup=true" onclick="window.open('https://www.blogger.com/comment.g?blogID=<$BlogID$>&postID=<$BlogItemNumber$>&isPopup=true', 'bloggerPopup', 'toolbar=0,scrollbars=1,location=0,statusbar=1,menubar=0,resizable=1,width=400,height=450');return false;">+</a></BlogItemCommentsEnabled></blogger>

	</span></div>

	<div class="subtitle">also known as yoshioka</div>
	<div class="color"></div>
	<a class="creditbox" title="layout by me" href="/">©</a>

	<div class="container">
	<div class="image">♪</div>
	<div class="overlay">
	<div class="text">
	<iframe src="https://open.spotify.com/embed/user/51llgla36z9v5yzm7xi7g7vux/playlist/7zh3soSIolYwecmfZeQFRD" width="80" height="80" frameborder="0" style="border-radius: 90px;" allowtransparency="true" allow="encrypted-media"></iframe>
	</div></div></div>

	</body>
	</html>