API tools faq
paste
Advertisement
ooksie

twuxitter

ooksie
Sep 10th, 2022
132
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.35 KB | None | 0 0
raw download clone embed print report
  1. [comment]a remake of twitter's ui, coded by uxie!
  2.  
  3. [font=Open Sans]buttons[/font]
  4. [font=Hind]headers[/font]
  5. [font=Segoe UI]body[/font]
  6.  
  7. i recommend not changing fonts for this code!
  8.  
  9. [/comment][border=transparent;
  10.  
  11. /*background colour*/
  12. --bg-color:#fefefe;
  13. /*border colour*/
  14. --border:#E1E8ED;
  15.  
  16. /*main accent -- verified badge, follow button*/
  17. --color-1: #72523c;
  18. /*light grey*/
  19. --color-2: #cdd2d6;
  20. /*dark grey*/
  21. --color-3: #14171A;
  22. /*mid grey*/
  23. --color-4: #647683;
  24.  
  25. /*fonts used*/
  26. --button: 'Open Sans', sans-serif;
  27. --header:'Hind', sans-serif;
  28. --body: 'Segoe UI', sans-serif;
  29.  
  30. /*icon*/
  31. --img-1: url('https://64.media.tumblr.com/198e90ea3305c59997ddba4a53578c15/60f5a3d083a71276-5e/s1280x1920/da5b992771e3b7890f07066a0c9758eb3034b449.jpg');
  32. /*header*/
  33. --img-2: url('https://64.media.tumblr.com/baa274e282f6c44141d4ad763592ad0c/68a69644ee01c36d-0f/s1280x1920/0462a2184a6df470b197df3923b558b1490cbf0c.jpg');
  34.  
  35. /*post images*/
  36. --p1: url('https://i.imgur.com/23xsei3.png');
  37. --p2: url('https://i.imgur.com/HSYi6C1.png');
  38. --p3: url('https://i.imgur.com/6ObQBip.png');
  39. --p4: url('https://i.imgur.com/RkAKxai.jpg');
  40. --p5: url('https://i.imgur.com/zthuTyx.png');
  41. --p6: url('https://i.imgur.com/cWSTnkt.png');
  42.  
  43. height:auto; width:100%; padding:0; overflow-x:auto; margin:20px 0 30px 0; line-height:0;][border=transparent; height:auto; min-height:590px; width:100%; max-width:420px; padding:0; position:relative; margin:0 auto; border:1px solid var(--border); box-sizing:border-box; background: var(--bg-color); display:flex; flex-flow:column nowrap;]
  44.  
  45. [comment]----header image----[/comment]
  46. [border=transparent; height:120px; width:100%; padding:0; background: var(--img-1); background-size:cover;
  47.  
  48. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;][/border]
  49.  
  50. [comment]----icon & buttons----[/comment]
  51. [border=transparent; height:auto; width:100%; padding:0 15px; box-sizing:border-box; display:flex; flex-flow:row nowrap;]
  52.  
  53. [comment]----icon----[/comment]
  54. [border=transparent; --w: clamp(100px, -50px + 18vw, 130px); width: var(--w); padding:0; flex-shrink:0; margin-top: calc(var(--w) * -0.48);][border=transparent; padding:0; padding-top:calc(100% - 10px); border:5px solid var(--bg-color); background: var(--img-2); background-size:cover; border-radius:50%;
  55.  
  56. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;][/border][/border]
  57.  
  58. [comment]----buttons----[/comment]
  59. [border=transparent; flex:1; height:35px; padding:20px 0 0 0; box-sizing:border-box; display:flex; flex-flow:row nowrap; align-items:center; justify-content:flex-end;][border=transparent; height:33px; width:33px; padding:3px 0 0 0; border-radius:50%; box-sizing:border-box; border:1px solid var(--color-2); color: var(--color-3); font-size:18px; display:flex; align-items:center; justify-content:center;][fa]far fa-ellipsis-h[/fa][/border][border=transparent; height:33px; width:33px; padding:0 0 0 0; border-radius:50%; box-sizing:border-box; border:1px solid var(--color-2); color: var(--color-3); font-size:16px; display:flex; align-items:center; justify-content:center; margin-left:8px;][fa]far fa-envelope[/fa][/border]
  60. [border=transparent; height:33px; width:95px; padding:0; position:relative; margin-left:8px;][border=transparent; height:33px; width:95px; padding:0; overflow:hidden; border-radius:3px;][border=transparent; padding:0; margin:3px -40px 0 -10px; display:flex; justify-content:flex-end; line-height:30px;][tabs]
  61. [tab=aaa][border=0; width:200px; padding:0; line-height:0; letter-spacing:0;][border=transparent; height:33px; width:95px; position:absolute; top:0; left:0; padding:3px 15px; box-sizing:border-box; background: var(--color-1); color: var(--bg-color); font-family: var(--button); font-size:13px; line-height:100%; font-weight:bold; pointer-events:none; display:flex; align-items:center; justify-content:center; border-radius:30px;]Follow[/border][/border][/tab]
  62. [tab=.aaa][border=0; padding:0; font-size:0; letter-spacing:0;]h[border=transparent; height:33px; width:95px; position:absolute; top:0; left:0; padding:3px 10px; box-sizing:border-box; background: var(--bg-color); border:1px solid var(--color-2); color: var(--color-3); font-family: var(--button); font-size:13px; line-height:100%; font-weight:bold; pointer-events:none; display:flex; align-items:center; justify-content:center; border-radius:30px;]Following[/border][/border][/tab]
  63. [/tabs][/border][/border][/border][/border]
  64. [/border]
  65. [comment]----icon & buttons end----[/comment]
  66.  
  67. [comment]----name container----[/comment]
  68. [border=transparent; height:auto; width:clamp(200px, 60%, 350px); padding:12px 20px 0 20px; box-sizing:border-box; font-family: var(--header);]
  69. [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row-reverse nowrap; justify-content:flex-end; align-items:center;][border=transparent;
  70.  
  71. /*replace here; with display:none; to hide verified badge*/ here;
  72.  
  73. height:auto; width:fit-content; padding:0; color: var(--color-1); font-size:14px; flex-shrink:0; line-height:100%; margin-left:3px;][fa]fas fa-badge-check[/fa][/border][border=transparent; padding:0; color: var(--color-3); font-size:18px; font-family: var(--header); font-weight:bold; line-height:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; -webkit-text-stroke:0.3px var(--color-3); letter-spacing:0.5px;][comment]
  74.  
  75. ----* * * name here----
  76.  
  77. [/comment]it's me![/border]
  78. [/border]
  79. [border=transparent; height:auto; width:auto; padding:0; color: var(--color-4); font-size:14px; font-family: var(--header); line-height:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:5px; letter-spacing:-0.2px;][comment]
  80.  
  81. ----* * * username here (between the [plain][/plain]!)----
  82.  
  83. [/comment][plain]@username[/plain][/border]
  84. [/border]
  85. [comment]----name container end----[/comment]
  86.  
  87. [comment]----bio----[/comment]
  88. [border=transparent; height:auto; max-height:17px; width:100%; overflow:hidden; padding:0 20px; box-sizing:border-box; margin-top:12px; color: var(--color-3); font-family: var(--body); font-size:13.5px; line-height:17px;][comment]
  89.  
  90. ----* * * bio here (max one lines)----
  91.  
  92. [/comment]a cute little bio! only one line though[/border]
  93.  
  94. [comment]----account info----[/comment]
  95. [border=transparent; height:auto; width:100%; padding:0 20px; box-sizing:border-box; margin-top:10px; display:flex; flex-flow:row nowrap; align-items:center;]
  96.  
  97. [comment]----link----[/comment]
  98. [border=transparent; height:auto; width:fit-content; width:-moz-fit-content; max-width:60%; padding:0; display:flex; flex-flow:row nowrap; align-items:center; margin-right:8px;][border=transparent; height:auto; width:auto; padding:0; color: var(--color-4); font-size:13px; flex-shrink:0; margin:5px 5px 0 0;][fa]far fa-link[/fa][/border][border=transparent; height:auto; max-height:17px; width:auto; font-family: var(--body);
  99.  
  100. /*replace here; with display:none; to hide link*/ here;
  101.  
  102. padding:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:13px; color: var(--color-1);][comment]
  103.  
  104. ----* * * put link here----
  105.  
  106. [/comment][url='link here'][comment]
  107.  
  108. [/comment][border=transparent; padding:0; display:inline; color: var(--color-1); line-height:17px;][comment]
  109.  
  110. ----* * * link display here----
  111.  
  112. [/comment]you can link something here[/border][/url][/border]
  113. [/border]
  114. [comment]----link end----[/comment]
  115.  
  116. [comment]----join date----[/comment]
  117. [border=transparent; height:auto; width:fit-content; width:-moz-fit-content; max-width:30%; padding:0; display:flex; flex-flow:row nowrap; align-items:center; margin-right:8px; flex-shrink:0;][border=transparent; height:auto; width:auto; padding:0; color: var(--color-4); font-size:13px; flex-shrink:0; margin:5px 5px 0 0;][fa]far fa-calendar-alt[/fa][/border][border=transparent; height:auto; width:auto; padding:0; color: var(--color-4); font-size:13px; line-height:100%; font-family: var(--body); white-space:nowrap;][comment]
  118.  
  119. ----* * * join date here----
  120.  
  121. [/comment]16 December 2017[/border][/border]
  122. [/border]
  123. [comment]----account info end----[/comment]
  124.  
  125. [comment]----account statistics----[/comment]
  126. [border=transparent; height:auto; width:100%; padding:0 20px; box-sizing:border-box; display:flex; flex-flow:row nowrap; align-items:center; margin-top:10px;]
  127.  
  128. [comment]----followers----[/comment]
  129. [border=transparent; height:auto; width:auto; padding:0; display:flex; flex-flow:row-reverse nowrap; align-items:center; font-family: var(--body); flex-shrink:0;][border=transparent; height:auto; width:auto; padding:0; color: var(--color-4); font-size:13.5px; line-height:100%; margin-left:3px; text-align:center;]Following[/border][border=transparent; height:auto; width:auto; padding:0; color: var(--color-3); font-weight:600; font-size:13.5px; line-height:100%; text-align:center; text-transform:uppercase;][comment]
  130.  
  131. ----* * * number of following here----
  132.  
  133. [/comment]18[/border]
  134. [/border]
  135. [comment]----following end----[/comment]
  136.  
  137. [comment]----followers----[/comment]
  138. [border=transparent; height:auto; width:auto; padding:0; display:flex; flex-flow:row-reverse nowrap; align-items:center; font-family: var(--body); margin-left:8px;][border=transparent; height:auto; width:auto; padding:0; color: var(--color-4); font-size:13.5px; line-height:100%; margin-left:3px; text-align:center;]Followers[/border][border=transparent; height:auto; width:auto; padding:0; color: var(--color-3); font-weight:600; font-size:13.5px; line-height:100%; text-align:center; text-transform:uppercase;][comment]
  139.  
  140. ----* * * number of followers here----
  141.  
  142. [/comment]12.4m[/border]
  143. [/border]
  144. [comment]----followers end----[/comment]
  145. [/border]
  146. [comment]----account statistics end----[/comment]
  147.  
  148. [comment]----image gallery----[/comment]
  149. [border=transparent; height:auto; width:100%; padding:0 20px; box-sizing:border-box; margin:25px 0 20px 0;][border=transparent; height:225px; width:100%; padding:0; border-radius:15px; overflow:hidden; display:grid; grid-template: 1fr 1fr / 1fr 1fr 1fr; grid-gap:5px;]
  150.  
  151. [comment]----post image 1----[/comment]
  152. [border=transparent; height:110px; width:auto; padding:0; grid-area: 1 / 1 / 2 / 2; background: var(--p1);
  153.  
  154. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;
  155.  
  156. background-size:cover; position:relative;][/border]
  157.  
  158. [comment]----post image 2----[/comment]
  159. [border=transparent; height:110px; width:auto; padding:0; grid-area: 1 / 2 / 2 / 3; background: var(--p2);
  160.  
  161. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;
  162.  
  163. background-size:cover; position:relative;][/border]
  164.  
  165. [comment]----post image 3----[/comment]
  166. [border=transparent; height:110px; width:auto; padding:0; grid-area: 1 / 3 / 2 / 4; background: var(--p3);
  167.  
  168. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;
  169.  
  170. background-size:cover; position:relative;][/border]
  171.  
  172. [comment]----post image 4----[/comment]
  173. [border=transparent; height:110px; width:auto; padding:0; grid-area: 2 / 1 / 3 / 2; background: var(--p4);
  174.  
  175. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;
  176.  
  177. background-size:cover; position:relative;][/border]
  178.  
  179. [comment]----post image 5----[/comment]
  180. [border=transparent; height:110px; width:auto; padding:0; grid-area: 2 / 2 / 3 / 3; background: var(--p5);
  181.  
  182. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;
  183.  
  184. background-size:cover; position:relative;][/border]
  185.  
  186. [comment]----post image 6----[/comment]
  187. [border=transparent; height:110px; width:auto; padding:0; grid-area: 2 / 3 / 3 / 4; background: var(--p6);
  188.  
  189. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;
  190.  
  191. background-size:cover; position:relative;][/border]
  192.  
  193. [/border][/border]
  194. [comment]----image gallery end----[/comment]
  195. [comment]----signature! do not remove----[/comment]
  196. [bg=transparent; height:auto;width:fit-content; padding:0px 5px 3px 5px; box-sizing:border-box; position:absolute ;z-index:6;opacity:0.5;color: var(--color-1); font-size:9px;text-align:center; top:10px; right:8px; background:var(--bg-color); line-height:100%;][font=Open Sans]♡coded by uxie♡[/font][/bg]
  197. [/border][/border]
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!