API tools faq
paste
Advertisement
StellarNursery

Heejin / Seolbi code

StellarNursery
Apr 9th, 2019
253
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.66 KB | None | 0 0
raw download clone embed print report
  1. [nobr]
  2.  
  3. [class name=bigcontainer]
  4. height: 445px;
  5. width: 600px;
  6. margin: auto;
  7. padding: 1px;
  8. [/class]
  9.  
  10. [class name=container]
  11. height: 400px;
  12. width: 600px;
  13. background: #EFEDE7;
  14. border: 2px solid #CAB8B9;
  15. margin-top: 21px;
  16. padding-top: 1px;
  17. [/class]
  18.  
  19. [class name=pic]
  20. height: 445px;
  21. width: 251px;
  22. background: url(https://pbs.twimg.com/media/DbO_YeoV4AAQb_S.jpg);
  23. background-size: cover;
  24. float: right;
  25. margin-top: -1px;
  26. margin-right: 20px;
  27. box-shadow: 3px 3px 2px rgb(0,0,0,0.2);
  28. transition: opacity 0.8s;
  29. display: flex;
  30. flex-flow: column;
  31. justify-content: space-evenly;
  32. overflow: hidden;
  33. [/class]
  34.  
  35. [class name=basicsbackground]
  36. background: url(https://pbs.twimg.com/media/DbO_YeoV4AAQb_S.jpg);
  37. background-size: cover;
  38. [/class]
  39.  
  40. [class name=personalitybackground]
  41. background: url(https://pbs.twimg.com/media/DbO_Q76U0AAJszl.jpg);
  42. background-size: cover;
  43. [/class]
  44.  
  45. [class name=likesdislikesbackground]
  46. background: url(https://pbs.twimg.com/media/DbO_Q76UwAAKgJy.jpg);
  47. background-size: cover;
  48. [/class]
  49.  
  50. [class name=historybackground]
  51. background: url(https://pbs.twimg.com/media/DbPAlJJV4AEOZNZ.jpg);
  52. background-size: cover;
  53. background-position: 60% 0%;
  54. [/class]
  55.  
  56. [class name=gallerybackground]
  57. background: url(https://pbs.twimg.com/media/DbPAlJDVQAAFV0S.jpg);
  58. background-position: 57% 0%;
  59. background-size: cover;
  60. [/class]
  61.  
  62. [class name=pic state=hover]
  63. opacity: 0.7;
  64. [/class]
  65.  
  66. [class name=picbox]
  67. height: 30px;
  68. width: 211px;
  69. background: white;
  70. margin-left: -231px;
  71. opacity: 0.7;
  72. text-align: center;
  73. font-weight: 700;
  74. transition: 0.5s;
  75. display: flex;
  76. justify-content: center;
  77. align-items: center;
  78. cursor: pointer;
  79. [/class]
  80.  
  81. [class name=picboxhover]
  82. transform: translateX(251px);
  83. [/class]
  84.  
  85. [class name=textbox]
  86. height: 250px;
  87. width: 250px;
  88. margin-left: 40px;
  89. margin-top: 74px;
  90. overflow: hidden;
  91. color: black;
  92. font-size: 12px;
  93. [/class]
  94.  
  95. [class name=gallerypic]
  96. height: 100%;
  97. width: 100%;
  98. margin-top: 20px;
  99. [/class]
  100.  
  101. [class name=scroll]
  102. height: 100%;
  103. width: 100%;
  104. padding-right: 17px;
  105. overflow-y: scroll;
  106. padding-top: 5px;
  107. [/class]
  108.  
  109. [class name=header]
  110. font-size: 35px;
  111. transform: rotate(-4deg);
  112. color:#3F3736;
  113. float: left;
  114. margin-top: 23px;
  115. margin-left: 20px;
  116. [/class]
  117.  
  118. [script class=container]
  119. hide basicsbackground
  120. hide personalitybackground
  121. hide likesdislikesbackground
  122. hide historybackground
  123. hide gallerybackground
  124. hide header
  125. hide textbox
  126. show basicsheader
  127. show basicsbox
  128. [/script]
  129.  
  130. [script class=pic on=mouseenter]
  131. addClass picboxhover picbox
  132. [/script]
  133.  
  134. [script class=pic on=mouseleave]
  135. removeClass picboxhover picbox
  136. [/script]
  137.  
  138. [script class=basicstab on=click]
  139. addClass basicsbackground
  140. removeClass personalitybackground pic
  141. removeClass likesdislikesbackground pic
  142. removeClass historybackground pic
  143. removeClass gallerybackground pic
  144. fadeIn 500 basicsheader
  145. hide personalityheader
  146. hide likesdislikesheader
  147. hide historyheader
  148. hide galleryheader
  149. fadeIn 500 basicsbox
  150. hide personalitybox
  151. hide likesdislikesbox
  152. hide historybox
  153. hide gallerybox
  154. [/script]
  155.  
  156. [script class=personalitytab on=click]
  157. removeClass basicsbackground pic
  158. addClass personalitybackground pic
  159. removeClass likesdislikesbackground pic
  160. removeClass historybackground pic
  161. removeClass gallerybackground pic
  162. hide basicsheader
  163. fadeIn 500 personalityheader
  164. hide likesdislikesheader
  165. hide historyheader
  166. hide galleryheader
  167. hide basicsbox
  168. fadeIn 500 personalitybox
  169. hide likesdislikesbox
  170. hide historybox
  171. hide gallerybox
  172. [/script]
  173.  
  174. [script class=likesdislikestab on=click]
  175. removeClass basicsbackground pic
  176. removeClass personalitybackground pic
  177. addClass likesdislikesbackground pic
  178. removeClass historybackground pic
  179. removeClass gallerybackground pic
  180. hide basicsheader
  181. hide personalityheader
  182. fadeIn 500 likesdislikesheader
  183. hide historyheader
  184. hide galleryheader
  185. hide basicsbox
  186. hide personalitybox
  187. fadeIn 500 likesdislikesbox
  188. hide historybox
  189. hide gallerybox
  190. [/script]
  191.  
  192. [script class=historytab on=click]
  193. removeClass basicsbackground pic
  194. removeClass personalitybackground pic
  195. removeClass likesdislikesbackground pic
  196. addClass historybackground pic
  197. removeClass gallerybackground pic
  198. hide basicsheader
  199. hide personalityheader
  200. hide likesdislikesheader
  201. fadeIn 500 historyheader
  202. hide galleryheader
  203. hide basicsbox
  204. hide personalitybox
  205. hide likesdislikesbox
  206. fadeIn 500 historybox
  207. hide gallerybox
  208. [/script]
  209.  
  210. [script class=gallerytab on=click]
  211. removeClass basicsbackground pic
  212. removeClass personalitybackground pic
  213. removeClass likesdislikesbackground pic
  214. removeClass historybackground pic
  215. addClass gallerybackground pic
  216. hide basicsheader
  217. hide personalityheader
  218. hide likesdislikesheader
  219. hide historyheader
  220. fadeIn 500 galleryheader
  221. hide basicsbox
  222. hide personalitybox
  223. hide likesdislikesbox
  224. hide historybox
  225. fadeIn 500 gallerybox
  226. [/script]
  227.  
  228. [div class="bigcontainer"]
  229.  
  230. [div class="pic"]
  231. [div class="basicsbackground"][/div]
  232. [div class="personalitybackground"][/div]
  233. [div class="likesdislikesbackground"][/div]
  234. [div class="historybackground"][/div]
  235. [div class="gallerybackground"][/div]
  236. [div class="picbox basicstab"][font=Poppins]basics.[/font][/div]
  237. [div class="picbox personalitytab" style=transition-delay:0.1s;][font=Poppins]personality.[/font][/div]
  238. [div class="picbox likesdislikestab" style=transition-delay:0.2s;][font=Poppins]traits.[/font][/div]
  239. [div class="picbox historytab" style=transition-delay:0.3s;][font=Poppins]history.[/font][/div]
  240. [div class="picbox gallerytab" style=transition-delay:0.4s;][font=Poppins]gallery.[/font][/div]
  241. [/div]
  242.  
  243. [div class="container"]
  244. [div class="header basicsheader"][font=Kaushan Script]Basics[/font][/div]
  245. [div class="textbox basicsbox" style=line-height:25px;][div class="scroll" style=display:flex;align-items:center;][row][column=span4][font=Poppins][center][b][i]name[br][/br]
  246. age[br][/br]
  247. year[br][/br]
  248. gender[br][/br]
  249. sexuality[br][/br]
  250. birthday[br][/br]
  251. programme[br][/br]
  252. rank[/i][/b][/center][/font][/column][font=Poppins]
  253.  
  254. [column=span4][center]min seol-bi[br][/br]
  255. 18[br][/br]
  256. 3[br][/br]
  257. female[br][/br]
  258. bisexual[br][/br]
  259. 17th april[br][/br]
  260. group[br][/br]
  261. N/A[/center][/column][/font][column=span4][/column][/row][/div][/div]
  262.  
  263. [div class="header personalityheader"][font=Kaushan Script]Personality[/font][/div]
  264. [div class="textbox personalitybox"][div class="scroll"][font=Poppins]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis risus sed vulputate odio ut enim blandit volutpat maecenas. Aliquet sagittis id consectetur purus ut faucibus pulvinar elementum integer. Fermentum iaculis eu non diam phasellus vestibulum lorem sed risus. Cras semper auctor neque vitae tempus quam pellentesque. Sollicitudin tempor id eu nisl nunc. Placerat orci nulla pellentesque dignissim enim sit amet venenatis. Integer vitae justo eget magna fermentum iaculis eu. Dui accumsan sit amet nulla. Pretium viverra suspendisse potenti nullam ac tortor vitae. Cursus vitae congue mauris rhoncus aenean vel elit scelerisque mauris. Rhoncus est pellentesque elit ullamcorper dignissim cras. Quis auctor elit sed vulputate mi. Tortor pretium viverra suspendisse potenti nullam ac tortor vitae. Viverra nibh cras pulvinar mattis nunc sed blandit. Nulla at volutpat diam ut venenatis. Sit amet nulla facilisi morbi tempus iaculis urna. Facilisis sed odio morbi quis commodo odio aenean sed adipiscing. Lacus sed turpis tincidunt id aliquet risus feugiat in ante.
  265.  
  266. Sit amet consectetur adipiscing elit. Lectus urna duis convallis convallis tellus id interdum velit laoreet. Leo urna molestie at elementum eu facilisis sed odio morbi. Eu facilisis sed odio morbi. Auctor augue mauris augue neque gravida in fermentum et. Aliquam faucibus purus in massa tempor. Eleifend donec pretium vulputate sapien nec sagittis. Egestas fringilla phasellus faucibus scelerisque eleifend. Amet facilisis magna etiam tempor orci. Porttitor lacus luctus accumsan tortor posuere. Ut sem viverra aliquet eget sit amet tellus cras adipiscing. Non nisi est sit amet facilisis. Tellus orci ac auctor augue mauris augue neque gravida in. Magna fringilla urna porttitor rhoncus dolor purus non. Ultrices tincidunt arcu non sodales neque sodales ut. Sit amet consectetur adipiscing elit pellentesque. Eget aliquet nibh praesent tristique magna sit amet purus. Ipsum dolor sit amet consectetur adipiscing elit duis tristique sollicitudin.
  267.  
  268. Facilisis magna etiam tempor orci eu lobortis elementum. Tortor dignissim convallis aenean et tortor at risus viverra. Id neque aliquam vestibulum morbi blandit cursus. Cursus mattis molestie a iaculis at erat. Lacus luctus accumsan tortor posuere ac ut consequat semper. Id eu nisl nunc mi ipsum faucibus. Tincidunt id aliquet risus feugiat in ante metus dictum. Nisl condimentum id venenatis a condimentum vitae sapien pellentesque. Vel fringilla est ullamcorper eget nulla facilisi etiam. Iaculis at erat pellentesque adipiscing commodo elit at imperdiet. Curabitur gravida arcu ac tortor. Commodo quis imperdiet massa tincidunt nunc pulvinar sapien et. Amet nisl suscipit adipiscing bibendum est ultricies. Viverra nibh cras pulvinar mattis. Suspendisse faucibus interdum posuere lorem ipsum dolor sit amet. At ultrices mi tempus imperdiet nulla. Posuere ac ut consequat semper viverra nam libero.[/font][/div][/div]
  269.  
  270. [div class="header likesdislikesheader"][font=Kaushan Script]Traits[/font][/div]
  271. [div class="textbox likesdislikesbox" style=line-height:25px][div class="scroll"]
  272. [br][/br]
  273. [row][column=span4][font=Poppins][center][b][i]height[br][/br]
  274. weight[br][/br]
  275. hair[br][/br]
  276. eyes[br][/br]
  277. mods[br][/br]
  278. scars[br][/br]
  279. best features[/i][/b][/center][/font][/column]
  280.  
  281. [column=span4][font=Poppins][center]160cm[br][/br]
  282. 46kg[br][/br]
  283. black[br][/br]
  284. brown[br][/br]
  285. none[br][/br]
  286. none[br][/br]
  287. her eyes[/center][/font][/column][/row][br][/br][br][/br]
  288.  
  289. [row][column=span4][font=Poppins][center][b]likes[/b][br][/br]
  290. something[br][/br]
  291. something[br][/br]
  292. something[br][/br]
  293. something[br][/br]
  294. something[br][/br]
  295. something[/center][/font][/column]
  296.  
  297. [font=Poppins]
  298. [column=span4][center][b]dislikes[/b][br][/br]
  299. something[br][/br]
  300. something[br][/br]
  301. something[br][/br]
  302. something[br][/br]
  303. something[br][/br]
  304. something[/center][/column][/font][/row][br][/br][br][/br]
  305.  
  306. [row][column=span4][font=Poppins][center][b]talents[/b][br][/br]
  307. something[br][/br]
  308. something[br][/br]
  309. something[br][/br]
  310. something[br][/br]
  311. something[br][/br]
  312. something[/center][/font][/column]
  313.  
  314. [font=Poppins]
  315. [column=span4][center][b]habits[/b][br][/br]
  316. something[br][/br]
  317. something[br][/br]
  318. something[br][/br]
  319. something[br][/br]
  320. something[br][/br]
  321. something[/center][/column][/font][/row][br][/br][br][/br]
  322.  
  323. [row][column=span4][font=Poppins][center][b]hobbies[/b][br][/br]
  324. something[br][/br]
  325. something[br][/br]
  326. something[br][/br]
  327. something[br][/br]
  328. something[br][/br]
  329. something[/center][/font][/column]
  330.  
  331. [font=Poppins]
  332. [column=span4][center][b]fears[/b][br][/br]
  333. something[br][/br]
  334. something[br][/br]
  335. something[br][/br]
  336. something[br][/br]
  337. something[br][/br]
  338. something[/center][/column][/font][/row][br][/br]
  339. [/div][/div]
  340.  
  341. [div class="header historyheader"][font=Kaushan Script]History[/font][/div]
  342. [div class="textbox historybox"][div class="scroll" style=height:94%;][font=Poppins]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis risus sed vulputate odio ut enim blandit volutpat maecenas. Aliquet sagittis id consectetur purus ut faucibus pulvinar elementum integer. Fermentum iaculis eu non diam phasellus vestibulum lorem sed risus. Cras semper auctor neque vitae tempus quam pellentesque. Sollicitudin tempor id eu nisl nunc. Placerat orci nulla pellentesque dignissim enim sit amet venenatis. Integer vitae justo eget magna fermentum iaculis eu. Dui accumsan sit amet nulla. Pretium viverra suspendisse potenti nullam ac tortor vitae. Cursus vitae congue mauris rhoncus aenean vel elit scelerisque mauris. Rhoncus est pellentesque elit ullamcorper dignissim cras. Quis auctor elit sed vulputate mi. Tortor pretium viverra suspendisse potenti nullam ac tortor vitae. Viverra nibh cras pulvinar mattis nunc sed blandit. Nulla at volutpat diam ut venenatis. Sit amet nulla facilisi morbi tempus iaculis urna. Facilisis sed odio morbi quis commodo odio aenean sed adipiscing. Lacus sed turpis tincidunt id aliquet risus feugiat in ante.
  343.  
  344. Sit amet consectetur adipiscing elit. Lectus urna duis convallis convallis tellus id interdum velit laoreet. Leo urna molestie at elementum eu facilisis sed odio morbi. Eu facilisis sed odio morbi. Auctor augue mauris augue neque gravida in fermentum et. Aliquam faucibus purus in massa tempor. Eleifend donec pretium vulputate sapien nec sagittis. Egestas fringilla phasellus faucibus scelerisque eleifend. Amet facilisis magna etiam tempor orci. Porttitor lacus luctus accumsan tortor posuere. Ut sem viverra aliquet eget sit amet tellus cras adipiscing. Non nisi est sit amet facilisis. Tellus orci ac auctor augue mauris augue neque gravida in. Magna fringilla urna porttitor rhoncus dolor purus non. Ultrices tincidunt arcu non sodales neque sodales ut. Sit amet consectetur adipiscing elit pellentesque. Eget aliquet nibh praesent tristique magna sit amet purus. Ipsum dolor sit amet consectetur adipiscing elit duis tristique sollicitudin.
  345.  
  346. Facilisis magna etiam tempor orci eu lobortis elementum. Tortor dignissim convallis aenean et tortor at risus viverra. Id neque aliquam vestibulum morbi blandit cursus. Cursus mattis molestie a iaculis at erat. Lacus luctus accumsan tortor posuere ac ut consequat semper. Id eu nisl nunc mi ipsum faucibus. Tincidunt id aliquet risus feugiat in ante metus dictum. Nisl condimentum id venenatis a condimentum vitae sapien pellentesque. Vel fringilla est ullamcorper eget nulla facilisi etiam. Iaculis at erat pellentesque adipiscing commodo elit at imperdiet. Curabitur gravida arcu ac tortor. Commodo quis imperdiet massa tincidunt nunc pulvinar sapien et. Amet nisl suscipit adipiscing bibendum est ultricies. Viverra nibh cras pulvinar mattis. Suspendisse faucibus interdum posuere lorem ipsum dolor sit amet. At ultrices mi tempus imperdiet nulla. Posuere ac ut consequat semper viverra nam libero.[/font][/div][/div]
  347.  
  348. [div class="header galleryheader"][font=Kaushan Script]Gallery[/font][/div]
  349. [div class="textbox gallerybox"][div class="scroll" style=vertical-align:middle;]
  350. [div class="gallerypic pic1" style=background:url(https://66.media.tumblr.com/818223680f99c16e5784eac1d3b52554/tumblr_oxmvqiPQLB1wayxevo2_250.png);background-size:cover;margin-top:0px;][/div]
  351. [div class="gallerypic pic2" style=background:url(https://66.media.tumblr.com/1d654c410907a0ea17598e3b960b24c1/tumblr_ppalx9mGR41tn4mojo1_400.jpg);background-size:cover;][/div]
  352. [div class="gallerypic pic3" style=background:url(https://66.media.tumblr.com/c74b43782369ce67fbdc2967f264e06a/tumblr_ppalx9mGR41tn4mojo4_400.jpg);background-size:cover;][/div]
  353. [div class="gallerypic pic4" style=background:url(https://66.media.tumblr.com/72f64d5ff06021c7623bd57b13d2cb0d/tumblr_ppalx9mGR41tn4mojo2_400.jpg);background-size:cover;][/div]
  354. [div class="gallerypic pic5" style=background:url(https://66.media.tumblr.com/3ce532602d6a1131aaabefbd1a04f3aa/tumblr_ppalx9mGR41tn4mojo3_400.jpg);background-size:cover;][/div]
  355. [div class="gallerypic pic6" style=background:url(https://data.whicdn.com/images/320653470/large.jpg);background-size:cover;][/div]
  356. [div class="gallerypic pic7" style=background:url(https://i-h1.pinimg.com/345x/14/c7/d2/14c7d218de895faa999c448e46896a04.jpg);background-size:cover;][/div]
  357. [div class="gallerypic pic8" style=background:url(https://66.media.tumblr.com/fc9f17d0173a6e9e9dc520f7413aaa2e/tumblr_ppalx9mGR41tn4mojo5_400.jpg);background-size:cover;][/div]
  358. [/div][/div]
  359.  
  360. [/div]
  361.  
  362. [/div]
  363.  
  364.  
  365. [/nobr]
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!