stardust

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>working</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: courier;
  background: #edfeff url(https://upload.wikimedia.org/wikipedia/en/9/9b/Rosalina_from_Super_Mario_Galaxy.png) no-repeat bottom right fixed;
  }

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


.tab {
    list-style-type: none;
    width:100px
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-bottom: 1px solid #ccc;
    border-right: 1px solid #ccc;
    background-color: #f2f2f2;
    float:left;
    height:300px
}

/* Float the list items side by side */

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

}

/* Change background color of links on hover */
.tab p a:hover {
    background-color: #c4ebed;
}

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

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border-top: none;
    text-align:center;
}
  .credit{
   font-size: 12px;
   position: absolute;
   bottom: 0;
   right: 0;}
    </style>
  </head>
  <body>
<div class="container">

<div class="tab">
  <p><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'About')" id="defaultOpen">about</a>
  <a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'DFI')">dfi</a>
  <a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'IDs')">ids</a>
  <a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'Interests')">interests</a></p>
</div>

<div id="About" class="tabcontent">
  <h3>About Me</h3>
  <p>Add some text about yourself here.</p>
  <p>sample text</p>
  <p><a href="http://pastebin.com/bPg3nQmn">pastebin</a></p>
</div>

<div id="DFI" class="tabcontent">
  <h3>Dont Follow If</h3>
  <ul style="list-style-type:none;">
  <li>you're straight</li>
  <li>you think dogs areent gay</li>
  <li>you dont think matpat is cool</li></ul>
</div>

<div id="IDs" class="tabcontent">
  <h3>IDs</h3>
  <p>i AM shrek.</p>
  <p>i WILL come to your house</p>
  <p> and i WILL shrek you</p>
</div>
<div id="Interests" class="tabcontent">
  <h3>Interests</h3>
  <p>dude im fucking gay.</p>
  <p>i love learning to code</p>
</div>
</div>
<div class="credit">
<a href="http://twitter.com/princesspcach">@peachie</a></div>
<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>