API tools faq
paste
Advertisement
LeafJelly

Picnic Chara Code - Accent

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