SHARE
TWEET

Untitled

a guest Nov 17th, 2019 85 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="viewport" content="width=device-width, initial-scale=1">
  5. <style>
  6. body {font-family: Arial;}
  7.  
  8. /* Style the tab */
  9. .tab {
  10.   overflow: hidden;
  11.   border: 1px solid #ccc;
  12.   background-color: #f1f1f1;
  13. }
  14. img {
  15.   border-radius: 50%;
  16. }
  17.  
  18. /* Style the buttons inside the tab */
  19. .tab button {
  20.   background-color: inherit;
  21.   float: left;
  22.   border: none;
  23.   outline: none;
  24.   cursor: pointer;
  25.   padding: 14px 16px;
  26.   transition: 0.3s;
  27.   font-size: 17px;
  28. }
  29.  
  30. /* Change background color of buttons on hover */
  31. .tab button:hover {
  32.   background-color: #FFFF00;
  33. }
  34.  
  35. /* Create an active/current tablink class */
  36. .tab button.active {
  37.   background-color: #FFFF33;
  38. }
  39.  
  40. /* Style the tab content */
  41. .tabcontent {
  42.   display: none;
  43.   padding: 100px 250px;
  44.   border: 1px solid #ccc;
  45.   border-top: none;
  46. }
  47. </style>
  48. </head>
  49. <body>
  50.  
  51. <h2>Stefan Angelov' s site about UX design</h2>
  52.  
  53. <img src="img_avatar.png" alt="Avatar" style="width:200px">
  54.  
  55. <p>Here is the information about all my previus assignments</p>
  56.  
  57. <div class="tab">
  58.   <button class="tablinks" onclick="openCity(event, 'Assignment 1')">Assignment 1</button>
  59.   <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
  60.   <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
  61. </div>
  62.  
  63. <div id="Assignment 1" class="tabcontent">
  64.   <h3>Assignement 1</h3>
  65.   <p>Kur za litex</p>
  66. </div>
  67.  
  68. <div id="Paris" class="tabcontent">
  69.  
  70.   <h3>Paris</h3>
  71.   <p>Paris is the capital of France.</p>
  72. </div>
  73.  
  74. <div id="Tokyo" class="tabcontent">
  75.   <h3>Tokyo</h3>
  76.   <p>Tokyo is the capital of Japan.</p>
  77. </div>
  78.  
  79. <script>
  80. function openCity(evt, cityName) {
  81.   var i, tabcontent, tablinks;
  82.   tabcontent = document.getElementsByClassName("tabcontent");
  83.   for (i = 0; i < tabcontent.length; i++) {
  84.     tabcontent[i].style.display = "none";
  85.   }
  86.   tablinks = document.getElementsByClassName("tablinks");
  87.   for (i = 0; i < tablinks.length; i++) {
  88.     tablinks[i].className = tablinks[i].className.replace(" active", "");
  89.   }
  90.   document.getElementById(cityName).style.display = "block";
  91.   evt.currentTarget.className += " active";
  92. }
  93. </script>
  94.    
  95. </body>
  96. </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
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top