Untitled

<!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, 'DFI')">DFI</a></li>
  <li><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'IDs')">IDs</a></li>
  <li><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'Interests')">Interests</a></li>
</ul>

<div id="About" class="tabcontent">
  <h3>About Me</h3>
<!-- change the content of the tab here !-->
  <p>Add some text about yourself here.</p>
  <p>sample text</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>
<!-- please dont delete also feel free to dm me if you have questions about coding !-->
<div class="credit">
<a href="http://twitter.com/tcadsworth">@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>