API tools faq
paste
Possibbly

Chardonnay v2

Possibbly
Feb 17th, 2023 (edited)
727
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.63 KB | None | 0 0
raw download clone embed print report
  1. <!-----
  2. -- Background Color: #100F10
  3. -- "Faded" BG Color: #1A191B
  4. -- Border/Accent Color #1: #8D477F
  5. -- Accent Color #2: #AD7794
  6. -- Text Glow: #FFD42A
  7. -- Font-Awesome Colors & Name/Age/Pronouns: #FFF
  8. -- Text Color: #E2CFD6
  9. -- Search IMG_URL to quickly find all image locations
  10. ------>
  11. <div>
  12. <div class="container col-lg-10 col-sm-12">
  13. <div class="container py-2 px-2 col-lg-11 col-md-12 col-sm-12" style="
  14. background-image:url('IMG_URL');
  15. background-size:cover; background-position: top center; background-attachment:fixed; repeat:no-repeat ;border: 10px solid #8D477F;border-radius:12px; position: relative;">
  16.  
  17.  
  18. <!--------------------------- Floating Image --------------------------->
  19. <div class="hidden-md-down" style="position:absolute; top: 430px; right: -150px; z-index:2; ">
  20. <img src="IMG_URL" class="m-1" style="max-height:200px;">
  21. </div>
  22.  
  23.  
  24. <!--- TOP RIGHT CORNER FLOATING ICON --->
  25. <i class="fas fa-sparkles" style="z-index:2; font-size:52px; position:absolute; top: -15px;right: -15px;transform: rotate(25deg);text-shadow:#FFD42A 0 0 10px, #FFD42A 0 0 10px;color:#FFF"></i>
  26. <!-------------------------------------------------------------------- QUOTE / TITLE BLOCK -------------------------->
  27. <div class="card border-0 col-12 mx-auto py-2 my-2" style="background-color:#100F10;;">
  28. <div>
  29. <span class="text-uppercase" style="opacity: .9;font-size:24px;color:#E2CFD6">
  30. <i class="fas fa-stars mr-2" style="font-size:32px;color:#FFF"></i>
  31. "Put a short quote here or something.."</span>
  32. <span class="pull-right mr-3 mt-2" style="font-variant:small-caps;font-size:20px;font-weight:700;text-shadow:#FFD42A 0 0 10px, #FFD42A 0 0 10px;color:#FFF">
  33. name . age . prns</span>
  34. </div>
  35. </div>
  36.  
  37.  
  38. <!-------------------------------------------------------------------- END ----------------------------------->
  39. <div class="card border-0 col-12 mx-auto py-2 my-2 mt-3" style="background-color:#100F10; position: relative;">
  40. <!--- floating icon --->
  41. <i class="fas fa-thumbtack" style="z-index:2; font-size:48px; position:absolute; top: -10px;right: -10px; transform: rotate(45deg);text-shadow:#FFD42A 0 0 10px, #FFD42A 0 0 10px;color:#FFF"></i> <!-- Top Right Info -->
  42. <div class="row no-gutters mt-3">
  43. <div class="col-lg-7 order-lg-1 order-2 flex-column justify-content-center">
  44. <div class="row no-gutters m-n2">
  45. <!-------------------------------------------------------------------- MOODBOARD ROW 1 ----------------------------------->
  46. <div class="col-4 p-2">
  47. <div style="background-image: url('IMG_URL');
  48. background-size: cover; background-position:center;padding-top: 100%;"></div>
  49. </div>
  50. <div class="col-4 p-2">
  51. <div style="background-image: url('IMG_URL');
  52. background-size: cover; background-position:center;padding-top: 100%;"></div>
  53. </div>
  54. <div class="col-4 p-2">
  55. <div style="background-image: url('IMG_URL');
  56. background-size: cover; background-position:center;padding-top: 100%;"></div>
  57. </div>
  58. <!-------------------------------------------------------------------- MOODBOARD ROW 2 ----------------------------------->
  59. <div class="col-4 p-2">
  60. <div style="background-image: url('IMG_URL');
  61. background-size: cover; background-position:center;padding-top: 100%;"></div>
  62. </div>
  63. <div class="col-4 p-2" style="position: relative;">
  64. <!--- floating icons --->
  65. <i class="fas fa-star" style="z-index:2; font-size:32px; position:absolute; bottom: -5px;right: -5px; transform: rotate(25deg);color:#FFF"></i><!-- Bottom Mood -->
  66. <i class="fas fa-star" style="z-index:2; font-size:32px; position:absolute; top: -5px; left: -5px; transform: rotate(45deg);color:#FFF"></i><!-- Top Mood -->
  67. <!--- floating icons end --->
  68.  
  69. <div style="background-image: url('IMG_URL');
  70. background-size: cover; background-position:center;padding-top: 100%;"></div>
  71. </div>
  72. <div class="col-4 p-2">
  73. <div style="background-image: url('IMG_URL');
  74. background-size: cover; background-position:center;padding-top: 100%;"></div>
  75. </div>
  76. <!-------------------------------------------------------------------- MOODBOARD ROW 3 ----------------------------------->
  77. <div class="col-4 p-2">
  78. <div style="background-image: url('IMG_URL');
  79. background-size: cover; background-position:center;padding-top: 100%;"></div>
  80. </div>
  81. <div class="col-4 p-2">
  82. <div style="background-image: url('IMG_URL');
  83. background-size: cover; background-position:center;padding-top: 100%;"></div>
  84. </div>
  85. <div class="col-4 p-2">
  86. <div style="background-image: url('IMG_URL');
  87. background-size: cover; background-position:center;padding-top: 100%;"></div>
  88. </div>
  89. </div>
  90. <!-------------------------------------------------------------------- MOODBOARD END ----------------------------------->
  91. </div>
  92.  
  93.  
  94. <div class="col-lg-5 d-flex flex-column order-lg-2 order-1">
  95. <div class="container mb-3 pt-4 pb-2 ml-1 rounded" style="background-color:#1A191B;height:400px;font-size:18px;color:#E2CFD6;">
  96. <!-------------------------------------------------------------------- RIGHT INFO PANEL ----------------------------------->
  97. <div>
  98. <span class="text-uppercase">
  99. <i class="fas fa-eclipse mr-2 ml-1 my-2" style="color:#AD7794;"></i>
  100. DOB</span>
  101. <span class="pull-right mr-2 mt-1">Content</span>
  102. <hr class="my-2" style="border-color: #fffff;">
  103. </div>
  104. <div>
  105. <span class="text-uppercase">
  106. <i class="fas fa-moon-stars mr-2 ml-1 my-2" style="color:#AD7794;"></i>
  107. Orientation</span>
  108. <span class="pull-right mr-2 mt-1">Content</span>
  109. <hr class="my-2" style="border-color: #fffff;">
  110. </div>
  111. <div>
  112. <span class="text-uppercase">
  113. <i class="fas fa-stars mr-2 ml-1 my-2" style="color:#AD7794;"></i>
  114. Element</span>
  115. <span class="pull-right mr-2 mt-1">Content</span>
  116. <hr class="my-2" style="border-color: #fffff;">
  117. </div>
  118. <div>
  119. <span class="text-uppercase">
  120. <i class="fas fa-globe-americas mr-2 ml-1 my-2" style="color:#AD7794;"></i>
  121. Sign</span>
  122. <span class="pull-right mr-2 mt-1">Content</span>
  123. <hr class="my-2" style="border-color: #fffff;">
  124. </div>
  125. <div>
  126. <span class="text-uppercase">
  127. <i class="fas fa-meteor mr-2 ml-1 my-2" style="color:#AD7794;"></i>
  128. MBTI</span>
  129. <span class="pull-right mr-2 mt-1">Content</span>
  130. <hr class="my-2" style="border-color: #fffff;">
  131. </div>
  132. <div>
  133. <span class="text-uppercase">
  134. <i class="fas fa-music mr-2 ml-1 my-2" style="color:#AD7794;"></i>
  135. Song 1</span>
  136. <a href="https://www.youtube.com/watch?v=ID_HERE" target="_blank">
  137. <i style="font-size:18px;color:#8D477F" class="fas fa-play pull-right mr-2 mt-2"/></i>
  138. </a>
  139. </div>
  140. <div>
  141. <span class="text-uppercase">
  142. <i class="fas fa-music mr-2 ml-1 my-2" style="color:#AD7794;"></i>
  143. Song 2</span>
  144. <a href="https://www.youtube.com/watch?v=ID_HERE" target="_blank">
  145. <i style="font-size:18px;color:#8D477F" class="fas fa-play pull-right mr-2 mt-2"/></i>
  146. </a>
  147. </div>
  148. <div>
  149. <span class="text-uppercase">
  150. <i class="fas fa-music mr-2 ml-1 my-2" style="color:#AD7794;"></i>
  151. Song 3</span>
  152. <a href="https://www.youtube.com/watch?v=ID_HERE" target="_blank">
  153. <i style="font-size:18px;color:#8D477F" class="fas fa-play pull-right mr-2 mt-2"/></i>
  154. </a>
  155. </div>
  156. </div>
  157. <!-------------------------------------------------------------------- LIKES/DISLIKES ----------------------------------->
  158. <div class="row">
  159. <div class="container border-0 mb-3 pt-4 pb-2 col-5 rounded" style="background-color:#1A191B;">
  160. <p class="mb-1" style="letter-spacing:3px;font-weight:900;color:#8D477F"><i style="color:#AD7794;" class="fas fa-heart fa-fw" /> Likes</p>
  161. <ul class="mb-0 list-unstyled pl-2"style="font-size: .9em;color:#E2CFD6">
  162. <li class="mb-1"><i class="fal fa-minus fa-fw " /> Content</li>
  163. <li class="mb-1"><i class="fal fa-minus fa-fw " /> Content</li>
  164. <li class="mb-1"><i class="fal fa-minus fa-fw " /> Content</li>
  165. <li class="mb-1"><i class="fal fa-minus fa-fw " /> Content</li>
  166. <li class="mb-1"><i class="fal fa-minus fa-fw " /> Content</li>
  167. </ul>
  168. </div>
  169. <div class="container border-0 mb-3 pt-4 pb-2 col-5 rounded" style="background-color:#1A191B;">
  170. <p class="mb-1" style="letter-spacing:3px;font-weight:900;color:#AD7794"><i style="color:#8D477F;" class="fas fa-heart-broken fa-fw" /> Dislikes</p>
  171. <ul class="mb-0 list-unstyled pl-2"style="font-size: .9em;color:#E2CFD6">
  172. <li class="mb-1"><i class="fal fa-minus fa-fw " /> Content</li>
  173. <li class="mb-1"><i class="fal fa-minus fa-fw " /> Content</li>
  174. <li class="mb-1"><i class="fal fa-minus fa-fw " /> Content</li>
  175. <li class="mb-1"><i class="fal fa-minus fa-fw " /> Content</li>
  176. <li class="mb-1"><i class="fal fa-minus fa-fw " /> Content</li>
  177. </ul>
  178. </div>
  179. </div>
  180. <!-- Likes Row End -->
  181. </div>
  182. <!-- Flex End---->
  183. </div>
  184. <!----- Row End ------>
  185. </div>
  186. <!--- Top Card end -->
  187. <!-------------------------------------------------------------------- BOTTOM PARAGRAPH ----------------------------------->
  188. <div class="card border-0 col-12 mx-auto py-2 my-2 mt-4 pt-4" style="background-color:#100F10; position: relative;">
  189. <!--- floating icon --->
  190. <i class="fad fa-flower-tulip" style="z-index:2; font-size:52px; position:absolute; top: 5px;left: 5px;transform:rotate(-45deg);color:#FFF"></i>
  191. <i class="fal fa-flower" style="z-index:2; font-size:52px; position:absolute; bottom: 5px; left: 5px;
  192. transform: rotate(15deg); text-shadow:#FFD42A 0 0 10px, #FFD42A 0 0 10px;color:#FFF"></i> <!-- Bottom Left Corner -->
  193. <div class="row p-md-0 p-2">
  194. <div class="container rounded mb-3 py-3 col-md-7 order-md-1 order-2" style="background-color:#1A191B; border: 3px solid #8D477F;border-radius:4px;">
  195. <p style="color:#E2CFD6;">
  196. This box expands, and the image to the side expands along with it. Phasellus elementum mattis cursus. Donec sem libero, venenatis ac metus sit amet, malesuada blandit purus. Suspendisse purus quam, tempor sed rutrum sed, fringilla nec ante. Sed laoreet mollis tellus et pharetra. Quisque varius vitae lorem vel porta. Praesent lacus dui, pulvinar non risus sit amet, dapibus suscipit nisi. Duis metus ipsum, accumsan quis venenatis nec, cursus eget risus.
  197. </p>
  198. <p style="color:#E2CFD6">
  199. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus elementum mattis cursus. Donec sem libero, venenatis ac metus sit amet, malesuada blandit purus. Suspendisse purus quam, tempor sed rutrum sed, fringilla nec ante. Sed laoreet mollis tellus et pharetra. Quisque varius vitae lorem vel porta. Praesent lacus dui, pulvinar non risus sit amet, dapibus suscipit nisi. Duis metus ipsum, accumsan quis venenatis nec, cursus eget risus.
  200. </p>
  201. </div>
  202. <!-------------------------------------------------------------------- BOTTOM LEFT IMAGE ----------------------------------->
  203. <!-- This can be an aesthetic image or an image of your oc! -->
  204. <div class="container col-md-4 mb-3 order-md-2 order-1" style="min-height: 300px; max-height:350px;
  205. background-image:url('IMG_URL');
  206. background-size:cover; background-position: top center;repeat:no-repeat;">
  207. </div>
  208. </div>
  209. </div>
  210. <!-------------------------------------------------------------------- CREDIT ----------------------------------->
  211. <div class="mb-4 pb-1">
  212. <p class="pull-right" style="font-size:9.5px">
  213. <a href="https://toyhou.se/Strixxus" style="color:#FFF;text-shadow:#FFF 0 0 10px, #FFD42A 0 0 10px;font-weight:900;font-size:18px">
  214. <i class="fas fa-code"></i></a>
  215. </p>
  216. </div>
  217. </div>
  218. <!--- Bg Img </div> --->
  219. </div>
  220. </div>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!