ooksie

pumpkin spice latte (nine lives)

Nov 22nd, 2020 (edited)
137
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. [comment]code by nine lives ♡
  2.  
  3. fonts used:
  4. [font=Abril Fatface]name + detail titles[/font]
  5. [font=Georgia]body text[/font]
  6. [font=Raleway]role[/font]
  7.  
  8. to replace fonts, replace them here then in the corresponding variables under * fonts used * check uxie's tech support in nine lives for more details ( ‾́ ◡ ‾́ )
  9.  
  10. [/comment][border=transparent;
  11. *background image;
  12. --bg: url('https://i.pinimg.com/564x/2f/5f/68/2f5f68e47da910b6c101a933fad3ae8e.jpg');
  13. *main contents background colour;
  14. --bg-color: #FFF;
  15. *background of name & role;
  16. --color-1: #D8D1C3;
  17. *accent colour for details;
  18. --color-2: #CE9B7F;
  19.  
  20. *name colour;
  21. --name: #AD5829;
  22. *role colour;
  23. --role: #664a3c;
  24. *body text colour;
  25. --t-color: #382b25;
  26.  
  27. *fonts used;
  28. --header: 'Abril Fatface', display;
  29. --subheader: 'Raleway', sans-serif;
  30. --body: 'Georgia', sans-serif;
  31.  
  32. *character image;
  33. --img-1: url('https://64.media.tumblr.com/03ea30ce0405ff59197d5140bb134585/e564f919959ff6a9-ba/s640x960/b625d8150cb4ecac82256fcbc27aa093ff675400.jpg');
  34.  
  35. height:470px; width:100%; max-width:620px; padding:50px 20px; box-sizing:border-box; position:relative; line-height:0; margin:auto; display:flex; flex-flow: column nowrap; align-items:center;]
  36.  
  37. [comment]----background----[/comment]
  38. [border=transparent; height:100%; width:100%; padding:0; background: var(--bg); position:absolute; top:0; left:0; opacity:0.5; z-index:1; background-size:cover; -webkit-filter:saturate(1.6);
  39. /*edit the following to adjust the cropping of the image*/ background-position: 50% 60%;][/border]
  40.  
  41. [comment]----main content----[/comment]
  42. [border=transparent; height:100%; width:100%; max-width:520px; padding:10px; box-sizing:border-box; background: var(--bg-color); position:relative; z-index:2; margin:auto auto; display:flex; flex-flow: row nowrap; justify-content:center;]
  43.  
  44. [comment]----left----[/comment]
  45. [border=transparent; height:100%; width:34%; min-width:100px; padding:0; display:flex; flex-flow:column nowrap; justify-content:center; align-items:center; flex-shrink:0;]
  46. [comment]----image----[/comment]
  47. [border=transparent; height:38%; width:90%; padding:0; background: var(--img-1); flex-shrink:0; background-size:cover;
  48. /*edit the following to adjust the cropping of the image*/ background-position: 50% 80%; margin:5px 0 15px 0;][/border]
  49.  
  50. [comment]----details----[/comment]
  51. [border=transparent; height:calc(62% - 15px); width:100%; padding:0; display:flex; overflow:hidden; flex-direction:column;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0; display:flex; flex-flow:column nowrap; align-items:center;]
  52.  
  53. [comment]----details header----[/comment]
  54. [border=transparent; height:fit-content; width:fit-content; margin-top:5px; padding:5px 5px 0 5px; box-sizing:border-box; color: var(--t-color); text-transform:uppercase; font-size:16px; letter-spacing:0.5px; border-bottom:8px solid var(--color-2); font-family: var(--header); line-height:20%;][comment]
  55. ----* * * detail title here----
  56. [/comment]mood[/border]
  57.  
  58. [comment]----details text----[/comment]
  59. [border=transparent; height:fit-content; width:100%; padding:0; margin:5px 0 10px 0; color: var(--t-color); font-size:11px; line-height:120%; font-family: var(--body); text-align:center;][comment]
  60. ----* * *details text here----
  61. [/comment]here is how i'm feelin' today![/border]
  62.  
  63. [comment]----details header----[/comment]
  64. [border=transparent; height:fit-content; width:fit-content; margin-top:5px; padding:5px 5px 0 5px; box-sizing:border-box; color: var(--t-color); text-transform:uppercase; font-size:16px; letter-spacing:0.5px; border-bottom:8px solid var(--color-2); font-family: var(--header); line-height:20%;][comment]
  65. ----* * * detail title here----
  66. [/comment]location[/border]
  67.  
  68. [comment]----details text----[/comment]
  69. [border=transparent; height:fit-content; width:100%; padding:0; margin:5px 0 10px 0; color: var(--t-color); font-size:11px; line-height:120%; font-family: var(--body); text-align:center;][comment]
  70. ----* * *details text here----
  71. [/comment]here is where i'm chillin'[/border]
  72.  
  73. [comment]----details header----[/comment]
  74. [border=transparent; height:fit-content; width:fit-content; margin-top:5px; padding:5px 5px 0 5px; box-sizing:border-box; color: var(--t-color); text-transform:uppercase; font-size:16px; letter-spacing:0.5px; border-bottom:8px solid var(--color-2); font-family: var(--header); line-height:20%;][comment]
  75. ----* * * detail title here----
  76. [/comment]outfit[/border]
  77.  
  78. [comment]----details text----[/comment]
  79. [border=transparent; height:fit-content; width:100%; padding:0; margin:5px 0 10px 0; color: var(--t-color); font-size:11px; line-height:120%; font-family: var(--body); text-align:center;][comment]
  80. ----* * *details text here (if you don't want the link, just copy from [url=] to [/url] to get rid of it!)----
  81. [/comment][url='xx'][border=transparent; padding:0; color: var(--t-color);][comment]
  82. ----* * * outfit text----
  83. [/comment]peep my fit![/border][/url][/border]
  84.  
  85. [comment]----details header----[/comment]
  86. [border=transparent; height:fit-content; width:fit-content; margin-top:5px; padding:5px 5px 0 5px; box-sizing:border-box; color: var(--t-color); text-transform:uppercase; font-size:16px; letter-spacing:0.5px; border-bottom:8px solid var(--color-2); font-family: var(--header); line-height:20%;][comment]
  87. ----* * * detail title here----
  88. [/comment]tags[/border]
  89.  
  90. [comment]----details text----[/comment]
  91. [border=transparent; height:fit-content; width:100%; padding:0; margin:5px 0 10px 0; color: var(--t-color); font-size:11px; line-height:120%; font-family: var(--body); text-align:center;][comment]
  92. ----* * *details text here----
  93. [/comment][USER=30903]@Uxie[/USER] [USER=80764]@triples[/USER][/border]
  94.  
  95. [/border][/border][/border]
  96. [comment]----details----[/comment]
  97. [/border]
  98. [comment]----left end----[/comment]
  99.  
  100. [comment]----right----[/comment]
  101. [border=transparent; height:100%; flex-grow:1; padding:0; position:relative; display:flex; flex-flow: column nowrap; align-items:flex-end;]
  102.  
  103. [comment]----name & role/quote----[/comment]
  104. [border=transparent; height:fit-content; width:fit-content; max-width:85%; padding:15px; box-sizing:border-box; background: var(--color-1); display:flex; flex-flow:column nowrap; position:relative; top:-40px; left:25px; z-index:3; align-items:center; justify-content:center; margin:0 0 -25px 0; text-align:center;]
  105. [comment]----name----[/comment]
  106. [border=transparent; height:fit-content; width:fit-content; padding:0; text-transform:uppercase; letter-spacing:0.5px; font-size:40px; font-family: var(--header);][comment]
  107. ----* * *link to cs here! (replace xx with your link!)----
  108. [/comment][url='xx'][border=transparent; padding:0; color: var(--name); line-height:90%; display:inline-block; text-decoration:none;][comment]
  109. ----* * * name here!----
  110. [/comment]name here[/border][/url][/border]
  111.  
  112. [comment]----quote/role----[/comment]
  113. [border=transparent; height:fit-content; width:fit-content; padding:0; color: var(--role); font-family: var(--subheader); line-height:100%; font-size:12px; margin-top:2px;][comment]
  114. ----* * *role/quote here!----
  115. [/comment]a role here or a quote maybe?[/border]
  116. [/border]
  117. [comment]----name & role/quote end----[/comment]
  118.  
  119. [comment]----main text----[/comment]
  120. [border=transparent; max-height:90%; width:100%; padding:0 0 10px 0; box-sizing:border-box; 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 10px; box-sizing:border-box; color: var(--t-color); line-height:140%; font-size:11px; font-family: var(--body); text-align:justify;][comment]
  121. ----* * * text starts here!----
  122. [/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.
  123.  
  124. Donec nec bibendum nulla, in vehicula quam. Nulla condimentum suscipit mi placerat blandit. Nam a elit facilisis, malesuada magna ac, commodo lorem. Vestibulum ultricies imperdiet erat eget facilisis. Vivamus id arcu quis risus viverra commodo a ut odio. Ut id urna mauris. Nullam ullamcorper condimentum libero, ut efficitur lectus pellentesque sed. Integer ante risus, imperdiet sit amet finibus quis, facilisis vitae purus. Duis quam libero, venenatis non elementum malesuada, iaculis et orci. Fusce ex neque, lacinia sed tristique non, mattis quis velit.
  125.  
  126. Praesent vitae dapibus ipsum. Duis venenatis tempor ante, ac dignissim eros scelerisque scelerisque. Proin placerat leo sit amet massa aliquam elementum. Nam sem ex, efficitur ut porttitor et, finibus sed dolor. Integer et pharetra dolor. Nunc varius massa sit amet venenatis vehicula. Sed in vehicula erat. Vivamus in ipsum nunc. Duis tincidunt nibh ac nibh volutpat mattis.
  127. [/border][/border][/border]
  128. [comment]----main text----[/comment]
  129. [/border]
  130. [comment]----right end----[/comment]
  131.  
  132. [/border]
  133. [comment]----main content end----[/comment]
  134.  
  135. [comment]----made with love by uxie and triples ♡ do not remove!! !!----[/comment]
  136. [border=transparent; height:fit-content; width:fit-content; padding:0; color: var(--t-color); font-size:10px; position:absolute; z-index:7; top:5px; left:10px; display:flex; flex-flow: row nowrap; align-items:center; line-height:100%; opacity:0.8;][border=transparent; height:fit-content; width:fit-content; padding:0; letter-spacing:0.5px; font-weight:bold;][font=Space Grotesk]nine lives[/font][/border][border=transparent; height:fit-content; width:fit-content; padding:0; margin-left:5px; font-size:8px;][fa]fas fa-cat[/fa][/border][/border]
  137. [/border]
RAW Paste Data