ooksie

dive in (uxie x dreamglow)

Dec 2nd, 2020 (edited)
166
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. [border=transparent;
  2. *background image on the cover tab;
  3. --bg: url('https://64.media.tumblr.com/4b7c4a9594f672e99b48f4b7beb7fdfa/c374669282d669ca-66/s1280x1920/7dc043eb35b6c0b853b74adca6ce608ded21051f.jpg');
  4. *tabs background;
  5. --bg-color: #EFEFEF;
  6. *search bar colour;
  7. --search: #fff;
  8. *text box colour;
  9. --color-1: #fff;
  10. *text box accent;
  11. --color-2: #cecece;
  12. *header text colour (the text in the search bars);
  13. --header: #000;
  14. *subheader text colour (headers in text box);
  15. --subheader: #8E8E8E;
  16. *body text colour;
  17. --t-color: #000;
  18.  
  19. *character images;
  20. --img-1: url('https://breakthrough.org/wp-content/uploads/2018/10/default-placeholder-image.png');
  21. --img-2: url('https://breakthrough.org/wp-content/uploads/2018/10/default-placeholder-image.png');
  22.  
  23. *outfit;
  24. --outfit: url('https://breakthrough.org/wp-content/uploads/2018/10/default-placeholder-image.png');
  25.  
  26. height:450px; width:470px; padding:0; padding-bottom:25px; line-height:0; margin:auto; position:relative;][border=transparent; height:100%; width:100%; padding:0; position:relative; display:flex; background: var(--bg-color); display:flex; align-items:center; justify-content:flex-end;]
  27.  
  28. [comment]----cover tabs----[/comment]
  29. [border=transparent; height:5%; width:80%; padding:0; overflow:hidden; display:flex; justify-content:center; margin-right:15px;][border=transparent; padding:0; margin-top:0px;][tabs]
  30.  
  31. [comment]----cover page (fill in character's name!)----[/comment]
  32. [tab=aaaaaaaaaa][border=transparent; height:100%; width:100%; padding:0; position:absolute; top:0; left:0; pointer-events:none; display:flex; align-items:center; justify-content:center; background: var(--bg); background-size:cover; /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;]
  33.  
  34. [comment]----login (character's name/username)----[/comment]
  35. [border=transparent; height:9%; width:70%; padding:5px 12px; box-sizing:border-box; background: var(--search); border-radius:10px; display:flex; flex-flow: row nowrap; align-items:center; justify-content:center;]
  36.  
  37. [comment]----* * name * * ----[/comment]
  38. [border=transparent; height:100%; flex-grow:1; padding:0; display:flex; flex-flow: row nowrap; align-items:center; justify-content:flex-start; pointer-events:auto; overflow:hidden;]
  39. [border=transparent; height:fit-content; width:fit-content; padding:0; color: var(--header); font-size:17px; line-height:100%;][font=DM Sans][comment]
  40. ----* * * character's name here!----
  41. [/comment]character name[/font][/border]
  42.  
  43. [border=transparent; height:20px; width:11px; padding:0; background: url('https://i.imgur.com/oopiHUP.gif'); background-size:100%; flex-shrink:0; background-position:center; opacity:0.85;][/border]
  44. [/border]
  45.  
  46. [comment]----search button----[/comment]
  47. [border=transparent; height:fit-content; width:fit-content; padding:0 3px; box-sizing:border-box; color: var(--header); line-height:100%; flex-shrink:0; font-size:16px;][fa]far fa-search[/fa][/border]
  48. [/border]
  49. [comment]----login end----[/comment]
  50. [/border][/tab]
  51. [comment]----cover page end----[/comment]
  52.  
  53. [comment]----* main content *----[/comment]
  54. [tab=aaaaaaaaaaaaa][border=transparent; height:100%; width:100%; background: var(--bg-color); padding:20px 15px; box-sizing:border-box; position:absolute; top:0; right:0; display:flex; flex-flow: column nowrap; align-items:center; line-height:0;]
  55.  
  56. [comment]----row one----[/comment]
  57. [border=transparent; height:calc(42% - 20px); width:100%; padding:0; margin:0 0 20px 0; display:flex; flex-flow: row nowrap; align-items:center; justify-content:space-around;]
  58. [comment]----image----[/comment]
  59. [border=transparent; height:100%; width:47%; padding:0; flex-shrink:0; background: var(--img-1); background-size:cover;
  60. /*edit the following to adjust the cropping of the image*/ background-position: 50% 50%;][/border]
  61. [comment]----image----[/comment]
  62. [border=transparent; height:100%; width:47%; padding:0; flex-shrink:0; margin-left:10px; background: var(--img-2); background-size:cover;
  63. /*edit the following to adjust the cropping of the image*/ background-position: 50% 50%;][/border]
  64. [/border]
  65. [comment]----row one end----[/comment]
  66.  
  67. [comment]----* *row two* *----[/comment]
  68. [border=transparent; height:58%; width:94%; padding:0; display:flex; flex-flow: row nowrap; align-items:center; flex-shrink:0;]
  69.  
  70. [comment]----post contents----[/comment]
  71. [border=transparent; height:100%; flex-grow:1; padding:0; display:flex; flex-flow: column nowrap; background: var(--color-1); border-radius:10px; overflow:hidden;]
  72.  
  73. [comment]----* username *----[/comment]
  74. [border=transparent; height:13%; width:fit-content; padding:5px 3px 1px 3px; margin:0 7px; box-sizing:border-box; display:flex; align-items:center; color: var(--subheader); font-size:18px; line-height:100%; border-bottom:2px solid var(--subheader);][font=Arimo][comment]
  75. ----* * * username here----
  76. [/comment]username[/font][/border]
  77.  
  78. [comment]----* * post text * *----[/comment]
  79. [border=transparent; height:65%; width:100%; padding:8px 0; overflow:hidden; display:flex; flex-direction:column;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0 12px; box-sizing:border-box;]
  80.  
  81. [comment]----subheader----[/comment]
  82. [border=transparent; height:fit-content; width:100%; padding:0 0 3px 0; box-sizing:border-box; color: var(--subheader); line-height:100%; font-size:16px; position:sticky; top:0; background: var(--color-1);][font=Arimo][comment]
  83. ----* * *subheader here----
  84. [/comment]post[/font][/border]
  85.  
  86. [comment]----text----[/comment]
  87. [border=transparent; height:fit-content; width:calc(100% - 10px); padding:0; margin:5px 0 10px 10px; color: var(--t-color); line-height:120%; font-size:11px; text-align:justify;][font=Arimo][comment]
  88. ----* * * text starts here!----
  89. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin mattis lacinia lacus, at euismod dolor gravida id. Ut in aliquet magna. Sed in tellus ut tellus fringilla feugiat laoreet quis diam. Cras tincidunt enim et felis ultricies, sed luctus augue interdum. Integer ornare, velit ut congue rhoncus, odio turpis pharetra nisi, scelerisque cursus ligula diam et turpis. Donec ac nunc bibendum, porta elit at, suscipit nulla. Cras pretium nisi neque, vel posuere libero lobortis non.
  90.  
  91. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin mattis lacinia lacus, at euismod dolor gravida id. Ut in aliquet magna. Sed in tellus ut tellus fringilla feugiat laoreet quis diam. Cras tincidunt enim et felis ultricies, sed luctus augue interdum. Integer ornare, velit ut congue rhoncus, odio turpis pharetra nisi, scelerisque cursus ligula diam et turpis. Donec ac nunc bibendum, porta elit at, suscipit nulla. Cras pretium nisi neque, vel posuere libero lobortis non.
  92. [/font][/border]
  93. [comment]----text end---[/comment]
  94.  
  95. [/border][/border][/border]
  96. [comment]----post text end----[/comment]
  97.  
  98. [comment]----post details----[/comment]
  99. [border=transparent; height:22%; width:100%; padding:0; border-top:5px solid var(--bg-color); box-sizing:border-box; display:flex; flex-flow: row nowrap; color: var(--color-2); align-items:center; justify-content:center; position:relative;]
  100.  
  101. [comment]----*notes*----[/comment]
  102. [border=transparent; height:100%; width:70%; padding:0 0 0 15px; box-sizing:border-box; position:absolute; top:0; left:0; z-index:4; display:flex; align-items:center; background: var(--color-1); pointer-events:none;]
  103. [border=transparent; height:fit-content; width:fit-content; padding:0; font-size:15px; line-height:100%; flex-shrink:0;][font=Arimo][comment]
  104. ----* * * number of notes----
  105. [/comment]14,920 notes[/font][/border]
  106. [border=transparent; height:100%; flex-grow:1; margin-right:155px; padding:0; pointer-events:auto;][/border]
  107. [/border]
  108.  
  109. [comment]----* * details contents* *----[/comment]
  110. [border=transparent; height:100%; width:100%; padding:0; display:flex; justify-content:flex-start; align-items:center;]
  111.  
  112. [comment]----details tabs----[/comment]
  113. [border=transparent; height:40%; width:100%; padding:0; transform: scaleX(0.85); position:relative; z-index:3;][border=transparent; padding:0; margin:0 -50px;][tabs]
  114. [tab=aaaaaaaaaaaaaaaaaaaaa]blank![/tab]
  115.  
  116. [comment]----location detail----[/comment]
  117. [tab=.][border=transparent; height:150px; width:150px; padding:0; position:absolute; right:193px; top:-175px; transform:scaleX(1.17647) perspective(1px) translateZ(0); display:flex; align-items:flex-end; justify-content:flex-end; pointer-events:none; outline:1px solid transparent; backface-visibility:hidden;]
  118. [border=transparent; height:fit-content; width:fit-content; padding:5px 10px; box-sizing:border-box; background: var(--bg-color); border-radius:10px 10px 0 10px; color: var(--t-color); line-height:110%; font-size:13px; pointer-events:auto;][font=Arimo][comment]
  119. ----* * *location here!----
  120. [/comment]here i am![/font][/border]
  121. [/border][/tab]
  122. [comment]----location detail end----[/comment]
  123.  
  124. [comment]----outfit detail----[/comment]
  125. [tab=.][border=transparent; height:150px; width:150px; padding:0; position:absolute; right:132px; top:-175px; transform:scaleX(1.17647) perspective(1px) translateZ(0); display:flex; align-items:flex-end; justify-content:flex-end; pointer-events:none; outline:1px solid transparent; backface-visibility:hidden;]
  126. [border=transparent; height:fit-content; width:fit-content; padding:5px 10px; box-sizing:border-box; background: var(--bg-color); border-radius:10px 10px 0 10px; color: var(--t-color); line-height:110%; font-size:0; pointer-events:auto;][comment]
  127. ----* * *outfit here! change variable at top!----
  128. [/comment][border=transparent; padding:0; height:120px; width:120px; background: var(--outfit); background-size:cover;]outfit![/border][/border]
  129. [/border][/tab]
  130. [comment]----outfit detail end----[/comment]
  131.  
  132. [comment]----mood detail----[/comment]
  133. [tab=.][border=transparent; height:150px; width:150px; padding:0; position:absolute; right:68px; top:-175px; transform:scaleX(1.17647) perspective(1px) translateZ(0); display:flex; align-items:flex-end; justify-content:flex-end; pointer-events:none; outline:1px solid transparent; backface-visibility:hidden;]
  134. [border=transparent; height:fit-content; width:fit-content; padding:5px 10px; box-sizing:border-box; background: var(--bg-color); border-radius:10px 10px 0 10px; color: var(--t-color); line-height:110%; font-size:13px; pointer-events:auto;][font=Arimo][comment]
  135. ----* * *mood here!----
  136. [/comment]how i'm feeling![/font][/border]
  137. [/border][/tab]
  138. [comment]----interactions detail end----[/comment]
  139.  
  140. [comment]----tags detail----[/comment]
  141. [tab=.][border=transparent; height:150px; width:150px; padding:0; position:absolute; right:8px; top:-175px; transform:scaleX(1.17647) perspective(1px) translateZ(0); display:flex; align-items:flex-end; justify-content:flex-end; pointer-events:none; outline:1px solid transparent; backface-visibility:hidden;]
  142. [border=transparent; height:fit-content; width:fit-content; padding:5px 10px; box-sizing:border-box; background: var(--bg-color); border-radius:10px 10px 0 10px; color: var(--t-color); line-height:110%; font-size:13px; pointer-events:auto;][font=Arimo][comment]
  143. ----* * *location here!----
  144. [/comment]@ user @ user[/font][/border]
  145. [/border][/tab]
  146. [comment]----tags detail end----[/comment]
  147. [/tabs][/border][/border]
  148. [comment]----details tabs end----[/comment]
  149.  
  150. [comment]----details tabs cover----[/comment]
  151. [border=transparent; height:100%; width:fit-content; padding:0; position:absolute; top:0; right:0; z-index:4; display:flex; align-items:center; justify-content:center; pointer-events:none; background: var(--color-1);]
  152. [border=transparent; height:fit-content; width:fit-content; padding:0; margin:0 5px; font-size:14px; line-height:100%; margin:0 20px;][fa]fas fa-map-marker-alt[/fa][/border]
  153. [border=transparent; height:fit-content; width:fit-content; padding:0; margin:0 5px; font-size:14px; line-height:100%; margin:0 20px;][fa]fas fa-heart[/fa][/border]
  154. [border=transparent; height:fit-content; width:fit-content; padding:0; margin:0 5px; font-size:14px; line-height:100%; margin:0 20px;][fa]fas fa-comment-alt-dots[/fa][/border]
  155. [border=transparent; height:fit-content; width:fit-content; padding:0; margin:0 5px; font-size:14px; line-height:100%; margin:0 20px;][fa]far fa-share-alt[/fa][/border]
  156. [/border]
  157. [comment]----details tabs cover end----[/comment]
  158.  
  159. [/border]
  160. [comment]----details contents end----[/comment]
  161. [/border]
  162. [comment]----post details end----[/comment]
  163. [/border]
  164. [comment]----post contents end----[/comment]
  165. [/border]
  166. [comment]----row two end----[/comment]
  167.  
  168. [/border][/tab]
  169. [comment]----main content end----[/comment]
  170.  
  171. [tab=.]h[/tab][/tabs][/border][/border]
  172. [comment]----cover tabs end----[/comment]
  173.  
  174. [/border][comment]----signature! (do not remove!)-----
  175. [/comment][bg=transparent; height:fit-content; padding:0; width:100%; position:absolute; bottom:15px; left:10px; z-index:7;opacity:0.7;font-size:10px;text-align:center; line-height:100%;][font=Open Sans]♡design by dreamglow, coded by uxie♡[/font][/bg][/border]
RAW Paste Data Copied