Advertisement
crucialstar

melody

Feb 2nd, 2019
282
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.30 KB | None | 0 0
  1. [nobr]
  2. [class=background]
  3. max-width: 550px;
  4. margin: auto;
  5. padding: 30px;
  6. border: 1px solid #BFBFBF;
  7. background-color: white;
  8. box-shadow: 2.5px 2px 3px #888888;
  9. margin: auto;
  10. [/class]
  11.  
  12. [class=header]
  13. font-family: 'Inconsolata';
  14. font-size: 30px;
  15. color: grey;
  16. font-style: italic;
  17. [/class]
  18. [class=imgheader]
  19. width: 100%;
  20. height: 250px;
  21. background: url('https://via.placeholder.com/500x250');
  22. [/class]
  23.  
  24. [class=header_two]
  25. text-align: center;
  26. font-family: 'Inconsolata';
  27. font-size: 18px;
  28. color: #505050;
  29. [/class]
  30. [class=text]
  31. color: grey;
  32. font-size: 14px;
  33. font-family: 'Gentium Book Basic';
  34. [/class]
  35.  
  36. [class=icon_one]
  37. float: left;
  38. margin-right: 1px;
  39. margin-top: 5px;
  40. pointer-events: none;
  41. background: url('https://via.placeholder.com/115x115');
  42. height: 115px;
  43. width: 115px;
  44. [/class]
  45. [class=icon_two]
  46. float: left;
  47. margin-right: 1px;
  48. margin-top: 5px;
  49. pointer-events: none;
  50. background: url('https://via.placeholder.com/115x115');
  51. height: 115px;
  52. width: 115px;
  53. [/class]
  54. [class=icon_three]
  55. float: left;
  56. margin-right: 1px;
  57. margin-top: 5px;
  58. background: url('https://via.placeholder.com/115x115');
  59. height: 115px;
  60. width: 115px;
  61. [/class]
  62. [class=icon_four]
  63. float: left;
  64. margin-right: 1px;
  65. margin-top: 5px;
  66. pointer-events: none;
  67. background: url('https://via.placeholder.com/115x115');
  68. height: 115px;
  69. width: 115px;
  70. [/class]
  71.  
  72. [comment][font=Inconsolata]text[/font]
  73. [font=Gentium Book Basic]text[/font][/comment]
  74.  
  75. [class=tabs]
  76. color: grey;
  77. line-height: 1;
  78. margin-top: -5px;
  79. margin-left: auto;
  80. margin-right: auto;
  81. margin-bottom: auto;
  82. text-align: center;
  83. min-width: 350px;
  84. width: 20%;
  85. [/class]
  86. [class=tab]
  87. box-sizing: border-box;
  88. cursor: pointer;
  89. display: inline-block;
  90. padding: 10px 0;
  91. width: 15%;
  92. [/class]
  93.  
  94. [script class=tab on=click]
  95. hide tabsContent
  96. set currentTab (getText)
  97. if (eq ${currentTab} ⚘) (show tabsContentVee)
  98. if (eq ${currentTab} ❀) (show tabsContentFinally)
  99. if (eq ${currentTab} ❁) (show tabsContentDoes)
  100. if (eq ${currentTab} ❋) (show tabsContentTabs)
  101. [/script]
  102.  
  103. [div class=background]
  104. [div class=header]title | name here[/div]
  105. [div class=imgheader][/div]
  106.  
  107. [div class=tabs][div class=tab style=" margin: auto"][size=22px]⚘[/size][/div][div class=tab style="margin: auto"][size=22px]❀[/size][/div][div class=tab style="margin: auto;"][size=22px]❁[/size][/div][div class=tab style="margin: auto;"][size=22px]❋[/size][/div][/div]
  108.  
  109. [div class="tabsContent tabsContentVee"][row][column=span4][div class=header_two]about them:[/div]
  110. [div=width: calc(100% - 0%); height: 247px; overflow: hidden; padding: 0px;][div=width: 100%; padding-right: 150px; height: 100%;overflow-y: scroll;][div class=text][u]name.[/u] bloop[/div]
  111. [div class=text][u]pronuncation.[/u] bloop[/div]
  112. [div class=text][u]nickname(s).[/u] bloop[/div]
  113. [div class=text][u]age.[/u] bloop[/div]
  114. [div class=text][u]birthday.[/u] bloop[/div]
  115. [div class=text][u]place of birth.[/u] bloop[/div]
  116. [div class=text][u]gender.[/u] bloop[/div]
  117. [div class=text][u]sexuality.[/u] bloop[/div]
  118. [div class=text][u]occupation.[/u] bloop[/div][/div][/div][/column][column=span4][div class=header_two]appearance:[/div]
  119. [div=width: calc(100% - 0%); height: 247px; overflow: hidden; padding: 0px;][div=width: 100%; padding-right: 150px; height: 100%;overflow-y: scroll;][div class=text][u]hair color.[/u] bloop[/div]
  120. [div class=text][u]eye color.[/u] bloop[/div]
  121. [div class=text][u]height.[/u] bloop[/div]
  122. [div class=text][u]weight.[/u] bloop[/div]
  123. [div class=text][u]body type.[/u] bloop[/div]
  124. [div class=text][u]distinguishing features[/u] bloop[/div]
  125. [div class=text][u]piercings | tattoos.[/u] bloop[/div]
  126. [div class=text][u]scars | markings.[/u] bloop[/div]
  127. [div class=text][u]faceclaim.[/u]bloop[/div][/div][/div][/column][/row][/div]
  128.  
  129. [div class="tabsContent tabsContentFinally" style="display: none;"][div class=header_two]persona:[/div]
  130. [row][column=span4][div=margin-top: 7px;][div class=icon_one][/div]
  131. [div class=icon_two][/div]
  132. [div class=icon_three][/div]
  133. [div class=icon_four][/div][/div][/column][column=span4][div=width: calc(100% - 0%); height: 240px; overflow: hidden; padding: 0px;][div=width: 100%; padding-right: 150px; height: 100%;overflow-y: scroll;][div class=text][u]personality.[/u] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris risus erat, pretium in sodales non, suscipit quis ante. Cras nulla erat, aliquet sed aliquam ac, euismod id sapien. Maecenas venenatis finibus faucibus. Phasellus sit amet laoreet nulla, et convallis diam. Integer vestibulum vulputate lectus, non placerat mauris elementum mattis. Integer vestibulum convallis justo vitae lacinia. Vivamus nec sodales turpis. Ut nisl tellus, tristique ac nunc vel, interdum pharetra ipsum. Nullam velit ipsum, sodales at pellentesque et, imperdiet ut sapien.
  134. [br][/br][br][/br]
  135. Temper justo placerat, facilisis nunc nec, vestibulum felis. Mauris euismod neque dui. Aenean vitae consequat libero, id tristique libero. Vestibulum nulla massa, fringilla at ligula vulputate, venenatis pharetra lectus. Proin lacinia at felis vel cursus. Vestibulum non felis efficitur, pretium arcu eu, ultricies arcu. Etiam suscipit, massa in auctor vulputate, sem massa pellentesque leo, quis gravida ligula quam eu velit. Etiam ut auctor dui, eu pretium enim.
  136. [br][/br][br][/br]
  137. Maecenas scelerisque volutpat ligula nec venenatis. Praesent tempor, diam vitae imperdiet tristique, leo tortor faucibus nisl, at posuere nulla enim vel libero. Nunc ac sapien eget metus tempus eleifend. Mauris et orci luctus, tincidunt odio vitae, laoreet ex. Maecenas imperdiet sem sed dictum finibus. In hac habitasse platea dictumst. In ornare massa a ipsum rhoncus, in scelerisque libero molestie. Praesent consectetur libero quis magna pharetra aliquet.[/div]
  138. [br][/br]
  139. [div class=text][u]virtues.[/u] bloop[/div]
  140. [div class=text][u]vices.[/u] bloop[/div]
  141. [div class=text][u]likes.[/u] bloop[/div]
  142. [div class=text][u]dislikes.[/u] bloop[/div]
  143. [div class=text][u]strengths.[/u] bloop[/div]
  144. [div class=text][u]fears.[/u] bloop[/div][/div][/div][/column][/row][/div]
  145.  
  146. [div class="tabsContent tabsContentDoes" style="display: none;"][div class=header_two]theirstory:[/div]
  147. [div=width: calc(100% - 0%); height: 247px; overflow: hidden; padding: 0px;][div=width: 100%; padding-right: 150px; height: 100%;overflow-y: scroll;][div class=text][u]brief bio.[/u] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris risus erat, pretium in sodales non, suscipit quis ante. Cras nulla erat, aliquet sed aliquam ac, euismod id sapien. Maecenas venenatis finibus faucibus. Phasellus sit amet laoreet nulla, et convallis diam. Integer vestibulum vulputate lectus, non placerat mauris elementum mattis. Integer vestibulum convallis justo vitae lacinia. Vivamus nec sodales turpis. Ut nisl tellus, tristique ac nunc vel, interdum pharetra ipsum. Nullam velit ipsum, sodales at pellentesque et, imperdiet ut sapien.
  148. [br][/br][br][/br]
  149. Fusce dui orci, mattis quis lacus et, hendrerit molestie velit. In tincidunt non mauris ut dignissim. Nulla gravida tristique eros, eu pulvinar massa. Etiam eu iaculis sem, at interdum erat. Proin semper justo placerat, facilisis nunc nec, vestibulum felis. Mauris euismod neque dui. Aenean vitae consequat libero, id tristique libero. Vestibulum nulla massa, fringilla at ligula vulputate, venenatis pharetra lectus. Proin lacinia at felis vel cursus. Vestibulum non felis efficitur, pretium arcu eu, ultricies arcu. Etiam suscipit, massa in auctor vulputate, sem massa pellentesque leo, quis gravida ligula quam eu velit. Etiam ut auctor dui, eu pretium enim.
  150. [br][/br][br][/br]
  151. Maecenas scelerisque volutpat ligula nec venenatis. Praesent tempor, diam vitae imperdiet tristique, leo tortor faucibus nisl, at posuere nulla enim vel libero. Nunc ac sapien eget metus tempus eleifend. Mauris et orci luctus, tincidunt odio vitae, laoreet ex. Maecenas imperdiet sem sed dictum finibus. In hac habitasse platea dictumst. In ornare massa a ipsum rhoncus, in scelerisque libero molestie. Praesent consectetur libero quis magna pharetra aliquet. [/div]
  152. [br][/br]
  153. [div class=text][u]family.[/u]
  154. [br][/br]
  155. bloop
  156. [br][/br]
  157. bloop
  158. [br][/br]
  159. bloop[/div]
  160. [br][/br]
  161. [div class=text][u]other relationships.[/u][/div][/div][/div][/div]
  162.  
  163. [div class="tabsContent tabsContentTabs" style="display: none;"][div class=header_two]important information:[/div]
  164. [div=width: calc(100% - 0%); height: 247px; overflow: hidden; padding: 0px;][div=width: 100%; padding-right: 150px; height: 100%;overflow-y: scroll;][div class=text][u]abilities:[/u] bloop[/div]
  165. [br][/br]
  166. [div class=text][u]skills:[/u] bloop[/div]
  167. [br][/br]
  168. [div class=text][u]weakness:[/u] bloop[/div][/div][/div][/div][/div][/nobr][center][size=2]codedbycrucially | hidden scroll[/size][/center]
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement