Advertisement
crucialstar

iris

Dec 28th, 2019
188
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.15 KB | None | 0 0
  1. [nobr]
  2. [class=background]
  3. position: relative;
  4. background-color: #f7f7f7;
  5. border: 1px solid #EAECE7;
  6. max-width: 700px;
  7. height: 544px;
  8. padding: 18px;
  9. cursor: url(https://i.imgur.com/X2LfhKo.png), auto !important;
  10. margin: auto;
  11. box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  12. [/class]
  13. [class=backgroundtwo]
  14. position: relative;
  15. max-width: 450px;
  16. background-color: #fcfcfc;
  17. border: 1px solid #E2E2E2;
  18. height: 552px;
  19. margin-left: -6px;
  20. margin-top: -5px;
  21. [/class]
  22. [class=banner]
  23. background: url(https://media.giphy.com/media/VboBRThBZr9NXPrtrw/giphy.gif) no-repeat;
  24. background-size: cover;
  25. height: 150px;
  26. border-bottom: 1px solid #F5F5F6;
  27. [/class]
  28.  
  29. [class=picture]
  30. width: 250px;
  31. height: 551px;
  32. position: relative;
  33. display: inline-block;
  34. webkit-filter: grayscale(60%);
  35. filter: grayscale(60%);
  36. background: url('https://via.placeholder.com/250x551');
  37. background-size: cover;
  38. border: 1px solid #E2E2E2;
  39. [/class]
  40. [class name=picture state=hover]
  41. transition: 0.6s;
  42. filter: grayscale(60%);
  43. webkit-filter: grayscale(60%);
  44. -webkit-transition-timing-function: 0.6s ease-in-out;
  45. background: url('https://via.placeholder.com/250x551');
  46. background-size: cover;
  47. width: 250px;
  48. height: 551px;
  49. border: 1px solid #E2E2E2;
  50. [/class]
  51. [class=picturetext]
  52. position: absolute;
  53. width: 100%;
  54. height: 100%;
  55. top: 0;
  56. left: 0;
  57. opacity: 0;
  58. background-color: rgba(0,0,0,0.1);
  59. color: white;
  60. z-index: 2;
  61. [/class]
  62. [class name=picturetext state=hover]
  63. opacity: 1;
  64. [/class]
  65.  
  66. [class=tabone]
  67. position: absolute;
  68. display: inline-block;
  69. margin: auto;
  70. background-color: #505D70;
  71. border: 1px solid #F5F5F6;
  72. transform: rotate(135deg);
  73. width: 30px;
  74. height: 30px;
  75. margin-left: 205px;
  76. margin-top: -47px;
  77. [/class]
  78. [class=tabtwo]
  79. position: absolute;
  80. display: inline-block;
  81. margin: auto;
  82. background-color: #505D70;
  83. border: 1px solid #F5F5F6;
  84. transform: rotate(135deg);
  85. width: 30px;
  86. height: 30px;
  87. margin-left: 233px;
  88. margin-top: -17px;
  89. [/class]
  90. [class=tabthree]
  91. position: absolute;
  92. display: inline-block;
  93. margin: auto;
  94. background-color: #505D70;
  95. border: 1px solid #F5F5F6;
  96. transform: rotate(135deg);
  97. width: 30px;
  98. height: 30px;
  99. margin-left: 205px;
  100. margin-top: 8px
  101. [/class]
  102. [class=tabfour]
  103. position: absolute;
  104. display: inline-block;
  105. margin: auto;
  106. background-color: #505D70;
  107. border: 1px solid #F5F5F6;
  108. transform: rotate(135deg);
  109. width: 30px;
  110. height: 30px;
  111. margin-left: 178px;
  112. margin-top: -17px;
  113. [/class]
  114. [class=tab]
  115. position: absolute;
  116. -webkit-transition: -webkit-transform .8s ease-in-out;
  117. transition: transform 0s ease-in-out;
  118. [/class]
  119. [class name=activeTab]
  120. background-color: #333E4B;
  121. [/class]
  122. [class name=tab state=hover]
  123. transition: .8s;
  124. background-color: #333E4B;
  125. -webkit-transform: rotate(225deg);
  126. transform: rotate(225deg);
  127. [/class]
  128.  
  129.  
  130. [class=textcontainer]
  131. font-size: 13px;
  132. line-height: 18px;
  133. color: #888888;
  134. padding: 10px;
  135. text-align: justify;
  136. [/class]
  137. [class=textheader]
  138. text-align: center;
  139. font-size: 18px;
  140. text-transform: uppercase;
  141. [/class]
  142. [class=textinfo]
  143. background-color: #505D70;
  144. display: inline-block;
  145. padding: 2px;
  146. color: white;
  147. margin-top: 5px
  148. [/class]
  149.  
  150. [script class=tab on=click]
  151. hide tabsContent
  152. removeClass activeTab tab
  153. addClass activeTab
  154. set currentTab (getText)
  155. if (eq ${currentTab} one) (show tabsContentone)
  156. if (eq ${currentTab} two) (show tabsContenttwo)
  157. if (eq ${currentTab} three) (show tabsContentthree)
  158. if (eq ${currentTab} four) (show tabsContentfour)
  159. [/script]
  160.  
  161. [div class=background][div class=backgroundtwo][div class=banner][/div]
  162. [div class="tab tabone"][div=opacity: 0;]one[/div][/div]
  163. [div class="tab tabtwo"][div=opacity: 0;]two[/div][/div]
  164. [div class="tab tabthree"][div=opacity: 0;]three[/div][/div]
  165. [div class="tab tabfour"][div=opacity: 0;]four[/div][/div]
  166.  
  167. [div class="tabsContent tabsContentone"][div=margin-top: 40px; overflow: hidden; width: 100%; height: 350px;][div=overflow-y: scroll; width: 100%; height: 100%; padding-right: 17px; box-sizing: content-box;][div class=textcontainer][div class=textheader][font=Playfair Display][i][b]who is she ?[/b][/i][/font][/div][font=Nunito]⁺ [div class=textinfo]Name:[/div]
  168. [br][/br]
  169. ⁺ [div class=textinfo]Birthday | Age:[/div]
  170. [br][/br]
  171. ⁺ [div class=textinfo]Gender:[/div]
  172. [br][/br]
  173. ⁺ [div class=textinfo]Sexuality:[/div]
  174. [br][/br]
  175. ⁺ [div class=textinfo]Species:[/div]
  176. [br][/br]
  177. ⁺ [div class=textinfo]Blood Status:[/div]
  178. [br][/br]
  179. ⁺ [div class=textinfo]Nationality:[/div]
  180. [br][/br]
  181. ⁺ [div class=textinfo]Ethnicity:[/div]
  182. [br][/br][br][/br]
  183. [div class=textheader][font=Playfair Display][i][b]quote here[/b][/i][/font][/div]
  184. ⁺ [div class=textinfo]Faceclaim:[/div]
  185. [br][/br]
  186. ⁺ [div class=textinfo]Height:[/div]
  187. [br][/br]
  188. ⁺ [div class=textinfo]Eye Color:[/div]
  189. [br][/br]
  190. ⁺ [div class=textinfo]Hair Color:[/div]
  191. [br][/br]
  192. ⁺ [div class=textinfo]Body Type:[/div]
  193. [br][/br]
  194. ⁺ [div class=textinfo]Distinguishing Features:[/div]
  195. [br][/br]
  196. ⁺ [div class=textinfo]Markings | Body Mods:[/div]
  197. [/font][/div][/div][/div][/div]
  198.  
  199. [div class="tabsContent tabsContenttwo" style="display: none;"][div=margin-top: 40px; overflow: hidden; width: 100%; height: 350px;][div=overflow-y: scroll; width: 100%; height: 100%; padding-right: 17px; box-sizing: content-box;][div class=textcontainer][div class=textheader][font=Playfair Display][i][b]SHE WALKED IN MOON DUST[/b][/i][/font][/div][font=Nunito]⁺ [div class=textinfo]Persona:[/div]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis pellentesque ante non gravida. Donec lorem lacus, consequat in vestibulum molestie, dapibus nec est. Cras sollicitudin magna at purus luctus, sed faucibus arcu porta. Fusce viverra rhoncus scelerisque. Ut elementum hendrerit fringilla. Donec sit amet varius orci. Vivamus convallis convallis diam eu rutrum. Pellentesque ullamcorper lacus eget velit porta tempor. Vestibulum finibus mi quis ex rhoncus, sit amet suscipit enim rutrum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In hac habitasse platea dictumst. Sed eu aliquam purus.
  200. [br][/br][br][/br]
  201. Sed tincidunt augue metus, ac commodo erat tempus viverra. Nunc id est at dolor mattis tempus in et sem. Mauris auctor elit sit amet massa consectetur semper. Phasellus mollis mi eget lorem gravida, a blandit lorem mattis. Fusce viverra vel nisi et imperdiet. Vestibulum imperdiet magna sed tortor hendrerit, vitae rutrum sem dapibus. Morbi aliquam tempus dictum. Aenean auctor gravida nulla, id dignissim est tristique viverra. Maecenas posuere vel est nec sagittis. Vestibulum cursus tempor purus a aliquet. Suspendisse bibendum accumsan dui eu commodo. Sed dapibus aliquet velit gravida scelerisque.
  202. [br][/br][br][/br]
  203. [div class=textheader][font=Playfair Display][i][b]AND STARS SPRINKLED HER HAIR[/b][/i][/font][/div]
  204. ⁺ [div class=textinfo]Vices:[/div]
  205. [br][/br]
  206. ⁺ [div class=textinfo]Virtues:[/div]
  207. [br][/br]
  208. ⁺ [div class=textinfo]Habits:[/div]
  209. [br][/br]
  210. ⁺ [div class=textinfo]Quirks:[/div]
  211. [br][/br]
  212. ⁺ [div class=textinfo]Likes:[/div]
  213. [br][/br]
  214. ⁺ [div class=textinfo]Dislikes:[/div]
  215. [br][/br]
  216. ⁺ [div class=textinfo]Strengths:[/div]
  217. [br][/br]
  218. ⁺ [div class=textinfo]Weaknesses:[/div]
  219. [br][/br]
  220. ⁺ [div class=textinfo]Hobbies:[/div]
  221. [br][/br]
  222. ⁺ [div class=textinfo]Talents:[/div]
  223. [/font][/div][/div][/div][/div]
  224.  
  225. [div class="tabsContent tabsContentthree" style="display: none;"][div=margin-top: 40px; overflow: hidden; width: 100%; height: 350px;][div=overflow-y: scroll; width: 100%; height: 100%; padding-right: 17px; box-sizing: content-box;][div class=textcontainer][div class=textheader][font=Playfair Display][i][b]OF COURSE, I FEEL TOO MUCH[/b][/i][/font][/div][font=Nunito]⁺ [div class=textinfo]History:[/div] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis pellentesque ante non gravida. Donec lorem lacus, consequat in vestibulum molestie, dapibus nec est. Cras sollicitudin magna at purus luctus, sed faucibus arcu porta. Fusce viverra rhoncus scelerisque. Ut elementum hendrerit fringilla. Donec sit amet varius orci. Vivamus convallis convallis diam eu rutrum. Pellentesque ullamcorper lacus eget velit porta tempor. Vestibulum finibus mi quis ex rhoncus, sit amet suscipit enim rutrum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In hac habitasse platea dictumst. Sed eu aliquam purus.
  226. [br][/br][br][/br]
  227. Sed tincidunt augue metus, ac commodo erat tempus viverra. Nunc id est at dolor mattis tempus in et sem. Mauris auctor elit sit amet massa consectetur semper. Phasellus mollis mi eget lorem gravida, a blandit lorem mattis. Fusce viverra vel nisi et imperdiet. Vestibulum imperdiet magna sed tortor hendrerit, vitae rutrum sem dapibus. Morbi aliquam tempus dictum. Aenean auctor gravida nulla, id dignissim est tristique viverra. Maecenas posuere vel est nec sagittis. Vestibulum cursus tempor purus a aliquet. Suspendisse bibendum accumsan dui eu commodo. Sed dapibus aliquet velit gravida scelerisque.
  228. [br][/br][br][/br]
  229. [div class=textheader][font=Playfair Display][i][b]I AM A UNIVERSE OF EXPLODING STARS[/b][/i][/font][/div]
  230. ⁺ [div class=textinfo]Parents:[/div]
  231. [br][/br]
  232. ⁺ [div class=textinfo]Siblings:[/div]
  233. [br][/br]
  234. ⁺ [div class=textinfo]Famous Relatives:[/div]
  235. [br][/br]
  236. ⁺ [div class=textinfo]Family Line of Work:[/div]
  237. [br][/br]
  238. ⁺ [div class=textinfo]Home Town:[/div]
  239. [/font][/div][/div][/div][/div]
  240.  
  241. [div class="tabsContent tabsContentfour" style="display: none;"][div=margin-top: 40px; overflow: hidden; width: 100%; height: 350px;][div=overflow-y: scroll; width: 100%; height: 100%; padding-right: 17px; box-sizing: content-box;][div class=textcontainer][div class=textheader][font=Playfair Display][i][B]quote here[/b][/i][/font][/div][font=Nunito]⁺ [div class=textinfo]Other[/div]
  242. [br][/br]
  243. [/font][/div][/div][/div][/div]
  244.  
  245. [div=margin-left: 460px; margin-top: -542px;][div class=picture]
  246. [div class=picturetext][div=margin-top: 480px; text-shadow: 2px 2px 4px black; padding: 5px; text-align: center;][font=Playball][size=25px]❛ quote here ❜[/size][/font][/div][/div][/div][/div][/div][/div][/nobr][center][size=2]codedbycrucially | hover photo and click diamonds[/size][/center]
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement