API tools faq
paste
Advertisement
soxxx

move.

soxxx
Apr 7th, 2020
468
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.47 KB | None | 0 0
raw download clone embed print report
  1. [nobr]
  2. [comment][font=Hammersmith One]here[/font][/comment]
  3. [comment][font=Josefin Sans]here[/font][/comment]
  4. [comment][font=Quicksand]here[/font][/comment]
  5. [class=bkgd]
  6. --color1: #010714;
  7. --color2: #073948;
  8. --color3: #3492A4;
  9. --color4: #A1CDD4;
  10. --color5: #dff2f2;
  11. --texture: url(https://previews.123rf.com/images/epicstockmedia/epicstockmedia1602/epicstockmedia160200012/52185149-abstract-ocean-water-texture.jpg);
  12. --splash: url(https://i.pinimg.com/originals/65/3f/05/653f0597749350164f2197714c23aeef.jpg);
  13. --pic1: url(https://i.pinimg.com/originals/ef/4f/cd/ef4fcd7c5bfae0948894682d8bb55467.gif);
  14. --pic2: url(https://i.pinimg.com/originals/00/9c/51/009c517ffc3ca8fab35a4c2f28aee2ff.gif);
  15. --pic3: url(https://i.pinimg.com/originals/61/25/ce/6125ce51adc565d48ba101ce684364fa.gif);
  16. --outfit: url(https://i.pinimg.com/474x/c8/37/1e/c8371e5b6552c8bcec1ffff2b5c5b1a5.jpg);
  17. position: relative;
  18. margin-left: auto;
  19. margin-right: auto;
  20. width: 800px;
  21. height: 490px;
  22. background-color: var(--color1);
  23. border-radius: 5px;
  24. overflow: hidden;
  25. cursor: url('https://i.imgur.com/FMvuswx.png'), auto;
  26. [/class]
  27.  
  28. [comment]
  29. NOTE: however long your first name is, the wider your background picture is going to be blown up to cover the text, so try to use a HQ picture of a texture if you're going to make the name longer than a word. If you don't understand what I mean, try using the same picture of the words "mannequin" and "man".
  30. [/comment]
  31.  
  32. [class=name]
  33. position: absolute;
  34. width: auto;
  35. height: auto;
  36. font-size: 90px;
  37. line-height: 72px;
  38. left: 30px;
  39. top: 27px;
  40. text-transform: uppercase;
  41. font-weight: 900;
  42. font-family: 'Hammersmith One', sans-serif;
  43. font-style: black;
  44. letter-spacing: 10px;
  45. background: var(--texture);
  46. background-size: cover;
  47. -webkit-text-fill-color: transparent;
  48. -webkit-background-clip: text;
  49. [/class]
  50.  
  51. [class=role]
  52. position: absolute;
  53. width: 50%;
  54. height: 25px;
  55. font-size: 20px;
  56. line-height: 25px;
  57. left: 30px;
  58. top: 103px;
  59. color: var(--color3);
  60. text-transform: uppercase;
  61. font-weight: 900;
  62. font-family: 'Hammersmith One', sans-serif;
  63. font-style: italic;
  64. letter-spacing: 2px;
  65. overflow: hidden;
  66. text-align: left;
  67. [/class]
  68.  
  69. [class=pic]
  70. position: absolute;
  71. width: 110px;
  72. height: 70px;
  73. top: 170px;
  74. border-radius: 5px;
  75. [/class]
  76.  
  77. [class=pic1]
  78. background: var(--pic1);
  79. background-size: 200%;
  80. background-position: 40% 50%;
  81. left: 30px;
  82. [/class]
  83.  
  84. [class=pic2]
  85. background: var(--pic2);
  86. background-size: 100%;
  87. background-position: 50% 50%;
  88. left: 150px;
  89. [/class]
  90.  
  91. [class=pic3]
  92. background: var(--pic3);
  93. background-size: 100%;
  94. background-position: 50% 50%;
  95. left: 270px;
  96. [/class]
  97.  
  98. [class=outfitpic]
  99. position: absolute;
  100. width: 90px;
  101. height: 110px;
  102. top: 290px;
  103. left: 290px;
  104. border-radius: 5px;
  105. background: var(--outfit);
  106. background-size: 100%;
  107. background-position: 0% 100%;
  108. [/class]
  109.  
  110. [class=chip]
  111. position: absolute;
  112. width: auto;
  113. height: 18px;
  114. text-align: center;
  115. text-transform: uppercase;
  116. color: var(--color4);
  117. font-size: 12px;
  118. line-height: 22px;
  119. left: 30px;
  120. border: 0.5px solid var(--color3);
  121. padding: 0px 5px 0px 5px;
  122. border-radius: 3px;
  123. font-family: 'Josefin Sans', sans-serif;
  124. [/class]
  125.  
  126. [class=header]
  127. position: absolute;
  128. width: auto;
  129. height: auto;
  130. text-align: left;
  131. text-transform: uppercase;
  132. color: var(--color3);
  133. font-size: 10px;
  134. line-height: 22px;
  135. left: 30px;
  136. font-family: 'Josefin Sans', sans-serif;
  137. [/class]
  138.  
  139. [class=info]
  140. position: absolute;
  141. height: 20px;
  142. text-align: left;
  143. text-transform: uppercase;
  144. color: var(--color3);
  145. font-size: 10px;
  146. line-height: 22px;
  147. font-family: 'Josefin Sans', sans-serif;
  148. overflow: hidden;
  149. [/class]
  150.  
  151. [class=button]
  152. position: absolute;
  153. width: 100%;
  154. height: auto;
  155. text-align: center;
  156. top: 390px;
  157. font-size: 50px;
  158. color: var(--color3);
  159. transition-duration: 0.3s;
  160. text-transform: uppercase;
  161. font-weight: 900;
  162. font-family: 'Hammersmith One', sans-serif;
  163. font-style: black;
  164. letter-spacing: 10px;
  165. [/class]
  166.  
  167. [class name=button state=hover]
  168. color: var(--color4);
  169. font-size: 55px;
  170. top: 385px;
  171. transition-duration: 0.3s;
  172. [/class]
  173.  
  174. [class=texturebar]
  175. position: absolute;
  176. width: 100%;
  177. height: 380px;
  178. background: var(--splash);
  179. background-size: 100%;
  180. [/class]
  181.  
  182. [class=textcontainer]
  183. position: absolute;
  184. width: 400px;
  185. height: 290px;
  186. left: 410px;
  187. top: 140px;
  188. overflow: hidden;
  189. [/class]
  190.  
  191. [class=text]
  192. position: relative;
  193. width: 380px;
  194. height: 290px;
  195. font-size: 10px;
  196. line-height: 14px;
  197. color: var(--color5);
  198. text-align: justify;
  199. white-space: pre-wrap;
  200. overflow: auto;
  201. padding-right: 70px;
  202. font-family: 'Quicksand', sans-serif;
  203. [/class]
  204.  
  205. [class=pc]
  206. position: relative;
  207. height: 100%;
  208. [/class]
  209.  
  210. [class=progressouter]
  211. position: absolute;
  212. overflow: hidden;
  213. left: 30px;
  214. background-color: var(--color2);
  215. width: 240px;
  216. height: 3px;
  217. border-radius: 50px;
  218. [/class]
  219.  
  220. [class=progressinner]
  221. position: absolute;
  222. background-color: var(--color4);
  223. height: 100%;
  224. border-radius: 50px;
  225. [/class]
  226.  
  227. [class=progressanimation]
  228. animation: {post_id}loading 1s;
  229. animation-fill-mode: forwards;
  230. animation-delay: 1s;
  231. [/class]
  232.  
  233. [class=hidden]
  234. display: none;
  235. [/class]
  236.  
  237. [class=charactercontent]
  238. display: none;
  239. [/class]
  240.  
  241. [class=headercontent]
  242. display: none;
  243. [/class]
  244.  
  245. [class=credit]
  246. position: relative;
  247. overflow: hidden;
  248. width: 100%;
  249. height: 10px;
  250. text-align: center;
  251. font-style: normal;
  252. font-weight: normal;
  253. font-size: 8px;
  254. color: #dedede;
  255. opacity: 0.2;
  256. [/class]
  257.  
  258. [animation=loading]
  259. [keyframe=0]width: 0%;[/keyframe]
  260. [keyframe=100]width: 100%;[/keyframe]
  261. [/animation]
  262.  
  263. [script class=button on=click]
  264. fadeOut 100 splashcontent
  265. fadeIn 500 headercontent
  266. fadeIn 1000 charactercontent
  267. addClass progressanimation progressinner
  268. [/script]
  269.  
  270. [div class=bkgd]
  271. [div class="button splashcontent"]lee taemin[/div]
  272. [div class="texturebar splashcontent"][/div]
  273. [div class="name headercontent"]lee taemin.[/div]
  274. [div class="role headercontent"]move — you got the rhythm.[/div]
  275. [div class="chip charactercontent" style="top: 140px;"][fa]fas fa-circle[/fa] visuals[/div]
  276. [div class="pic pic1 headercontent"][/div]
  277. [div class="pic pic2 headercontent"][/div]
  278. [div class="pic pic3 headercontent"][/div]
  279. [div class="chip charactercontent" style="top: 260px;"][fa]fas fa-circle[/fa] current stats[/div]
  280.  
  281. [comment]— FIRST STAT —[/comment]
  282. [div class="header charactercontent" style="top: 285px;"][fa]fas fa-angle-double-right[/fa] health[/div]
  283. [div class="progressouter charactercontent" style="top: 305px;"]
  284. [div class=pc style="width: 80%;"][div class=progressinner][/div][/div]
  285. [/div]
  286.  
  287. [comment]— SECOND STAT —[/comment]
  288. [div class="header charactercontent" style="top: 315px;"][fa]fas fa-angle-double-right[/fa] magic energy[/div]
  289. [div class="progressouter charactercontent" style="top: 335px;"]
  290. [div class=pc style="width: 40%;"][div class=progressinner][/div][/div]
  291. [/div]
  292.  
  293. [comment]— THIRD STAT —[/comment]
  294. [div class="header charactercontent" style="top: 345px;"][fa]fas fa-angle-double-right[/fa] strength[/div]
  295. [div class="progressouter charactercontent" style="top: 365px;"]
  296. [div class=pc style="width: 60%;"][div class=progressinner][/div][/div]
  297. [/div]
  298.  
  299. [comment]— FOURTH STAT —[/comment]
  300. [div class="header charactercontent" style="top: 375px;"][fa]fas fa-angle-double-right[/fa] ammunition[/div]
  301. [div class="progressouter charactercontent" style="top: 395px;"]
  302. [div class=pc style="width: 10%;"][div class=progressinner][/div][/div]
  303. [/div]
  304.  
  305. [div class="chip charactercontent" style="top: 260px; left: 290px;"][fa]fas fa-circle[/fa] outfit[/div]
  306. [div class="outfitpic charactercontent"][/div]
  307. [div class="chip charactercontent" style="top: 105px; left: 410px;"][fa]fas fa-circle[/fa] in character[/div]
  308.  
  309. [div class="chip charactercontent" style="top: 418px; left: 30px;"][fa]fas fa-circle[/fa] location[/div]
  310. [div class="info charactercontent" style="top: 418px; left: 130px; width: 290px;"]not a single facial expression[/div]
  311. [div class="chip charactercontent" style="top: 443px; left: 30px;"][fa]fas fa-circle[/fa] tags[/div]
  312. [div class="info charactercontent" style="top: 443px; left: 95px; width: auto;"]not a single sentence can express all of you, because we're perfect just the way we are[/div]
  313.  
  314. [div class="textcontainer charactercontent"][div class=text]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ultricies lacus sed turpis tincidunt id aliquet risus feugiat in. Urna cursus eget nunc scelerisque viverra mauris in aliquam sem. Sed augue lacus viverra vitae congue eu. Elementum nisi quis eleifend quam adipiscing. Bibendum at varius vel pharetra vel turpis nunc eget lorem. Accumsan in nisl nisi scelerisque eu. Facilisis mauris sit amet massa vitae tortor condimentum lacinia quis. Platea dictumst vestibulum rhoncus est pellentesque. Justo laoreet sit amet cursus sit amet dictum. Tristique magna sit amet purus gravida. Felis imperdiet proin fermentum leo vel orci porta. Feugiat nibh sed pulvinar proin gravida. Convallis convallis tellus id interdum. Luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor. Nulla pellentesque dignissim enim sit amet venenatis urna. Dignissim enim sit amet venenatis urna cursus eget. Dui sapien eget mi proin sed libero.
  315.  
  316. Viverra accumsan in nisl nisi scelerisque eu. Aliquam etiam erat velit scelerisque in. Bibendum neque egestas congue quisque egestas diam in arcu. Pulvinar sapien et ligula ullamcorper malesuada proin libero nunc consequat. Lobortis scelerisque fermentum dui faucibus in. Pharetra pharetra massa massa ultricies mi quis hendrerit. In hac habitasse platea dictumst vestibulum rhoncus est pellentesque elit. Interdum velit euismod in pellentesque massa placerat. Mattis enim ut tellus elementum sagittis vitae. Ut consequat semper viverra nam libero. Arcu bibendum at varius vel pharetra vel turpis nunc eget. Pretium lectus quam id leo in vitae turpis. Vitae congue mauris rhoncus aenean. Sagittis eu volutpat odio facilisis mauris sit. Eu augue ut lectus arcu bibendum at varius vel. Dolor sed viverra ipsum nunc. Tellus rutrum tellus pellentesque eu tincidunt tortor aliquam nulla. Semper quis lectus nulla at volutpat diam. Velit egestas dui id ornare arcu odio. Vitae congue mauris rhoncus aenean vel elit scelerisque.
  317.  
  318. Ac tortor vitae purus faucibus ornare suspendisse sed nisi lacus. Blandit libero volutpat sed cras ornare arcu dui vivamus arcu. Bibendum arcu vitae elementum curabitur. Lacus laoreet non curabitur gravida arcu ac tortor dignissim. Ultricies tristique nulla aliquet enim. Tellus molestie nunc non blandit massa enim nec. Sed vulputate mi sit amet mauris commodo quis imperdiet massa. Libero volutpat sed cras ornare. Ornare suspendisse sed nisi lacus. Vel pharetra vel turpis nunc eget. Varius quam quisque id diam vel quam elementum. Dolor sit amet consectetur adipiscing elit ut aliquam. Tristique et egestas quis ipsum suspendisse ultrices. Lacus sed viverra tellus in hac habitasse platea dictumst vestibulum. Sed velit dignissim sodales ut eu sem integer vitae justo. Dui nunc mattis enim ut tellus. Orci sagittis eu volutpat odio facilisis mauris sit. Massa sapien faucibus et molestie ac feugiat. Malesuada fames ac turpis egestas maecenas pharetra convallis posuere morbi. Vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras.
  319.  
  320. Viverra nam libero justo laoreet sit amet cursus sit amet. Suspendisse in est ante in nibh mauris cursus. Placerat in egestas erat imperdiet sed euismod nisi porta. Risus nullam eget felis eget nunc. Enim blandit volutpat maecenas volutpat blandit aliquam etiam erat. Et molestie ac feugiat sed lectus. Ipsum dolor sit amet consectetur adipiscing elit ut aliquam. Cras semper auctor neque vitae. Sodales ut eu sem integer vitae justo eget. Id nibh tortor id aliquet lectus proin nibh nisl condimentum. Bibendum at varius vel pharetra vel turpis nunc eget. Eget est lorem ipsum dolor sit. Vel elit scelerisque mauris pellentesque pulvinar pellentesque habitant morbi. Tristique sollicitudin nibh sit amet.
  321.  
  322. Varius quam quisque id diam vel quam elementum. Mi proin sed libero enim sed faucibus turpis. Quam nulla porttitor massa id neque aliquam vestibulum morbi. Elit pellentesque habitant morbi tristique senectus et. Blandit cursus risus at ultrices mi tempus imperdiet nulla malesuada. Dictum varius duis at consectetur lorem donec massa. At risus viverra adipiscing at in tellus. Porttitor eget dolor morbi non arcu risus quis. Amet venenatis urna cursus eget nunc scelerisque viverra mauris in. Id aliquet lectus proin nibh nisl condimentum id venenatis a. Sit amet consectetur adipiscing elit duis tristique sollicitudin nibh sit. Ultrices mi tempus imperdiet nulla malesuada. Massa vitae tortor condimentum lacinia. Morbi blandit cursus risus at ultrices mi tempus imperdiet. Egestas congue quisque egestas diam. Purus sit amet luctus venenatis lectus.
  323. [/div][/div]
  324. [/div]
  325. [/nobr][div class=credit]code by [USER=2383][COLOR=#dedede]sox[/COLOR][/USER][/div]
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!