SHARE
TWEET

Untitled

a guest Jun 16th, 2019 58 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5.  
  6.  
  7. <title>of game of thrones</title>
  8.  
  9.  
  10.  
  11. <link rel="shortcut icon" href="https://66.media.tumblr.com/4b71b4b89175dd71c279874e399d6305/tumblr_inline_pspfrlmO951wdaizp_540.png" />
  12.  
  13. <script>
  14. function openCity(evt, cityName) {
  15. var i, tabcontent, tablinks;
  16. tabcontent = document.getElementsByClassName("tabcontent");
  17. for (i = 0; i < tabcontent.length; i++) {
  18. tabcontent[i].style.display = "none";
  19. }
  20. tablinks = document.getElementsByClassName("tablinks");
  21. for (i = 0; i < tablinks.length; i++) {
  22. tablinks[i].className = tablinks[i].className.replace(" active", "");
  23. }
  24. document.getElementById(cityName).style.display = "block";
  25. evt.currentTarget.className += " active";
  26. }
  27. </script>
  28.  
  29. <!-- CUSTOM FONTS -->
  30.  
  31. <link href="https://fonts.googleapis.com/css?family=Great+Vibes|Satisfy&display=swap" rel="stylesheet">
  32.  
  33. <link href='http://fonts.googleapis.com/css?family=Oxygen' rel='stylesheet' type='text/css'>
  34.  
  35. <link href="https://fonts.googleapis.com/css?family=Shadows+Into+Light&display=swap" rel="stylesheet">
  36.  
  37. <link href="https://fonts.googleapis.com/css?family=Parisienne&display=swap" rel="stylesheet">
  38.  
  39. <link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet">
  40.  
  41. <link href="https://fonts.googleapis.com/css?family=Oswald&display=swap" rel="stylesheet">
  42.  
  43. <link href="https://fonts.googleapis.com/css?family=Lora&display=swap" rel="stylesheet">
  44.  
  45.  
  46. </head>
  47.  
  48. <style type="text/css">
  49.  
  50. @font-face { font-family:"champagne"; src:url('https://static.tumblr.com/xekbux7/zVim6yitc /champagne___limousines.ttf');}
  51.  
  52. body {
  53.      color:#323232;  /* body font color */
  54.      background-color:#fff; /* background color */
  55.      text-align:justify;
  56.      font-family:'karla';
  57.      font-size:10px;
  58. }
  59.  
  60. .container {
  61.     width:595px;
  62.     height:525px;
  63.     position: absolute;
  64.     background: #fff; /* container background color */
  65.     text-align:justify;
  66.     border-radius:4px;
  67.     overflow:auto;
  68.     margin-top: 190px;
  69.     margin-left: 580px;
  70.     border: 2px solid #323232;
  71. }
  72.  
  73. #navi {
  74.     text-align:justify;
  75.     margin-top: 750px;
  76.     margin-left: 880px;
  77.     font-weight: 900;
  78.     font-size: 10px;
  79.     text-transform: bold;
  80.     position: absolute;
  81.     color: #e3e3e3;
  82. }
  83.  
  84. #sidebar {
  85.     width:195px;
  86.     height:521px;
  87.     background: #fff; /* sidebar background color */
  88.     position:absolute;
  89.     overflow:auto;
  90.     border: 2px solid #323232;
  91.     border-radius: 4px;
  92.     margin-top: 190px;
  93.     margin-left: 290px;
  94. }
  95.  
  96. /*-----------TAB LINKS----------*/
  97. .tab {
  98.     position:absolute;
  99.     top:0px;
  100.     left:0px;
  101. }
  102.  
  103. .tab button {
  104.     background:#fff;
  105.     padding:none;
  106.     border: none;
  107.     outline: none;
  108.     cursor: pointer;
  109.     transition: 0.3s;
  110.     width:170px;
  111.     height:70px;
  112.     color:#8d8d8d;
  113.     border-radius:6px;
  114.     margin-top:10px;
  115. }
  116.  
  117. .tab img {
  118.     width:50px;
  119.     height:50px;
  120.     position:absolute;
  121.     margin-left: -70px;
  122.     margin-top: -10px;
  123. }
  124.  
  125.  
  126. /* Create an active/current tablink class */
  127. .tab button.active {
  128.     background-color:#5d5d5d;
  129.     color:#fff;
  130. }
  131.  
  132.  
  133. #linedec1 {
  134.     width: 500px;
  135.     height: 4px;
  136.     background-color: #323232;
  137.     color: #323232;
  138.     margin-top: 240px;
  139.     margin-left: 380px;
  140.     position: absolute;
  141.    
  142. }
  143.  
  144. #linedec2 {
  145.     width: 500px;
  146.     height: 4px;
  147.     background-color: #323232;
  148.     color: #323232;
  149.     margin-top: 665px;
  150.     margin-left: 380px;
  151.     position: absolute;
  152.    
  153. }
  154.  
  155. #musedetails {
  156.      text-align:right;
  157.      font-family: 'Parisienne', cursive;
  158.      font-size:16px;
  159.      font-weight:200;
  160. }
  161.  
  162. #musedetails2 {
  163.      text-align:right;
  164.      font-family: 'Lora', serif;
  165.      font-size:8px;
  166. }
  167.  
  168.  
  169. </style>
  170.  
  171. <body>
  172.  
  173. <div id="navi">
  174. <a href="/muselist" style="color: #e3e3e3">list version β—‹ for canons ● </a>
  175. <a href="/muselistog" style="color: #6d6d6d">list version β—‹ for originals</a>
  176.    
  177. </div>
  178.  
  179. <div id="linedec1"></div>
  180. <div id="linedec2"></div>
  181. <div id="sidebar">
  182. <div class="tab">
  183.  
  184. <!-- START CHARACTER 01 -->
  185. <li><button class="tablinks active" onclick="openCity(event, 'tab1')">
  186. <img src="https://via.placeholder.com/50">
  187. <div id="musedetails">
  188. <b>Robin Arryn</b></div>
  189. <div id="musedetails2">
  190. lord of the vale
  191. </div>  
  192. </button></li>
  193. <!-- END CHARACTER 01 -->
  194.  
  195. <!-- START CHARACTER 02 -->
  196. <li><button class="tablinks" onclick="openCity(event, 'tab2')">
  197. <img src="https://via.placeholder.com/50">
  198. <div id="musedetails">
  199. <b>Petyr Baelish</b></div>
  200. <div id="musedetails2">
  201. lord of baelish castle
  202. </div>  
  203. </button></li>
  204. <!-- END CHARACTER 02 -->
  205.  
  206. <!-- START CHARACTER 03 -->
  207. <li><button class="tablinks" onclick="openCity(event, 'tab2')">
  208. <img src="https://via.placeholder.com/50">
  209. <div id="musedetails">
  210. <b>Sandor Clegane</b></div>
  211. <div id="musedetails2">
  212. the hound
  213. </div>  
  214. </button></li>
  215. <!-- END CHARACTER 03 -->
  216. </div>
  217. </div>
  218.  
  219.  
  220. </div>
  221.  
  222. </body>
  223. </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