API tools faq
paste
Advertisement
ooksie

cloudy americano (nine lives)

ooksie
Nov 17th, 2020 (edited)
428
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.53 KB | None | 0 0
raw download clone embed print report
  1. [comment]coded by nine lives ♡
  2. have a nice day!
  3.  
  4. fonts used:
  5. [font=Sacramento]name[/font]
  6. [font=Raleway]body text & details[/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. *main content background colour;
  12. --color-1: #ABB6BA;
  13. *darker box outline colour;
  14. --color-2: #787878;
  15. *lighter box outline colour;
  16. --color-3: #C5C5C5;
  17. *name & glow colour;
  18. --name: #fff;
  19. *text colour;
  20. --t-color: #fff;
  21.  
  22. *fonts used;
  23. --name-f: 'Sacramento', display;
  24. --body: 'Raleway', sans-serif;
  25.  
  26. *the one image! replace the link within the '' with your own link;
  27. --img-1: url('https://i.pinimg.com/236x/50/0c/4c/500c4c6621b1f81c0e63c387f26215a3--pale-grunge-unique-art.jpg');
  28.  
  29. height:fit-content; width:100%; max-width:660px; padding:20px 0; margin:auto; position:relative; display:flex; align-items:center; justify-content:flex-start; line-height:0;]
  30.  
  31. [comment]----main content----[/comment]
  32. [border=transparent; height:380px; width:calc(100% - 20px); padding:0; display:flex; align-items:center;]
  33. [comment]----icon----[/comment]
  34. [border=transparent; height:150px; width:24%; min-width:125px; padding:0; background: var(--img-1); background-size:cover; flex-shrink:0; margin-right:-50px; position:relative; z-index:4;
  35. /*edit the following to adjust the cropping of the image*/ background-position: 50% 50%;][/border]
  36.  
  37. [comment]----body----[/comment]
  38. [border=transparent; height:100%; flex-grow:1; padding:10px; box-sizing:border-box; background: var(--color-1); position:relative; z-index:3; display:flex; flex-flow:column nowrap; justify-content:center; align-items:center; align-content:center;]
  39.  
  40. [comment]----name----[/comment]
  41. [border=transparent; min-height:14%; max-height:25%; width:100%; padding:0 15px; text-align:right; box-sizing:border-box; color: var(--name); font-weight:bold; font-family: var(--name-f); letter-spacing:3px; font-size:40px; display:flex; align-items:center; justify-content:flex-end; line-height:100%; text-shadow: 0 0 8px var(--name); font-style:oblique; flex-shrink:0;][comment]
  42. ----* * * name here----
  43. [/comment]Dreaming a dream.[/border]
  44.  
  45. [comment]----text box----[/comment]
  46. [border=transparent; max-height:74%; min-height:40%; width:100%; padding:6px 10px 7px 50px; box-sizing:border-box; overflow-y:scroll; flex-shrink:1;][border=transparent; height:auto; width:100%; padding:0; margin-top:0.5px; color: var(--t-color); font-size:12px; text-align:justify; line-height:130%; font-family: var(--body);][comment]
  47. ----* * * text starts here----
  48. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean congue turpis ac venenatis tempor. Sed luctus porttitor hendrerit. Sed pellentesque vitae elit ut aliquet. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce tincidunt odio ac justo ultricies, nec aliquet massa hendrerit. Integer nisi justo, viverra vel molestie eget, iaculis accumsan orci. Nullam maximus, est sit amet pulvinar pellentesque, massa augue lobortis mi, ut sollicitudin mi velit ut turpis. Vestibulum sagittis arcu sed mi commodo maximus. Quisque sodales purus elit, vel venenatis tortor pellentesque tincidunt. Mauris at eros id dolor semper dictum at a tellus. Donec vitae massa ac ipsum mollis ultrices varius at nulla.
  49.  
  50. Phasellus vehicula libero porta neque tristique hendrerit eget id lorem. Cras rutrum odio at ligula tincidunt, et imperdiet augue fermentum. In sed magna ornare, pellentesque nisi eu, euismod ante. Nam egestas urna sit amet rutrum convallis. Aenean orci eros, dapibus sed lacinia vitae, faucibus ut sapien. Nullam quam ante, venenatis gravida dui non, ultricies pharetra risus. Morbi nec elit in elit fermentum tincidunt ut in nunc. Morbi accumsan imperdiet nulla eu tincidunt. Cras at neque sed mi finibus vehicula a gravida nisi. Vivamus ullamcorper egestas interdum. Etiam volutpat lectus at purus feugiat, at accumsan lectus fermentum. Maecenas ultricies massa et ante vestibulum, ut mollis arcu ultrices.
  51. [/border][/border]
  52. [comment]----text box end----[/comment]
  53.  
  54. [comment]----details box----[/comment]
  55. [border=transparent; margin-top:5px; min-height:10%; max-height:30%; width:100%; padding:0; flex-shrink:0; display:flex; flex-flow: row wrap; align-content:center; justify-content:center;]
  56.  
  57. [comment]----detail 1----[/comment]
  58. [border=transparent; height:fit-content; width:50%; max-width:135px; padding:10px 5px 10px 8px; box-sizing:border-box; display:flex; flex-flow: row nowrap; align-items:center; flex-shrink:0;]
  59. [border=transparent; height:fit-content; width:fit-content; padding:0; color: var(--t-color); font-size:14px; line-height:100%; margin-right:10px; flex-shrink:0;][comment]
  60. ----* * * font awesome icon here----
  61. [/comment][fa]fas fa-heart[/fa][/border]
  62.  
  63. [border=transparent; height:18px; flex-grow:1; padding:0; 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; box-sizing:border-box; color: var(--t-color); font-size:13px; text-transform:uppercase; font-family: var(--body); line-height:130%; font-weight:bold; letter-spacing:0.5px;][comment]
  64. ----* * * mood here----
  65. [/comment]mood here here[/border]
  66. [/border][/border]
  67. [/border]
  68. [comment]----detail end----[/comment]
  69.  
  70. [comment]----detail 2----[/comment]
  71. [border=transparent; height:fit-content; width:50%; max-width:135px; padding:10px 5px 10px 8px; box-sizing:border-box; display:flex; flex-flow: row nowrap; align-items:center; flex-shrink:0;]
  72. [border=transparent; height:fit-content; width:fit-content; padding:0; color: var(--t-color); font-size:14px; line-height:100%; margin-right:10px; flex-shrink:0;][comment]
  73. ----* * * font awesome icon here----
  74. [/comment][fa]fas fa-map-marker-alt[/fa][/border]
  75.  
  76. [border=transparent; height:18px; flex-grow:1; padding:0; 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; box-sizing:border-box; color: var(--t-color); font-size:13px; text-transform:uppercase; font-family: var(--body); line-height:130%; font-weight:bold; letter-spacing:0.5px;][comment]
  77. ----* * * location here----
  78. [/comment]location here[/border]
  79. [/border][/border]
  80. [/border]
  81. [comment]----detail end----[/comment]
  82.  
  83. [comment]----detail 3----[/comment]
  84. [border=transparent; height:fit-content; width:50%; max-width:105px; padding:10px 5px 10px 8px; box-sizing:border-box; display:flex; flex-flow: row nowrap; align-items:center; flex-shrink:0;]
  85. [border=transparent; height:fit-content; width:fit-content; padding:0; color: var(--t-color); font-size:14px; line-height:100%; margin-right:10px; flex-shrink:0;][comment]
  86. ----* * * font awesome icon here----
  87. [/comment][fa]fas fa-tshirt[/fa][/border]
  88.  
  89. [border=transparent; height:18px; flex-grow:1; padding:0; color: var(--t-color); font-size:13px; text-transform:uppercase; font-family: var(--body); line-height:130%; font-weight:bold; letter-spacing:0.5px; overflow:hidden;][comment]
  90. ----* * * outfit link here (replace xx with link to outfit image)----
  91. [/comment][url='xx'][border=transparent; padding:0; color: var(--t-color);][comment]
  92. ----* * * outfit text----
  93. [/comment]outfit[/border][/url][/border]
  94. [/border]
  95. [comment]----detail end----[/comment]
  96.  
  97. [comment]----detail 4----[/comment]
  98. [border=transparent; height:fit-content; width:50%; max-width:135px; padding:10px 5px 10px 8px; box-sizing:border-box; display:flex; flex-flow: row nowrap; align-items:center; flex-shrink:0;]
  99. [border=transparent; height:fit-content; width:fit-content; padding:0; color: var(--t-color); font-size:14px; line-height:100%; margin-right:10px; flex-shrink:0;][comment]
  100. ----* * * font awesome icon here----
  101. [/comment][fa]fas fa-comments-alt[/fa][/border]
  102.  
  103. [border=transparent; height:18px; flex-grow:1; padding:0; 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; box-sizing:border-box; color: var(--t-color); font-size:13px; text-transform:uppercase; font-family: var(--body); line-height:130%; font-weight:bold; letter-spacing:0.5px;][comment]
  104. ----* * * tags here----
  105. [/comment]@/user tags here[/border]
  106. [/border][/border]
  107. [/border]
  108. [comment]----detail end----[/comment]
  109.  
  110. [/border]
  111.  
  112. [/border]
  113. [comment]----body end----[/comment]
  114. [/border]
  115.  
  116. [comment]----cool boxes----[/comment]
  117. [border=transparent; height:360px; width:77%; padding:0; border:4px solid var(--color-2); position:absolute; top:0; right:10%;][/border]
  118. [border=transparent; height:360px; width:calc(80% - 35px); padding:0; border:4px solid var(--color-3); position:absolute; bottom:0; right:0;][/border]
  119.  
  120. [comment]----made with love by uxie and triples ♡ do not remove!! !!----[/comment]
  121. [border=transparent; height:fit-content; width:fit-content; padding:0; color: var(--color-2); font-size:10px; position:absolute; z-index:7; top:8px; left:105px; display:flex; flex-flow: row nowrap; align-items:center; line-height:100%;][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]
  122. [/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!