SHARE
TWEET

stardust

alpeltz Mar 10th, 2017 (edited) 593 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="UTF-8">
  5.     <title>working</title>
  6.     <!-- The style.css file allows you to change the look of your web pages.
  7.          If you include the next line in all your web pages, they will all share the same look.
  8.          This makes it easier to make new pages for your site. -->
  9.     <link href="/style.css" rel="stylesheet" type="text/css" media="all">
  10.     <style>
  11.  body {
  12.    font-family: courier;
  13.   background: #edfeff url(https://upload.wikimedia.org/wikipedia/en/9/9b/Rosalina_from_Super_Mario_Galaxy.png) no-repeat bottom right fixed;
  14.   }
  15.  
  16. .container{
  17.   width:450px;
  18.   background-color:white;
  19.   margin-left: auto;
  20.   margin-right:auto;
  21.   margin-top:100px;
  22.   border: 1px solid #ccc;
  23.   height:300px
  24.   }
  25.  
  26.  
  27. .tab {
  28.     list-style-type: none;
  29.     width:100px
  30.     margin: 0;
  31.     padding: 0;
  32.     overflow: hidden;
  33.     border-bottom: 1px solid #ccc;
  34.     border-right: 1px solid #ccc;
  35.     background-color: #f2f2f2;  
  36.     float:left;
  37.     height:300px
  38. }
  39.  
  40. /* Float the list items side by side */
  41.  
  42. /* Style the links inside the list items */
  43. .tab p a {
  44.     display: block;
  45.     color: black;
  46.     text-align: center;
  47.     padding: 14px 16px;
  48.     text-decoration: none;
  49.     transition: 0.3s;
  50.     font-size: 17px;
  51.     font-variant:small-caps;
  52.  
  53. }
  54.  
  55. /* Change background color of links on hover */
  56. .tab p a:hover {
  57.     background-color: #c4ebed;
  58. }
  59.  
  60. /* Create an active/current tablink class */
  61. .tab p a:focus, .active {
  62.     background-color: #bae0e2;
  63. }
  64.  
  65. /* Style the tab content */
  66. .tabcontent {
  67.     display: none;
  68.     padding: 6px 12px;    
  69.     border-top: none;
  70.     text-align:center;
  71. }
  72.   .credit{
  73.    font-size: 12px;
  74.    position: absolute;
  75.    bottom: 0;
  76.    right: 0;}
  77.     </style>
  78.   </head>
  79.   <body>
  80. <div class="container">
  81.  
  82. <div class="tab">
  83.   <p><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'About')" id="defaultOpen">about</a>
  84.   <a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'DFI')">dfi</a>
  85.   <a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'IDs')">ids</a>
  86.   <a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'Interests')">interests</a></p>
  87. </div>
  88.  
  89. <div id="About" class="tabcontent">
  90.   <h3>About Me</h3>
  91.   <p>Add some text about yourself here.</p>
  92.   <p>sample text</p>
  93.   <p><a href="http://pastebin.com/bPg3nQmn">pastebin</a></p>
  94. </div>
  95.  
  96. <div id="DFI" class="tabcontent">
  97.   <h3>Dont Follow If</h3>
  98.   <ul style="list-style-type:none;">
  99.   <li>you're straight</li>
  100.   <li>you think dogs areent gay</li>
  101.   <li>you dont think matpat is cool</li></ul>
  102. </div>
  103.  
  104. <div id="IDs" class="tabcontent">
  105.   <h3>IDs</h3>
  106.   <p>i AM shrek.</p>
  107.   <p>i WILL come to your house</p>
  108.   <p> and i WILL shrek you</p>
  109. </div>
  110. <div id="Interests" class="tabcontent">
  111.   <h3>Interests</h3>
  112.   <p>dude im fucking gay.</p>
  113.   <p>i love learning to code</p>
  114. </div>
  115. </div>
  116. <div class="credit">
  117. <a href="http://twitter.com/princesspcach">@peachie</a></div>
  118. <script>
  119. function openCity(evt, cityName) {
  120.     var i, tabcontent, tablinks;
  121.     tabcontent = document.getElementsByClassName("tabcontent");
  122.     for (i = 0; i < tabcontent.length; i++) {
  123.         tabcontent[i].style.display = "none";
  124.     }
  125.     tablinks = document.getElementsByClassName("tablinks");
  126.     for (i = 0; i < tablinks.length; i++) {
  127.         tablinks[i].className = tablinks[i].className.replace(" active", "");
  128.     }
  129.     document.getElementById(cityName).style.display = "block";
  130.     evt.currentTarget.className += " active";
  131. }
  132.  
  133. // Get the element with id="defaultOpen" and click on it
  134. document.getElementById("defaultOpen").click();
  135. </script>
  136.   </body>
  137. </html>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Top