luna-ria

crimson

Aug 26th, 2019
89
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.38 KB | None | 0 0
  1. [nobr]
  2.  
  3. [class name=tab]
  4. box-sizing: border-box;
  5. display: inline-block;
  6. text-align: center;
  7. font-family: Roboto Mono;
  8. font-size: 10px;
  9. color: #888;
  10. margin: 4px;
  11. padding: 2px;
  12. border-bottom: 2px solid #222;
  13. transition: all .5s ease-in-out;
  14. cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important;
  15. [/class]
  16.  
  17. [class name=selectedtab]
  18. box-sizing: border-box;
  19. display: inline-block;
  20. text-align: center;
  21. font-family: Roboto Mono;
  22. font-size: 10px;
  23. color: #fff;
  24. padding: 2px;
  25. border-bottom: 2px solid #9E1A00;
  26. transition: all .5s ease-in-out;
  27. cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important;
  28. [/class]
  29.  
  30. [class name=tab state=hover]
  31. border-bottom: 2px solid #9E1A00;
  32. cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important;
  33. [/class]
  34.  
  35. [class name=titleslide]
  36. font-family: Times New Roman;
  37. text-align: center;
  38. font-size: 30px;
  39. box-sizing: border-box;
  40. [/class]
  41.  
  42.  
  43. [script class=tab on=click]
  44. hide tabcontents
  45. hide titleslide
  46. removeClass selectedtab tab
  47. set currentTab (getText)
  48.  
  49. if (eq ${currentTab} 001) (addClass selectedtab tabone)
  50. if (eq ${currentTab} 002) (addClass selectedtab tabtwo)
  51. if (eq ${currentTab} 003) (addClass selectedtab tabthree)
  52. if (eq ${currentTab} 004) (addClass selectedtab tabfour)
  53.  
  54.  
  55. if (eq ${currentTab} 001) (show tabcontentsone)
  56. if (eq ${currentTab} 002) (show tabcontentstwo)
  57. if (eq ${currentTab} 003) (show tabcontentsthree)
  58. if (eq ${currentTab} 004) (show tabcontentsfour)
  59. [/script]
  60.  
  61.  
  62. [div=width: 600px; margin: auto; background: #111; box-sizing: border-box; padding: 20px; cursor: url(https://66.media.tumblr.com/232c090ebdd37ae4bc17adb54e1e0344/tumblr_inline_ol4nwhvSwg1uxxza6_75sq.png), auto!important;]
  63. [div=display: flex; flex-direction: row;]
  64.  
  65. [div=flex: .8; margin-right: 20px; box-sizing: border-box; padding: 30px; background: #222;]
  66. [div=box-sizing: border-box; border: 2px solid #8C1000; height: 130px; background: url(https://66.media.tumblr.com/52ba64f21c3eb3d2805f172a33b79404/tumblr_otiatlKk1A1v1epfqo5_250.png); background-size: cover;][/div]
  67. [div=padding-top: 20px; font-size: 10px; color: #777; line-height: 24px; text-align: center; font-style: italic;]
  68. you could say
  69. [br][/br]
  70. something happened
  71. [br][/br]
  72. in this town.
  73. [/div]
  74.  
  75. [div=padding-top: 20px; width: 100%; display:flex; justify-content: space-evenly;]
  76. [div class="tab tabone"]001[/div]
  77. [div class="tab tabtwo"]002[/div]
  78. [div class="tab tabthree"]003[/div]
  79. [div class="tab tabfour"]004[/div]
  80. [/div]
  81. [/div]
  82.  
  83.  
  84. [div=flex: 2;][div=background: #222; height: 330px;]
  85.  
  86. [div class=titleslide][div=padding-top: 140px; color: #9E1A00; font-weight: bold; line-height: 36px; text-transform: uppercase;]
  87. — crimson
  88. [/div][/div]
  89.  
  90.  
  91. [div class="tabcontents tabcontentsone" style="display: none;"]
  92. [div=background: #8C1000; padding: 10px; font-size: 20px; font-family: Times New Roman; color: #fff; letter-spacing: 1px;]— 001[/div]
  93. [div=height: 260px; background: #222; margin: 10px; font-size: 10px; line-height: 24px; text-align: justify; color: #999; overflow-y: auto;]
  94. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam erat libero, ultrices eget justo quis, pellentesque imperdiet justo. Cras varius erat suscipit sem maximus, et sollicitudin enim mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla egestas pretium augue, non feugiat eros placerat at. Duis sit amet eros dapibus, scelerisque nulla eu, vulputate massa. Proin et volutpat massa, quis interdum dui. Maecenas leo odio, fringilla quis facilisis at, facilisis ac lorem. Phasellus eget metus eros. Cras fermentum malesuada iaculis. Donec et odio a leo lobortis blandit maximus nec ligula.
  95. [br][/br][br][/br]
  96. Pellentesque vestibulum tellus tincidunt egestas vulputate. Maecenas eget erat tincidunt, aliquam mauris id, laoreet nunc. Nunc nulla tellus, mollis sed fringilla elementum, tempor nec nibh. Nulla ut ante eget enim ultrices tristique et sit amet magna. Duis rutrum, ante vel auctor semper, arcu dui porta est, et pellentesque elit nibh sed elit. Nulla porta dolor a ante pretium, vitae efficitur lorem posuere. Mauris lacus nisl, lacinia in viverra ac, pulvinar eget magna. Aenean volutpat aliquam dignissim. Nulla eget sodales nunc, in ornare neque. Vivamus ac dictum sem. Praesent blandit porttitor tortor vel pretium. Vestibulum eu tincidunt neque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla efficitur tortor eu ligula pulvinar, quis consectetur dolor malesuada.
  97. [/div][/div]
  98.  
  99.  
  100.  
  101. [div class="tabcontents tabcontentstwo" style="display: none;"]
  102. [div=background: #8C1000; padding: 10px; font-size: 20px; font-family: Times New Roman; color: #fff; letter-spacing: 1px;]— 002[/div]
  103. [div=height: 260px; background: #222; margin: 10px; font-size: 10px; line-height: 24px; text-align: justify; color: #999; overflow-y: auto;]
  104. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam erat libero, ultrices eget justo quis, pellentesque imperdiet justo.
  105.  
  106. [div=display: flex; flex-direction: row; margin-top: 15px;]
  107. [div=flex: .7; height: 75px; margin-right: 10px; background: url(https://66.media.tumblr.com/52ba64f21c3eb3d2805f172a33b79404/tumblr_otiatlKk1A1v1epfqo5_250.png); background-size: cover;][/div]
  108. [div=flex: 2;]
  109. [div=font-family: Times New Roman; color: #fff; font-size: 15px;]role name[/div]
  110. [div=height: 50px; overflow-y: auto;]
  111. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam erat libero, ultrices eget justo quis, pellentesque imperdiet justo.
  112. [/div]
  113. [/div]
  114. [/div]
  115.  
  116. [div=display: flex; flex-direction: row; margin-top: 15px;]
  117. [div=flex: .7; height: 75px; margin-right: 10px; background: url(https://66.media.tumblr.com/52ba64f21c3eb3d2805f172a33b79404/tumblr_otiatlKk1A1v1epfqo5_250.png); background-size: cover;][/div]
  118. [div=flex: 2;]
  119. [div=font-family: Times New Roman; color: #fff; font-size: 15px;]role name[/div]
  120. [div=height: 50px; overflow-y: auto;]
  121. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam erat libero, ultrices eget justo quis, pellentesque imperdiet justo.
  122. [/div]
  123. [/div]
  124. [/div]
  125.  
  126. [div=display: flex; flex-direction: row; margin-top: 15px;]
  127. [div=flex: .7; height: 75px; margin-right: 10px; background: url(https://66.media.tumblr.com/52ba64f21c3eb3d2805f172a33b79404/tumblr_otiatlKk1A1v1epfqo5_250.png); background-size: cover;][/div]
  128. [div=flex: 2;]
  129. [div=font-family: Times New Roman; color: #fff; font-size: 15px;]role name[/div]
  130. [div=height: 50px; overflow-y: auto;]
  131. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam erat libero, ultrices eget justo quis, pellentesque imperdiet justo.
  132. [/div]
  133. [/div]
  134. [/div]
  135.  
  136. [div=display: flex; flex-direction: row; margin-top: 15px;]
  137. [div=flex: .7; height: 75px; margin-right: 10px; background: url(https://66.media.tumblr.com/52ba64f21c3eb3d2805f172a33b79404/tumblr_otiatlKk1A1v1epfqo5_250.png); background-size: cover;][/div]
  138. [div=flex: 2;]
  139. [div=font-family: Times New Roman; color: #fff; font-size: 15px;]role name[/div]
  140. [div=height: 50px; overflow-y: auto;]
  141. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam erat libero, ultrices eget justo quis, pellentesque imperdiet justo.
  142. [/div]
  143. [/div]
  144. [/div]
  145.  
  146. [/div][/div]
  147.  
  148.  
  149.  
  150. [div class="tabcontents tabcontentsthree" style="display: none;"]
  151. [div=background: #8C1000; padding: 10px; font-size: 20px; font-family: Times New Roman; color: #fff; letter-spacing: 1px;]— 003[/div]
  152. [div=height: 260px; background: #222; margin: 10px; font-size: 10px; line-height: 24px; text-align: justify; color: #999; overflow-y: auto;]
  153. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  154.  
  155. [div=font-size: 15px; color: #fff; font-family: Times New Roman; margin-top: 15px;]— one[/div]
  156. rules rules rules
  157.  
  158. [div=font-size: 15px; color: #fff; font-family: Times New Roman; margin-top: 15px;]— two[/div]
  159. rules rules rules
  160.  
  161. [div=font-size: 15px; color: #fff; font-family: Times New Roman; margin-top: 15px;]— three[/div]
  162. rules rules rules
  163.  
  164. [div=font-size: 15px; color: #fff; font-family: Times New Roman; margin-top: 15px;]— four[/div]
  165. rules rules rules
  166.  
  167. [/div][/div]
  168.  
  169.  
  170.  
  171. [div class="tabcontents tabcontentsfour" style="display: none;"]
  172. [div=background: #8C1000; padding: 10px; font-size: 20px; font-family: Times New Roman; color: #fff; letter-spacing: 1px;]— 004[/div]
  173. [div=height: 260px; background: #222; margin: 10px; font-size: 10px; line-height: 24px; text-align: justify; color: #999; overflow-y: auto;]
  174. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam erat libero, ultrices eget justo quis, pellentesque imperdiet justo. Cras varius erat suscipit sem maximus, et sollicitudin enim mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla egestas pretium augue, non feugiat eros placerat at. Duis sit amet eros dapibus, scelerisque nulla eu, vulputate massa. Proin et volutpat massa, quis interdum dui. Maecenas leo odio, fringilla quis facilisis at, facilisis ac lorem. Phasellus eget metus eros. Cras fermentum malesuada iaculis. Donec et odio a leo lobortis blandit maximus nec ligula.
  175. [br][/br][br][/br]
  176. Pellentesque vestibulum tellus tincidunt egestas vulputate. Maecenas eget erat tincidunt, aliquam mauris id, laoreet nunc. Nunc nulla tellus, mollis sed fringilla elementum, tempor nec nibh. Nulla ut ante eget enim ultrices tristique et sit amet magna. Duis rutrum, ante vel auctor semper, arcu dui porta est, et pellentesque elit nibh sed elit. Nulla porta dolor a ante pretium, vitae efficitur lorem posuere. Mauris lacus nisl, lacinia in viverra ac, pulvinar eget magna. Aenean volutpat aliquam dignissim. Nulla eget sodales nunc, in ornare neque. Vivamus ac dictum sem. Praesent blandit porttitor tortor vel pretium. Vestibulum eu tincidunt neque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla efficitur tortor eu ligula pulvinar, quis consectetur dolor malesuada.
  177. [/div][/div]
  178.  
  179.  
  180. [/div][/div]
  181. [/div]
  182. [/div]
  183. [div=font-size: 7px; margin-top: 5px; text-align: center;]coded by luna.[/div]
  184. [/nobr]
Add Comment
Please, Sign In to add comment