.01 Updates Tab — Starfish Base Code

    /* UPDATES TAB BASE CODE BY HTTPS://GOTH-BUTT.TUMBLR.COM/

       PASTE THIS SECTION IN RIGHT BEFORE </ STYLE >

       i tried to make this as new-to-coding-user-friendly as possible but feel free to contact me with any questions or problems that aren't addressed in the commentary. credit can be removed only after significant changes. thanks fam! */

    .tab {left:10px;bottom:0;position:fixed;width:200px;height:auto;max-height:100%;line-height:120%;overflow:hidden;z-index:99999;}
    /* feel free to change the 'width', 'left', and 'line-height' but i wouldn't recommend changing anything else. */

    /* updates tab image */
    .tabs img {cursor:pointer;width:100%;}

    .tabs img:hover {filter:saturate(150%);-moz-transition-duration:.3s;-webkit-transition-duration:.3s;-o-transition-duration:.3s;}
    .tabs {-moz-transition-duration:.3s;-webkit-transition-duration:.3s;-o-transition-duration:.3s;}
    .tabs:hover {transform:rotate(17deg);-moz-transition-duration:.3s;-webkit-transition-duration:.3s;-o-transition-duration:.3s;}
    /* those three lines above are there if ya wanna get fancy with it (ie, the little rotate the starfish does and the increased saturation on hover). [feel free to delete '.tabs', '.tabs img:hover', and '.tabs:hover' if you don't tho]
    transformations website: http://leaverou.github.io/animatable/
    filter website: https://www.w3schools.com/CSSref/css3_pr_filter.asp  */

    /* box background and text */
    .tab_content {color:#111;display:none;padding:20px;cursor:default;font-size:12px;font-family:'Ubuntu';background:rgba(255,255,255,.50);}
    /* you don't have to use the rgba background, i use it to add transparency to the background [the .50 at the end]. you can replace it with 'background:#fff' to make it simpler. also 'Ubuntu' is a custom font i got from google: https://fonts.google.com/ */

    /* title <h1> */
    .tab_content h1 {line-height:20px;font-size:19px;margin:0;}
    /* paragraph <p> */
    .tab_content p {text-align:justify;}
    /* bold <b> */
    .tab_content b {font-weight:900;font-size:10px;text-transform:uppercase;letter-spacing:.2px;}
    /* italic <i> */
    .tab_content i {font-style:italic;}
    /* big text <big> */
    .tab_content big {font-size:15px;}
    /* small text <small> */
    .tab_content small {font-size:9px;}
    /* underlined <u> */
    .tab_content u {border-bottom:1px solid gray;}

    /* divider <hr> */
    .tab_content hr {opacity:.6;}

    /* list <ul> <li> */
    .tab_content ul {list-style-type:circle;padding:5px 27px;margin:0;}
    .tab_content li {font-size:11px;}

    /* links */
    .tab_content a {border-bottom:2px solid orange;text-decoration:none;color:#111;-moz-transition-duration:.3s;-webkit-transition-duration:.3s;-o-transition-duration:.3s;}
    .tab_content a:hover {border-bottom:3px solid purple;color:#000;-moz-transition-duration:.3s;-webkit-transition-duration:.3s;-o-transition-duration:.3s;}


<!-- PASTE THIS SECTION IN RIGHT AFTER < BODY > -->

<!-- script for clickable updates tab (wouldn't recommend changing anything except "slow") -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $(".tabs").click(function(){
    $(".tab_content").slideToggle("slow"); /* <- can be "slow" or "fast" */
  });
});
</script>

<!-- custom font 'Ubuntu' -->
<link href="https://fonts.googleapis.com/css?family=Ubuntu&display=swap" rel="stylesheet">

<!-- do NOT change the order of 'tab', 'tabs', and 'tab_content' or it'll fuck up (unless you know what you're doing), but everything after 'tab_content' feel free to mess about with :) -->

<!-- first -->
<div class="tab">

<!-- second -->
<div class="tabs">
<img src="https://www.goodfreephotos.com/albums/vector-images/orange-star-vector-clipart.png"> <!-- replace everything inside the "" to paste your own url for your image. [saving the picture you want as a draft on tumblr, then right click and select 'copy image address' and paste here between the ""] -->
</div>

<!-- third -->
<div class="tab_content">

<h1><center> Cute Lil Starfish </center></h1>

<p><a href="https://en.wikipedia.org/wiki/Pink">Pink</a> is a pale shade of red that is named after a flower of the same name. Also I suck <strike>donkey dick</strike> at competently <u>explaining</u> things.</p>

<hr>

<i>a list if you like:</i>
<ul>
    <li>books</li>
    <li>music</li>
    <li>dogs</li>
    <li>cats</li>
</ul>

<hr>

<center>
<big> big boi text </big> <br>
and <br>
<small> smoll cute babey </small>
</center>

<hr>

<b>reading:</b> the great gatsby <br>
<b>listening to:</b> son lux <br>
<b>watching:</b> avatar the last airbender

<!-- make sure you don't delete the '</ div >'! very important they stay intact and where they are, at the end of the updates tab! -->
</div>
</div>