diaphanous_

KOMOREBI // code

Mar 30th, 2018
518
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.17 KB | None | 0 0
  1. [nobr]
  2.  
  3. [div=height: 340px;
  4. width: 550px;
  5. background: #9FA185;
  6. margin: auto;
  7. cursor: url(https://i.imgur.com/fkP02Jr.png), auto]
  8.  
  9. [class=titleholder]height:60px;
  10. padding: 20px 10px 0px 10px;
  11. width: 320px;
  12. background-image:url(https://scontent.cdninstagram.com/vp/20cc5f599d9fcc9df822988f0d737ea2/5B3E3622/t51.2885-15/sh0.08/e35/p640x640/20482307_697380333781256_2913595995587608576_n.jpg);
  13. background-size:120%;
  14. background-position: 50% 20%;
  15. transform:rotate(-90deg);
  16. transition:all 1s ease-in-out;
  17. color: white;
  18. font-size: 30px;
  19. text-align: center;
  20. letter-spacing: 2px;
  21. text-transform: uppercase;
  22. font-family: 'Playfair Display', serif;
  23. position: relative;
  24. top: 130px;
  25. margin-left: -120px;
  26. [/class]
  27.  
  28. [class name=titleholder state=hover]color: #f1f1f1;
  29. text-shadow: 2px 1px 0px #7f806a;
  30. letter-spacing: 5px
  31. [/class]
  32.  
  33. [script class=bigimage on=mouseenter]
  34. addClass selected bigimage
  35. fadeIn 600 hoverimg[/script]
  36.  
  37. [script class=bigimage on=mouseleave]
  38. addClass selected bigimage
  39. fadeOut 800 hoverimg[/script]
  40.  
  41. [div class=titleholder]firstname.[/div]
  42.  
  43. [div class="bigimage" style="height:100%;width:130px;background-image:url(https://scontent.cdninstagram.com/vp/b19e94d1b45bebb330d4d5ee2a1de5cc/5B582C74/t51.2885-15/sh0.08/e35/p640x640/20225648_721705204704945_7592491831221288960_n.jpg);background-size:230%;background-position:50% 30%;filter: saturate(90%) contrast(100%);position:relative;top:-80px;left:100px"]
  44.  
  45. [div class="hoverimg" style="display:none;height:100%;width:130px;background-image:url(https://scontent.cdninstagram.com/vp/d5f706f795c1531032248dc0cd4946e0/5B6A7AA0/t51.2885-15/sh0.08/e35/p640x640/20482425_727406114112622_2009665826872885248_n.jpg);background-size:250%;background-position:70% 30%;"][/div][/div]
  46.  
  47. [class=container]height:240px;
  48. width: 295px;
  49. padding: 5px 5px 5px 5px;
  50. font-family: 'Playfair Display', serif;
  51. font-style: oblique;
  52. position: relative
  53. [/class]
  54.  
  55. [class=taboutside]height: 30px;
  56. width: 100px;
  57. padding-top: 20px;
  58. padding-left: 10px;
  59. padding-right: 10px;
  60. font-size: 0.55em;
  61. position: absolute;
  62. top: 50px;
  63. margin-left: 200px[/class]
  64.  
  65. [div class=container style="top:-400px;left:240px"]
  66.  
  67. [class=tabs]cursor: url(https://i.imgur.com/fkP02Jr.png), pointer;
  68. background: black;
  69. display: inline-block;
  70. color: transparent;
  71. font-size: 17px;
  72. text-align: center;
  73. transition: all .7s ease-in-out
  74. [/class]
  75.  
  76. [script class=first on=click]
  77. hide tabsContent2
  78. hide tabsContent3
  79. fadeOut 400 tabsContent2
  80. fadeOut 400 tabsContent3
  81. fadeOut 800 tabsContent1
  82. fadeIn 800 tabsContent1[/script]
  83.  
  84. [script class=second on=click]
  85. hide tabsContent1
  86. hide tabsContent3
  87. fadeOut 400 tabsContent1
  88. fadeOut 400 tabsContent3
  89. fadeOut 400 tabsContent2
  90. fadeIn 600 tabsContent2[/script]
  91.  
  92. [script class=third on=click]
  93. hide tabsContent2
  94. hide tabsContent1
  95. fadeOut 400 tabsContent2
  96. fadeOut 400 tabsContent1
  97. fadeOut 400 tabsContent3
  98. fadeIn 600 tabsContent3[/script]
  99.  
  100. [class=boxcontainer1]
  101. display: inline;
  102. position: relative;
  103. [/class]
  104.  
  105. [class=boxcontainer2]
  106. display: inline-block;
  107. opacity: 0;
  108. position: absolute;
  109. margin-left: -15px;
  110. margin-top: -10px;
  111. height: 100%;
  112. text-align: center;
  113. transition: opacity 0.4s;
  114. width: 100%;
  115. [/class]
  116.  
  117. [class name=boxcontainer2 state=hover]
  118. opacity: 1;
  119. transition: 0.8s;
  120. [/class]
  121.  
  122. [class name=box]background-color: #7f806a;
  123. border-radius: 10px 10px 10px 0px;
  124. margin-top: -10px;
  125. color: white;
  126. display: inline-block;
  127. font-family: Arial, sans-serif;
  128. font-size: 0.6em;
  129. padding: 2px 5px;
  130. letter-spacing: 0.3px;
  131. word-spacing:0.5px;
  132. text-align: center;
  133. transition: 1.5s[/class]
  134.  
  135. [class=infocontainer]height: 230px;
  136. width: 295px;
  137. padding: 5px;
  138. position: absolute;
  139. top: 50px;
  140. margin-left: -5px;
  141. color: white;
  142. font-family:'Heebo', sans-serif;
  143. font-size: 0.69em;
  144. letter-spacing: 0.2px;
  145. font-smooth: 2em;
  146. overflow: hidden
  147. [/class]
  148.  
  149. [class name=overflow]height: 100%;
  150. width: 104%;
  151. padding-right: 40px;
  152. overflow-y: auto;
  153. line-height:15px;
  154. font-style: normal;
  155. text-align: justify
  156. [/class]
  157.  
  158. [class name=titleblock]width:295px;font-size:25px;text-align:center;color:#7f806a;text-shadow: 1px 1px 0px white;font-weight:700;margin-top:-260px[/class]
  159.  
  160. [class name=line]height:1px;width:100%;background:#7f806a;[/class]
  161.  
  162. [class=firstword]height: 10px;
  163. display: inline-block;
  164. background: #7f806a;
  165. padding: 0px 5px 7px 5px;
  166. color: #fff;
  167. font-weight: 700
  168. [/class]
  169.  
  170. [div class=taboutside style=position:relative;margin-top:220px;left:-100px;color:transparent;][div class="tabs first" style="height:10px;width: 10px;border-radius: 50%;background: #7f806a"][div class=boxcontainer1]1[div class=boxcontainer2][div class=box]requisite[/div][/div][/div][/div][fa]fa-star[/fa][fa]fa-star[/fa][div class="tabs second" style="height:10px;width: 10px;border-radius: 50%;background: #7f806a"][div class=boxcontainer1]2[div class=boxcontainer2][div class=box]persona[/div][/div][/div][/div][fa]fa-star[/fa][fa]fa-star[/fa][div class="tabs third" style="height:10px;width: 10px;border-radius: 50%;background: #7f806a"][div class=boxcontainer1]3[div class=boxcontainer2][div class=box]history[/div][/div][/div][/div][fa]fa-star[/fa][fa]fa-star[/fa][/div]
  171.  
  172. [div class=content][div class="tabsContent tabsContent1"]
  173.  
  174. [div class=titleblock]requisite[/div]
  175.  
  176. [div class=infocontainer][div class=overflow][div class=firstword]input[/div] output
  177. [br][/br][br][/br]
  178. [div class=firstword]input[/div] output
  179. [br][/br][br][/br]
  180. [div class=firstword]input[/div] output
  181. [br][/br][br][/br]
  182. [div class=firstword]input[/div] output
  183. [br][/br][br][/br]
  184. [div class=firstword]input[/div] output
  185. [br][/br][br][/br]
  186. [div class=firstword]input[/div] output
  187. [br][/br][br][/br]
  188. [div class=firstword]input[/div] output
  189. [br][/br][br][/br]
  190. [div class=line][/div]
  191. [br][/br]
  192. [div class=firstword]longer input[/div] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Erat enim Polemonis. Sed ne, dum huic obsequor, vobis molestus sim. Summus dolor plures dies manere non potest? Omnes enim iucundum motum, quo sensus hilaretur. Est, ut dicis, inquit; Duo Reges: constructio interrete. Haec quo modo conveniant, non sane intellego.Illis videtur, qui illud non dubitant bonum dicere; Unum est sine dolore esse, alterum cum voluptate. Nam et complectitur verbis, quod vult, et dicit plane, quod intellegam; Oculorum, inquit Plato, est in nobis sensus acerrimus, quibus sapientiam non cernimus. Illi enim inter se dissentiunt. Quo plebiscito decreta a senatu est consuli quaestio Cn. Quid enim?De ingenio eius in his disputationibus, non de moribus quaeritur. Quis non odit sordidos, vanos, leves, futtiles? Hic quoque suus est de summoque bono dissentiens dici vere Peripateticus non potest. Tu autem negas fortem esse quemquam posse, qui dolorem malum putet. Quae cum dixisset paulumque institisset, Quid est? [/div][/div][/div][/div]
  193.  
  194. [div class=content][div class="tabsContent tabsContent2" style="display:none"]
  195.  
  196. [div class=titleblock]persona[/div]
  197.  
  198. [div class=infocontainer][div class=overflow]
  199. [div class=firstword]likes?[/div] output
  200. [br][/br][br][/br]
  201. [div class=firstword]dislikes?[/div] output
  202. [br][/br][br][/br]
  203. [div class=firstword]habits?[/div] output
  204. [br][/br][br][/br]
  205. [div class=firstword]fears?[/div] output
  206. [br][/br][br][/br]
  207. [div class=firstword]etc[/div] output
  208. [br][/br][br][/br]
  209. [div class=firstword]etc[/div] output
  210. [br][/br][br][/br]
  211. [div class=line][/div]
  212. [br][/br]
  213. [div class=firstword]probably personality[/div] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Erat enim Polemonis. Sed ne, dum huic obsequor, vobis molestus sim. Summus dolor plures dies manere non potest? Omnes enim iucundum motum, quo sensus hilaretur. Est, ut dicis, inquit; Duo Reges: constructio interrete. Haec quo modo conveniant, non sane intellego.Illis videtur, qui illud non dubitant bonum dicere; Unum est sine dolore esse, alterum cum voluptate. Nam et complectitur verbis, quod vult, et dicit plane, quod intellegam; Oculorum, inquit Plato, est in nobis sensus acerrimus, quibus sapientiam non cernimus. Illi enim inter se dissentiunt. Quo plebiscito decreta a senatu est consuli quaestio Cn. Quid enim?De ingenio eius in his disputationibus, non de moribus quaeritur. Quis non odit sordidos, vanos, leves, futtiles? Hic quoque suus est de summoque bono dissentiens dici vere Peripateticus non potest. Tu autem negas fortem esse quemquam posse, qui dolorem malum putet. Quae cum dixisset paulumque institisset, Quid est? [/div][/div][/div][/div]
  214.  
  215. [div class=content][div class="tabsContent tabsContent3" style="display:none"]
  216.  
  217. [div class=titleblock]history[/div]
  218.  
  219. [div class=infocontainer][div class=overflow][div class=firstword]probably biography[/div] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Erat enim Polemonis. Sed ne, dum huic obsequor, vobis molestus sim. Summus dolor plures dies manere non potest? Omnes enim iucundum motum, quo sensus hilaretur. Est, ut dicis, inquit; Duo Reges: constructio interrete. Haec quo modo conveniant, non sane intellego.Illis videtur, qui illud non dubitant bonum dicere; Unum est sine dolore esse, alterum cum voluptate. Nam et complectitur verbis, quod vult, et dicit plane, quod intellegam; Oculorum, inquit Plato, est in nobis sensus acerrimus, quibus sapientiam non cernimus. Illi enim inter se dissentiunt. Quo plebiscito decreta a senatu est consuli quaestio Cn. Quid enim?De ingenio eius in his disputationibus, non de moribus quaeritur. Quis non odit sordidos, vanos, leves, futtiles? Hic quoque suus est de summoque bono dissentiens dici vere Peripateticus non potest. Tu autem negas fortem esse quemquam posse, qui dolorem malum putet. Quae cum dixisset paulumque institisset, Quid est?
  220. [br][/br][br][/br]
  221. [div class=line][/div]
  222. [br][/br]
  223. relationships??
  224. [br][/br][br][/br]
  225. [div class=firstword]name?[/div] blah blah blah blah blah
  226. [br][/br][br][/br]
  227. [div class=firstword]name?[/div] blah blah blah blah blah
  228. [br][/br][br][/br]
  229. [div class=firstword]name?[/div] blah blah blah blah blah
  230. [br][/br][br][/br]
  231. [div class=firstword]name?[/div] blah blah blah blah blah[/div][/div][/div][/div][/div][/div]
  232.  
  233. [class=credit]width:550px;
  234. margin: auto;
  235. position: relative;
  236. top: 5px;
  237. font-size: 9px;
  238. color: grey
  239. [/class]
  240.  
  241. [div class=credit]code by [url='https://www.rpnation.com/members/diaphanous.38711/']@diaphanous[/url][/div]
  242. [br][/br]
  243. [/nobr]
Advertisement
Add Comment
Please, Sign In to add comment