Advertisement
ooksie

cherry blossom (uxie x sugardust.)

Oct 28th, 2020 (edited)
126
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. [border=transparent;
  2. *background image;
  3. --bg: url('https://images.unsplash.com/photo-1522748906645-95d8adfd52c7?ixlib=rb-1.2.1&w=1000&q=80');
  4. *colour of the buttons;
  5. --color-1: #ddf0ff;
  6. *colour of the main title + quote + button shadows;
  7. --color-2: #ffa8bc;
  8. *shadow/outlines on the main title + quote + tab titles;
  9. --outline:#fff;
  10. *border of the tab boxes;
  11. --border: #000;
  12. *text colour;
  13. --t-color: #000;
  14. *tab background colour;
  15. --tab-bg: rgb(255, 255, 255, 0.8);
  16.  
  17. height:500px; width:100%; max-width:450px; padding:0; padding-bottom:40px; position:relative; line-height:0; margin:auto; display:flex; align-items:flex-end; justify-content:center;]
  18. [comment]----tabs----[/comment]
  19. [border=transparent; height:6%; width:265px; overflow:hidden; padding:0; margin-bottom:8px;][border=transparent; padding:0; margin-left:-70px;][tabs]
  20.  
  21. [comment]----page one (cover)----[/comment]
  22. [tab=.][border=transparent; height:82%; width:100%; padding:10px; box-sizing:border-box; position:absolute; top:0; left:0; z-index:3; display:flex; flex-flow:row wrap; align-content:center; justify-content:center;]
  23. [comment]----short quote----[/comment]
  24. [border=transparent; height:fit-content; width:fit-content; max-width:400px; padding:0; color: var(--color-2); text-shadow:1.5px 1.5px var(--outline); font-size:26px; line-height:120%; letter-spacing:0.5px; font-weight:bold; text-align:center;][font=Meddon][comment]
  25. ----* * * a short quote here! ----
  26. [/comment]"short quote here!"[/font][/border]
  27.  
  28. [comment]----main title----[/comment]
  29. [border=transparent; height:fit-content; width:fit-content; max-width:400px; padding:0; color: var(--color-2); text-shadow:2px 2px var(--outline); font-weight:bold; font-size:50px; line-height:120%; letter-spacing:0.5px; text-align:center; margin:25px 0;][font=Raleway][comment]
  30. ----* * *main title here!----
  31. [/comment]Main Title[/font][/border]
  32.  
  33. [/border][/tab]
  34.  
  35. [comment]----page two (plot)----[/comment]
  36. [tab=..][border=transparent; height:82%; width:100%; padding:10px; box-sizing:border-box; position:absolute; top:0; left:0; z-index:3; display:flex; flex-flow: row wrap; justify-content:center; align-content:center;]
  37. [comment]----tab title----[/comment]
  38. [border=transparent; height:16%; width:fit-content; max-width:400px; padding:0; color: var(--border); font-size:38px; font-weight:bold; line-height:120%; text-shadow:1.5px 1.5px var(--outline); display:flex; align-items:center; justify-content:center;][font=Meddon][comment]
  39. ----* * * your tab title here!----
  40. [/comment]Plot[/font][/border]
  41.  
  42. [comment]----tab contents----[/comment]
  43. [border=transparent; margin-top:1%; height:83%; width:100%; max-width:370px; padding:10px 0; box-sizing:border-box; border:5px solid var(--border); overflow:hidden; display:flex; flex-direction:column; background-color: var(--tab-bg);][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0 10px; box-sizing:border-box; color:var(--t-color); text-align:justify; font-size:12px; line-height:130%][font=Raleway][comment]
  44. ----* * *your text starts here!----
  45. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu bibendum mauris. In aliquet arcu a erat tristique auctor. Curabitur feugiat enim sit amet massa porta, at feugiat magna molestie. Vivamus dictum vehicula lorem eu finibus. Duis elementum nibh magna, sed fermentum mi lacinia ac. Sed quis imperdiet diam. Curabitur sagittis varius lacus, at volutpat felis mattis vitae. Vivamus ut nulla faucibus, porta metus eget, vehicula turpis. Morbi ac lorem vitae magna fringilla malesuada sed id nibh. Nunc ac scelerisque leo. Nunc sit amet sagittis nibh.
  46.  
  47. Sed at sapien est. Sed non felis odio. Morbi bibendum et orci vel molestie. Pellentesque fermentum nulla dapibus justo facilisis dictum. Nam sit amet interdum odio. In euismod bibendum tortor, nec fringilla nisl. Sed eget ante ipsum. Proin tempor magna in mi iaculis, vel vestibulum felis varius. Morbi porttitor lectus tellus, eget hendrerit justo pretium ut. Curabitur pharetra quam ut aliquam condimentum. Curabitur a ligula id nisl mattis dictum. In urna ipsum, commodo et pretium at, vestibulum ut sem. Quisque fermentum est eget nisl ullamcorper, et ultrices felis gravida. Nam varius risus est. Duis in dapibus diam. Morbi neque augue, tempus et lorem et, tincidunt consequat leo.
  48. [/font][/border][/border][/border]
  49. [/border][/tab]
  50.  
  51. [comment]----page three (roles)----[/comment]
  52. [tab=..][border=transparent; height:82%; width:100%; padding:10px; box-sizing:border-box; position:absolute; top:0; left:0; z-index:3; display:flex; flex-flow: row wrap; justify-content:center; align-content:center;]
  53. [comment]----tab title----[/comment]
  54. [border=transparent; height:16%; width:fit-content; max-width:400px; padding:0; line-height:120%; color: var(--border); font-size:38px; font-weight:bold; line-height:120%; text-shadow:1.5px 1.5px var(--outline); display:flex; align-items:center; justify-content:center;][font=Meddon][comment]
  55. ----* * * your tab title here!----
  56. [/comment]Roles[/font][/border]
  57.  
  58. [comment]----tab contents----[/comment]
  59. [border=transparent; margin-top:1%; height:83%; width:100%; max-width:370px; padding:10px 0; box-sizing:border-box; border:5px solid var(--border); overflow:hidden; display:flex; flex-direction:column; background-color: var(--tab-bg);][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0 10px; box-sizing:border-box; color:var(--t-color); text-align:justify; font-size:12px; line-height:130%][font=Raleway][comment]
  60. ----* * *your text starts here!----
  61. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu bibendum mauris. In aliquet arcu a erat tristique auctor. Curabitur feugiat enim sit amet massa porta, at feugiat magna molestie. Vivamus dictum vehicula lorem eu finibus. Duis elementum nibh magna, sed fermentum mi lacinia ac. Sed quis imperdiet diam. Curabitur sagittis varius lacus, at volutpat felis mattis vitae. Vivamus ut nulla faucibus, porta metus eget, vehicula turpis. Morbi ac lorem vitae magna fringilla malesuada sed id nibh. Nunc ac scelerisque leo. Nunc sit amet sagittis nibh.
  62.  
  63. Sed at sapien est. Sed non felis odio. Morbi bibendum et orci vel molestie. Pellentesque fermentum nulla dapibus justo facilisis dictum. Nam sit amet interdum odio. In euismod bibendum tortor, nec fringilla nisl. Sed eget ante ipsum. Proin tempor magna in mi iaculis, vel vestibulum felis varius. Morbi porttitor lectus tellus, eget hendrerit justo pretium ut. Curabitur pharetra quam ut aliquam condimentum. Curabitur a ligula id nisl mattis dictum. In urna ipsum, commodo et pretium at, vestibulum ut sem. Quisque fermentum est eget nisl ullamcorper, et ultrices felis gravida. Nam varius risus est. Duis in dapibus diam. Morbi neque augue, tempus et lorem et, tincidunt consequat leo.
  64. [/font][/border][/border][/border]
  65. [/border][/tab]
  66.  
  67. [comment]----page four (rules)----[/comment]
  68. [tab=..][border=transparent; height:82%; width:100%; padding:10px; box-sizing:border-box; position:absolute; top:0; left:0; z-index:3; display:flex; flex-flow: row wrap; justify-content:center; align-content:center;]
  69. [comment]----tab title----[/comment]
  70. [border=transparent; height:16%; width:fit-content; max-width:400px; padding:0; line-height:120%; color: var(--border); font-size:38px; font-weight:bold; line-height:120%; text-shadow:1.5px 1.5px var(--outline); display:flex; align-items:center; justify-content:center;][font=Meddon][comment]
  71. ----* * * your tab title here!----
  72. [/comment]Rules[/font][/border]
  73.  
  74. [comment]----tab contents----[/comment]
  75. [border=transparent; margin-top:1%; height:83%; width:100%; max-width:370px; padding:10px 0; box-sizing:border-box; border:5px solid var(--border); overflow:hidden; display:flex; flex-direction:column; background-color: var(--tab-bg);][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0 10px; box-sizing:border-box; color:var(--t-color); text-align:justify; font-size:12px; line-height:130%][font=Raleway][comment]
  76. ----* * *your text starts here!----
  77. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu bibendum mauris. In aliquet arcu a erat tristique auctor. Curabitur feugiat enim sit amet massa porta, at feugiat magna molestie. Vivamus dictum vehicula lorem eu finibus. Duis elementum nibh magna, sed fermentum mi lacinia ac. Sed quis imperdiet diam. Curabitur sagittis varius lacus, at volutpat felis mattis vitae. Vivamus ut nulla faucibus, porta metus eget, vehicula turpis. Morbi ac lorem vitae magna fringilla malesuada sed id nibh. Nunc ac scelerisque leo. Nunc sit amet sagittis nibh.
  78.  
  79. Sed at sapien est. Sed non felis odio. Morbi bibendum et orci vel molestie. Pellentesque fermentum nulla dapibus justo facilisis dictum. Nam sit amet interdum odio. In euismod bibendum tortor, nec fringilla nisl. Sed eget ante ipsum. Proin tempor magna in mi iaculis, vel vestibulum felis varius. Morbi porttitor lectus tellus, eget hendrerit justo pretium ut. Curabitur pharetra quam ut aliquam condimentum. Curabitur a ligula id nisl mattis dictum. In urna ipsum, commodo et pretium at, vestibulum ut sem. Quisque fermentum est eget nisl ullamcorper, et ultrices felis gravida. Nam varius risus est. Duis in dapibus diam. Morbi neque augue, tempus et lorem et, tincidunt consequat leo.
  80. [/font][/border][/border][/border]
  81. [/border][/tab]
  82.  
  83. [comment]----page five (links)----[/comment]
  84. [tab=..][border=transparent; height:82%; width:100%; padding:10px; box-sizing:border-box; position:absolute; top:0; left:0; z-index:3; display:flex; flex-flow: row wrap; justify-content:center; align-content:center;]
  85. [comment]----tab title----[/comment]
  86. [border=transparent; height:16%; width:fit-content; max-width:400px; padding:0; line-height:120%; color: var(--border); font-size:38px; font-weight:bold; line-height:120%; text-shadow:1.5px 1.5px var(--outline); display:flex; align-items:center; justify-content:center;][font=Meddon][comment]
  87. ----* * * your tab title here!----
  88. [/comment]Links[/font][/border]
  89.  
  90. [comment]----tab contents----[/comment]
  91. [border=transparent; margin-top:1%; height:83%; width:100%; max-width:370px; padding:10px; box-sizing:border-box; border:5px solid var(--border); overflow:hidden; display:flex; flex-direction:column; background-color: var(--tab-bg); color:var(--t-color); text-align:justify; font-size:12px; line-height:130%][font=Raleway][comment]
  92. ----* * *your text starts here!----
  93. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu bibendum mauris. In aliquet arcu a erat tristique auctor. Curabitur feugiat enim sit amet massa porta, at feugiat magna molestie. Vivamus dictum vehicula lorem eu finibus. Duis elementum nibh magna, sed fermentum mi lacinia ac. Sed quis imperdiet diam. Curabitur sagittis varius lacus, at volutpat felis mattis vitae. Vivamus ut nulla faucibus, porta metus eget, vehicula turpis. Morbi ac lorem vitae magna fringilla malesuada sed id nibh. Nunc ac scelerisque leo. Nunc sit amet sagittis nibh.
  94.  
  95. this does not scroll! careful
  96. [/font][/border]
  97. [/border][/tab]
  98.  
  99.  
  100. [/tabs][/border][/border]
  101.  
  102. [comment]----cover image----[/comment]
  103. [border=transparent; height:calc(100% - 20px); width:100%; padding:20px 15px; box-sizing:border-box; background: var(--bg) 50% 50%; background-size:cover; display:flex; justify-content:center; align-items:flex-end; position:absolute; top:0; left:0; pointer-events:none; z-index:2;]
  104. [comment]----tabs cover----[/comment]
  105. [border=transparent; height:fit-content; width:100%; padding:0; display:flex; flex-flow: row nowrap; justify-content:center; align-items:center;]
  106. [border=transparent; height:fit-content; width:fit-content; padding:0; color: var(--color-1); text-shadow:2px 2px var(--color-2); font-size:45px; line-height:100%; margin:0 2%;][fa]fas fa-heart[/fa][/border]
  107. [border=transparent; height:fit-content; width:fit-content; padding:0; color: var(--color-1); text-shadow:2px 2px var(--color-2); font-size:45px; line-height:100%; margin:0 2%;][fa]fas fa-heart[/fa][/border]
  108. [border=transparent; height:fit-content; width:fit-content; padding:0; color: var(--color-1); text-shadow:2px 2px var(--color-2); font-size:45px; line-height:100%; margin:0 2%;][fa]fas fa-heart[/fa][/border]
  109. [border=transparent; height:fit-content; width:fit-content; padding:0; color: var(--color-1); text-shadow:2px 2px var(--color-2); font-size:45px; line-height:100%; margin:0 2%;][fa]fas fa-heart[/fa][/border]
  110. [/border]
  111. [/border]
  112. [comment]----cover image end----[/comment]
  113. [comment]----signature (do not remove!)----[/comment]
  114. [bg=transparent; height:fit-content; padding:0; width:100%; position:absolute; left:0; bottom:10px; z-index:7;opacity:0.7;font-size:10px;text-align:center; line-height:130%; color: var(--color-2);][font=Open Sans]♡design by sugardust., coded by uxie♡[/font][/bg]
  115. [/border]
Advertisement
RAW Paste Data Copied
Advertisement