Advertisement
ooksie

daybreak (placeholder)

May 31st, 2021 (edited)
141
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. [comment]coded by uxie!
  2.  
  3. fonts used:
  4. [font=Crimson Pro]detail[/font]
  5. [font=Karla]subheader/body text[/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. /*main background colour*/
  11. --bg: #fff;
  12.  
  13. /*main accent colour*/
  14. --color-1: #bac6e2;
  15.  
  16. /*role colour*/
  17. --h1: #fff;
  18. /*detail colour*/
  19. --subtitle: #6d4e41;
  20.  
  21. /*fonts used*/
  22. --detail: 'Crimson Pro', serif;
  23. --body: 'Karla', sans-serif;
  24.  
  25. /*images*/
  26. --img-1: URL('https://i.pinimg.com/564x/51/6a/b0/516ab0139f8eef0e676aaf692d9be2b3.jpg');
  27. --img-2: URL('https://i.pinimg.com/564x/0d/24/38/0d243813b1ac6ac5f273335e62682880.jpg');
  28.  
  29. height:240px; width:fit-content; width:-moz-fit-content; min-width:265px; padding:0; box-sizing:border-box; position:relative; line-height:0; margin:0 auto;]
  30.  
  31. [comment]----contents----[/comment]
  32. [border=transparent; height:100%; width:auto; min-width:265px; max-width:275px; padding:23px 0 23px 25px; box-sizing:border-box; position:absolute; top:0; left:0; z-index:5; display:flex; flex-flow:row nowrap; pointer-events:none;]
  33. [comment]----box----[/comment]
  34. [border=transparent; height:100%; width:calc(220px - 25px); padding:5px; box-sizing:border-box; border:1px solid var(--color-1); position:relative; display:flex; align-items:flex-end;]
  35. [comment]----detail----[/comment]
  36. [border=transparent; height:auto; width:auto; padding:0; color: var(--color-2); font-size:10.5px; font-family: var(--detail); color: var(--subtitle); line-height:100%; font-weight:bold; font-style:oblique; letter-spacing:1px; opacity:0.85;][comment]
  37.  
  38. ----* * * detail here----
  39.  
  40. [/comment]fc: detail[/border]
  41. [/border]
  42. [comment]----box end----[/comment]
  43.  
  44. [comment]----role----[/comment]
  45. [border=transparent; height:auto; width:fit-content; width:-moz-fit-content; min-width:70px; max-width:80px; padding:0; margin-top:25px; flex-shrink:0;][border=transparent; display:inline; padding:3px 6px; box-sizing:border-box; box-decoration-break:clone; -webkit-box-decoration-break: clone; background: var(--color-1); border-radius:1px 2px 2px 1px; color: var(--h1); font-size:9.5px; text-transform:uppercase; letter-spacing:1.5px; line-height:15px; font-family: var(--body); text-align:right; pointer-events:auto;][comment]
  46.  
  47. ----* * * role here----
  48.  
  49. [/comment]role here[/border][/border]
  50.  
  51. [/border]
  52. [comment]----contents end----[/comment]
  53.  
  54. [comment]----images----[/comment]
  55. [border=transparent; height:240px; width:220px; padding:0; overflow:hidden; position:relative; z-index:1;][border=transparent; height:257px; width:220px; padding:0; overflow-x:scroll; scroll-snap-type:x mandatory;][border=transparent; height:230px; width:fit-content; padding:0; display:flex; flex-flow:row nowrap;]
  56.  
  57. [comment]----image 1----[/comment]
  58. [border=transparent; height:240px; width:220px; padding:0; background: var(--img-1); background-size:cover;
  59.  
  60. /*edit the following to adjust the cropping of the image*/ background-position:50% 20%;
  61.  
  62. position:relative; scroll-snap-align:start;][border=transparent; height:100%; width:100%; padding:0; background: var(--bg); opacity:0.25;][/border][/border]
  63.  
  64. [comment]----image 2----[/comment]
  65. [border=transparent; height:240px; width:220px; padding:0; background: var(--img-2); background-size:cover;
  66.  
  67. /*edit the following to adjust the cropping of the image*/ background-position:50% 20%;
  68.  
  69. position:relative; scroll-snap-align:start;][border=transparent; height:100%; width:100%; padding:0; background: var(--bg); opacity:0.25;][/border][/border]
  70.  
  71. [/border][/border][/border]
  72. [comment]----images end----[/comment]
  73. [comment]
  74. ----signature! do not remove
  75. [/comment][bg=transparent; height:auto; width:auto; padding:0; position:absolute;z-index:6;opacity:0.3;color: var(--subtitle); font-size:9.5px;text-align:center; top:12px; left:14px; line-height:100%;][font=Open Sans]♡coded by uxie♡[/font][/bg][/border]
Advertisement
RAW Paste Data Copied
Advertisement