API tools faq
paste
Advertisement
ooksie

uxiegram

ooksie
Sep 10th, 2022 (edited)
143
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 17.54 KB | None | 0 0
raw download clone embed print report
  1. [comment]a remake of instagram's ui, coded by uxie!
  2.  
  3. [font=Assistant]username[/font]
  4. [font=Oxygen]buttons[/font]
  5. [font=Segoe UI]everything else[/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, separator colour*/
  14. --border: #dbdbdb;
  15.  
  16. /*main accent -- verified badge, follow button*/
  17. --color-1: #0095f6;
  18. /*dark text colour*/
  19. --color-2: #8e8e8e;
  20. /*grey text colour*/
  21. --color-3: #262626;
  22.  
  23. /*fonts used*/
  24. --uname:'Assistant', sans-serif;
  25. --button: 'Oxygen', sans-serif;
  26. --body: 'Segoe UI', sans-serif;
  27.  
  28. /*icon*/
  29. --img-1: url('https://i.imgur.com/SKCl12D.png');
  30.  
  31. /*post images*/
  32. --p1: url('https://i.imgur.com/23xsei3.png');
  33. --p2: url('https://i.imgur.com/HSYi6C1.png');
  34. --p3: url('https://i.imgur.com/6ObQBip.png');
  35. --p4: url('https://i.imgur.com/RkAKxai.jpg');
  36. --p5: url('https://i.imgur.com/zthuTyx.png');
  37. --p6: url('https://i.imgur.com/cWSTnkt.png');
  38. --p7: url('https://i.imgur.com/v5grXkL.jpg');
  39. --p8: url('https://i.imgur.com/9wYG1aB.png');
  40. --p9: url('https://i.imgur.com/qu3NCwm.png');
  41.  
  42. height:auto; width:100%; padding:0; overflow-x:auto; line-height:0; margin:20px 0 30px 0;][border=transparent; height:auto; width:100%; min-width:320px; max-width:390px; background: var(--bg); padding:15px 20px; box-sizing:border-box; border:1px solid var(--border); margin:0 auto; position:relative; display:flex; flex-flow:column nowrap; overflow:hidden;]
  43.  
  44. [comment]----header----[/comment]
  45. [border=transparent; height:auto; min-height:130px; max-height:150px; width:100%; padding:8px; box-sizing:border-box; display:flex; flex-flow:row nowrap; --i: clamp(70px, 35%, 100px);]
  46. [comment]----icon----[/comment]
  47. [border=transparent; width:var(--i); padding:0; flex-shrink:0; margin-right:25px;][border=transparent; padding:0; padding-top:calc(100% - 1px); border-radius:50%; border:1px solid var(--border); background: var(--img-1); background-size:cover;
  48.  
  49. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;][/border][/border]
  50.  
  51. [comment]----account details----[/comment]
  52. [border=transparent; height:100%; flex:1; max-width:calc(100% - var(--i) - 25px); padding:0;]
  53. [comment]----username----[/comment]
  54. [border=transparent; height:25px; width:auto; max-width:100%; min-width:0; padding:0; display:flex; flex-flow:row nowrap; align-items:center;][border=transparent; height:25px; width:auto; min-width:0px; padding:0 3px 0 0; box-sizing:border-box; color: var(--color-3); font-family: var(--button); font-size:23px; line-height:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-family: var(--uname); letter-spacing:-1px;][comment]
  55.  
  56. ----* * * user name here----
  57.  
  58. [/comment]username[/border]
  59.  
  60. [border=transparent;
  61.  
  62. /*replace here; with display:none; to hide verified badge*/ here;
  63.  
  64. height:auto; width:auto; padding:0; color: var(--color-1); font-size:14px; flex-shrink:0; line-height:100%; margin-left:5px;][fa]fas fa-badge-check[/fa][/border][border=transparent; height:auto; width:auto; padding:0; color: var(--color-3); font-size:20px; flex-shrink:0; margin-left:15px;][fa]far fa-ellipsis-h[/fa][/border][/border]
  65. [comment]----username end----[/comment]
  66.  
  67. [comment]----follow buttons (ignore)----[/comment]
  68. [border=transparent; height:22px; width:100%; padding:0; margin-top:8px; display:flex; flex-flow:row nowrap;][border=transparent; height:22px; width:auto; min-width:30%; padding:3px 10px; box-sizing:border-box; border:1px solid var(--border); color: var(--color-3); font-family: var(--button); font-size:11px; border-radius:3px; line-height:100%; font-weight:bold; text-align:center; display:flex; align-items:center;]Message[/border][border=transparent; height:100%; width:65px; padding:0; position:relative; margin-left:8px;][border=transparent; height:20px; width:65px; padding:0; overflow:hidden; border-radius:3px;][border=transparent; padding:0; margin:3px -40px 0 -25px; display:flex; justify-content:flex-end; letter-spacing:-5px;][tabs]
  69. [tab=.][border=0; width:152px; padding:0; line-height:0; letter-spacing:0;][border=transparent; height:22px; width:auto; position:absolute; top:0; left:0; padding:3px 13px; box-sizing:border-box; background: var(--color-1); color: var(--bg-color); font-family: var(--button); font-size:11px; border-radius:3px; line-height:100%; font-weight:bold; text-align:center; pointer-events:none; display:flex; align-items:center; letter-spacing:0.5px;]Follow[/border][/border][/tab]
  70. [tab=aaaa][border=0; padding:0; font-size:0; letter-spacing:0;]h[border=transparent; height:100%; width:auto; position:absolute; top:0; left:0; padding:3px 13px; box-sizing:border-box; border:1px solid var(--border); color: var(--color-3); font-size:11px; border-radius:3px; line-height:100%; font-weight:bold; text-align:center; pointer-events:none; background: var(--bg-color); display:flex; align-items:center; z-index:3;][fa]fas fa-user-check[/fa][/border][border=transparent; height:100%; width:28px; padding:0; position:absolute; top:0; right:0; background: var(--bg-color);][/border][/border][/tab]
  71. [/tabs][/border][/border][/border][/border]
  72. [comment]----follow buttons end----[/comment]
  73.  
  74. [comment]----name----[/comment]
  75. [border=transparent; height:auto; width:100%; padding:0; color: var(--color-3); font-size:13.5px; font-family: var(--body); line-height:100%; font-weight:600; margin:12px 0 5px 1px;][comment]
  76.  
  77. ----* * * name here----
  78.  
  79. [/comment]it's me![/border]
  80.  
  81. [comment]----bio----[/comment]
  82. [border=transparent; height:auto; max-height:30px; width:100%; padding:0 0 2px 0; box-sizing:border-box; color: var(--color-3); font-family: var(--body); font-size:13px; margin:auto 0 4px 1px; line-height:14px; overflow:hidden;][comment]
  83.  
  84. ----* * * bio here (max two lines)----
  85.  
  86. [/comment]a cute little bio, max two lines![/border]
  87.  
  88. [comment]----link----[/comment]
  89. [border=transparent; height:auto; max-height:17px; width:90%; font-family: var(--body);
  90.  
  91. /*replace here; with display:none; to hide link*/ here;
  92.  
  93. padding:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:13px; margin:0 0 8px 0; color: var(--color-1);][comment]
  94.  
  95. ----* * * put link here----
  96.  
  97. [/comment][url='link here'][comment]
  98.  
  99. [/comment][border=transparent; padding:0; display:inline; color: var(--color-1); line-height:17px;][comment]
  100.  
  101. ----* * * link display here----
  102.  
  103. [/comment]link something![/border][/url][/border]
  104.  
  105. [/border]
  106. [comment]----account details end----[/comment]
  107. [/border]
  108. [comment]----header end----[/comment]
  109.  
  110. [comment]----account statistics----[/comment]
  111. [border=transparent; height:48px; width:100%; padding:10px 5px; box-sizing:border-box; border:1px solid var(--border); border-left:0; border-right:0; display:flex; flex-flow:row nowrap; justify-content:space-between; align-items:center; cursor:default;]
  112.  
  113. [comment]----posts----[/comment]
  114. [border=transparent; height:auto; width:80px; padding:0; display:flex; flex-flow:column-reverse nowrap; align-items:center; font-family: var(--body);][border=transparent; height:auto; width:auto; padding:0 0 0 2px; box-sizing:border-box; color: var(--color-2); font-size:11.5px; line-height:100%; margin-top:2px; text-align:center;]posts[/border][border=transparent; height:auto; width:auto; padding:0; color: var(--color-3); font-weight:600; font-size:12px; line-height:100%; text-align:center; text-transform:uppercase;][comment]
  115.  
  116. ----* * * number of posts here----
  117.  
  118. [/comment]569[/border]
  119. [/border]
  120. [comment]----posts end----[/comment]
  121.  
  122. [comment]----followers----[/comment]
  123. [border=transparent; height:auto; width:80px; padding:0; display:flex; flex-flow:column-reverse nowrap; align-items:center; font-family: var(--body);][border=transparent; height:auto; width:auto; padding:0 0 0 2px; box-sizing:border-box; color: var(--color-2); font-size:11.5px; line-height:100%; margin-top:2px; text-align:center;]followers[/border][border=transparent; height:auto; width:auto; padding:0; color: var(--color-3); font-weight:600; font-size:12px; line-height:100%; text-align:center; text-transform:uppercase;][comment]
  124.  
  125. ----* * * number of followers here----
  126.  
  127. [/comment]12.4m[/border]
  128. [/border]
  129. [comment]----followers end----[/comment]
  130.  
  131. [comment]----followers----[/comment]
  132. [border=transparent; height:auto; width:80px; padding:0; display:flex; flex-flow:column-reverse nowrap; align-items:center; font-family: var(--body); flex-shrink:0;][border=transparent; height:auto; width:auto; padding:0 0 0 2px; box-sizing:border-box; color: var(--color-2); font-size:11.5px; line-height:100%; margin-top:2px; text-align:center;]following[/border][border=transparent; height:auto; width:auto; padding:0; color: var(--color-3); font-weight:600; font-size:12px; line-height:100%; text-align:center; text-transform:uppercase;][comment]
  133.  
  134. ----* * * number of following here----
  135.  
  136. [/comment]18[/border]
  137. [/border]
  138. [comment]----followers end----[/comment]
  139. [/border]
  140. [comment]----account statistics end----[/comment]
  141.  
  142. [comment]----posts section----[/comment]
  143. [border=transparent; height:auto; width:100%; padding:25px 0 10px 0; box-sizing:border-box; margin:0 0 -50px 0; display:grid; grid-template:3fr 3fr 3fr / 3fr 3fr 3fr; gap:10px;]
  144.  
  145. [comment]----post image 1----[/comment]
  146. [border=transparent; width:auto; padding:0; grid-area: 1 / 1 / 2 / 2;][border=transparent; padding:0; padding-top:100%; background: var(--p1);
  147.  
  148. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;
  149.  
  150. background-size:cover; position:relative;][border=transparent; height:auto; width:auto; padding:0;
  151.  
  152. /*replace here; with display:none; to hide carousel icon*/ here;
  153.  
  154. ][border=transparent; height:auto; width:auto; padding:0; color: var(--bg-color); font-size:13px; position:absolute; top:5px; right:7px;][fa]fas fa-square[/fa][/border][border=transparent; height:auto; width:auto; padding:0; color: var(--bg-color); font-size:13px; position:absolute; top:7px; right:5px; clip-path: polygon(0 80%, 90% 80%, 90% 0, 100% 0, 100% 100%, 0 100%);][fa]fas fa-square[/fa][/border][/border][/border][/border]
  155.  
  156. [comment]----post image 2 (tab)----[/comment]
  157. [border=transparent; width:auto; padding:0; grid-area: 1 / 2 / 2 / 3;][border=transparent; padding:0; padding-top:100%; background: var(--p2);
  158.  
  159. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;
  160.  
  161. background-size:cover; position:relative;][border=transparent; height:auto; width:auto; padding:0;
  162.  
  163. /*replace here; with display:none; to hide carousel icon*/ here;
  164.  
  165. ][border=transparent; height:auto; width:auto; padding:0; color: var(--bg-color); font-size:13px; position:absolute; top:5px; right:7px;][fa]fas fa-square[/fa][/border][border=transparent; height:auto; width:auto; padding:0; color: var(--bg-color); font-size:13px; position:absolute; top:7px; right:5px; clip-path: polygon(0 80%, 90% 80%, 90% 0, 100% 0, 100% 100%, 0 100%);][fa]fas fa-square[/fa][/border][/border][/border][/border]
  166.  
  167. [comment]----post image 3----[/comment]
  168. [border=transparent; width:auto; padding:0; grid-area: 1 / 3 / 2 / 4;][border=transparent; padding:0; padding-top:100%; background: var(--p3);
  169.  
  170. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;
  171.  
  172. background-size:cover; position:relative;][border=transparent; height:auto; width:auto; padding:0;
  173.  
  174. /*replace here; with display:none; to hide carousel icon*/ here;
  175.  
  176. ][border=transparent; height:auto; width:auto; padding:0; color: var(--bg-color); font-size:13px; position:absolute; top:5px; right:7px;][fa]fas fa-square[/fa][/border][border=transparent; height:auto; width:auto; padding:0; color: var(--bg-color); font-size:13px; position:absolute; top:7px; right:5px; clip-path: polygon(0 80%, 90% 80%, 90% 0, 100% 0, 100% 100%, 0 100%);][fa]fas fa-square[/fa][/border][/border][/border][/border]
  177.  
  178. [comment]----post image 4 (tab)----[/comment]
  179. [border=transparent; width:auto; padding:0; grid-area: 2 / 1 / 3 / 2;][border=transparent; padding:0; padding-top:100%; background: var(--p4);
  180.  
  181. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;
  182.  
  183. background-size:cover; position:relative;][border=transparent; height:auto; width:auto; padding:0;
  184.  
  185. /*replace here; with display:none; to hide carousel icon*/ here;
  186.  
  187. ][border=transparent; height:auto; width:auto; padding:0; color: var(--bg-color); font-size:13px; position:absolute; top:5px; right:7px;][fa]fas fa-square[/fa][/border][border=transparent; height:auto; width:auto; padding:0; color: var(--bg-color); font-size:13px; position:absolute; top:7px; right:5px; clip-path: polygon(0 80%, 90% 80%, 90% 0, 100% 0, 100% 100%, 0 100%);][fa]fas fa-square[/fa][/border][/border][/border][/border]
  188.  
  189. [comment]----post image 5----[/comment]
  190. [border=transparent; width:auto; padding:0; grid-area: 2 / 2 / 3 / 3;][border=transparent; padding:0; padding-top:100%; background: var(--p5);
  191.  
  192. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;
  193.  
  194. background-size:cover; position:relative;][border=transparent; height:auto; width:auto; padding:0;
  195.  
  196. /*replace here; with display:none; to hide carousel icon*/ here;
  197.  
  198. ][border=transparent; height:auto; width:auto; padding:0; color: var(--bg-color); font-size:13px; position:absolute; top:5px; right:7px;][fa]fas fa-square[/fa][/border][border=transparent; height:auto; width:auto; padding:0; color: var(--bg-color); font-size:13px; position:absolute; top:7px; right:5px; clip-path: polygon(0 80%, 90% 80%, 90% 0, 100% 0, 100% 100%, 0 100%);][fa]fas fa-square[/fa][/border][/border][/border][/border]
  199.  
  200. [comment]----post image 6 (tab)----[/comment]
  201. [border=transparent; width:auto; padding:0; grid-area: 2 / 3 / 3 / 4;][border=transparent; padding:0; padding-top:100%; background: var(--p6);
  202.  
  203. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;
  204.  
  205. background-size:cover; position:relative;][border=transparent; height:auto; width:auto; padding:0;
  206.  
  207. /*replace here; with display:none; to hide carousel icon*/ here;
  208.  
  209. ][border=transparent; height:auto; width:auto; padding:0; color: var(--bg-color); font-size:13px; position:absolute; top:5px; right:7px;][fa]fas fa-square[/fa][/border][border=transparent; height:auto; width:auto; padding:0; color: var(--bg-color); font-size:13px; position:absolute; top:7px; right:5px; clip-path: polygon(0 80%, 90% 80%, 90% 0, 100% 0, 100% 100%, 0 100%);][fa]fas fa-square[/fa][/border][/border][/border][/border]
  210.  
  211. [comment]----post image 7----[/comment]
  212. [border=transparent; width:auto; padding:0; grid-area: 3 / 1 / end / 2;][border=transparent; padding:0; padding-top:100%; background: var(--p7);
  213.  
  214. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;
  215.  
  216. background-size:cover; position:relative;][border=transparent; height:auto; width:auto; padding:0;
  217.  
  218. /*replace here; with display:none; to hide carousel icon*/ here;
  219.  
  220. ][border=transparent; height:auto; width:auto; padding:0; color: var(--bg-color); font-size:13px; position:absolute; top:5px; right:7px;][fa]fas fa-square[/fa][/border][border=transparent; height:auto; width:auto; padding:0; color: var(--bg-color); font-size:13px; position:absolute; top:7px; right:5px; clip-path: polygon(0 80%, 90% 80%, 90% 0, 100% 0, 100% 100%, 0 100%);][fa]fas fa-square[/fa][/border][/border][/border][/border]
  221.  
  222. [comment]----post image 8----[/comment]
  223. [border=transparent; width:auto; padding:0; grid-area: 3 / 2 / end / 3;][border=transparent; padding:0; padding-top:100%; background: var(--p8);
  224.  
  225. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;
  226.  
  227. background-size:cover; position:relative;][border=transparent; height:auto; width:auto; padding:0;
  228.  
  229. /*replace here; with display:none; to hide carousel icon*/ here;
  230.  
  231. ][border=transparent; height:auto; width:auto; padding:0; color: var(--bg-color); font-size:13px; position:absolute; top:5px; right:7px;][fa]fas fa-square[/fa][/border][border=transparent; height:auto; width:auto; padding:0; color: var(--bg-color); font-size:13px; position:absolute; top:7px; right:5px; clip-path: polygon(0 80%, 90% 80%, 90% 0, 100% 0, 100% 100%, 0 100%);][fa]fas fa-square[/fa][/border][/border][/border][/border]
  232.  
  233. [comment]----post image 9----[/comment]
  234. [border=transparent; width:auto; padding:0; grid-area: 3 / 3 / end / 4;][border=transparent; padding:0; padding-top:100%; background: var(--p9);
  235.  
  236. /*edit the following to adjust the cropping of the image*/ background-position:50% 50%;
  237.  
  238. background-size:cover;][border=transparent; height:auto; width:auto; padding:0;
  239.  
  240. /*replace here; with display:none; to hide carousel icon*/ here;
  241.  
  242. ][border=transparent; height:auto; width:auto; padding:0; color: var(--bg-color); font-size:13px; position:absolute; top:5px; right:7px;][fa]fas fa-square[/fa][/border][border=transparent; height:auto; width:auto; padding:0; color: var(--bg-color); font-size:13px; position:absolute; top:7px; right:5px; clip-path: polygon(0 80%, 90% 80%, 90% 0, 100% 0, 100% 100%, 0 100%);][fa]fas fa-square[/fa][/border][/border][/border][/border]
  243.  
  244. [/border]
  245. [comment]----posts section end----[/comment]
  246.  
  247.  
  248. [comment]----signature! do not remove----[/comment]
  249. [bg=transparent; height:10px;width:fit-content; position:absolute ;z-index:6;opacity:0.3;color: var(--color-2); font-size:9px;text-align:center; top:7px; right:3px;][font=Open Sans]♡coded by uxie♡[/font][/bg]
  250. [/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!