API tools faq
paste
Advertisement
LeafJelly

Picnic Chara Code - Bootstrap

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