pink purp bio fade


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>waves</title>
    <!-- The style.css file allows you to change the look of your web pages.
         If you include the next line in all your web pages, they will all share the same look.
         This makes it easier to make new pages for your site. -->
    <link href="/style.css" rel="stylesheet" type="text/css" media="all">
    <style>
 body {font-family: "Lato", sans-serif;
  background: url(https://images7.alphacoders.com/573/573281.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;}

.container{
  width:500px;
  background-color:white;
  margin-left: auto;
  margin-right:auto;
  margin-top:100px;
  border: 1px solid #ccc;
  }


ul.tab {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-bottom: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Float the list items side by side */
ul.tab li {float: left;
  border-right: 1px solid #ccc;}

/* Style the links inside the list items */
ul.tab li a {
    display: inline-block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of links on hover */
ul.tab li a:hover {
    background-color: #cac1ff;
}

/* Create an active/current tablink class */
ul.tab li a:focus, .active {
    background-color: #bdb2ff;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;

    border-top: none;
}
  .credit{
   font-size: 12px;
   position: absolute;
   bottom: 0;
   right: 0;}
    </style>
  </head>
  <body>
<div class="container">

<!-- if you need to add another class do it here, and change the title of the tab by changing the text between <a></a> !-->
<ul class="tab">
  <li><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'About')" id="defaultOpen">about.</a></li>
  <li><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'PEOPLE')">people.</a></li>
  <li><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'DFI')">dfi/warnings.</a></li>
  <li><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'SHIPS')">ships.</a></li>
  <li><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'Interests')">interests.</a></li>
</ul>

<div id="About" class="tabcontent">
  <br><img src="/103.png"><br>
<!-- change the content of the tab here !-->
   <p><b>name:</b> van<br><br>
   <b>age:</b> eighteen<br><br>
   <b>pronouns:</b> he/him, they/them also acceptable<br><br>
   <b>gender:</b> nonbinary<br><br>
   <b>birthday:</b> october o1<br><br>
   <b>zodiac:</b> libra<br><br>
   <b>orientation:</b> pansexual<br><br>
   <b>timezone:</b> GMT-6 (Central)
   <h3>SCHEDULE.</h3>
   <p>currently, my work schedule is: <br><br>
   <b>MONDAY</b> 11AM-9PM<br><br>
   <b>TUESDAY</b> 945AM-5PM<br><br>
   <b>WEDNESDAY&THURSDAY</b> OFF<br><br>
   <b>FRIDAY</b> 945AM-5PM<br><br>
   <b>SATURDAY</b> 11AM-9PM<br><br>
   <b>SUNDAY</b> 5PM-9PM<br><br>

</div>

<div id="PEOPLE" class="tabcontent">
  <h3>VIP.</h3>
  <!--add a photo of mikleo here !-->
  <a href="https://twitter.com/x_bochan">brittany</a>
  <br>
  <h3>QPPS.</h3><!--add a photo of issei here!-->
  <p><a href="https://twitter.com/ofdokei">kei</a>
  <!-- add a photo of felicia here !-->
  <a href="https://twitter.com/tenebraeoracle">namine</a>
  <!-- add a photo of eichi here !-->
  <a href="https://twitter.com/eimugiP">em</a>
  <br>
  <h3>FRIENDS.</h3>
  TBA
</div>

<div id="DFI" class="tabcontent">
  <h3>DONT FOLLOW IF.</h3>
  <ul>
  <li>you're ___ist
  <li>you are, or are friends with othello (tkrb, enstars), spino (tkrb), roy/leo/hades (fire emblem), or em (reiritsu/enstars) </li>
  <li>you ship any incest or pedophilia (real pedophilia, not the 18 y/o and 17 7/o bs) u nasty</li>
  </ul>
  <h3>WARNINGS.</h3>
  <ul>
  <li>im an nsfw person so?
  <li>thats it
  <li>beware
  </ul>
</div>

<div id="SHIPS" class="tabcontent">
  <h3>LIKES.</h3>
  <ul>
  <li>zerotsu
  <li>adokoga
  <li>reikoga
  <li>eimugi
  <li>zanero (that one's for u, dorian)
  <li>me/overwhelming love and support for my qpps
  </ul>
  <h3>DISLIKES.</h3>
  <ul>
  <li>adokao
  <li>adorei
  <li>reiritsu
  <li>aoicest
  <li>LITERALLY ANY INCEST
  <li> except for the incest i wont blame u for these or anything?? like if u ship these things i wont hate u i promise they just arent 4 me (EXCEPT FOR THE INCEST)(i will high key judge u and block u for Incest Support)
  </ul>
</div>
<div id="Interests" class="tabcontent">
  <h3>ACTIVE.</h3>
  <ul>
  <li>fire emblem: fates
  <li>enstars?????
  <li>aichuu/i-chu/whatever the fuck
  <li>bnha
  <li>literally any cosplay shit
  <li><a href="https://twitter.com/archaiosalogos">dorian</a>
  </ul>
  <h3>LATENT.</h3>
  <ul>
  <li>touken ranbu
  <li>ovw
  <li>haikyuu !!
  <li>tales of zestiria
  <li>b-pro/b-project
  <li>p much any fire emblem
  </ul>
</div>
</div>
<!-- please dont delete also feel free to dm me if you have questions about coding !-->
<div class="credit">
<a href="http://twitter.com/princesspcach">@peachie</a>
<!-- do not touch this !-->
<script>
function openCity(evt, cityName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
}

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>
  </body>
</html>