API tools faq
paste
Advertisement
LeafJelly

Picnic Chara Code - Custom Colors

LeafJelly
Nov 11th, 2022 (edited)
1,314
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 19.70 KB | None | 0 0
raw download clone embed print report
  1. <!----------------
  2. Free to Use Small Character Code
  3. Picnic by LeafJelly
  4. Custom Color for Everything
  5.  
  6. Use Ctrl+F and replace all to change the color
  7. Card BG: #FFFCF3
  8. Content BG: #FFFFFF
  9. Accent & Borders: #FF8888
  10. Font: #C08383
  11. Font Accent 2: #FFEFEF
  12.  
  13. Rules
  14. 1. DO NOT REMOVE credits
  15. 2. DO NOT redistribute purchased codes
  16. 3. Turn off WYSIWYG before using my HTML codes and while editing, it'll break otherwise
  17. 4. You can modify and frankestein my codes with credit to all the source codes, and only if the other coders allow it.
  18. 5. You may NOT redistribute frankesteined codes under your own name, claiming it as your own work. Copy and pasting parts of my code without credit is theft, and takes advantage of my work that's provided for free.
  19. 6.You're allowed to heavily modify my codes, as long as credit to me stays on the page. If the credit breaks, feel free to write it in somewhere instead or at the bottom.
  20. ---------------->
  21. <div class="card col-12 p-3 mx-auto h-100" style="border-radius:2em; width:500px;font-weight:100; font-size:12px; font-family:helvetica; color:#C08383; background:#FFFCF3">
  22. <div class="row no-gutters">
  23.  
  24. <div class="col-12 col-md-11 row no-gutters">
  25. <div class="col-4 p-1 pr-2">
  26. <div id="carouselb" class="carousel slide" data-ride="carousel">
  27. <div class="carousel-inner">
  28. <!--------Character Image 1--------->
  29. <div class="carousel-item active">
  30. <div style="background-image:url(https://static.myfigurecollection.net/upload/pictures/2022/08/06/3210283.jpeg);
  31. background-position:center; background-size:cover; border-radius:1.5em; height:250px" class="mb-2 p-1"></div>
  32. </div>
  33.  
  34. <!--------Character Image 2--------->
  35. <div class="carousel-item">
  36. <div style="background-image:url(https://static.myfigurecollection.net/upload/pictures/2022/08/31/3236837.jpeg);
  37. background-position:center; background-size:cover; border-radius:1.5em; height:250px" class="mb-2 p-1"></div>
  38. </div>
  39.  
  40. <!--------Character Image 3--------->
  41. <div class="carousel-item">
  42. <div style="background-image:url(https://static.myfigurecollection.net/upload/pictures/2022/09/02/3239789.jpeg);
  43. background-position:center; background-size:cover; border-radius:1.5em; height:250px" class="mb-2 p-1"></div>
  44. </div>
  45.  
  46. <!--------Character Image 4--------->
  47. <div class="carousel-item">
  48. <div style="background-image:url(https://static.myfigurecollection.net/upload/pictures/2022/07/31/3201734.jpeg);
  49. background-position:center; background-size:cover; border-radius:1.5em; height:250px" class="mb-2 p-1"></div>
  50. </div>
  51.  
  52.  
  53. <!------------Copy and paste above here for more images ------------------>
  54. </div>
  55. </div>
  56.  
  57. <!-- Carousel CONTROLS -->
  58. <a class="carousel-control-prev" href="#carouselb" data-slide="prev">
  59. <span><i class="fas fa-chevron-left fa-lg" style="color:#FF8888;margin-left:-30px;"></i></span></a>
  60. <a class="carousel-control-next" href="#carouselb" data-slide="next">
  61. <span><i class="fas fa-chevron-right fa-lg" style="color:#FF8888;margin-left:20px;"></i></span></a>
  62. </div>
  63.  
  64. <div class="col-8 p-1 px-2 my-auto" style="height:250px; overflow:auto">
  65. <div class="tab-content">
  66. <!---============ Tab One =========================--->
  67. <div class="tab-pane fade active show" id="one">
  68. <div class="row no-gutters" style="color:#FFEFEF">
  69. <div class="card col-5 border-0 my-1 text-uppercase text-center" style="background:#FF8888; font-weight:normal; border-width:1px 0px 1px 1px; border-radius:1.5em 0em 0em 1.5em">
  70. Name
  71. </div>
  72. <div class="card col-7 pr-2 my-1 text-right" style="color:#C08383;background:#FFFFFF; border-width:1px 1px 1px 0px; border-radius:0em 1.5em 1.5em 0em">
  73. Content Content
  74. </div>
  75.  
  76. <div class="card col-5 border-0 my-1 text-uppercase text-center" style="background:#FF8888; font-weight:400; border-width:1px 0px 1px 1px; border-radius:1.5em 0em 0em 1.5em">
  77. Age
  78. </div>
  79. <div class="card col-7 pr-2 my-1 text-right" style="color:#C08383;background:#FFFFFF; border-width:1px 1px 1px 0px; border-radius:0em 1.5em 1.5em 0em">
  80. # years old
  81. </div>
  82.  
  83. <div class="card col-5 border-0 my-1 text-uppercase text-center" style="background:#FF8888; font-weight:400; border-width:1px 0px 1px 1px; border-radius:1.5em 0em 0em 1.5em">
  84. Pronouns
  85. </div>
  86. <div class="card col-7 pr-2 my-1 text-right" style="color:#C08383;background:#FFFFFF; border-width:1px 1px 1px 0px; border-radius:0em 1.5em 1.5em 0em">
  87. Content
  88. </div>
  89.  
  90. <div class="card col-5 border-0 my-1 text-uppercase text-center" style="background:#FF8888; font-weight:400; border-width:1px 0px 1px 1px; border-radius:1.5em 0em 0em 1.5em">
  91. Species
  92. </div>
  93. <div class="card col-7 pr-2 my-1 text-right" style="color:#C08383;background:#FFFFFF; border-width:1px 1px 1px 0px; border-radius:0em 1.5em 1.5em 0em">
  94. Content
  95. </div>
  96.  
  97. <div class="card col-5 border-0 my-1 text-uppercase text-center" style="background:#FF8888; font-weight:400; border-width:1px 0px 1px 1px; border-radius:1.5em 0em 0em 1.5em">
  98. Gender
  99. </div>
  100. <div class="card col-7 pr-2 my-1 text-right" style="color:#C08383;background:#FFFFFF; border-width:1px 1px 1px 0px; border-radius:0em 1.5em 1.5em 0em">
  101. Content
  102. </div>
  103.  
  104. <div class="card col-5 border-0 my-1 text-uppercase text-center" style="background:#FF8888; font-weight:400; border-width:1px 0px 1px 1px; border-radius:1.5em 0em 0em 1.5em">
  105. Sexuality
  106. </div>
  107. <div class="card col-7 pr-2 my-1 text-right" style="color:#C08383;background:#FFFFFF; border-width:1px 1px 1px 0px; border-radius:0em 1.5em 1.5em 0em">
  108. Content
  109. </div>
  110.  
  111. <div class="card col-5 border-0 my-1 text-uppercase text-center" style="background:#FF8888; font-weight:400; border-width:1px 0px 1px 1px; border-radius:1.5em 0em 0em 1.5em">
  112. Alignment
  113. </div>
  114. <div class="card col-7 pr-2 my-1 text-right" style="color:#C08383;background:#FFFFFF; border-width:1px 1px 1px 0px; border-radius:0em 1.5em 1.5em 0em">
  115. Content
  116. </div>
  117.  
  118. <div class="card col-5 border-0 my-1 text-uppercase text-center" style="background:#FF8888; font-weight:400; border-width:1px 0px 1px 1px; border-radius:1.5em 0em 0em 1.5em">
  119. Job
  120. </div>
  121. <div class="card col-7 pr-2 my-1 text-right" style="color:#C08383;background:#FFFFFF; border-width:1px 1px 1px 0px; border-radius:0em 1.5em 1.5em 0em">
  122. Content
  123. </div>
  124.  
  125. </div>
  126. </div>
  127.  
  128. <!---============ Tab two =========================--->
  129. <div class="tab-pane fade" id="two">
  130.  
  131. <p class="text-center text-uppercase" style="color:#FF8888">
  132. About
  133. </p>
  134. <hr class="my-1">
  135.  
  136. <div class="row no-gutters">
  137. <!----------Brief about---------------->
  138. <p class="text-center mb-2">
  139. 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.
  140. </p>
  141. <!------Likes------>
  142. <ul class="col-6 px-1" style="list-style-type:none;">
  143. <li><i class="far fa-heart fa-lg" style="color:#FF8888"></i>
  144. one
  145. </li>
  146.  
  147. <li><i class="far fa-heart fa-lg" style="color:#FF8888"></i>
  148. two
  149. </li>
  150.  
  151. <li><i class="far fa-heart fa-lg" style="color:#FF8888"></i>
  152. three
  153. </li>
  154.  
  155. <li><i class="far fa-heart fa-lg" style="color:#FF8888"></i>
  156. four
  157. </li>
  158.  
  159. <li><i class="far fa-heart fa-lg" style="color:#FF8888"></i>
  160. five
  161. </li>
  162. </ul>
  163.  
  164. <!------Disikes------>
  165. <ul class="col-6" style="list-style-type:none;">
  166. <li><i class="far fa-xmark fa-lg" style="color:#FF8888"></i>
  167. one
  168. </li>
  169.  
  170. <li><i class="far fa-xmark fa-lg" style="color:#FF8888"></i>
  171. two
  172. </li>
  173.  
  174. <li><i class="far fa-xmark fa-lg" style="color:#FF8888"></i>
  175. three
  176. </li>
  177.  
  178. <li><i class="far fa-xmark fa-lg" style="color:#FF8888"></i>
  179. four
  180. </li>
  181.  
  182. <li><i class="far fa-xmark fa-lg" style="color:#FF8888"></i>
  183. five
  184. </li>
  185. </ul>
  186.  
  187. </div>
  188. </div>
  189.  
  190. <!---============ Tab three =========================--->
  191. <div class="tab-pane fade" id="three">
  192.  
  193. <p class="text-center text-uppercase" style="color:#FF8888">
  194. Trivia
  195. </p>
  196. <hr class="my-1">
  197. <!------Trivia------>
  198. <ul class="col-12" style="list-style-type:none;">
  199. <li><i class="far fa-flower fa-lg" style="color:#FF8888"></i>
  200. Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra.
  201. </li>
  202.  
  203. <li><i class="far fa-flower fa-lg" style="color:#FF8888"></i>
  204. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat.
  205. </li>
  206.  
  207. <li><i class="far fa-flower fa-lg" style="color:#FF8888"></i>
  208. Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus.
  209. </li>
  210.  
  211. <li><i class="far fa-flower fa-lg" style="color:#FF8888"></i>
  212. Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor.
  213. </li>
  214. </ul>
  215.  
  216. </div>
  217.  
  218.  
  219. <!---============ Tab four =========================--->
  220. <div class="tab-pane fade" id="four">
  221. <!--------Relationship 1 start----------->
  222. <div class="row no-gutters">
  223. <div class="col-10 row no-gutters align-items-center mx-auto">
  224. <!-----Chara Icon Replace the URL------>
  225. <div class="rounded-circle" style="height:60px;width:60px; border:1px solid #FF8888;
  226.  
  227. background: url(https://www.foodfaithfitness.com/wp-content/uploads/2021/04/Roasted-Strawberries-photo-683x1024.jpg) center;
  228.  
  229. background-repeat:no-repeat; background-size:cover;"></div>
  230.  
  231. <div class="col ml-3">
  232. <a class="text-uppercase" style="color:#FF8888"
  233. href="URL_HERE">
  234. Character Name
  235. </a>
  236. <p>
  237. <i class="fa-regular fa-heart"></i>
  238. Relationship Type
  239. </p>
  240. </div>
  241.  
  242. </div>
  243. <!-------Text ------>
  244. <p class="text-center">
  245. 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.
  246. </p>
  247. <hr class="col my-1">
  248. </div>
  249. <!--------Relationship 1 end----------->
  250.  
  251. <!--------Relationship 2 start----------->
  252. <div class="row no-gutters">
  253. <div class="col-10 row no-gutters align-items-center mx-auto">
  254. <!-----Chara Icon Replace the URL------>
  255. <div class="rounded-circle" style="height:60px;width:60px; border:1px solid #FF8888;
  256.  
  257. background: url(https://www.foodfaithfitness.com/wp-content/uploads/2021/04/Roasted-Strawberries-photo-683x1024.jpg) center;
  258.  
  259. background-repeat:no-repeat; background-size:cover;"></div>
  260.  
  261. <div class="col ml-3">
  262. <a class="text-uppercase" style="color:#FF8888"
  263. href="URL_HERE">
  264. Character Name
  265. </a>
  266. <p>
  267. <i class="fa-regular fa-gun"></i>
  268. Relationship Type
  269. </p>
  270. </div>
  271.  
  272. </div>
  273. <!-------Text ------>
  274. <p class="text-center">
  275. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
  276. </p>
  277. <hr class="col my-1">
  278. </div>
  279. <!--------Relationship 2 end----------->
  280.  
  281. <!--------Relationship 3 start----------->
  282. <div class="row no-gutters">
  283. <div class="col-10 row no-gutters align-items-center mx-auto">
  284. <!-----Chara Icon Replace the URL------>
  285. <div class="rounded-circle" style="height:60px;width:60px; border:1px solid #FF8888;
  286.  
  287. background: url(https://www.foodfaithfitness.com/wp-content/uploads/2021/04/Roasted-Strawberries-photo-683x1024.jpg) center;
  288.  
  289. background-repeat:no-repeat; background-size:cover;"></div>
  290.  
  291. <div class="col ml-3">
  292. <a class="text-uppercase" style="color:#FF8888"
  293. href="URL_HERE">
  294. Character Name
  295. </a>
  296. <p>
  297. <i class="fa-regular fa-handshake"></i>
  298. Relationship Type
  299. </p>
  300. </div>
  301.  
  302. </div>
  303. <!-------Text ------>
  304. <p class="text-center">
  305. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
  306. </p>
  307. <hr class="col my-1">
  308. </div>
  309. <!--------Relationship 3 end----------->
  310.  
  311. <!----------Copy and paste above here for more relationships sections----------->
  312.  
  313. </div>
  314.  
  315.  
  316. <!---============ Tab five =========================--->
  317. <div class="tab-pane fade text-right" id="five">
  318.  
  319. <p class="text-center text-uppercase" style="color:#FF8888">
  320. Playlist
  321. </p>
  322. <hr class="my-1">
  323.  
  324.  
  325. <!--------How To Use the Music Code------
  326. These are individual song players using youtube links.
  327. The songs can NOT be copy and pasted for more songs
  328. , but they can be DELETED for less songs.
  329.  
  330. Changed the youtube ID, replacing ONLY the words ID_HERE
  331. KEEP the /embed/ amd ?controls=0 after the ID_HERE
  332.  
  333. You can find the youtube ID by clicking the share button on the video
  334. and copying the string of letters and numbers at the end
  335. of the https://youtu.be/ URL.
  336. ---------------------------------------->
  337.  
  338. <!---------------Song 1------------------>
  339. <div class="row no-gutters my-2" style="background:#FFFFFF; background:#FFFFFF; border-radius:1.5em; border:1px solid #FF8888; color:#C08383;">
  340. <a class="btn btn-sm melody-embed border-0 m-0" style="color:#FF8888">
  341. <iframe style="opacity:.01;position:absolute;left:-260px;top:30px;height:80px;width:300px;transform:rotate(180deg)"
  342.  
  343. src="https://www.youtube-nocookie.com/embed/ID_HERE?controls=0" frameborder="0"></iframe>
  344.  
  345. <i class="fas fa-play-pause fa-fw"></i></a>
  346.  
  347. <hr class="col my-auto h-100" style="background:#C08383">
  348. <span class="text-truncate my-auto mx-1">
  349. Song Name 1 - Artist Name
  350. </span>
  351. </div>
  352. <!--------Song 1 End------------>
  353.  
  354. <!---------------Song 2------------------>
  355. <div class="row no-gutters my-2" style="background:#FFFFFF; border-radius:1.5em; border:1px solid #FF8888; color:#C08383;">
  356. <a class="btn btn-sm melody-embed border-0 m-0" style="color:#FF8888">
  357. <iframe style="opacity:.01;position:absolute;left:-260px;top:70px;height:80px;width:300px;transform:rotate(180deg)"
  358.  
  359. src="https://www.youtube-nocookie.com/embed/ID_HERE?controls=0" frameborder="0"></iframe>
  360.  
  361. <i class="fas fa-play-pause fa-fw"></i></a>
  362.  
  363. <hr class="col my-auto h-100" style="background:#C08383">
  364. <span class="text-truncate my-auto mx-1">
  365. Song Name 2 - Artist Name
  366. </span>
  367. </div>
  368. <!--------Song 2 End------------>
  369.  
  370. <!---------------Song 3------------------>
  371. <div class="row no-gutters my-2" style="background:#FFFFFF; border-radius:1.5em; border:1px solid #FF8888; color:#C08383;">
  372. <a class="btn btn-sm melody-embed border-0 m-0" style="color:#FF8888">
  373. <iframe style="opacity:.01;position:absolute;left:-260px;top:107px;height:80px;width:300px;transform:rotate(180deg)"
  374.  
  375. src="https://www.youtube-nocookie.com/embed/ID_HERE?controls=0" frameborder="0"></iframe>
  376.  
  377. <i class="fas fa-play-pause fa-fw"></i></a>
  378.  
  379. <hr class="col my-auto h-100" style="background:#C08383">
  380. <span class="text-truncate my-auto mx-1">
  381. Song Name 3 - Artist Name
  382. </span>
  383. </div>
  384. <!--------Song 3 End------------>
  385.  
  386. <!---------------Song 4------------------>
  387. <div class="row no-gutters my-2" style="background:#FFFFFF; border-radius:1.5em; border:1px solid #FF8888; color:#C08383;">
  388. <a class="btn btn-sm melody-embed border-0 m-0" style="color:#FF8888">
  389. <iframe style="opacity:.01;position:absolute;left:-260px;top:140px;height:80px;width:300px;transform:rotate(180deg)"
  390.  
  391. src="https://www.youtube-nocookie.com/embed/ID_HERE?controls=0" frameborder="0"></iframe>
  392.  
  393. <i class="fas fa-play-pause fa-fw"></i></a>
  394.  
  395. <hr class="col my-auto h-100"style="background:#C08383">
  396. <span class="text-truncate my-auto mx-1">
  397. Song Name 4 - Artist Name
  398. </span>
  399. </div>
  400. <!--------Song 4 End------------>
  401.  
  402. <!---------------Song 5------------------>
  403. <div class="row no-gutters my-2" style="background:#FFFFFF; border-radius:1.5em; border:1px solid #FF8888; color:#C08383;">
  404. <a class="btn btn-sm melody-embed border-0 m-0" style="color:#FF8888">
  405. <iframe style="opacity:.01;position:absolute;left:-260px;top:180px;height:65px;width:300px;transform:rotate(180deg)"
  406.  
  407. src="https://www.youtube-nocookie.com/embed/ID_HERE?controls=0" frameborder="0"></iframe>
  408.  
  409. <i class="fas fa-play-pause fa-fw"></i></a>
  410.  
  411. <hr class="col my-auto h-100"style="background:#C08383">
  412. <span class="text-truncate my-auto mx-1">
  413. Song Name 5 - Artist Name
  414. </span>
  415. </div>
  416. <!--------Song 5 End------------>
  417.  
  418. </div>
  419. <!---------->
  420.  
  421. </div>
  422. </div>
  423.  
  424. </div>
  425.  
  426. <!---============ Buttons
  427. Change the symbols by changing fa-word using font-awesome symbols
  428. =========================--->
  429. <div class="col-auto col-md-1 nav flex-lg-column m-auto">
  430. <a class="nav-item active btn py-2 p-0 m-1" style="background:#FF8888;width:2.5em; border-radius:2em; border:1px solid #FFFFFF; color:#FFFFFF" data-toggle="tab" href="#one">
  431. <i class="fas fa-strawberry"></i></a>
  432.  
  433. <a class="nav-item btn btn-secondary py-2 p-0 mx-0 m-1" style="background:#FF8888;width:2.5em; border-radius:2em; border:1px solid #FFFFFF; color:#FFFFFF" data-toggle="tab" href="#two">
  434. <i class="fas fa-heart"></i></a>
  435.  
  436. <a class="nav-item btn btn-secondary py-2 p-0 mx-0 m-1" style="background:#FF8888;width:2.5em; border-radius:2em; border:1px solid #FFFFFF; color:#FFFFFF" data-toggle="tab" href="#three">
  437. <i class="fas fa-flower"></i></a>
  438.  
  439. <a class="nav-item btn btn-secondary py-2 p-0 mx-0 m-1" style="background:#FF8888;width:2.5em; border-radius:2em; border:1px solid #FFFFFF; color:#FFFFFF" data-toggle="tab" href="#four">
  440. <i class="fas fa-user"></i></a>
  441.  
  442. <a class="nav-item btn btn-secondary py-2 p-0 mx-0 m-1" style="background:#FF8888;width:2.5em; border-radius:2em; border:1px solid #FFFFFF; color:#FFFFFF" data-toggle="tab" href="#five">
  443. <i class="fas fa-music"></i></a>
  444.  
  445. </div>
  446.  
  447. <!---============ Mood Board =========================--->
  448. <div class="col-12 p-1 pt-2">
  449. <div class="row no-gutters" style="height:70px;">
  450. <!---- Image 1 ----->
  451. <div class="col-4 h-100" style="border-radius:1.5em 0em 0em 1.5em; background-position:center; background-size:cover;
  452. background-image: url(https://www.foodfaithfitness.com/wp-content/uploads/2021/04/Roasted-Strawberries-photo-683x1024.jpg)
  453. "></div>
  454.  
  455. <!---- Image 2 ----->
  456. <div class="col-4 h-100" style="background-size:cover; background-position:center;
  457. background-image: url(https://secure.img1-fg.wfcdn.com/im/48922616/compr-r85/1080/108096150/royal-albert-old-country-roses-75-oz-creamer.jpg )
  458. "></div>
  459.  
  460. <!---- Image 3 ----->
  461. <div class="col-4 h-100" style="border-radius:0em 1.5em 1.5em 0em; background-position:center; background-size:cover;
  462. background-image: url(https://www.barleyandsage.com/wp-content/uploads/2022/03/cherry-cheesecake-macarons-0985.jpg)
  463. "></div>
  464.  
  465. </div>
  466. </div>
  467.  
  468. </div>
  469. </div>
  470. <!----------Credit do not remove---------->
  471. <div class="col-12 p-1 text-center mx-auto" style="width:500px;">
  472. <a href="/LeafJelly" class="tooltipster" title="HTML by LeafJelly"><i class="far fa-code text-muted fa-xs"></i></a>
  473. </div>
  474.  
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!