Wrapped

<!DOCTYPE html>

<!--------THEME BY HKF THEMES, PLEASE DONT REMOVE THE CREDIT. THANK YOU CODING CABIN FOR YOUR INPUT ---->
<html lang="en">
		<!--Head-->
	<head>
	<meta charset="UTF-8">
	<link rel="shortcut icon" href="{Favicon}">
    <link rel="alternate" type="application/rss+xml" href="{RSS}">
        {block:Description}
            <meta name="description" content="{MetaDescription}">
        {/block:Description}
       <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
       <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Staatliches&display=swap" rel="stylesheet">

       <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Julius+Sans+One&family=Poiret+One&display=swap" rel="stylesheet">

	<title>{Title}</title>

	<style>
		/**Color Used
			green #b4f4a1
			yellow #f8e549
			pink #cd2072
			purple #6850d0
			blue #A4FFF0
			white #ffffff
			black #000000

					//**/

body{
background-color:#000000;
overflow-x:hidden;
}


::-webkit-scrollbar {
  width: 20px;
  background-color:black
}
::-webkit-scrollbar-track {
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  background:black;
  border-radius: 10px;
    box-shadow: inset 0 0 5px white;
}
::-webkit-scrollbar-thumb:hover {
  background: #cd2072;
}



h1, h2, h3, b, em, i,{
	font-family: 'Julius Sans One', sans-serif;
}

.wrapped{
			width:105%;
			height:100%;
			padding:10px;
			background:#000000;
			overflow:scroll;


		}

.wrapped h1{
	text-align: center;
	color:#f8e549;
	font-family: 'Julius Sans One', sans-serif;
	font-size:50px;
	 text-transform: uppercase;
}



#overview{
		height:100%;
	background:#cd2972;
	color:#ffffff;
	font-family: 'Staatliches', cursive;
		overflow:auto;
}

#overview h1{
	text-align: center;

}

#overview img{
	height:200px;
	width:200px;
	object-fit: cover;
	margin:0 0 80px 80px;
	z-index: 999;
	box-shadow: 20px 20px 10px #000000;

}

#overview img:nth-child(2){
	position:absolute;
	margin-left:50px;
	margin-top:50px;

}

#overview img:nth-child(3){
	position:absolute;
	margin-left:20px;
	margin-top:80px;

}

ul{
	list-style: none;
	color:#f8e549;
}

li{
	line-height: 1.5;
	font-weight:bold;
}

#top{
	width:40%;
	float:right;
	margin-right:20px;
}

#bottom{
	padding:20px;
	display: flex;
	flex-direction: row;
	  flex-wrap: wrap;
	   align-items:baseline;
}

.box{
	 flex-grow:1;
	 flex-basis:auto;
	   align-self: auto

}

.box h2{
	text-align: center;
}

.box ul li{
	margin-left:10px;
	font-weight: normal;
}

.music{
	height:100%;
	font-family: 'Staatliches', cursive;
	color:#ffffff;
	background-color:#A4FFF0;
	overflow:auto;
}

.music h2{
	font-family: 'Julius Sans One', sans-serif;
	color:#A4FFF0;
	font-size:25px;
	}

.music b{
		font-family: 'Julius Sans One', sans-serif;
		font-size:22px;
}

.jukebox{
	background-color:#cd2072;
	position:absolute;
	text-align:center;
	padding:20px;
	color:#A4FFF0;
	text-align:center;
	height:100%;
}


.jukebox img{
	width:300px;
	height:300px;
	object-fit:cover;
}


.five{
	 	position:absolute;
	color:#cd2072;
	padding:20px;
	display: flex;
	  flex-wrap:wrap;
	  margin:none;
	  background-color:#A4FFF0;
	  	overflow:auto;


}
.playlist{
margin-left:340px;
	overflow:auto;


}

.playlist b{
		font-family: 'Julius Sans One', sans-serif;
		font-size:16px;
}
.playlist img{
	width:150px;
	height:150px;


}

.artist{
	flex-grow:1;
	margin-bottom:50px;



}

.artist p{
	margin-top:-100px;
	margin-left:170px;
	text-align:center;

}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
  #overview img {height:50px; width:50px;}
}


.movie{
	height:100%;
	padding:20px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items:baseline;
background-color:#6850d0;
	overflow:auto;

}

.movie h1{
		font-family: 'Julius Sans One', sans-serif;
		color:#f8e549;
		width:100%;
		text-align: center;
}

.movie span{
	font-size:14px;
	text-align: center;
	margin-top:-10px;
}

.feature{
	flex-grow:1;
	height:250px;
	background-color:#ffffff;
	max-width:200px;
	text-align:center;
font-family: 'Staatliches', cursive;
	font-size: 1vw;
	color:#000000;
	margin:0;

}

.feature p{
	margin-top:-3px;
}

.feature img{
	width:200px;
	height:200px;
	object-fit:cover;

}

#quarantine{
	background-color:  #b4f4a1;
	height:100%;
	padding:20px 20px 20px 0;
	color:#ffffff;
	font-family: 'Staatliches', cursive;
		overflow:auto;
	margin-right:20px;
}

#quarantine h1{
		font-family: 'Julius Sans One', sans-serif;
		width:100%;
		text-align: center;
		color:white;

}



.skillgroup {
  left:0;
}

.skillgroup .skillbar {
  display: block;
  height: 50px;
  overflow: hidden;
  padding:10px;
}
.skillgroup .skillbar .skillbar-bar {
  border-radius: 0 10px 10px 0;
  display: block;
  height: 100%;
  background: #ff8a00;
  background: -webkit-linear-gradient(to right, #ff8a00, #da1b60);
  background: linear-gradient(to right, #ff8a00, #da1b60);
  width: 0%;
}


#small{
	position:absolute;
	color:#000000;
	margin:5px 0 0 20px;
}

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
    overflow: hidden;
  transition: 0.5s;
 }

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: yellow;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: white;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
  z-index:99999;
}

#main {
  transition: margin-left .5s;
  padding: 16px;
  margin-top:10%;
}
#prime{
	text-align:center;
}
.inbox{
	height:300px;
	width:300px;
	margin:10px;
	  position: relative;
	  font-family: 'Julius Sans One', sans-serif;
	  font-size:33px;
	  display:inline-block;
	    text-transform: uppercase;

}

.inbox p{
	position: absolute;
    bottom: 0;
    right: 0;
    color:#ffffff;
    word-break: keep-all;
    margin-left:10px;
    text-align:right;
    padding:5px;
}

#one{
	background: linear-gradient(to right, #833ab4, #fd1d1d, #fcb045);
				-webkit-linear-gradient(to right, #833ab4, #fd1d1d, #fcb045);
}

#two{
	background: rgba(80, 51, 209, 1.0);
background: -webkit-linear-gradient(top left, rgba(80, 51, 209, 1.0), rgba(214, 57, 25, 1.0));
background: -moz-linear-gradient(top left, rgba(80, 51, 209, 1.0), rgba(214, 57, 25, 1.0));
background: linear-gradient(to bottom right, rgba(80, 51, 209, 1.0), rgba(214, 57, 25, 1.0));
}

#three{
	background: rgba(89, 125, 157, 1.0);
background: -webkit-linear-gradient(right, rgba(89, 125, 157, 1.0), rgba(199, 123, 151, 1.0));
background: -moz-linear-gradient(right, rgba(89, 125, 157, 1.0), rgba(199, 123, 151, 1.0));
background: linear-gradient(to left, rgba(89, 125, 157, 1.0), rgba(199, 123, 151, 1.0));
}

#four{
	background: rgba(245, 104, 114, 1.0);
background: -webkit-linear-gradient(bottom, rgba(245, 104, 114, 1.0), rgba(97, 93, 109, 1.0));
background: -moz-linear-gradient(bottom, rgba(245, 104, 114, 1.0), rgba(97, 93, 109, 1.0));
background: linear-gradient(to top, rgba(245, 104, 114, 1.0), rgba(97, 93, 109, 1.0));
}

#credit{
    position:absolute;
    bottom:0;
    Font-size:9px;
    }

#credit a{
    color:#ffffff;
    text-decoration:none;
}

.slide-in-fwd-center {
	-webkit-animation: slide-in-fwd-center 4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-in-fwd-center 4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes slide-in-fwd-center {
  0% {
    -webkit-transform: translateZ(-1400px);
            transform: translateZ(-1400px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
    opacity: 1;
  }
}

.tracking-in-expand {
	-webkit-animation: tracking-in-expand 2s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
	        animation: tracking-in-expand 2s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}


@keyframes slide-in-fwd-center {
  0% {
    -webkit-transform: translateZ(-1400px);
            transform: translateZ(-1400px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
    opacity: 1;
  }
}

@-webkit-keyframes tracking-in-expand{0%{letter-spacing:-.5em;opacity:0}40%{opacity:.6}100%{opacity:1}}@keyframes tracking-in-expand{0%{letter-spacing:-.5em;opacity:0}40%{opacity:.6}100%{opacity:1}}

{Custom Css}
	</style>
	</head>
		<!--End Head-->
<body>

<div class="wrapped">

<div id="credit"><a href="hkftheme.tumblr/com">HKF</a></div>

<div id="main">
<h1 class="tracking-in-expand ">2020 Wrapped</h1>
  <div id="prime">
  <div class="inbox slide-in-fwd-center" id="one" onclick="openNav()"><p>2020 Wrapped</p></div>
  <div class="inbox slide-in-fwd-center" id="two" onclick="openNavMusic()"><p>Music This Year</p></div>
 <div class="inbox slide-in-fwd-center" id="three" onclick="openNavMovie()"><p>Best Movie Watched</p></div>
 <div class="inbox slide-in-fwd-center" id="four" onclick="openNavQuarantine()"><p>Quarantine in a few stats</p></div>

</div>



<div id="OverviewSidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>

<!--Overview-->

<div id="overview">
	<h1>2020 Wrapped</h1>

<!--Change the link for the image here-->
	<img src="https://64.media.tumblr.com/b1a135fa52cd7864e93f7a3f88a2b5bc/e78d2fcc009266cd-ed/s500x750/eed9648b82a39c198b80681b4fee09e20f409a94.gif">
			<img src="https://64.media.tumblr.com/b1a135fa52cd7864e93f7a3f88a2b5bc/e78d2fcc009266cd-ed/s500x750/eed9648b82a39c198b80681b4fee09e20f409a94.gif">
				<img src="https://64.media.tumblr.com/b1a135fa52cd7864e93f7a3f88a2b5bc/e78d2fcc009266cd-ed/s500x750/eed9648b82a39c198b80681b4fee09e20f409a94.gif">

	<div id="top">
		<h2>Most Time Consuming Activities</h2>
			<ul><!--Change the data between the <li> here-->
				<li>Animal Crossing New Horizon</li>
				<li>The Magicians (Re-re-watch)</li>
				<li>Sleeping (increased of 4h per night)</li>
				<li>New Pet (Bunny named Mable)</li>
				<li>Learning to code (because why not)</li>
			</ul>

	</div>

	<div id="bottom">
		<div class="box">
			<h2>2020 Discoveries</h2>
						<ul><!--Change the data between the <li> here-->
				<li>Knitting</li>
				<li>Adobe In Design</li>
				<li>Baking > Cooking </li>
				<li>New Pet (Bunny named Mable)</li>
				<li>Learning to code (because why not)</li>
			</ul>



		</div>

		<div class="box">
		<h2>Most listen</h2>
			<ul><!--Change the data between the <li> here-->
				<li><b>Podcast</b> —Any McElroy content</li>
				<li><b>Song</b> Show  —Yourself (Frozen)</li>
				<li><b>TV Show</b> —The Magicians</li>
				<li><b>Film</b>  —Marvel Cinematic Universe</li>
			</ul>
		</div>
	</div>
</div>
												<!--end of overview-->

</div>




<div id="MusicSidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNavMusic()">&times;</a>


												<!--Music-->
<div class="music">
<div class="jukebox">
		<h2>Top Songs</h2>
	<p> Your favorite song was</p>

	<div class="bg">
			<div class="fave"><img src="https://media3.giphy.com/media/YmQOR2BmBDznXSqZPD/giphy.gif"></div> <!---Change image here-->
	</div>

	<p> <b>Into The Unknown</b> <br>
		Frozen 2 Soundtrack</p> <!---Change data here-->

</div>

<div class="playlist"><div class="five">

	<div class="artist">
		<div class="bg"></div>
		<img src="https://media1.tenor.com/images/11e38654d5d1fab4348d0715dcb6efe5/tenor.gif?itemid=15952117"><!---Change image here-->
		<p><b>Toss A Coin to your Witcher</b> <br> <!---Change data here-->
		 The Witcher soundtrack</p> <!---Change data here-->
	</div>

	<div class="artist">
		<div class="bg"></div>
		<img src="https://media1.tenor.com/images/c435483a112e18e7db07130cc08b695c/tenor.gif?itemid=15212354"><!---Change image here-->
		<p><b>Other Friends</b> <br> <!---Change data here-->
		 Steven Universe The Movie</p> <!---Change data here-->
	</div>

		<div class="artist">
		<div class="bg"></div>
		<img src="https://media1.tenor.com/images/67ef772f66936be10d68a29db3690665/tenor.gif?itemid=8103314"><!---Change image here-->
		<p><b>Escape</b> <br> <!---Change data here-->
		 Peaches and Plums - Lauren Fairweather</p> <!---Change data here-->
	</div>

		<div class="artist">
		<div class="bg"></div>
		<img src="https://media2.giphy.com/media/7JduIzmjDhw92qtFaa/giphy.gif"><!---Change image here-->
		<p><b>The Greatest Show</b> <br> <!---Change data here-->
		The Greatest Showman Soundtrack</p> <!---Change data here-->
	</div>

		<div class="artist">
		<div class="bg"></div>
		<img src="https://i.pinimg.com/originals/1e/6d/69/1e6d69a055d904ffb06725c8da859f28.gif"><!---Change image here-->
		<p><b>I Think We're Alone Now</b> <br> <!---Change data here-->
		 Umbrella Academy Season One Soundtrack (Original by Tiffany)</p> <!---Change data here-->
	</div>
		</div>
												<!--End Music-->


</div>



<div id="MovieSidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNavMovie()">&times;</a>

<!--Start movie-->

<div class="movie">
	<h1>Favorite Movie Watched<br><span>(maybe not for the first time)</span></h1>
	<div  class="feature">
			<img src="https://media3.giphy.com/media/j2pWZpr5RlpCodOB0d/200.gif"> <!--Change image here-->
		<p>Avengers - Endgames</p> <!--change data here-->
	</div>

		<div  class="feature">
			<img src="https://i.pinimg.com/originals/a1/70/37/a17037edecb5530d58a7f4655b444e9c.gif"> <!--Change image here-->
		<p>Frozen II</p> <!--change data here-->
	</div>

		<div  class="feature">
			<img src="https://64.media.tumblr.com/05c9f888cd96a54245836c6fbcd3136d/8c42934cc555e3e9-2b/s640x960/edda415212ac9bd439065027ef48cdbe0bdc1b63.gifv"> <!--Change image here-->
		<p>Steven Universe The Movie</p> <!--change data here-->
	</div>

		<div  class="feature">
			<img src="https://media3.giphy.com/media/3ov9jSl8VJDj1084NO/source.gif"> <!--Change image here-->
		<p>Hamilton</p> <!--change data here-->
	</div>

		<div  class="feature">
			<img src="https://media1.giphy.com/media/dsQ9Obo9E1T9C54yWW/giphy.gif"> <!--Change image here-->
		<p>Star Wars - The Rise of the Skywalker</p> <!--change data here-->
	</div>

		<div  class="feature">
			<img src="https://media3.giphy.com/media/57ZvMMkuBIVMlU88Yh/giphy.gif"> <!--Change image here-->
		<p>Dead Pool</p> <!--change data here-->
	</div>

		<div  class="feature">
			<img src="https://i.pinimg.com/originals/c7/45/b1/c745b1b7d629bb3ea3eea9ff48a0a824.gif"> <!--Change image here-->
		<p>Nightmare Before Christmas</p> <!--change data here-->
	</div>

	<div  class="feature">
			<img src="https://i.pinimg.com/originals/19/5b/24/195b24c5b952d5f8d202660ca5a43de1.gif"> <!--Change image here-->
		<p>The Arrival</p> <!--change data here-->
	</div>

</div>
												<!--End movie-->

</div>



<div id="QuarantineSidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNavQuarantine()">&times;</a>
<!--Quarantine-->

<div id="quarantine">
	<h1>Main Quarantine Activies</h1>

  <div class="skillgroup">
		<div class="skillbar" data-skill="90%"><div id="small">Animal Crossing</div>
			<div class="skillbar-bar">
			</div>
		</div>
	</div>

	<div class="skillgroup">
				<div class="skillbar" data-skill="80%"><div id="small">Knitting</div>
			<div class="skillbar-bar">
			</div>
		</div>
	</div>

<div class="skillgroup">
				<div class="skillbar" data-skill="60%"><div id="small">Binge Watching</div>
			<div class="skillbar-bar">
			</div>
		</div>
	</div>


	<div class="skillgroup">
		<div class="skillbar" data-skill="50%"><div id="small">Being so bored you clean</div>
			<div class="skillbar-bar">
			</div>
		</div>
	</div>

			<div class="skillgroup">
		<div class="skillbar" data-skill="10%"><div id="small">Trying and failing to cook bread</div>
			<div class="skillbar-bar">
			</div>
		</div><div class="occupation">
		</div>
	</div>
												<!--End Quarantine-->

</div>





</div> <!--End Main and Wrapped-->







<!--Script Dont Touch-->

<script type="text/javascript">
$(document).ready(function(){
	$('.skillbar').each(function(){
		$(this).find('.skillbar-bar').animate({
			width:$(this).attr('data-skill')
		},2000);
	});
});

</script>

<script type="text/javascript">
function openNav() {
  document.getElementById("OverviewSidenav").style.width = "50%";
  document.getElementById("main").style.marginLeft = "50%";
}

function closeNav() {
  document.getElementById("OverviewSidenav").style.width = "0";
  document.getElementById("main").style.marginLeft= "0";
}
</script>


<script type="text/javascript">
function openNavMusic() {
  document.getElementById("MusicSidenav").style.width = "50%";
  document.getElementById("main").style.marginLeft = "50%";
}

function closeNavMusic() {
  document.getElementById("MusicSidenav").style.width = "0";
  document.getElementById("main").style.marginLeft= "0";
}
</script>


<script type="text/javascript">
function openNavMovie() {
  document.getElementById("MovieSidenav").style.width = "50%";
  document.getElementById("main").style.marginLeft = "50%";
}

function closeNavMovie() {
  document.getElementById("MovieSidenav").style.width = "0";
  document.getElementById("main").style.marginLeft= "0";
}
</script>


<script type="text/javascript">
function openNavQuarantine() {
  document.getElementById("QuarantineSidenav").style.width = "50%";
  document.getElementById("main").style.marginLeft = "50%";
}

function closeNavQuarantine() {
  document.getElementById("QuarantineSidenav").style.width = "0";
  document.getElementById("main").style.marginLeft= "0";
}
</script>


</body>
</html>