API tools faq
paste
hanthesunbeam1

unlucky charms ic (light)

hanthesunbeam1
Oct 2nd, 2020 (edited)
85
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.05 KB | None | 0 0
raw download clone embed print report
  1. [border=0; display: block; position: relative; box-sizing: border-box; width: 600px; height: 520px; line-height: 0px; margin: auto; overflow: hidden; padding:0px;
  2. --bg: #f5f5f5;
  3. --mainb: #A8CDB0;
  4. --mainp: #C6A1F8;
  5. --text: #fff;
  6. --shadow: #ECE9E9;
  7. --grid: url(https://data.whicdn.com/images/138718968/original.png);
  8. --accordion: url(https://i.pinimg.com/564x/6d/46/77/6d4677e9bb9bc98fb40b06b106ca8320.jpg);
  9. --tallpic: url(https://i.pinimg.com/474x/3d/5c/10/3d5c10df857735cac704eda8e50a03f7.jpg);
  10. --leftpic: url(https://i.pinimg.com/474x/b3/0e/21/b30e215eec3d6c9d93a3ba478b2f1b10.jpg);
  11. --rightpic: url(https://i.pinimg.com/474x/ca/50/08/ca5008070503ea4676fc1cad58e2806f.jpg);]
  12.  
  13. [border=0; position: relative; box-sizing: border-box; margin: auto; width: 500px; top: 10px; height: 50px; z-index:1; padding: 0px;]
  14. [border=0; position: absolute; box-sizing: border-box; margin: auto; background: var(--bg); top: 0px; width: 500px; height: 500px; z-index:2; box-shadow: 10px 10px 0px var(--mainb);]
  15.  
  16. [comment]name[/comment]
  17. [border=0; position: absolute; box-sizing: border-box; padding-left: 10px; padding-right: 0px; line-height: 43px; font-size: 40px; color: var(--text); top: -10px; left: 260px; background: var(--mainp); box-shadow: 5px 5px var(--shadow);z-index: 5; width: 285px;][font=Cabin]-bae jeong-eun[/font][/border]
  18.  
  19. [comment]tall pic on the left[/comment]
  20. [border=0; position: absolute; box-sizing: border-box; background-position: right; background: var(--tallpic); background-size: cover; background-position: 80% 100%; top: 15px; left: 15px; width: 150px; height: 325px; z-index: 4; box-shadow: 5px 5px 0px var(--mainp); filter: grayscale(50%); padding: 0px;][/border][border=0; position: absolute; box-sizing: border-box; background: var(--mainp); opacity: 20%; top: 15px; left: 15px; width: 150px; height: 325px; z-index: 4; box-shadow: 5px 5px 0px var(--mainp); filter: grayscale(0%);][/border]
  21.  
  22. [comment]small bottom left pic[/comment]
  23. [border=0; position: absolute; box-sizing: border-box; background-position: right; background: var(--leftpic); background-size: cover; background-position: center; top: 350px; left: 50px; width: 140px; height: 140px; z-index: 4; filter: grayscale(100%);][/border]
  24.  
  25. [comment]accordion holder/start[/comment]
  26. [border=0; box-sizing: border-box; z-index: 4; position: absolute; top: 350px; left: 200px; height: 140px; width: 140px; margin-bottom: 5px; overflow: hidden; padding:0px;][border=0; width: 100%; margin-top: -25px; padding: 0px; overflow: hidden;]
  27. [accordion=100%]{slide=[border=0; background: var(--text); width: 154px; height: 130px; margin-left: -9px; border-radius: 10px;display: flex; flex-flow: column nowrap; overflow: hidden;][border=0; box-sizing: border-box; width: 200%; flex:1; overflow-x: auto; padding: 0px; margin-bottom: 0px;][border=0; width: 115px; font-size: 12px; line-height: 14px; color: #000; text-align: justify; padding: 5px 0 5px 5px; font-weight: normal; font-variant: normal;][comment]
  28.  
  29. inside text/tags
  30. [/comment][border=0; background: var(--mainb); margin: 0px -5px -10px -5px;]mood[/border]
  31. info
  32.  
  33. [border=0; background: var(--mainb); margin: 0px -5px -10px -5px;]location[/border]
  34. info
  35.  
  36. [border=0; background: var(--mainb); margin: 0px -5px -10px -5px;]outfit[/border]
  37. info
  38.  
  39. [border=0; background: var(--mainb); margin: 0px -5px -10px -5px;]interactions[/border]
  40. info
  41.  
  42. [border=0; background: var(--mainb); margin: 0px -5px -10px -5px;]mentions[/border]
  43. info
  44.  
  45. [border=0; background: var(--mainb); margin: 0px -5px -10px -5px;]tags[/border]
  46. info
  47.  
  48. [/border][/border][/border]}[comment]
  49.  
  50. end of text box
  51. [/comment][border=0; box-sizing: border-box; height: 200px;][/border]{/slide}
  52.  
  53. [comment]accordion cover/pic[/comment]
  54. {slide=[border=0; box-sizing: border-box; height: 143px; width: 143px; background: var(--accordion); background-size: cover; background-position: 50% 0%; position: absolute; top: -155px; left: -1px; pointer-events: none;][/border]}{/slide}[/accordion][/border]
  55. [/border]
  56.  
  57. [comment]right bottom pic[/comment]
  58. [border=0; position: absolute; box-sizing: border-box; background-position: right; background: var(--rightpic); background-size: cover; background-position: center; top: 350px; left: 350px; width: 140px; height: 140px; z-index: 4; filter: grayscale(100%);][/border]
  59.  
  60. [comment]scroll/text box[/comment]
  61. [border=0; background: #fff; position: absolute; box-sizing: border-box; top: 40px; left: 185px; height: 300px; width: 300px; z-index: 3; padding: 0px;][border=0; background: #fff; position: absolute; box-sizing: border-box; top: 20px;height: 270px; width: 300px; z-index: 3; z-index: 3; display: flex; flex-direction: column; overflow: hidden; text-align: justify; padding: 0px;][border=0; box-sizing: border-box; padding: 0; width: 200%; flex: 1; position: relative; overflow: auto;][border=0; box-sizing: border-box; left-padding: 10px; padding-right: 10px; margin-top: 0px; padding-bottom: 40px; width: 300px; font-size: 12px; color: black; line-height: 16px; height: 100%; text-transform: lowercase;][font= Roboto]your post goes here--Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Odio pellentesque diam volutpat commodo sed egestas egestas fringilla. Purus gravida quis blandit turpis cursus in hac. Massa sapien faucibus et molestie ac feugiat. Faucibus pulvinar elementum integer enim neque. Auctor elit sed vulputate mi sit. Nisl nunc mi ipsum faucibus vitae. Nibh cras pulvinar mattis nunc sed. Orci eu lobortis elementum nibh tellus molestie nunc non. Eget egestas purus viverra accumsan in. At quis risus sed vulputate odio. Sit amet facilisis magna etiam tempor orci. Arcu cursus vitae congue mauris. Dictum at tempor commodo ullamcorper. Volutpat commodo sed egestas egestas. Egestas tellus rutrum tellus pellentesque eu tincidunt tortor.
  62.  
  63. Feugiat vivamus at augue eget arcu dictum varius duis. Mauris pellentesque pulvinar pellentesque habitant morbi. Egestas integer eget aliquet nibh praesent tristique magna. Tincidunt arcu non sodales neque sodales ut etiam sit amet. Integer enim neque volutpat ac tincidunt vitae. Lacus viverra vitae congue eu consequat ac felis donec et. Sed blandit libero volutpat sed cras ornare arcu dui vivamus. Id aliquet risus feugiat in ante metus. Convallis convallis tellus id interdum velit laoreet. Interdum velit laoreet id donec ultrices tincidunt arcu non. Pulvinar etiam non quam lacus suspendisse faucibus.
  64.  
  65. Id cursus metus aliquam eleifend mi in nulla posuere sollicitudin. Quam quisque id diam vel quam elementum pulvinar etiam. Ipsum faucibus vitae aliquet nec ullamcorper. Mi tempus imperdiet nulla malesuada pellentesque. Morbi quis commodo odio aenean sed adipiscing. Enim ut tellus elementum sagittis vitae et leo duis. Imperdiet proin fermentum leo vel orci porta non pulvinar. Libero enim sed faucibus turpis in eu. Molestie a iaculis at erat. In aliquam sem fringilla ut. Nibh mauris cursus mattis molestie a. Diam maecenas ultricies mi eget mauris pharetra et.
  66.  
  67. Elementum nisi quis eleifend quam adipiscing vitae proin. Lacus sed turpis tincidunt id aliquet risus feugiat in ante. At volutpat diam ut venenatis tellus in. Eu augue ut lectus arcu bibendum. Sed arcu non odio euismod lacinia. Vulputate enim nulla aliquet porttitor lacus luctus accumsan tortor posuere. Sit amet tellus cras adipiscing. Mauris pharetra et ultrices neque ornare. Viverra suspendisse potenti nullam ac. Amet nisl purus in mollis. Sed felis eget velit aliquet sagittis id consectetur purus. Commodo odio aenean sed adipiscing diam donec adipiscing tristique. Porttitor lacus luctus accumsan tortor posuere ac ut. Dapibus ultrices in iaculis nunc sed augue lacus. Dictumst vestibulum rhoncus est pellentesque elit.
  68.  
  69. Amet luctus venenatis lectus magna fringilla urna. Diam maecenas ultricies mi eget mauris. Eget mi proin sed libero enim sed faucibus turpis in. Facilisis leo vel fringilla est. Dictum sit amet justo donec enim diam vulputate ut pharetra. Enim sed faucibus turpis in eu mi. Posuere lorem ipsum dolor sit amet consectetur. Integer quis auctor elit sed vulputate mi sit amet. Nulla facilisi nullam vehicula ipsum a arcu. Aliquet risus feugiat in ante metus dictum at tempor. Tellus orci ac auctor augue mauris augue neque. Neque sodales ut etiam sit amet nisl purus. Morbi quis commodo odio aenean sed adipiscing. Posuere lorem ipsum dolor sit amet consectetur adipiscing. Faucibus purus in massa tempor nec feugiat nisl pretium fusce. Habitasse platea dictumst quisque sagittis purus. Quisque id diam vel quam elementum pulvinar. Non blandit massa enim nec. Fermentum posuere urna nec tincidunt praesent semper feugiat nibh sed.[/font][/border][/border][/border][/border]
  70.  
  71. [comment]grid in the bg[/comment]
  72. [border=0; position: absolute; box-sizing: border-box; background-position: right; background: var(--grid); background-size: 133%; background-position: center; top: 110px; left: 10px; width: 400px; height: 350px; z-index:1; pointer-events: none;][/border]
  73.  
  74. [/border][/border][/border][border=0; position: relative; margin: auto; text-align: center; font-size: 10px; width: 500px; line-height: 12px;]coded by hanthesunbeam[/border]
Add Comment
Please, Sign In to add comment
Public Pastes
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!