API tools faq
paste
Advertisement
fluticasone

night owl cs 1.1

fluticasone
May 1st, 2023 (edited)
377
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.62 KB | None | 0 0
raw download clone embed print report
  1. [nobr]
  2. [div=display: none;][font=Noto Serif JP]font call[/font][font=Averia Serif Libre]font call[/font][font=Averia Libre]font call[/font][/div]
  3. [div=--bgIMG: url('https://placehold.co/1200x850?text=Landscape+Ratio');
  4. --bgPort: url('https://placehold.co/500x600?text=More+Square+Ratio');
  5. --darkColor: rgba(0, 0, 0, 1);
  6. --lightColor: rgba(255, 255, 255, 1);
  7. --blendColor: rgba(76, 6, 47, 1);
  8. --glowColor: rgba(255, 231, 233, 1);
  9. --aFont: 'Averia Serif Libre', serif;
  10. --mFont: 'Averia Libre', sans-serif;
  11. display: block;
  12. position: relative;
  13. width: 100%;
  14. height: clamp(600px,70vh,800px);
  15. box-sizing: border-box;
  16. overflow: hidden;
  17. isolation: isolate;]
  18. [div=position: absolute; width: calc(100% + 30px); height: calc(100% + 30px); left: -15px; top: -15px; background-image: linear-gradient(rgba(18, 7, 1, .2), rgba(18, 7, 1, .2)), var(--bgIMG); background-size: cover; background-position: center center; filter: blur(3px);] [/div]
  19. [div=position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; background: url(https://i.imgur.com/UdjBt1F.png); mix-blend-mode: soft-light; opacity: .5;] [/div]
  20. [div=display: block; position: relative; width: calc(100% + 50px); padding-right: 50px; box-sizing: border-box; height: 100%; overflow-x: hidden; overflow-y: scroll; scroll-snap-type: both mandatory; padding-left: calc(2.5em - 3px);]
  21. [div=display: flex; flex-flow: row wrap; position: relative; height: 100%; width: 100%; scroll-snap-align: center; scroll-snap-stop: always; box-sizing: border-box;]
  22. [div=flex: 1 300px; height: 100%; display: flex; flex-flow: column nowrap; scroll-snap-align: center; scroll-snap-stop: always;]
  23. [div=flex: 1 30%; background: var(--darkColor); mix-blend-mode: darken;] [/div]
  24. [div=flex: 3 70%; display: block; background: var(--bgPort) no-repeat right 50px top/auto 100%; position: relative; isolation: isolate;]
  25. [div=position: absolute; width: 5px; height: 100%; left: 5%; top: 0px; background: var(--darkColor); mix-blend-mode: darken;] [/div]
  26. [div=position: absolute; bottom: 15%; left: calc(5% + 5px); width: calc(95% - 5px);]
  27. [div=font-size: .9rem; display: inline; background: var(--darkColor); color: var(--lightColor); text-transform: uppercase; padding: 1px 5px; font-family: var(--aFont);]last name first name[/div][br][/br]
  28. [div=font-size: .9rem; display: inline; background: var(--darkColor); color: var(--lightColor); text-transform: uppercase; padding: 1px 5px; font-family: var(--aFont);]age (88)[/div][br][/br]
  29. [div=font-size: .9rem; display: inline; background: var(--darkColor); color: var(--lightColor); text-transform: uppercase; padding: 1px 5px; font-family: var(--aFont);]pronouns[/div]
  30. [/div]
  31. [div=position: absolute; right: 0px; bottom: 13%;]
  32. [div=display: block; font-size: 3.5rem; text-align: right; letter-spacing: .35em; text-transform: uppercase; font-family: var(--aFont); color: var(--lightColor); text-shadow: 0px 0px 10px var(--glowColor);]{role}[/div]
  33. [/div]
  34. [/div]
  35. [/div]
  36. [div=flex: 1.8 300px; height: 100%; position: relative; scroll-snap-align: center; scroll-snap-stop: always; overflow: hidden;]
  37. [div=position: absolute; height: 100%; width: 100%; top: 0px; left: 0px; background: var(--darkColor); mix-blend-mode: darken; display: flex; flex-flow: column nowrap; align-items: flex-start; transform: translate3d(0,0,0);]
  38. [div=flex: 1 30%; width: 100%;] [/div]
  39. [div=flex: 3 70%; width: 50px; background: var(--lightColor);] [/div]
  40. [div=position: absolute; width: 80%; right: 5%; bottom: 5%; font-size: 4rem; text-align: right; line-height: .9; font-family: var(--aFont); color: var(--blendColor); text-transform: uppercase;]{insert quote or lyric here}[/div]
  41. [/div]
  42. [div=position: absolute; top: 10%; right: 50px; writing-mode: vertical-lr; color: var(--glowColor); font-family: 'Noto Serif JP', serif; font-size: 3rem; font-weight: bold;]{namekanji}[/div]
  43. [div=position: absolute; overflow: hidden; height: 100%; width: 75%;]
  44. [div=display: block; width: calc(100% + 50px); height: 100%; overflow-x: hidden; overflow-y: scroll; padding-right: 50px; color: var(--lightColor); text-shadow: -1px -1px 0px var(--darkColor); font-family: var(--mFont); text-align: justify; font-size: 1rem; line-height: 1.4; box-sizing: border-box; padding-left: 5px;]
  45. [div=display: block; height: 50px;][/div]
  46. [div=display: block; margin-bottom: .5em;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut scelerisque mattis aliquam. Phasellus viverra quam sed nunc scelerisque vestibulum. Proin suscipit ante quis lorem ultricies dapibus. Nulla orci dui, elementum sit amet ligula ac, gravida imperdiet purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Quisque bibendum velit at tortor pellentesque pharetra. Sed dapibus hendrerit nisi bibendum dictum. Morbi porta aliquam convallis. Aliquam erat volutpat. Ut eu diam vitae purus efficitur imperdiet. Aliquam laoreet volutpat eros, in lacinia risus porta eu. In a tortor arcu. Nunc consectetur tincidunt tellus in sagittis.[/div]
  47. [div=display: block; margin-bottom: .5em;]Vivamus tempus erat nec orci blandit, molestie ultricies quam pharetra. Nunc ut nisl vulputate, fringilla dui vel, gravida leo. Integer cursus orci ut suscipit ultricies. Aliquam ac ullamcorper est. In eros purus, pretium egestas orci vitae, porttitor mattis lacus. Etiam in sapien nisi. Nulla auctor sit amet lacus rhoncus ultrices. Morbi elementum odio eu ex rutrum, at consequat leo consectetur. Aliquam velit nisi, gravida eu mauris ac, mattis cursus turpis. Duis diam nulla, imperdiet quis nisl vitae, mollis ullamcorper nulla. Ut vitae tellus in arcu ornare dignissim eget eu neque. Suspendisse elementum libero quis nunc volutpat, ut tristique justo tincidunt. Duis nec velit euismod, gravida felis sit amet, pretium dolor. Morbi consequat sollicitudin quam, a facilisis est pharetra nec. Nulla facilisi.[/div][br][/br]
  48. [div=display: block; margin-bottom: .5em;]Curabitur ante tortor, ornare at tellus sit amet, semper iaculis ante. Donec interdum metus in imperdiet mattis. Aliquam vitae nisl nisl. In et tempor metus. Sed at orci a lorem varius bibendum ut eget nisl. Vivamus molestie nisl nec justo cursus pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Cras lobortis risus eu odio tempus sodales. Curabitur eu blandit leo. Fusce id lobortis eros. Ut ultricies consequat sapien a ultrices. Vestibulum vitae nisl libero. Duis tincidunt lacus non sem ornare facilisis. Fusce sit amet lectus vulputate, interdum massa non, malesuada justo. Proin ac posuere lorem.[/div]
  49. [div=display: block; margin-bottom: .5em;]Mauris in massa volutpat, dictum erat imperdiet, tincidunt lectus. Sed dapibus lacus id massa tincidunt, quis tincidunt nibh porttitor. Donec at ante quis diam consequat convallis. Sed auctor commodo odio, eu pretium elit efficitur eu. Donec porta, sem non eleifend vehicula, lorem sem pharetra libero, id mollis tortor orci in lorem. Praesent eleifend ultricies nunc, vitae gravida leo semper at. Sed porttitor et metus at auctor. Vestibulum non tincidunt nisi, et fringilla sem. Donec sagittis a eros tristique maximus. Vestibulum pellentesque sed justo eu commodo. Aliquam ut tristique justo. Nulla pharetra diam consequat sem pulvinar facilisis.[/div]
  50. [div=display: block; margin-bottom: .5em;]Nulla porta lobortis commodo. Nulla feugiat, nisl sed tincidunt ornare, tortor dui imperdiet urna, id lobortis nisi urna quis nisi. In hac habitasse platea dictumst. Morbi fermentum, ipsum ac fermentum cursus, lacus lacus feugiat ipsum, in sagittis magna mauris quis odio. Donec condimentum scelerisque erat id euismod. Integer porta neque eget urna blandit porta. Integer pellentesque pharetra ante. Phasellus scelerisque, felis id consectetur tempor, dolor nunc mattis dui, nec pellentesque leo libero et nunc. Proin cursus aliquet molestie. Maecenas eu faucibus erat, ut commodo nunc. Ut turpis purus, pretium quis convallis nec, hendrerit ac justo. Praesent aliquam mollis molestie. Vivamus dapibus, enim iaculis sollicitudin laoreet, sapien velit eleifend urna, non dapibus nunc est sit amet ex. Morbi id aliquet est. Sed rutrum mollis odio.[/div]
  51. [div=display: block; height: 50px;][/div]
  52. [/div]
  53. [/div]
  54. [/div]
  55. [div=flex: .25 25px; width: 7.5%] [/div]
  56. [/div]
  57. [/div]
  58. [div=position: absolute;
  59. z-index: 4;
  60. bottom: 0px;
  61. left: 0px;
  62. width: 100%;
  63. background: var(--darkColor);
  64. font-family: var(--aFont);
  65. text-transform: uppercase;
  66. letter-spacing: .15em;
  67. font-size: .95rem;
  68. box-sizing: border-box;
  69. text-align: right;
  70. padding: 8px 3%;
  71. mix-blend-mode: darken;]
  72. [url=imagesource][div=display: inline-block; color: var(--lightColor);]{artist name}[/div][/url]
  73. [/div]
  74. [div=position: absolute; z-index: 5; top: 0px; left: 0px; height: 100%; background: var(--darkColor); color: var(--darkColor); font-family: var(--aFont); text-transform: uppercase; writing-mode: vertical-lr; font-size: .95rem; letter-spacing: .15em; box-sizing: border-box; padding: 0px 8px 15% 8px; gap: 5px; display: flex; flex-flow: row nowrap; justify-content: space-evenly; align-items: center; mix-blend-mode: darken;]night owl[/div]
  75. [/div]
  76. [/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!