API tools faq
paste
ooksie

common tongue (uxie x low fidelity)

ooksie
Oct 26th, 2020 (edited)
334
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 19.98 KB | None | 0 0
raw download clone embed print report
  1. [border=transparent;
  2. *background image;
  3. --bg: url('https://i.imgur.com/JhugtPZ.png');
  4. *colour of the triangle and tab backgrounds;
  5. --bg-color: rgb(0, 0, 0, 0.5);
  6. *border & icons colour;
  7. --border:#fff;
  8. *text colour (including header);
  9. --t-color: #fff;
  10. *titles are categorised by tabs, tab 1 being a, tab b being b and so on. i suggest using the font titles unless you know how to adjust the width of the image yourself;
  11. --atitle: url('https://cdn.discordapp.com/attachments/763695220701134872/770185998151057418/wM2KIxNkFDlSgAAAABJRU5ErkJggg.png');
  12. --btitle: url('https://cdn.discordapp.com/attachments/763695220701134872/770186110156275762/wGA0Yn0fMFHgAAAABJRU5ErkJggg.png');
  13. --ctitle: url('https://cdn.discordapp.com/attachments/763695220701134872/770185654276980756/cbTGirjAAAAAASUVORK5CYII.png');
  14. --dtitle: url('https://cdn.discordapp.com/attachments/763695220701134872/770185538492825611/A02RpgXzzMeAAAAAElFTkSuQmCC.png');
  15. *images on the lore tab (tab 3);
  16. --cimg-1: url('https://breakthrough.org/wp-content/uploads/2018/10/default-placeholder-image.png');
  17.  
  18. height:550px; width:880px; padding:0; padding-bottom:20px; margin:auto; line-height:0; position:relative; display:flex; align-items:center; justify-content:center;]
  19.  
  20. [comment]----main content----[/comment]
  21. [border=transparent; height:73%; width:73%; padding:0; position:relative; display:flex; flex-flow: row wrap; justify-content:center;]
  22. [border=transparent; height:8%; width:73%; padding:0; margin-top:0.8%;][tabs]
  23.  
  24. [comment]---tab one (title)---[/comment]
  25. [tab=aaaaaa][border=transparent; height:95%; width:100%; padding:25px; box-sizing:border-box; position:absolute; left:0; bottom:0; z-index:4;][border=transparent; height:100%; width:100%; padding:0; position:relative; display:flex; flex-flow: row wrap; align-content:center; justify-content:center;]
  26. [comment]----title text----
  27.  
  28. ***to use either title, make sure display:none is on the title you are /not/ using and not on the title you /are/ using[/comment]
  29. [border=transparent; height:fit-content; width:100%; padding:0; display:flex; justify-content:center;]
  30. [comment]----image title----[/comment]
  31. [border=transparent; height:105px; width:495px; padding:0; background:var(--atitle); background-size:cover;][/border]
  32.  
  33. [comment]----font title----[/comment]
  34. [border=transparent; height:fit-content; width:fit-content; padding:0; color: var(--border); font-size:105px; line-height:100%; /*to use me, remove me!*/ display:none;][font=Mrs Saint Delafield][comment]
  35. ----* * * your title here ----
  36. [/comment]moment's silence[/font][/border]
  37. [/border]
  38.  
  39. [comment]----line----[/comment]
  40. [border=transparent; height:2px; width:72%; padding:0; background-color: var(--border); margin:20px 0 30px 0;][/border]
  41.  
  42. [comment]----short line or quote or whatever----[/comment]
  43. [border=transparent; height:fit-content; width:fit-content; max-width:88%; color: var(--border); font-weight:light; padding:0; line-height:120%; text-align:center; font-size:22px; opacity:0.9; letter-spacing:1px;][font=Thasadith][comment]
  44. ----* * * text starts here!----
  45. [/comment]"since it all begun to its reckoning, there the reason comes on the common tongue of you loving me."[/font][/border]
  46.  
  47. [/border][/border][/tab]
  48. [comment]---tab one end---[/comment]
  49.  
  50. [comment]---tab two (intro)---[/comment]
  51. [tab=aaaaaa][border=transparent; height:95%; width:100%; padding:25px; box-sizing:border-box; position:absolute; left:0; bottom:0; z-index:4;][border=transparent; height:100%; width:100%; padding:5px 15px; box-sizing:border-box; background-color:var(--bg-color); position:relative; display:flex; flex-flow: row wrap;]
  52. [comment]----tab title----
  53. ***to use either title, make sure display:none is on the title you are /not/ using and not on the title you /are/ using[/comment]
  54. [border=transparent; height:15%; width:100%; padding:0; display:flex; flex-flow: row nowrap; align-items:center; margin-bottom:1%;]
  55. [border=transparent; height:20px; flex-grow:1; padding:0; margin-right:20px; border-bottom:2.5px solid var(--border);][/border]
  56.  
  57. [comment]----image title----[/comment]
  58. [border=transparent; height:45px; width:210px; padding:0; background: var(--btitle); background-size:cover;][/border]
  59.  
  60. [comment]----font title----[/comment]
  61. [border=transparent; height:fit-content; width:fit-content; padding:0 10px 0 0; box-sizing:border-box; color: var(--t-color); font-size:50px; position:relative; top:5px; line-height:120%;
  62. /*to use me, remove me!*/ display:none;][font=Mrs Saint Delafield][comment]
  63. ----* * * your title here ----
  64. [/comment]introduction[/font][/border]
  65. [/border]
  66.  
  67. [comment]----tab contents----[/comment]
  68. [border=transparent; height:84%; width:100%; padding:10px 0; box-sizing:border-box; display:flex; flex-direction:column; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0; color: var(--t-color); text-align:justify; font-size:14px; line-height:135%;][font=Montserrat][comment]
  69. ----* * * your text starts here!----
  70. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla blandit purus lorem, laoreet suscipit lorem tempus non. Pellentesque massa quam, accumsan finibus nulla eu, sagittis pretium nisl. Donec vestibulum turpis at fringilla gravida. In eleifend erat quam, non convallis dui finibus sit amet. Morbi id nisi rutrum, pharetra velit eu, posuere nisi. Suspendisse at lectus facilisis, pharetra orci pharetra, scelerisque massa. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam a sapien arcu. In hac habitasse platea dictumst. Vivamus ac ligula porta, venenatis turpis a, imperdiet libero. Donec placerat nulla at ipsum pellentesque, nec commodo metus blandit. Proin vulputate in urna nec accumsan. Nullam vitae neque magna. Aenean ut elit ac mi bibendum luctus. Morbi sed facilisis purus. Morbi vitae tempor ligula. Cras mattis, ipsum et convallis blandit, tortor felis ornare sem, tincidunt commodo libero sapien ut odio. Maecenas condimentum, magna quis auctor laoreet, metus mauris interdum mauris, vel accumsan libero massa sed ipsum. Vestibulum ante metus, porttitor vitae porta tincidunt, convallis quis nisi. Sed placerat sed ipsum ac tempor. Ut auctor, erat efficitur tincidunt tincidunt, lorem metus ullamcorper magna, vestibulum pharetra tellus nibh vehicula tellus. Aliquam et augue et orci ultrices efficitur. Aliquam scelerisque leo id est congue semper. Praesent suscipit sagittis convallis. Nunc in rutrum nisl.
  71. [/font][/border][/border][/border]
  72. [comment]----tab contents end----[/comment]
  73. [/border][/border][/tab]
  74. [comment]---tab two end---[/comment]
  75.  
  76. [comment]---tab three (lore)---[/comment]
  77. [tab=aaaaaa][border=transparent; height:95%; width:100%; padding:25px; box-sizing:border-box; position:absolute; left:0; bottom:0; z-index:4;][border=transparent; height:100%; width:100%; padding:5px 15px; box-sizing:border-box; background-color:var(--bg-color); position:relative; display:flex; flex-flow: row wrap;]
  78. [comment]----tab title----
  79. ***to use either title, make sure display:none is on the title you are /not/ using and not on the title you /are/ using[/comment]
  80. [border=transparent; height:15%; width:100%; padding:0; display:flex; flex-flow: row-reverse nowrap; align-items:center; margin-bottom:1%;]
  81. [border=transparent; height:20px; flex-grow:1; padding:0; margin-left:20px; border-bottom:2.5px solid var(--border);][/border]
  82.  
  83. [comment]----image title----[/comment]
  84. [border=transparent; height:45px; width:210px; padding:0; background: var(--ctitle); background-size:cover;][/border]
  85.  
  86. [comment]----font title----[/comment]
  87. [border=transparent; height:fit-content; width:fit-content; padding:0 10px 0 0; box-sizing:border-box; color: var(--t-color); font-size:50px; position:relative; top:5px; line-height:120%;
  88. /*to use me, remove me!*/ display:none;][font=Mrs Saint Delafield][comment]
  89. ----* * * your title here ----
  90. [/comment]lore and more[/font][/border]
  91. [/border]
  92.  
  93. [comment]----tab contents----[/comment]
  94. [border=transparent; height:84%; width:100%; padding:10px 0; box-sizing:border-box; display:flex; flex-direction:column; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0; display:flex; flex-flow: row wrap;]
  95.  
  96. [comment]----copy this entire thing to get one more row of info! (row 1)----[/comment]
  97. [border=transparent; height:135px; width:100%; padding:0; display:flex; flex-flow: row nowrap; margin:10px 0;]
  98. [border=transparent; height:135px; width:135px; padding:0; background: var(--cimg-1); background-size:cover; margin-right:20px; flex-shrink:0;][/border]
  99. [border=transparent; height:100%; flex-grow:1; padding:0; display:flex; flex-direction:column; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0; color: var(--t-color); text-align:justify; font-size:12px; line-height:135%;][font=Montserrat][comment]
  100. ----* * * your text starts here!----
  101. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla blandit purus lorem, laoreet suscipit lorem tempus non. Pellentesque massa quam, accumsan finibus nulla eu, sagittis pretium nisl. Donec vestibulum turpis at fringilla gravida. In eleifend erat quam, non convallis dui finibus sit amet. Morbi id nisi rutrum, pharetra velit eu, posuere nisi. Suspendisse at lectus facilisis, pharetra orci pharetra, scelerisque massa. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam a sapien arcu. In hac habitasse platea dictumst. Vivamus ac ligula porta, venenatis turpis a, imperdiet libero. Donec placerat nulla at ipsum pellentesque, nec commodo metus blandit. Proin vulputate in urna nec accumsan. Nullam vitae neque magna. Aenean ut elit ac mi bibendum luctus. Morbi sed facilisis purus. Morbi vitae tempor ligula. Cras mattis, ipsum et convallis blandit, tortor felis ornare sem, tincidunt commodo libero sapien ut odio. Maecenas condimentum, magna quis auctor laoreet, metus mauris interdum mauris, vel accumsan libero massa sed ipsum. Vestibulum ante metus, porttitor vitae porta tincidunt, convallis quis nisi. Sed placerat sed ipsum ac tempor. Ut auctor, erat efficitur tincidunt tincidunt, lorem metus ullamcorper magna, vestibulum pharetra tellus nibh vehicula tellus. Aliquam et augue et orci ultrices efficitur. Aliquam scelerisque leo id est congue semper. Praesent suscipit sagittis convallis. Nunc in rutrum nisl.[/font][/border]
  102. [/border][/border]
  103. [/border]
  104. [comment]----copy me too!!!----[/comment]
  105.  
  106. [comment]----copy this entire thing to get one more row of info! (row 2)----[/comment]
  107. [border=transparent; height:135px; width:100%; padding:0; display:flex; flex-flow: row-reverse nowrap; margin:10px 0;]
  108. [border=transparent; height:135px; width:135px; padding:0; background: var(--cimg-1); background-size:cover; margin-left:20px; flex-shrink:0;][/border]
  109. [border=transparent; height:100%; flex-grow:1; padding:0; display:flex; flex-direction:column; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0; color: var(--t-color); text-align:justify; font-size:12px; line-height:135%;][font=Montserrat][comment]
  110. ----* * * your text starts here!----
  111. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla blandit purus lorem, laoreet suscipit lorem tempus non. Pellentesque massa quam, accumsan finibus nulla eu, sagittis pretium nisl. Donec vestibulum turpis at fringilla gravida. In eleifend erat quam, non convallis dui finibus sit amet. Morbi id nisi rutrum, pharetra velit eu, posuere nisi. Suspendisse at lectus facilisis, pharetra orci pharetra, scelerisque massa. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam a sapien arcu. In hac habitasse platea dictumst. Vivamus ac ligula porta, venenatis turpis a, imperdiet libero. Donec placerat nulla at ipsum pellentesque, nec commodo metus blandit. Proin vulputate in urna nec accumsan. Nullam vitae neque magna. Aenean ut elit ac mi bibendum luctus. Morbi sed facilisis purus. Morbi vitae tempor ligula. Cras mattis, ipsum et convallis blandit, tortor felis ornare sem, tincidunt commodo libero sapien ut odio. Maecenas condimentum, magna quis auctor laoreet, metus mauris interdum mauris, vel accumsan libero massa sed ipsum. Vestibulum ante metus, porttitor vitae porta tincidunt, convallis quis nisi. Sed placerat sed ipsum ac tempor. Ut auctor, erat efficitur tincidunt tincidunt, lorem metus ullamcorper magna, vestibulum pharetra tellus nibh vehicula tellus. Aliquam et augue et orci ultrices efficitur. Aliquam scelerisque leo id est congue semper. Praesent suscipit sagittis convallis. Nunc in rutrum nisl.[/font][/border]
  112. [/border][/border]
  113. [/border]
  114. [comment]----copy me too!!!----[/comment]
  115.  
  116. [/border][/border][/border]
  117. [comment]----tab contents end----[/comment]
  118. [/border][/border][/tab]
  119. [comment]---tab three end---[/comment]
  120.  
  121. [comment]---tab four (links)---[/comment]
  122. [tab=aaaaaa][border=transparent; height:95%; width:100%; padding:25px; box-sizing:border-box; position:absolute; left:0; bottom:0; z-index:4;][border=transparent; height:100%; width:100%; padding:5px 15px; box-sizing:border-box; background-color:var(--bg-color); position:relative; display:flex; flex-flow: row wrap;]
  123. [comment]----tab title----
  124. ***to use either title, make sure display:none is on the title you are /not/ using and not on the title you /are/ using[/comment]
  125. [border=transparent; height:15%; width:100%; padding:0; display:flex; flex-flow: row nowrap; align-items:center; margin-bottom:1%;]
  126. [border=transparent; height:20px; flex-grow:1; padding:0; margin-right:20px; border-bottom:2.5px solid var(--border);][/border]
  127.  
  128. [comment]----image title----[/comment]
  129. [border=transparent; height:45px; width:71px; padding:0; background: var(--dtitle); background-size:cover;][/border]
  130.  
  131. [comment]----font title----[/comment]
  132. [border=transparent; height:fit-content; width:fit-content; padding:0 10px 0 0; box-sizing:border-box; color: var(--t-color); font-size:50px; position:relative; top:5px; line-height:120%;
  133. /*to use me, remove me!*/ display:none;][font=Mrs Saint Delafield][comment]
  134. ----* * * your title here ----
  135. [/comment]links[/font][/border]
  136. [/border]
  137.  
  138. [comment]----tab contents----[/comment]
  139. [border=transparent; height:84%; width:100%; padding:10px 0; box-sizing:border-box; display:flex; flex-direction:column; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0; color: var(--t-color); text-align:justify; font-size:14px; line-height:135%;][font=Montserrat][comment]
  140. ----* * * your text starts here!----
  141. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla blandit purus lorem, laoreet suscipit lorem tempus non. Pellentesque massa quam, accumsan finibus nulla eu, sagittis pretium nisl. Donec vestibulum turpis at fringilla gravida. In eleifend erat quam, non convallis dui finibus sit amet. Morbi id nisi rutrum, pharetra velit eu, posuere nisi. Suspendisse at lectus facilisis, pharetra orci pharetra, scelerisque massa. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam a sapien arcu. In hac habitasse platea dictumst. Vivamus ac ligula porta, venenatis turpis a, imperdiet libero. Donec placerat nulla at ipsum pellentesque, nec commodo metus blandit. Proin vulputate in urna nec accumsan. Nullam vitae neque magna. Aenean ut elit ac mi bibendum luctus. Morbi sed facilisis purus. Morbi vitae tempor ligula. Cras mattis, ipsum et convallis blandit, tortor felis ornare sem, tincidunt commodo libero sapien ut odio. Maecenas condimentum, magna quis auctor laoreet, metus mauris interdum mauris, vel accumsan libero massa sed ipsum. Vestibulum ante metus, porttitor vitae porta tincidunt, convallis quis nisi. Sed placerat sed ipsum ac tempor. Ut auctor, erat efficitur tincidunt tincidunt, lorem metus ullamcorper magna, vestibulum pharetra tellus nibh vehicula tellus. Aliquam et augue et orci ultrices efficitur. Aliquam scelerisque leo id est congue semper. Praesent suscipit sagittis convallis. Nunc in rutrum nisl.
  142. [/font][/border][/border][/border]
  143. [comment]----tab contents end----[/comment]
  144. [/border][/border][/tab]
  145. [comment]---tab four end---[/comment]
  146.  
  147. [/tabs][/border]
  148. [border=transparent; height:89%; width:100%; padding:0;][/border]
  149. [/border]
  150.  
  151. [comment]----cover----[/comment]
  152. [border=transparent; height:calc(100% - 20px); width:100%; padding:0; background: var(--bg); background-size:cover; position:absolute; top:0; left:0; display:flex; justify-content:center; align-items:center; pointer-events:none;]
  153.  
  154. [comment]----triangle----[/comment]
  155. [border=transparent; height:0; width:0; border-bottom:550px solid var(--bg-color); border-right:880px solid transparent; padding:0; position:absolute; z-index:1; top:0; left:0; pointer-events:none;][/border]
  156.  
  157. [comment]----tabs cover----[/comment]
  158. [border=transparent; height:73%; width:73%; padding:0; position:relative; z-index:2; display:flex; flex-flow: row wrap; justify-content:center; pointer-events:none;]
  159. [border=transparent; height:4%; width:100%; padding:0;][/border]
  160. [border=transparent; height:8%; width:100%; padding:0; display:flex; align-items:center; position:absolute; top:0; color:var(--border);]
  161.  
  162. [border=transparent; height:0; width:18%; padding:0; border-top:4px solid var(--border); pointer-events:auto;][/border]
  163.  
  164. [border=transparent; height:fit-content; width:fit-content; padding:5px 15px; box-sizing:border-box; font-size:32px; line-height:110%; flex-shrink:0;][comment]
  165. ----* * * edit the icons here!----
  166. [/comment][fa]fal fa-home[/fa][/border]
  167. [border=transparent; height:0; flex-grow:1; padding:0; border-top:4px solid var(--border); pointer-events:auto;][/border]
  168. [border=transparent; height:fit-content; width:fit-content; padding:5px 15px; box-sizing:border-box; font-size:32px; line-height:110%; flex-shrink:0;][comment]
  169. ----* * * edit the icons here!----
  170. [/comment][fa]fal fa-book[/fa][/border]
  171. [border=transparent; height:0; flex-grow:1; padding:0; border-top:4px solid var(--border); pointer-events:auto;][/border]
  172. [border=transparent; height:fit-content; width:fit-content; padding:5px 15px; box-sizing:border-box; font-size:32px; line-height:110%; flex-shrink:0;][comment]
  173. ----* * * edit the icons here!----
  174. [/comment][fa]fal fa-pencil[/fa][/border]
  175. [border=transparent; height:0; flex-grow:1; padding:0; border-top:4px solid var(--border); pointer-events:auto;][/border]
  176. [border=transparent; height:fit-content; width:fit-content; padding:5px 15px; box-sizing:border-box; font-size:32px; line-height:110%; flex-shrink:0;][comment]
  177. ----* * * edit the icons here!----
  178. [/comment][fa]fal fa-link[/fa][/border]
  179.  
  180. [border=transparent; height:0; width:18%; padding:0; border-top:4px solid var(--border); pointer-events:auto;][/border]
  181.  
  182. [/border]
  183. [border=transparent; height:96%; width:100%; padding:0; border:4px solid var(--border); border-top:0; box-sizing:border-box;][/border]
  184. [/border]
  185.  
  186. [/border]
  187. [comment]----cover end----[/comment]
  188. [comment]----signature (do not remove!)----[/comment]
  189. [bg=transparent; height:fit-content; padding:0; width:100%; position:absolute; bottom:10px; z-index:4;opacity:0.7;font-size:10px;text-align:center; line-height:130%; margin-top:3px;][font=Open Sans]♡design by low fidelity, 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!