Goodies — Updates Tab

<!-- Updates Tab by Franchesca (extasisthemes) -->

<!-- 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">

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

#updates-wrapper {
left: 20px;
position: fixed;
top: 20px;
z-index: 1;
}

.updates-section {
background: #ffffff;
border: 1px solid #eeeeee;
border-bottom: none;
font-size: 0.8rem;
text-align: center;
text-transform: uppercase;
width: 32.8px;
}

.update-icon {
background: #ffffff;
border-bottom: 1px solid #eeeeee;
color: #000000;
display: inline-block;
font-variant: normal;
height: 0.8rem;
line-height: 1;
padding: 10px;
text-rendering: auto;
width: 0.8rem;
}

.update-icon:hover {
background: #ffd161;
color: #ffffff;
}

.update-icon:hover .content {
left: 74.8px;
opacity: 1;
-webkit-transition: all 0.9s ease;
-moz-transition: all 0.9s ease;
-o-transition: all 0.9s ease;
-webkit-transition-delay: .3s;
transition-delay: .3s;
}

.content {
background: #ffffff;
border: 1px solid #eeeeee;
color: #555555;
font-size: 0.9rem;
height: auto;
hyphens: auto;
left: -266.8px;
letter-spacing: 1px;
opacity: 1;
padding: 20px;
position: fixed;
text-align: left;
text-transform: uppercase;
top: 20px;
width: 150px;
word-wrap: break-all;
-webkit-transition: all 0.9s ease;
-moz-transition: all 0.9s ease;
-o-transition: all 0.9s ease;
-webkit-transition-delay: .3s;
transition-delay: .3s;
}

.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">

<div class="updates-section">

<!-- Start of About -->

<div class="update-icon" title="About The Blogger">

<i class="far fa-user-circle"></i>

<div class="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>

</div>

<!-- End of About -->

<!-- Start of Tasklist -->

<div class="update-icon" title="Task List">

<i class="fas fa-pen"></i>

<div class="content">

<div class="task">
<li><i class="far fa-check-circle" style="color: #4cbb17"></i> Marathon Marvel Movies.</li>
<li><i class="fas fa-spinner" style="color: #ff7800;"></i> Load the laundry in the washer.</li>
<li><i class="far fa-times-circle" style="color: #e60000"></i> Water the plants.</li>
</div>

</div>

</div>

<!-- End of Tasklist -->

<!-- Start of Watchlist -->

<div class="update-icon" title="Currently Watching">

<i class="fas fa-play-circle"></i>

<div class="content">

<!-- Start of Watchlist List -->

<div class="watchlist">

<li>
Criminal Minds: Season Seven
<div class="progress-wrapper">
<div class="progress" style="width: 65%;"></div>
</div>
</li>

<li>
Sherlock Holmes: A Game Of Shadows
<div class="progress-wrapper">
<div class="progress" style="width: 50%;"></div>
</div>
</li>

<li>
Pitch Perfect Series
<div class="progress-wrapper">
<div class="progress" style="width: 85%;"></div>
</div>
</li>

</div>

<!-- End of Watchlist List -->

</div>

</div>

<!-- End of Watchlist -->

<!-- Start of Extra Tab -->

<div class="update-icon" title="Extra Tab">

<i class="far fa-comment-dots"></i>

<div class="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>

</div>

<!-- End of Extra Tab -->

</div>

</div>

<!-- End of Updates Tab -->