API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Feb 24th, 2020
147
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.13 KB | None | 0 0
raw download clone embed print report
  1. <link href="https://fonts.googleapis.com/css?family=Just+Me+Again+Down+Here" rel="stylesheet" />
  2. <link href="https://fonts.googleapis.com/css?family=Beth+Ellen" rel="stylesheet" />
  3. <link href="https://fonts.googleapis.com/css?family=ABeeZee" rel="stylesheet" />
  4.  
  5. <style>
  6.  
  7. body {
  8. background: #363636;
  9. color: #FFFFF0;
  10. }
  11.  
  12. #pt {
  13. height: 800px;
  14. width: 700px;
  15. overflow: auto;
  16. text-align: justify;
  17. font-family: 'ABeeZee';
  18. letter-spacing: 0.5px;
  19. font-size: 13px;
  20. }
  21.  
  22. h1 {
  23. font-family: 'Beth Ellen';
  24. text-decoration: underline #000;
  25. letter-spacing: 2.5px;
  26. text-align: center;
  27. }
  28.  
  29. .button {
  30. width: 125px;
  31. height: 125px;
  32. outline: none;
  33. cursor: pointer;
  34. filter: grayscale(100%);
  35. }
  36.  
  37. .active,.button:hover {
  38. transition: 800ms ease-in-out;
  39. filter: none;
  40. }
  41.  
  42. h2 {
  43. font-family: 'Just Me Again Down Here';
  44. text-align: center;
  45. font-size: 40px;
  46. padding: 0 15px;
  47. }
  48.  
  49. .pic {
  50. width: 100px;
  51. height: 100px;
  52. border: 1px solid #FFFFF0;
  53. object-fit: cover;
  54. margin: 0 15px;
  55. }
  56.  
  57. .name {
  58. font-family: 'Beth Ellen';
  59. }
  60.  
  61. u {
  62. font-family: 'Just Me Again Down Here';
  63. font-size: 25px;
  64. }
  65.  
  66. .half {
  67. width: 30%;
  68. margin: 15px;
  69. }
  70.  
  71. </style>
  72.  
  73. <div id="pt">
  74.  
  75. <h1>Laurence Irvine Allwine</h1>
  76.  
  77. <div style="display: flex; justify-content: space-around;">
  78. <button class="button" onclick="document.getElementById('a').style.display='block';document.getElementById('b').style.display='none';document.getElementById('c').style.display='none';document.getElementById('d').style.display='none';document.getElementById('e').style.display='none';" style="background: url(https://i.pinimg.com/564x/ea/68/e9/ea68e902bcd9225fc994696c1d7b19da.jpg); background-size: cover;"></button>
  79. <button class="button" onclick="document.getElementById('a').style.display='none';document.getElementById('b').style.display='block';document.getElementById('c').style.display='none';document.getElementById('d').style.display='none';document.getElementById('e').style.display='none';" style="background: url(https://i.pinimg.com/564x/88/33/24/8833245d017d2841bcb36cfa06154547.jpg); background-size: cover;"></button>
  80. <button class="button" onclick="document.getElementById('a').style.display='none';document.getElementById('b').style.display='none';document.getElementById('c').style.display='block';document.getElementById('d').style.display='none';document.getElementById('e').style.display='none';" style="background: url(https://i.pinimg.com/564x/76/70/49/76704964a60fe37dc4eac66c87815cb6.jpg)center; background-size: cover;"></button>
  81. <button class="button" onclick="document.getElementById('a').style.display='none';document.getElementById('b').style.display='none';document.getElementById('c').style.display='none';document.getElementById('d').style.display='block';document.getElementById('e').style.display='none';" style="background: url(https://66.media.tumblr.com/5709b173268ee3c996fd965192d38191/tumblr_oj2xf1itTR1qh24h5o1_500.jpg)center; background-size: cover;"></button>
  82. <button class="button" onclick="document.getElementById('a').style.display='none';document.getElementById('b').style.display='none';document.getElementById('c').style.display='none';document.getElementById('d').style.display='none';document.getElementById('e').style.display='block';" style="background: url(https://i.pinimg.com/564x/3d/87/e5/3d87e5bde4b898ddd62b7303b8fca1e6.jpg); background-size: cover;"></button>
  83. </div>
  84.  
  85. <div id="a" style="display: none; margin: 20px;">
  86.  
  87. <h2>laurence</h2>
  88.  
  89. <div style="display: flex; justify-content: space-around;">
  90. <div class="half">BIRTHDAY: <u>&nbsp;31st May&nbsp;&nbsp;&nbsp;</u><br />
  91. BLOOD: <u>&nbsp;<s>pure</s>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</u><br />
  92. BIRTHPLACE: <u>&nbsp;London&nbsp;&nbsp;&nbsp;</u><br />
  93. RESIDENCE: <u>&nbsp;anywhere&nbsp;&nbsp;</u><br />
  94. JOB TITLE: <u>&nbsp;writer&nbsp;&nbsp;&nbsp;&nbsp;</u></div>
  95.  
  96. <div class="half" style="background: url(https://i.pinimg.com/564x/4d/c5/58/4dc55802f32f7c3d57c4b8c7bc783dc1.jpg)left; background-size: cover; border-radius: 25px"></div>
  97.  
  98. <div class="half" style="text-align: right">
  99. DATING: <u>&nbsp;n/a&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</u><br />
  100. SEXUALITY: <u>&nbsp;straight&nbsp;&nbsp;</u><br />
  101. EYE COLOUR: <u>&nbsp;blue&nbsp;&nbsp;&nbsp;&nbsp;</u><br />
  102. HAIR COLOUR: <u>&nbsp;brown&nbsp;&nbsp;</u><br />
  103. HEIGHT: <u>&nbsp;6 feet&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</u></div>
  104. </div>
  105.  
  106. </div>
  107.  
  108. <div id="b" style="display: none; margin: 20px;">
  109.  
  110. <h2>mind</h2>
  111.  
  112. </div>
  113.  
  114. <div id="c" style="display: none; margin: 20px;">
  115.  
  116. <h2>relations</h2>
  117.  
  118. </div>
  119.  
  120. <div id="d" style="display: none; margin: 20px;">
  121.  
  122. <h2>akin</h2>
  123.  
  124. <img src="https://66.media.tumblr.com/tumblr_m48425YGXo1rsm53yo1_500.jpg" class="pic" style="float: left;" /><span class="name">Alfred V. "Freddie" Allwine</span><br /> (half-)brother<br />Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  125.  
  126. <p>&nbsp;</p>
  127.  
  128. <img src="https://66.media.tumblr.com/9cfba059e9ce0768a76ace7d5201051b/tumblr_o8gq36o7o31rv6gioo1_1280.jpg" class="pic" style="float: right;" /><div style="text-align: right;"><span class="name">Marjorie Allwine</span><br />(half-)sister<br /></div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  129.  
  130. <p>&nbsp;</p>
  131.  
  132. <img src="https://66.media.tumblr.com/58fa8e5f0bebdb439ef498ae469c631f/tumblr_o642mn0EAI1trjy1to1_400.jpg" class="pic" style="float: left;" /><span class="name">Elsie Goode</span><br />biological mother<br />Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  133.  
  134. <p>&nbsp;</p>
  135.  
  136. <img src="https://i.pinimg.com/564x/f5/6b/5d/f56b5d3a079d8123814811335ba8bf39.jpg" class="pic" style="float: right;" /><div style="text-align: right;"><span class="name">Henry Allwine</span><br />father<br /></div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  137.  
  138. <p>&nbsp;</p>
  139.  
  140. <img src="https://66.media.tumblr.com/1bae9b0898f07ee40edca6286ac00d5d/tumblr_msemrezCVc1qz7m92o1_640.jpg" class="pic" style="float: left;" /><span class="name">Violet Allwine</span><br />mother<br />Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  141.  
  142. <p>&nbsp;</p>
  143.  
  144. </div>
  145.  
  146. <div id="e" style="display: none; margin: 20px;">
  147.  
  148. <h2>poems</h2>
  149.  
  150. Keep me at night,<br />
  151. ditch me in the morning,<br />
  152. kiss my bruises softly<br />
  153. as if they were dawning.
  154.  
  155. </div>
  156.  
  157. </div>
  158.  
  159.  
  160. <div style="font-size:10px;padding-top:5px;text-align:center;">coded by: © <a href="https://spacespread.tumblr.com/" target="_blank" style="color:#FFFFF0;text-decoration:none">spacespread</a></div>
  161.  
  162. <script>
  163.  
  164. var btnContainer = document.getElementById("pt");
  165.  
  166. var btns = btnContainer.getElementsByClassName("button");
  167.  
  168. for (var i = 0; i < btns.length; i++) {
  169. btns[i].addEventListener("click", function() {
  170. var current = document.getElementsByClassName("active");
  171.  
  172. // If there's no active class
  173. if (current.length > 0) {
  174. current[0].className = current[0].className.replace(" active", "");
  175. }
  176.  
  177. // Add the active class to the current/clicked button
  178. this.className += " active";
  179. });
  180. }
  181.  
  182. </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!