amor

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>amor</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">
    <link href="https://fonts.googleapis.com/css?family=Oswald|Raleway" rel="stylesheet">
    <style>

/* THEME BY PEACH
FREE TO USE BUT PLEASE DONT DELETE CREDIT*/

/*edit the background image and color*/

 body {
  background: url(https://68.media.tumblr.com/75db6e5ad9e245f1db5c729d97d6ca28/tumblr_o2b0g1lQrK1v52d8co1_500.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  color:#6d6d6d;
}

/*edit bg color of container, width of container, height, distance from top,  outline */

.container{
  background-color:#f2f2f2;
  width:450px;
  height:300px;
  margin-top:100px;
  outline:4px solid #db7676;
  margin-left: auto;
  margin-right:auto;
}

/* change width and height of navigation, and background color of navi */
.tab {
    width:100px;
    height:300px;
    background-color: #ededed;
    border-right: 1px solid #ccc;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    float:left;
    position:relative;
    z-index: 1;
}


/* change color of navigation text, text alignment, font details*/
.tab p a {
    color: black;
    text-align: center;
    font-size: 19px;
    font-family: 'Raleway', sans-serif;
    font-variant:small-caps;
    padding: 14px 16px;
    display: block;
    text-decoration: none;
    transition: 0.3s;
}

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

/* change background color of the active tab */
.tab p a:focus, .active {
    background-color:#bc3838;

}

/* change text alignment, and font of the body content */
.tabcontent {
    text-align:left;
    font-family: 'Raleway', sans-serif;
    display: none;
    padding: 6px 12px;
    overflow: auto;
}

/* change font of the heading titles*/
h3{
  font-family: 'Oswald', sans-serif;
}


/*slide in from left animation*/

.w3-animate-left{position:relative;animation:animateleft 0.7s}
@keyframes animateleft{from{left:-100px;opacity:0} to{left:0;opacity:1}}


/*PLEASE DONT CHANGE*/
  .credit{
   font-size: 12px;
   position: absolute;
   bottom: 0;
   right: 0;
   color:gray;
}

    </style>
  </head>

  <body>
<div class="container">

<div class="tab">
<!-- you can change the title of the tabs here, as the link name !-->
  <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 w3-animate-left">
  <h3>About Me</h3>
  <p>Add some text about yourself here.</p>
  <p>sample text</p>
  <p><a href="http://pastebin.com/Ecjq2Ubq">pastebin</a></p>
</div>


<div id="DFI" class="tabcontent w3-animate-left">
  <h3>Dont Follow If</h3>
  <ul>
  <li>hello</li>
  <li>this is a list</li>
  <li>sample sample</li></ul>
</div>


<div id="IDs" class="tabcontent w3-animate-left">
  <h3>IDs</h3>
  <p>ID 1.</p>
  <p>ID 2</p>
  <p>ID 3</p>
</div>


<div id="Interests" class="tabcontent w3-animate-left">
  <h3>Interests</h3>
  <p>sample text here</p>
  <p>hi </p>
</div>
</div>

<!-- PLEASE DONT DELETE !-->
<div class="credit">
<a href="http://twitter.com/princesspcach">@peachie</a></div>

<!-- dont touch this code!-->
<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>