API tools faq
paste
ooksie

kiss me thru the phone (uxie x dreamglow)

ooksie
Oct 23rd, 2020 (edited)
219
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 19.74 KB | None | 0 0
raw download clone embed print report
  1. [border=transparent;
  2. *background colour of cover page;
  3. --bg-1: #FFB2B2;
  4. *background colour of main content;
  5. --bg-2: #FFDDCC;
  6. *title text colour on cover page;
  7. --h-color: #fff;
  8. *lighter accent colour used for tab buttons & quote;
  9. --color-1: #FFF3E6;
  10. *darker accent colour used for name in tabs;
  11. --color-2: #FF98AA;
  12. *tab contents background;
  13. --t-bg: #fff;
  14. *text colour;
  15. --t-color: #000;
  16.  
  17. *the picture on the cover page;
  18. --img-1: url('https://pbs.twimg.com/media/EMCmZIuUwAEAM2P.jpg');
  19. *the following are all images in the tabs. tab 1 images are labelled with a, tab 2 with b and so on;
  20. --aimg-1: url('https://pbs.twimg.com/media/EMUE5mnVUAADafj?format=jpg&name=medium');
  21. --aimg-2: url('https://pbs.twimg.com/media/EMCmyREU0AAbCAI?format=jpg&name=medium');
  22. --bimg-1: url('https://pbs.twimg.com/media/EMUE5mnVUAADafj?format=jpg&name=medium');
  23. --bimg-2: url('https://pbs.twimg.com/media/EMCmyREU0AAbCAI?format=jpg&name=medium');
  24. --cimg-1: url('https://pbs.twimg.com/media/EMUE5mnVUAADafj?format=jpg&name=medium');
  25. --cimg-2: url('https://pbs.twimg.com/media/EMCmyREU0AAbCAI?format=jpg&name=medium');
  26. --dimg-1: url('https://pbs.twimg.com/media/EMUE5mnVUAADafj?format=jpg&name=medium');
  27. --dimg-2: url('https://pbs.twimg.com/media/EMCmyREU0AAbCAI?format=jpg&name=medium');
  28.  
  29. height:480px; width:650px; margin:auto; padding:0; padding-bottom:20px; line-height:0; display:flex; justify-content:center; position:relative;][border=transparent; height:100%; width:100%; padding:0 0 0 25px; box-sizing:border-box; position:relative; display:flex; justify-content:center; align-items:center;]
  30. [border=transparent; height:6%; width:50%; padding:0; display:flex; justify-content:center; margin-right:auto; overflow:hidden; margin-top:-25px;][border=transparent; padding:0; margin-top:-28px;][tabs]
  31.  
  32. [comment]----cover page----[/comment]
  33. [tab=.][border=transparent; height:100%; width:100%; padding:0 25px; box-sizing:border-box; position:absolute; top:0; left:0; background-color: var(--bg-1); display:flex; justify-content:flex-end; align-items:center; pointer-events:none;]
  34. [comment]----title container----[/comment]
  35. [border=transparent; height:100%; width:100%; max-width:55%; padding:0; position:absolute; left:30px; top:0; display:flex; flex-flow: row wrap; align-content:center;]
  36. [comment]----name----[/comment]
  37. [border=transparent; height:fit-content; width:fit-content; padding:0; color: var(--h-color); text-transform:uppercase; font-weight:bold; letter-spacing:1px; font-size:52px; line-height:110%; -webkit-text-stroke:0.5px var(--h-color); text-shadow:3px 3px var(--bg-1);][font=Heebo][comment]
  38. --- * * * your character's name here! ----
  39. [/comment]name here[/font][/border]
  40.  
  41. [comment]----quote----[/comment]
  42. [border=transparent; height:fit-content; width:fit-content; padding:0 0 0 5px; box-sizing:border-box; color: var(--color-1); text-transform:uppercase; letter-spacing:1px; font-size:13px; line-height:110%; text-shadow:1px 1px var(--bg-1); pointer-events:auto;][font=Rubik][comment]
  43. ---- * * * quote here! -----
  44. [/comment]quote quote quote
  45. you can have this go a few lines[/font][/border]
  46. [/border]
  47. [comment]----title container end----[/comment]
  48.  
  49. [comment]----big image----[/comment]
  50. [border=transparent; height:350px; width:350px; padding:0; border-radius:50%; padding:0; background: var(--img-1); background-size:cover; border:5px solid var(--h-color);
  51. /*edit the following if you want to adjust the cropping of the picture*/ background-position: 50% 50%;][/border]
  52. [/border][/tab]
  53. [comment]----cover page end----[/comment]
  54.  
  55. [comment]----actual content----[/comment]
  56. [tab=aaaaaaaaaaaaaaaaaaaaaaaa][border=transparent; height:100%; width:100%; padding:10px; box-sizing:border-box; position:absolute; top:0; left:0; background-color: var(--bg-2); display:flex; flex-flow: row wrap; align-content:flex-end; justify-content:flex-end;]
  57.  
  58. [comment]----tabs----[/comment]
  59. [border=transparent; height:15%; width:41%; padding:0; box-sizing:border-box; overflow:hidden; margin-bottom:4px;][border=transparent; padding:0; margin-top:35px; margin-right:-100px; margin-left:28px;][tabs]
  60.  
  61. [comment]----tab 1----[/comment]
  62. [tab=.][border=transparent; height:100%; width:100%; padding:10px; box-sizing:border-box; pointer-events:none; position:absolute; top:0; left:0; z-index:4; display:flex; flex-flow: column nowrap; justify-content:flex-end; align-items:flex-start;]
  63. [border=transparent; height:69%; width:67%; padding:10px 0; box-sizing:border-box; pointer-events:auto; background: var(--t-bg); overflow:hidden; display:flex; flex-direction:column;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;]
  64. [comment]----tab image----[/comment]
  65. [border=transparent; height:100px; width:calc(50% - 20px); padding:0; margin-left:10px; background: var(--aimg-2); background-size:cover;
  66. /*edit the following to adjust the cropping of the image*/ background-position: 50% 40%; margin-bottom:10px;][/border]
  67.  
  68. [comment]----tab contents----[/comment]
  69. [border=transparent; height:auto; width:50%; padding:0 10px; box-sizing:border-box; text-align:justify; line-height:130%; color: var(--t-color); font-size:11px;][font=Rubik][comment]
  70. ---- * * * your tab contents start here!----
  71. [/comment]tab 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vestibulum elementum nulla, a sagittis lorem rutrum nec. Integer eu turpis eu nunc efficitur ultrices. Nam viverra lacus ligula. Vestibulum quam turpis, tempor vitae libero eu, vehicula sollicitudin ipsum. Suspendisse neque risus, tempus ut sapien accumsan, convallis lacinia enim. Donec varius viverra lacus a fringilla. Aenean iaculis, diam eu lobortis suscipit, magna sem consequat nibh, eget vulputate ante turpis id nisl. Quisque aliquam condimentum porta. Sed vel lacus rhoncus, maximus nibh vitae, pharetra leo. Sed sed nisi dignissim, fringilla mi ut, dignissim tellus. Suspendisse vel libero quis nibh rutrum pharetra a sit amet ex. In ac fermentum leo. Pellentesque rutrum molestie orci viverra fermentum. Etiam facilisis sed nisi id venenatis.
  72.  
  73. [comment]----* * *filler space to allow all content to be seen (put this at the top of your last paragraph----
  74. [/comment][border=transparent; /*adjust the height to match the height of your paragraph*/ height:150px; width:50px; padding:0; float:right;][/border]Sed tristique feugiat neque ac molestie. Vivamus vitae pretium diam. Nunc bibendum sed odio quis maximus. Donec posuere ante in elit gravida consectetur. Mauris elementum dictum enim quis mattis. Pellentesque pulvinar dolor eu mi volutpat, quis pellentesque enim condimentum. Proin ac lacus a tellus tincidunt condimentum. Nulla velit tortor, accumsan nec efficitur a, vulputate ut urna. Praesent nisi felis, lacinia tincidunt tempor id, malesuada non turpis. Morbi vehicula, felis laoreet luctus scelerisque, odio nunc auctor sem, sit amet semper lorem eros eu justo. Vestibulum vehicula sit amet urna vel cursus.
  75. [/font][/border]
  76. [comment]----tab contents end----[/comment]
  77.  
  78. [/border][/border]
  79. [border=transparent; height:28%; width:100%; padding:0;][/border]
  80.  
  81. [comment]----image----[/comment]
  82. [border=transparent; height:265px; width:265px; padding:0; background:var(--aimg-1); border:5px solid var(--t-bg); background-size:cover; box-sizing:border-box; border-radius:50%;
  83. /*edit the following to adjust the cropping of the image*/ background-position: 50% 50%; position:absolute; right:10px; bottom:10px;][/border]
  84. [/border][/tab]
  85. [comment]----tab 1 end----[/comment]
  86.  
  87. [comment]----tab 2----[/comment]
  88. [tab=.][border=transparent; height:100%; width:100%; padding:10px; box-sizing:border-box; pointer-events:none; position:absolute; top:0; left:0; z-index:4; display:flex; flex-flow: column nowrap; justify-content:flex-end; align-items:flex-start;]
  89. [border=transparent; height:69%; width:67%; padding:10px 0; box-sizing:border-box; pointer-events:auto; background: var(--t-bg); overflow:hidden; display:flex; flex-direction:column;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;]
  90. [comment]----tab image----[/comment]
  91. [border=transparent; height:100px; width:calc(50% - 20px); padding:0; margin-left:10px; background: var(--bimg-2); background-size:cover;
  92. /*edit the following to adjust the cropping of the image*/ background-position: 50% 40%; margin-bottom:10px;][/border]
  93.  
  94. [comment]----tab contents----[/comment]
  95. [border=transparent; height:auto; width:50%; padding:0 10px; box-sizing:border-box; text-align:justify; line-height:130%; color: var(--t-color); font-size:11px;][font=Rubik][comment]
  96. ---- * * * your tab contents start here!----
  97. [/comment]tab 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vestibulum elementum nulla, a sagittis lorem rutrum nec. Integer eu turpis eu nunc efficitur ultrices. Nam viverra lacus ligula. Vestibulum quam turpis, tempor vitae libero eu, vehicula sollicitudin ipsum. Suspendisse neque risus, tempus ut sapien accumsan, convallis lacinia enim. Donec varius viverra lacus a fringilla. Aenean iaculis, diam eu lobortis suscipit, magna sem consequat nibh, eget vulputate ante turpis id nisl. Quisque aliquam condimentum porta. Sed vel lacus rhoncus, maximus nibh vitae, pharetra leo. Sed sed nisi dignissim, fringilla mi ut, dignissim tellus. Suspendisse vel libero quis nibh rutrum pharetra a sit amet ex. In ac fermentum leo. Pellentesque rutrum molestie orci viverra fermentum. Etiam facilisis sed nisi id venenatis.
  98.  
  99. [comment]----* * *filler space to allow all content to be seen (put this at the top of your last paragraph----
  100. [/comment][border=transparent; /*adjust the height to match the height of your paragraph*/ height:150px; width:50px; padding:0; float:right;][/border]Sed tristique feugiat neque ac molestie. Vivamus vitae pretium diam. Nunc bibendum sed odio quis maximus. Donec posuere ante in elit gravida consectetur. Mauris elementum dictum enim quis mattis. Pellentesque pulvinar dolor eu mi volutpat, quis pellentesque enim condimentum. Proin ac lacus a tellus tincidunt condimentum. Nulla velit tortor, accumsan nec efficitur a, vulputate ut urna. Praesent nisi felis, lacinia tincidunt tempor id, malesuada non turpis. Morbi vehicula, felis laoreet luctus scelerisque, odio nunc auctor sem, sit amet semper lorem eros eu justo. Vestibulum vehicula sit amet urna vel cursus.
  101. [/font][/border]
  102. [comment]----tab contents end----[/comment]
  103.  
  104. [/border][/border]
  105. [border=transparent; height:28%; width:100%; padding:0;][/border]
  106.  
  107. [comment]----image----[/comment]
  108. [border=transparent; height:265px; width:265px; padding:0; background:var(--bimg-1); border:5px solid var(--t-bg); background-size:cover; box-sizing:border-box; border-radius:50%;
  109. /*edit the following to adjust the cropping of the image*/ background-position: 50% 50%; position:absolute; right:10px; bottom:10px;][/border]
  110. [/border][/tab]
  111. [comment]----tab 2 end----[/comment]
  112.  
  113. [comment]----tab 3----[/comment]
  114. [tab=.][border=transparent; height:100%; width:100%; padding:10px; box-sizing:border-box; pointer-events:none; position:absolute; top:0; left:0; z-index:4; display:flex; flex-flow: column nowrap; justify-content:flex-end; align-items:flex-start;]
  115. [border=transparent; height:69%; width:67%; padding:10px 0; box-sizing:border-box; pointer-events:auto; background: var(--t-bg); overflow:hidden; display:flex; flex-direction:column;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;]
  116. [comment]----tab image----[/comment]
  117. [border=transparent; height:100px; width:calc(50% - 20px); padding:0; margin-left:10px; background: var(--cimg-2); background-size:cover;
  118. /*edit the following to adjust the cropping of the image*/ background-position: 50% 40%; margin-bottom:10px;][/border]
  119.  
  120. [comment]----tab contents----[/comment]
  121. [border=transparent; height:auto; width:50%; padding:0 10px; box-sizing:border-box; text-align:justify; line-height:130%; color: var(--t-color); font-size:11px;][font=Rubik][comment]
  122. ---- * * * your tab contents start here!----
  123. [/comment]tab 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vestibulum elementum nulla, a sagittis lorem rutrum nec. Integer eu turpis eu nunc efficitur ultrices. Nam viverra lacus ligula. Vestibulum quam turpis, tempor vitae libero eu, vehicula sollicitudin ipsum. Suspendisse neque risus, tempus ut sapien accumsan, convallis lacinia enim. Donec varius viverra lacus a fringilla. Aenean iaculis, diam eu lobortis suscipit, magna sem consequat nibh, eget vulputate ante turpis id nisl. Quisque aliquam condimentum porta. Sed vel lacus rhoncus, maximus nibh vitae, pharetra leo. Sed sed nisi dignissim, fringilla mi ut, dignissim tellus. Suspendisse vel libero quis nibh rutrum pharetra a sit amet ex. In ac fermentum leo. Pellentesque rutrum molestie orci viverra fermentum. Etiam facilisis sed nisi id venenatis.
  124.  
  125. [comment]----* * *filler space to allow all content to be seen (put this at the top of your last paragraph----
  126. [/comment][border=transparent; /*adjust the height to match the height of your paragraph*/ height:150px; width:50px; padding:0; float:right;][/border]Sed tristique feugiat neque ac molestie. Vivamus vitae pretium diam. Nunc bibendum sed odio quis maximus. Donec posuere ante in elit gravida consectetur. Mauris elementum dictum enim quis mattis. Pellentesque pulvinar dolor eu mi volutpat, quis pellentesque enim condimentum. Proin ac lacus a tellus tincidunt condimentum. Nulla velit tortor, accumsan nec efficitur a, vulputate ut urna. Praesent nisi felis, lacinia tincidunt tempor id, malesuada non turpis. Morbi vehicula, felis laoreet luctus scelerisque, odio nunc auctor sem, sit amet semper lorem eros eu justo. Vestibulum vehicula sit amet urna vel cursus.
  127. [/font][/border]
  128. [comment]----tab contents end----[/comment]
  129.  
  130. [/border][/border]
  131. [border=transparent; height:28%; width:100%; padding:0;][/border]
  132.  
  133. [comment]----image----[/comment]
  134. [border=transparent; height:265px; width:265px; padding:0; background:var(--cimg-1); border:5px solid var(--t-bg); background-size:cover; box-sizing:border-box; border-radius:50%;
  135. /*edit the following to adjust the cropping of the image*/ background-position: 50% 50%; position:absolute; right:10px; bottom:10px;][/border]
  136. [/border][/tab]
  137. [comment]----tab 3 end----[/comment]
  138.  
  139. [comment]----tab 4----[/comment]
  140. [tab=.][border=transparent; height:100%; width:100%; padding:10px; box-sizing:border-box; pointer-events:none; position:absolute; top:0; left:0; z-index:4; display:flex; flex-flow: column nowrap; justify-content:flex-end; align-items:flex-start;]
  141. [border=transparent; height:69%; width:67%; padding:10px 0; box-sizing:border-box; pointer-events:auto; background: var(--t-bg); overflow:hidden; display:flex; flex-direction:column;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;]
  142. [comment]----tab image----[/comment]
  143. [border=transparent; height:100px; width:calc(50% - 20px); padding:0; margin-left:10px; background: var(--dimg-2); background-size:cover;
  144. /*edit the following to adjust the cropping of the image*/ background-position: 50% 40%; margin-bottom:10px;][/border]
  145.  
  146. [comment]----tab contents----[/comment]
  147. [border=transparent; height:auto; width:50%; padding:0 10px; box-sizing:border-box; text-align:justify; line-height:130%; color: var(--t-color); font-size:11px;][font=Rubik][comment]
  148. ---- * * * your tab contents start here!----
  149. [/comment]tab 4 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vestibulum elementum nulla, a sagittis lorem rutrum nec. Integer eu turpis eu nunc efficitur ultrices. Nam viverra lacus ligula. Vestibulum quam turpis, tempor vitae libero eu, vehicula sollicitudin ipsum. Suspendisse neque risus, tempus ut sapien accumsan, convallis lacinia enim. Donec varius viverra lacus a fringilla. Aenean iaculis, diam eu lobortis suscipit, magna sem consequat nibh, eget vulputate ante turpis id nisl. Quisque aliquam condimentum porta. Sed vel lacus rhoncus, maximus nibh vitae, pharetra leo. Sed sed nisi dignissim, fringilla mi ut, dignissim tellus. Suspendisse vel libero quis nibh rutrum pharetra a sit amet ex. In ac fermentum leo. Pellentesque rutrum molestie orci viverra fermentum. Etiam facilisis sed nisi id venenatis.
  150.  
  151. [comment]----* * *filler space to allow all content to be seen (put this at the top of your last paragraph----
  152. [/comment][border=transparent; /*adjust the height to match the height of your paragraph*/ height:150px; width:50px; padding:0; float:right;][/border]Sed tristique feugiat neque ac molestie. Vivamus vitae pretium diam. Nunc bibendum sed odio quis maximus. Donec posuere ante in elit gravida consectetur. Mauris elementum dictum enim quis mattis. Pellentesque pulvinar dolor eu mi volutpat, quis pellentesque enim condimentum. Proin ac lacus a tellus tincidunt condimentum. Nulla velit tortor, accumsan nec efficitur a, vulputate ut urna. Praesent nisi felis, lacinia tincidunt tempor id, malesuada non turpis. Morbi vehicula, felis laoreet luctus scelerisque, odio nunc auctor sem, sit amet semper lorem eros eu justo. Vestibulum vehicula sit amet urna vel cursus.
  153. [/font][/border]
  154. [comment]----tab contents end----[/comment]
  155.  
  156. [/border][/border]
  157. [border=transparent; height:28%; width:100%; padding:0;][/border]
  158.  
  159. [comment]----image----[/comment]
  160. [border=transparent; height:265px; width:265px; padding:0; background:var(--dimg-1); border:5px solid var(--t-bg); background-size:cover; box-sizing:border-box; border-radius:50%;
  161. /*edit the following to adjust the cropping of the image*/ background-position: 50% 50%; position:absolute; right:10px; bottom:10px;][/border]
  162. [/border][/tab]
  163. [comment]----tab 4 end----[/comment]
  164.  
  165. [/tabs][/border][/border]
  166. [comment]----tabs end----[/comment]
  167.  
  168. [comment]----tabs cover----[/comment]
  169. [border=transparent; height:14%; width:35%; padding:0 5px 0 30px; box-sizing:border-box; background-color:var(--bg-2); bottom:265px; right:10px; position:absolute; pointer-events:none; display:flex; flex-flow: row nowrap; justify-content:space-between; z-index:3;]
  170. [border=transparent; height:42px; width:42px; background-color: var(--color-1); padding:0; border-radius:50%; margin:0; flex-shrink:0; position:relative; top:-3px;][/border]
  171. [border=transparent; height:36px; width:36px; background-color: var(--color-1); padding:0; border-radius:50%; margin:8px 0 0 5px; flex-shrink:0;][/border]
  172. [border=transparent; height:30px; width:30px; background-color: var(--color-1); padding:0; border-radius:50%; margin:18px 0 0 5px; flex-shrink:0;][/border]
  173. [border=transparent; height:24px; width:24px; background-color: var(--color-1); padding:0; border-radius:50%; margin:28px 0 0 3px; flex-shrink:0;][/border]
  174. [/border]
  175.  
  176. [border=transparent; height:fit-content; width:100%; padding:0; box-sizing:border-box; display:flex; flex-flow: row nowrap; align-items:flex-end;]
  177. [border=transparent; height:fit-content; flex-grow:1; padding:0 0 0 15px; box-sizing:border-box; margin-right:10px; color: var(--color-2); text-transform:uppercase; font-size:77px; font-weight:bold; letter-spacing:3px; line-height:155%;][font=Staatliches][comment]
  178. ---- * * * name here ----
  179. [/comment]name here[/font][/border]
  180. [border=transparent; height:265px; width:265px; padding:0; background-color:white; border-radius:50%;][/border]
  181. [/border]
  182.  
  183. [/border][/tab]
  184. [comment]-----actual content end----[/comment]
  185.  
  186. [/tabs][/border][/border]
  187.  
  188. [/border][comment]----signature! do not remove!----
  189. [/comment][bg=transparent; height:fit-content; padding:0; width:fit-content; position:absolute; bottom:10px; z-index:4;opacity:0.7;font-size:10px;text-align:center; line-height:130%; margin-top:3px; color: var(--bg-1);][font=Open Sans]♡design by dreamglow, coded by uxie♡[/font][/bg][/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!