ooksie

boxed out

Jan 10th, 2021 (edited)
616
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. [comment]
  2.  
  3. fonts used:
  4. [font=Raleway]name, additional details[/font]
  5. [font=Karla]role[/font]
  6.  
  7. to replace fonts, add/replace them here, and then in the variables below under *fonts; check uxie's tech support in nine lives for more details ( ‾́ ◡ ‾́ )
  8.  
  9. [/comment][border=transparent;
  10. *background colour;
  11. --bg: #F9F9F9;
  12.  
  13. *first accent colour (lighter -- border + name);
  14. --color-1: #C08458;
  15. *second accent colour (darker -- role border);
  16. --color-2: #875030;
  17. *role/additional details colour;
  18. --txt: #472c1d;
  19.  
  20. *fonts;
  21. --name: 'Raleway', sans-serif;
  22. --detail: 'Raleway', sans-serif;
  23. --role: 'Karla', sans-serif;
  24.  
  25. *big image;
  26. --img-1: url('https://pbs.twimg.com/media/EkNiTnOUwAAu9TV?format=jpg&name=large');
  27.  
  28. height:fit-content; min-height:270px; width:340px; margin:auto; padding:0; padding-bottom:20px; position:relative;][border=transparent; height:fit-content; min-height:273px; width:100%; background-color: var(--bg); padding:0 0 10px 32px; box-sizing:border-box; line-height:0; position:relative; display:flex; align-items:flex-end;]
  29. [comment]----image----[/comment]
  30. [border=transparent; height:210px; width:280px; background: var(--img-1); background-size:cover; background-position: 50% 50%; padding:0; position:absolute; top:10px; left:10px; z-inedx:1;][/border]
  31.  
  32. [comment]----border----[/comment]
  33. [border=transparent; height:fit-content; min-height:235px; width:280px; margin-top:22px; border:1px solid var(--color-1); position:relative; z-index:2; display:flex; box-sizing:border-box; padding:3px 20px 3px 8px; flex-flow: column nowrap; justify-content: flex-end; align-items: flex-start;]
  34. [border=transparent; height:193px; width:100%; padding:0;][/border]
  35.  
  36. [comment]----role---[/comment]
  37. [border=transparent; min-height:30px; height:fit-content; width:fit-content; min-width:60px; max-width:125px; border:1px solid var(--color-2); position:absolute; right:-20px; top:20px; padding:4px 5px 4px 8px; box-sizing:border-box; display:flex; justify-content:center; align-items:center;]
  38. [border=transparent; height:calc(100% + 0.2px); width:40px; position:absolute; background-color: var(--bg); top:-0.1px; right:0; padding:0;][/border]
  39. [border=transparent; height:fit-content; width:fit-content; font-weight:bold; text-transform: uppercase; color: var(--txt); z-index:8; font-family: var(--role); font-size:12px; letter-spacing:1px; text-align:right; position:relative; padding:0; line-height:120%;][comment]
  40.  
  41. ----* * * role here -----
  42.  
  43. [/comment]the survivor[/border]
  44. [/border]
  45.  
  46. [comment]----additional details----[/comment]
  47. [border=transparent; width:100%; height:fit-content; font-size:9px; font-family: var(--detail); color: var(--txt); text-align:right; letter-spacing:.5px; line-height:100%; padding:0;][comment]
  48.  
  49. ----* * * extra detail (keep it short)----
  50.  
  51. [/comment]fc: chae soo-bin[/border]
  52.  
  53. [comment]----name----[/comment]
  54. [border=transparent; height:fit-content; width:fit-content; max-width:90%; line-height:100%; font-size:25px; letter-spacing:1px; color: var(--color-1); font-family: var(--name); font-weight:700; padding:0; margin:-1.5px 0 3px 0;][comment]
  55.  
  56. ----* * * name here----
  57.  
  58. [/comment]im seyoung[/border]
  59.  
  60. [/border]
  61. [comment]----border end----[/comment]
  62. [/border][comment]----signature! do not remove----
  63. [/comment][bg=transparent; height:10px;width:100%;z-index:6;opacity:0.7;color: var(--color-1);font-size:10px;text-align:center; position:absolute; bottom:15px; left:0; padding:0;][font=Open Sans]♡coded by uxie♡[/font][/bg][/border]
RAW Paste Data Copied