API tools faq
paste
Advertisement
ChainOfRain

[F2U] Dandelion Knight

ChainOfRain
Feb 28th, 2023 (edited)
1,634
2
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.93 KB | None | 2 0
raw download clone embed print report
  1. <!--------------------------
  2.  
  3. ✦ The main color of this code is
  4.  
  5. #DEB76C
  6.  
  7. The various boxes' background color is
  8.  
  9. #F6F2EB
  10.  
  11. General text color is
  12.  
  13. #343434
  14.  
  15. substitute them to change the color theme of the whole code :)
  16.  
  17. ✦ Replace all the IMG LINK with the actual image link you want
  18.  
  19. ✦ For the MUSIC PLAYER you have to get the embed code, all you need to do is paste the code part after the '=' of the youtube link you need
  20.  
  21. for example
  22.  
  23. https://www.youtube.com/embed/SjLiiEC7ozg
  24.  
  25. the part you need to copy is
  26.  
  27. SjLiiEC7ozg
  28.  
  29. and put it in YOUTUBECODE place
  30.  
  31. ✦ Don't remove the credits, please!
  32.  
  33. ✦ If you have problems feel free to DM me ovo)b
  34.  
  35.  
  36. ✦ And please consider support me on my Ko-Fi → https://ko-fi.com/chainofrain
  37.  
  38. ---------------------------->
  39.  
  40.  
  41.  
  42. <div class="container p-4" style="color: #343434">
  43.  
  44. <div class="card rounded-0 p-2 text-center mb-3" style="background-color: #F6F2EB; border: 2px solid #DEB76C;">
  45. <i class="fas fa-caret-up" style="color: #DEB76C; font-size: 25px; position: absolute; top: -8px; left: -4px; transform: rotate(-45deg)"></i>
  46. <i class="fas fa-caret-up" style="color: #DEB76C; font-size: 25px; position: absolute; bottom: -8px; right: -3px; transform: rotate(135deg)"></i>
  47.  
  48. <!--------------------------- CHARACTER NAME -------------------------->
  49. <p class="text-uppercase mb-2" style="font-family:times, georgia;font-weight:600;font-size:35px;letter-spacing:1px; z-index: 2">
  50.  
  51. Name Surname
  52.  
  53. </p>
  54. <p class="text-lowercase" style="font-family:'Segoe Script', cursive;font-weight:600;font-size:25px;letter-spacing:1px; z-index: 1; margin-top: -40px; opacity: 0.5; color: #DEB76C">
  55.  
  56. Name Surname
  57.  
  58. </p>
  59. </div>
  60.  
  61. <div class="row no-gutters">
  62. <div class="col-md-4 order-lg-3">
  63. <!--------------------------- AVATAR IMAGE -------------------------->
  64. <div class="card rounded-0" style="height: 316px; background-image: url(
  65.  
  66. 'IMG LINK'
  67.  
  68. ); background-size: cover; background-position: center;border: 2px solid #DEB76C">
  69.  
  70.  
  71. <!--------------------------- MUSIC BOX -------------------------->
  72. <div class="card rounded-0 border-0 p-2 w-100" style="background-color: rgba(246, 242, 235, 0.8); position: absolute; bottom: 0">
  73. <div class="d-flex justify-content-between">
  74. <span style="letter-spacing: 2px; font-size: 20px;">
  75. <i class="fas fa-compact-disc fa-spin"></i>
  76.  
  77. Song Name
  78.  
  79. </span>
  80. <span>
  81. <iframe class="flex-fill" style="width:100%;height:25px;width:25px;clip-path: polygon(25% 20%, 25% 100%, 80% 60%);opacity: 0.01;" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen src="
  82.  
  83. https://www.youtube.com/embed/YOUTUBECODE
  84.  
  85. "></iframe>
  86. <i class="fas fa-play" style="margin-left:-20px; font-size: 20px;"></i></span>
  87. </div></div>
  88. </div>
  89.  
  90.  
  91. <!--------------------------- INFO BOX -------------------------->
  92. <div class="card rounded-0 mt-3 p-2" style="height: 316px; background-color: #F6F2EB; border: 2px solid #DEB76C">
  93.  
  94. <p class="my-1 justify-content-between">
  95. <span class="text-uppercase" style="font-family:times, georgia;font-weight:600; font-size: 18px"><i class="fal fa-pen-nib mt-n2 fa-flip-horizontal"></i> Gender. </span>
  96. content
  97. </p>
  98. <hr class="my-1 w-100" style="border:none; border-top: 1px solid #DEB76C;">
  99. <p class="my-1 justify-content-between">
  100. <span class="text-uppercase" style="font-family:times, georgia;font-weight:600; font-size: 18px"><i class="fal fa-pen-nib mt-n2 fa-flip-horizontal"></i> Age. </span>
  101. content
  102. </p>
  103. <hr class="my-1 w-100" style="border:none; border-top: 1px solid #DEB76C;">
  104. <p class="my-1 justify-content-between">
  105. <span class="text-uppercase" style="font-family:times, georgia;font-weight:600; font-size: 18px"><i class="fal fa-pen-nib mt-n2 fa-flip-horizontal"></i> Birthday. </span>
  106. content
  107. </p>
  108. <hr class="my-1 w-100" style="border:none; border-top: 1px solid #DEB76C;">
  109. <p class="my-1 justify-content-between">
  110. <span class="text-uppercase" style="font-family:times, georgia;font-weight:600; font-size: 18px"><i class="fal fa-pen-nib mt-n2 fa-flip-horizontal"></i> Species. </span>
  111. content
  112. </p>
  113. <hr class="my-1 w-100" style="border:none; border-top: 1px solid #DEB76C;">
  114. <p class="my-1 justify-content-between">
  115. <span class="text-uppercase" style="font-family:times, georgia;font-weight:600; font-size: 18px"><i class="fal fa-pen-nib mt-n2 fa-flip-horizontal"></i> Occupation. </span>
  116. content
  117. </p>
  118. <hr class="my-1 w-100" style="border:none; border-top: 1px solid #DEB76C;">
  119. <p class="my-1 justify-content-between">
  120. <span class="text-uppercase" style="font-family:times, georgia;font-weight:600; font-size: 18px"><i class="fal fa-pen-nib mt-n2 fa-flip-horizontal"></i> Orientation. </span>
  121. content
  122. </p>
  123. <hr class="my-1 w-100" style="border:none; border-top: 1px solid #DEB76C;">
  124. <p class="my-1 justify-content-between">
  125. <span class="text-uppercase" style="font-family:times, georgia;font-weight:600; font-size: 18px"><i class="fal fa-pen-nib mt-n2 fa-flip-horizontal"></i> MBTI. </span>
  126. content
  127. </p>
  128. </div>
  129. </div>
  130.  
  131. <!--------------------------- PROFILE BOX -------------------------->
  132. <div class="col order-lg-2 mx-lg-3">
  133. <div class="card rounded-0 p-2" style="height: 316px; background-color: #F6F2EB; border: 2px solid #DEB76C">
  134. <div class="row no-gutters">
  135. <div class="col-auto">
  136. <p class="text-uppercase text-center mb-2" style="font-family:times, georgia;font-weight:600;font-size:35px;letter-spacing:1px;">Profile</p>
  137. </div>
  138. <div class="col align-items-center mx-2"><hr class="w-100 mt-2" style="border:none; border-top: 1px solid #DEB76C;"></div>
  139. <div class="col-auto align-items-center"><i class="fal fa-pen-nib mt-n2" style="font-size:30px"></i></div>
  140. </div>
  141.  
  142. <!--------------------------- QUOTE -------------------------->
  143. <p class="mt-1 mb-3 text-center" style="font-family: monotype corsiva; letter-spacing:1px; font-size: 18px">
  144. <i class="fad fa-quote-left mr-2" style="color: #DEB76C"></i>
  145.  
  146. short quote here
  147.  
  148. <i class="fad fa-quote-right ml-2" style="color: #DEB76C"></i>
  149. </p>
  150.  
  151. <!--------------------------- DESCRIPTION - scrollbox -------------------------->
  152. <div class="pr-2" style="overflow: auto">
  153. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
  154.  
  155. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
  156. </div>
  157. </div>
  158.  
  159. <!--------------------------- STORY BOX -------------------------->
  160. <div class="card rounded-0 mt-3 p-2" style="height: 316px; background-color: #F6F2EB; border: 2px solid #DEB76C">
  161. <div class="row no-gutters">
  162. <div class="col-auto">
  163. <p class="text-uppercase text-center mb-2" style="font-family:times, georgia;font-weight:600;font-size:35px;letter-spacing:1px;">Story</p>
  164. </div>
  165. <div class="col align-items-center mx-2"><hr class="w-100 mt-2" style="border:none; border-top: 1px solid #DEB76C;"></div>
  166. <div class="col-auto align-items-center"><i class="fal fa-scroll-old mt-n2 fa-flip-horizontal" style="font-size:30px"></i></div>
  167. </div>
  168.  
  169. <div class="pr-2" style="overflow: auto">
  170. <!--------------------------- BOOKMARK 1 -------------------------->
  171. <p class="my-0" style="font-family:'Segoe Script', cursive;;font-weight:600;font-size:20px;letter-spacing:1px;"><i class="fad fa-bookmark" style="font-size: 18px; color: #DEB76C"></i>
  172. I bookmark</p>
  173. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
  174. </p>
  175.  
  176. <!--------------------------- BOOKMARK 2 -------------------------->
  177. <p class="my-0" style="font-family:'Segoe Script', cursive;;font-weight:600;font-size:20px;letter-spacing:1px;"><i class="fad fa-bookmark" style="font-size: 18px; color: #DEB76C"></i>
  178. II bookmark</p>
  179. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
  180. </p>
  181.  
  182. <!--------------------------- BOOKMARK 3 -------------------------->
  183. <p class="my-0" style="font-family:'Segoe Script', cursive;;font-weight:600;font-size:20px;letter-spacing:1px;"><i class="fad fa-bookmark" style="font-size: 18px; color: #DEB76C"></i>
  184. III bookmark</p>
  185. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
  186. </p>
  187. </div>
  188. </div>
  189. </div>
  190.  
  191. <!--------------------------- MOODBOARD IMAGES TOP -------------------------->
  192. <div class="col-md-1 order-lg-1">
  193.  
  194. <div class="card rounded-0 border-0 " style="height: 150px; background-image: url(
  195.  
  196. 'IMG LINK'
  197.  
  198. ); background-size: cover; background-position: center">
  199. </div>
  200.  
  201. <div class="card rounded-0 border-0 mt-3" style="height: 150px; background-image: url(
  202.  
  203. 'IMG LINK'
  204.  
  205. ); background-size: cover; background-position: center">
  206. </div>
  207.  
  208. <div class="card rounded-0 border-0 mt-3" style="height: 150px; background-image: url(
  209.  
  210. 'IMG LINK'
  211.  
  212. ); background-size: cover; background-position: center">
  213. </div>
  214.  
  215. <div class="card rounded-0 border-0 mt-3" style="height: 150px; background-image: url(
  216.  
  217. 'IMG LINK'
  218.  
  219. ); background-size: cover; background-position: center">
  220. </div>
  221.  
  222. </div>
  223. </div>
  224.  
  225. <!--------------------------- LIKES/DISLIKES -------------------------->
  226. <div class="row no-gutters mt-3" >
  227. <div class="col-md-4">
  228.  
  229. <!--------------------------- LIKES BOX -------------------------->
  230. <div class="card rounded-0 p-2" style="height:194px; background-color: #F6F2EB; border: 2px solid #DEB76C">
  231. <div class="row no-gutters">
  232. <div class="col-auto">
  233. <p class="text-uppercase text-center mb-2" style="font-family:times, georgia;font-weight:600;font-size:30px;letter-spacing:1px;">Likes</p>
  234. </div>
  235. <div class="col align-items-center mx-2"><hr class="w-100 mt-2" style="border:none; border-top: 1px solid #DEB76C;"></div>
  236. <div class="col-auto align-items-center"><i class="fal fa-heart mt-n2 fa-flip-horizontal" style="font-size:25px"></i></div>
  237. </div>
  238. <p style="overflow: auto">
  239. <i class="far fa-chevron-right" style="font-size: 12px; color: #DEB76C"></i> content
  240. <br>
  241. <i class="far fa-chevron-right" style="font-size: 12px; color: #DEB76C"></i> content
  242. <br>
  243. <i class="far fa-chevron-right" style="font-size: 12px; color: #DEB76C"></i> content
  244. <br>
  245. <i class="far fa-chevron-right" style="font-size: 12px; color: #DEB76C"></i> content
  246. <br>
  247. <i class="far fa-chevron-right" style="font-size: 12px; color: #DEB76C"></i> content
  248. <br>
  249.  
  250. <!--------------------------- you can add more above this! -------------------------->
  251. </p>
  252. </div>
  253.  
  254. <!--------------------------- DISLIKES BOX -------------------------->
  255. <div class="card rounded-0 p-2 mt-3" style="height:194px; background-color: #F6F2EB; border: 2px solid #DEB76C">
  256. <div class="row no-gutters">
  257. <div class="col-auto">
  258. <p class="text-uppercase text-center mb-2" style="font-family:times, georgia;font-weight:600;font-size:30px;letter-spacing:1px;">Dislikes</p>
  259. </div>
  260. <div class="col align-items-center mx-2"><hr class="w-100 mt-2" style="border:none; border-top: 1px solid #DEB76C;"></div>
  261. <div class="col-auto align-items-center"><i class="fal fa-heart-crack mt-n2 fa-flip-horizontal" style="font-size:25px"></i></div>
  262. </div>
  263. <p style="overflow: auto">
  264. <i class="far fa-chevron-right" style="font-size: 12px; color: #DEB76C"></i> content
  265. <br>
  266. <i class="far fa-chevron-right" style="font-size: 12px; color: #DEB76C"></i> content
  267. <br>
  268. <i class="far fa-chevron-right" style="font-size: 12px; color: #DEB76C"></i> content
  269. <br>
  270. <i class="far fa-chevron-right" style="font-size: 12px; color: #DEB76C"></i> content
  271. <br>
  272. <i class="far fa-chevron-right" style="font-size: 12px; color: #DEB76C"></i> content
  273. <br>
  274.  
  275. <!--------------------------- you can add more above this! -------------------------->
  276. </p>
  277. </div>
  278. </div>
  279.  
  280.  
  281. <!--------------------------- RELATIONSHIPS BOX -------------------------->
  282. <div class="col mx-lg-3">
  283. <div class="card rounded-0 p-2" style="height: 404px; background-color: #F6F2EB; border: 2px solid #DEB76C">
  284. <div class="row no-gutters">
  285. <div class="col-auto">
  286. <p class="text-uppercase text-center mb-2" style="font-family:times, georgia;font-weight:600;font-size:35px;letter-spacing:1px;">Relationships</p>
  287. </div>
  288. <div class="col align-items-center mx-2"><hr class="w-100 mt-2" style="border:none; border-top: 1px solid #DEB76C;"></div>
  289. <div class="col-auto align-items-center"><i class="fal fa-user-group mt-n2 fa-flip-horizontal" style="font-size: 30px"></i></div>
  290. </div>
  291.  
  292. <div style="overflow: auto">
  293. <!--------------------------- PERSON #1 -------------------------->
  294. <p>
  295. <div class="card rounded-0 border-0 mr-3" style="height: 180px; width: 180px; background-image: url(
  296.  
  297. 'IMG LINK'
  298.  
  299. ); background-size: cover; background-position: center; float: left"></div>
  300. <p class="">
  301. <span style="font-family:'Segoe Script', cursive;;font-weight:600;font-size:20px;letter-spacing:1px;">Name Surname</span>
  302. <span class="pull-right mr-2">[ relationship ]</span></p>
  303. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
  304. </p>
  305.  
  306. <hr class="w-75 my-4" style="border:none; border-top: 1px solid #DEB76C;">
  307.  
  308. <!--------------------------- PERSON #2 -------------------------->
  309. <p>
  310. <div class="card rounded-0 border-0 mr-3" style="height: 180px; width: 180px; background-image: url(
  311.  
  312. 'IMG LINK'
  313.  
  314. ); background-size: cover; background-position: center; float: right"></div>
  315. <p class="">
  316. <span style="font-family:'Segoe Script', cursive;;font-weight:600;font-size:20px;letter-spacing:1px;">Name Surname</span>
  317. <span class="pull-right mr-2">[ relationship ]</span></p>
  318. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
  319. </p>
  320.  
  321. <hr class="w-75 my-4" style="border:none; border-top: 1px solid #DEB76C;">
  322.  
  323. <!--------------------------- PERSON #3 -------------------------->
  324. <p>
  325. <div class="card rounded-0 border-0 mr-3" style="height: 180px; width: 180px; background-image: url(
  326.  
  327. 'IMG LINK'
  328.  
  329. ); background-size: cover; background-position: center; float: left"></div>
  330. <p class="">
  331. <span style="font-family:'Segoe Script', cursive;;font-weight:600;font-size:20px;letter-spacing:1px;">Name Surname</span>
  332. <span class="pull-right mr-2">[ relationship ]</span></p>
  333. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
  334. </p>
  335. <hr class="w-75 my-4" style="border:none; border-top: 1px solid #DEB76C;">
  336.  
  337.  
  338. <!--------------------------- you can add more above this! -------------------------->
  339. </div>
  340.  
  341. </div>
  342. </div>
  343. <!--------------------------- MOODBOARD IMAGES BOTTOM -------------------------->
  344. <div class="col-md-1 order-lg-3">
  345.  
  346. <div class="card rounded-0 border-0 " style="height: 194px; background-image: url(
  347.  
  348. 'IMG LINK'
  349.  
  350. ); background-size: cover; background-position: center">
  351. </div>
  352.  
  353. <div class="card rounded-0 border-0 mt-3" style="height: 194px; background-image: url(
  354.  
  355. 'IMG LINK'
  356.  
  357. ); background-size: cover; background-position: center">
  358. </div>
  359.  
  360. </div>
  361. </div>
  362.  
  363. <!--------------------- CREDITS - Please DON'T remove ---------------------------->
  364. <div class="card rounded-0 border-0 text-center ml-2" style="background-color: #DEB76C; height: 50px; width: 50px; margin-top: -1px; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 75%, 0 100%)">
  365. <a href="https://toyhou.se/ChainOfRain" data-toggle="tooltip" data-placement="top" title="code by chainofrain" style="color: #fff; opacity: 0.5; margin-top: 10px"><i class="fal fa-code"></i></a>
  366. </div>
  367.  
  368. </div>
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!