Goodies — Updates Tab

<!-- 'Updates Tab' by vitaminholland -->

<!-- Place this before the CSS part of the code. -->

<!-- Font Awesome Script -->

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

<!-- Hide & Show Script -->

<script>
$(document).ready(function(){
$(".update1-content, .update2-content, .update3-content, .update4-content").hide();
$(".update1-title, .update2-title, .update3-title, .update4-title").click(function(){
$(this).next(".update1-content, .update2-content, .update3-content, .update4-content").slideToggle('fast');
});
});
</script>

/** Paste this in the CSS part of the code. **/

#updates-wrapper {
height: calc(100% - 44.39px);
left: 20px;
top: 20px;
overflow-y: scroll;
position: fixed;
width: 212px;
z-index: 1;
}

.update1-title, .update2-title, .update3-title, .update4-title {
background: #000000;
border-radius: 100px;
color: #ffffff;
display: block;
font-size: 0.9rem;
font-variant: normal;
height: 0.9rem;
line-height: 1;
margin-bottom: 10px;
padding: 10px;
text-rendering: auto;
width: 0.9rem;
}

.update1-content, .update2-content, .update3-content, .update4-content {
background: #ffffff;
border: 1px solid #eeeeee;
border-radius: 5px;
font-size: 0.9rem;
margin-bottom: 10px;
padding: 20px;
text-align: left;
width: 150px;
}

.info li {
border-bottom: 1px solid #eeeeee;
list-style-type: none;
padding-top: 10px;
padding-bottom: 10px;
}

.info li:first-child {
padding-top: 0px;
}

.info li:last-child {
border-bottom: none;
padding-bottom: 0px;
}

.task li {
border-bottom: 1px solid #eeeeee;
list-style-type: none;
padding-top: 10px;
padding-bottom: 10px;
}

.task li:first-child {
padding-top: 0px;
}

.task li:last-child {
border-bottom: none;
padding-bottom: 0px;
}

.watchlist li {
border-bottom: 1px solid #eeeeee;
list-style-type: none;
padding-top: 10px;
padding-bottom: 10px;
}

.watchlist li:first-child {
padding-top: 0px;
}

.watchlist li:last-child {
border-bottom: none;
padding-bottom: 0px;
}

.progress-wrapper {
background: #f0f0f0;
border-radius: 100px;
margin-top: 5px;
padding: 1px;
width: calc(100% - 2px);
}

.progress {
background: #fe90c1;
border-radius: 100px;
height: 3px;
}

<!-- Paste this in the HTML part of the code. -->

<!-- Start of Updates Tab -->

<div id="updates-wrapper">

<!-- Start of About -->

<a class="update1-title" title="About The Blogger"><i class="far fa-user-circle"></i></a>

<div class="update1-content">

<div class="info">
<li><i class="far fa-smile"></i><font style="float: right;">Name</font></li>
<li><i class="fas fa-check"></i><font style="float: right;">Pronouns</font></li>
<li><i class="fas fa-birthday-cake"></i><font style="float: right;">Age</font></li>
<li><i class="fas fa-globe-americas"></i><font style="float: right;">Location</font></li>
</div>

</div>

<!-- End of About -->

<!-- Start of Tasklist -->

<a class="update2-title" title="Tasklist"><i class="fas fa-pen"></i></a>

<div class="update2-content">

<div class="task">
<li><i class="far fa-check-circle" style="color: #4cbb17"></i> Marathon Disney Movies.</li>
<li><i class="fas fa-spinner" style="color: #ff7800;"></i> Feed the cat.</li>
<li><i class="far fa-times-circle" style="color: #e60000"></i> Sweep the front gate.</li>
</div>

</div>

<!-- End of Tasklist -->

<!-- Start of Watchlist -->

<a class="update3-title" title="Currently Watching"><i class="fas fa-play-circle"></i></a>

<div class="update3-content">

<!-- Start of Watchlist List -->

<div class="watchlist">

<li>
Julie And The Phantoms: Season One
<div class="progress-wrapper">
<div class="progress" style="width: 65%;"></div>
</div>
</li>

<li>
Mean Girls
<div class="progress-wrapper">
<div class="progress" style="width: 50%;"></div>
</div>
</li>

<li>
The Princess Switch Series
<div class="progress-wrapper">
<div class="progress" style="width: 85%;"></div>
</div>
</li>

</div>

<!-- End of Watchlist List -->

</div>

<!-- End of Watchlist -->

<!-- Start of Extra Tab -->

<a class="update4-title" title="Extra Tab"><i class="far fa-comment-dots"></i></a>

<div class="update4-content">
An extra tab for you to write on. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris.
</div>

<!-- End of Extra Tab -->

</div>

<!-- End of Updates Tab -->