API tools faq
paste
Advertisement
LeafJelly

Monochrome Box Chara Code- Bootstrap

LeafJelly
Nov 14th, 2022 (edited)
1,109
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 17.84 KB | None | 0 0
raw download clone embed print report
  1. <!----------------
  2. Free to Use Small Character Code
  3. Monochrome Box by LeafJelly
  4.  
  5. Bootstrap Colors
  6. The colors on this code adjust to the current TH Theme you're using!
  7.  
  8. Rules
  9. 1. DO NOT REMOVE credits
  10. 2. DO NOT redistribute purchased codes
  11. 3. Turn off WYSIWYG before using my HTML codes and while editing, it'll break otherwise
  12. 4. You can modify and frankestein my codes with credit to all the source codes, and only if the other coders allow it.
  13. 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.
  14. 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.
  15. ---------------->
  16. <div class="card col-12 bg-faded text-muted p-1 mx-auto h-100" style="border-radius:2em; width:500px; font-size:12px; font-family:calibri;">
  17. <div class="row no-gutters">
  18.  
  19. <div class="col-12 col-md-11 row no-gutters">
  20. <div class="col-4 p-1 pr-2">
  21. <div id="carouselb" class="carousel slide" data-ride="carousel">
  22. <div class="carousel-inner">
  23. <!--------Character Image 1--------->
  24. <div class="carousel-item active">
  25. <div style="background-image:url(https://w0.peakpx.com/wallpaper/682/817/HD-wallpaper-jujutsu-kaisen-anime-manga-satoru-gojo-theme.jpg);
  26. background-position:center; background-size:cover; border-radius:1.5em; height:230px" class="mb-2 p-1"></div>
  27. </div>
  28.  
  29. <!--------Character Image 2--------->
  30. <div class="carousel-item">
  31. <div style="background-image:url(https://steamuserimages-a.akamaihd.net/ugc/1667986590235161045/D10D1F19D60E0BC506873BA1B9A2BCE1DAD0DE8C/?imw=637&imh=358&ima=fit&impolicy=Letterbox&imcolor=%23000000&letterbox=true);
  32. background-position:center; background-size:cover; border-radius:1.5em; height:230px" class="mb-2 p-1"></div>
  33. </div>
  34.  
  35. <!--------Character Image 3--------->
  36. <div class="carousel-item">
  37. <div style="background-image:url(https://64.media.tumblr.com/825315c64127dbdd432615601b147ea9/18c4ec2e9391987d-bc/s640x960/98616aac653b0d8309fa5362a6e309a2c8040b6a.jpg);
  38. background-position:center; background-size:cover; border-radius:1.5em; height:230px" class="mb-2 p-1"></div>
  39. </div>
  40.  
  41. <!--------Character Image 4--------->
  42. <div class="carousel-item">
  43. <div style="background-image:url(https://static.wikia.nocookie.net/jujutsu-kaisen/images/f/fe/Satoru_Gojo_%28Jump_GIGA%29.png);
  44. background-position:center; background-size:cover; border-radius:1.5em; height:230px" class="mb-2 p-1"></div>
  45. </div>
  46.  
  47.  
  48. <!------------Copy and paste above here for more images ------------------>
  49. </div>
  50. </div>
  51.  
  52. <!-- Carousel CONTROLS -->
  53. <a class="carousel-control-prev text-muted" href="#carouselb" data-slide="prev">
  54. <span><i class="fas fa-chevron-left fa-lg" style="margin-left:-22px;"></i></span></a>
  55. <a class="carousel-control-next text-muted" href="#carouselb" data-slide="next">
  56. <span><i class="fas fa-chevron-right fa-lg" style="margin-left:20px;"></i></span></a>
  57. </div>
  58.  
  59. <div class="col-8 px-1" style="height:235px; overflow:auto">
  60. <div class="tab-content">
  61. <!---============ Tab One =========================--->
  62. <div class="tab-pane fade active show" id="one">
  63. <div class="col-13 row no-gutters">
  64.  
  65. <div class="col-md-6 py-1 row no-gutters">
  66. <div class="card col-3 card-outline-secondary mb-1 p-1 py-2 text-center" style="font-size:1.3em; font-size:1.3em; border-radius:1.2em 0em 0em 1.2em">
  67. <i class="far fa-signature"></i></div>
  68. <div class="card col-9 justify-content-center p-1 mb-1 " style="border-width:1px 1px 1px 0px; border-radius:0em 1.2em 1.2em 0em">
  69. Name
  70. </div>
  71. </div>
  72.  
  73. <div class="col-md-6 py-1 pl-1 row no-gutters">
  74. <div class="card col-3 card-outline-secondary mb-1 p-1 py-2 text-center" style="font-size:1.3em; font-size:1.3em; border-radius:1.2em 0em 0em 1.2em">
  75. <i class="far fa-hourglass-end"></i></div>
  76. <div class="card col-9 justify-content-center p-1 mb-1 " style="border-width:1px 1px 1px 0px; border-radius:0em 1.2em 1.2em 0em">
  77. Age
  78. </div>
  79. </div>
  80.  
  81. <div class="col-md-6 py-1 row no-gutters">
  82. <div class="card col-3 card-outline-secondary mb-1 p-1 py-2 text-center" style="font-size:1.3em; font-size:1.3em; border-radius:1.2em 0em 0em 1.2em">
  83. <i class="far fa-user"></i></div>
  84. <div class="card col-9 justify-content-center p-1 mb-1 " style="border-width:1px 1px 1px 0px; border-radius:0em 1.2em 1.2em 0em">
  85. Pronouns
  86. </div>
  87. </div>
  88.  
  89. <div class="col-md-6 py-1 pl-1 row no-gutters">
  90. <div class="card col-3 card-outline-secondary mb-1 p-1 py-2 text-center" style="font-size:1.3em; font-size:1.3em; border-radius:1.2em 0em 0em 1.2em">
  91. <i class="far fa-sun"></i></div>
  92. <div class="card col-9 justify-content-center p-1 mb-1 " style="border-width:1px 1px 1px 0px; border-radius:0em 1.2em 1.2em 0em">
  93. Gender
  94. </div>
  95. </div>
  96.  
  97. <div class="col-md-6 py-1 row no-gutters">
  98. <div class="card col-3 card-outline-secondary mb-1 p-1 py-2 text-center" style="font-size:1.3em; font-size:1.3em; border-radius:1.2em 0em 0em 1.2em">
  99. <i class="far fa-earth"></i></div>
  100. <div class="card col-9 justify-content-center p-1 mb-1 " style="border-width:1px 1px 1px 0px; border-radius:0em 1.2em 1.2em 0em">
  101. Race/Species
  102. </div>
  103. </div>
  104.  
  105. <div class="col-md-6 py-1 pl-1 row no-gutters">
  106. <div class="card col-3 card-outline-secondary mb-1 p-1 py-2 text-center" style="font-size:1.3em; font-size:1.3em; border-radius:1.2em 0em 0em 1.2em">
  107. <i class="far fa-cloud-rainbow"></i></div>
  108. <div class="card col-9 justify-content-center p-1 mb-1 " style="border-width:1px 1px 1px 0px; border-radius:0em 1.2em 1.2em 0em">
  109. Sexuality
  110. </div>
  111. </div>
  112.  
  113. </div>
  114.  
  115. <!--------Moodboard----------->
  116. <div class="col-12 p-0">
  117. <div class="row no-gutters" style="height:98px;">
  118. <!---- Image 1 ----->
  119. <div class="col-4 h-100" style="border-radius:1.5em 0em 0em 1.5em; background-position:center; background-size:cover;
  120. background-image: url(http://pm1.narvii.com/6538/51c7864f1b1ee6131e4fb493ec13eb38aea9ae5d_00.jpg)
  121. "></div>
  122.  
  123. <!---- Image 2 ----->
  124. <div class="col-4 h-100" style="background-size:cover; background-position:center;
  125. background-image: url(https://i.pinimg.com/736x/22/a6/18/22a618b165e67156c4a8f770b69730d6--splash-photography-photography-studios.jpg)
  126. "></div>
  127.  
  128. <!---- Image 3 ----->
  129. <div class="col-4 h-100" style="border-radius:0em 1.5em 1.5em 0em; background-position:center; background-size:cover;
  130. background-image: url(https://wallpapers.com/images/hd/black-and-white-aesthetic-moon-shine-q5ypqtw1ws0r5xkm.jpg)
  131. "></div>
  132.  
  133. </div>
  134. </div>
  135.  
  136. </div>
  137.  
  138. <!---============ Tab two =========================--->
  139. <div class="tab-pane fade" id="two">
  140.  
  141. <p class="text-center text-uppercase" >
  142. About
  143. </p>
  144. <hr class="my-1">
  145.  
  146. <div class="row no-gutters text-center">
  147. <!----------Brief about---------------->
  148. <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.</p>
  149. <!------Likes------>
  150. <ul class="col-6 px-1 mt-2 text-left" style="list-style-type:none;">
  151. <li><i class="far fa-check" ></i>
  152. one
  153. </li>
  154.  
  155. <li><i class="far fa-check" ></i>
  156. two
  157. </li>
  158.  
  159. <li><i class="far fa-check" ></i>
  160. three
  161. </li>
  162.  
  163. <li><i class="far fa-check" ></i>
  164. four
  165. </li>
  166.  
  167. <li><i class="far fa-check" ></i>
  168. five
  169. </li>
  170. </ul>
  171.  
  172. <!------Disikes------>
  173. <ul class="col-6 mt-2 text-left" style="list-style-type:none;">
  174. <li><i class="far fa-xmark " ></i>
  175. one
  176. </li>
  177.  
  178. <li><i class="far fa-xmark " ></i>
  179. two
  180. </li>
  181.  
  182. <li><i class="far fa-xmark " ></i>
  183. three
  184. </li>
  185.  
  186. <li><i class="far fa-xmark " ></i>
  187. four
  188. </li>
  189.  
  190. <li><i class="far fa-xmark " ></i>
  191. five
  192. </li>
  193. </ul>
  194.  
  195. </div>
  196. </div>
  197.  
  198. <!---============ Tab three =========================--->
  199. <div class="tab-pane fade" id="three">
  200.  
  201. <p class="text-center text-uppercase" >
  202. Trivia
  203. </p>
  204. <hr class="my-1">
  205. <!------Trivia------>
  206. <ul class="col-12">
  207. <li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra.</li>
  208.  
  209. <li>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat.</li>
  210.  
  211. <li>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus.</li>
  212.  
  213. <li>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor.</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;
  226.  
  227. background: url(https://i.pinimg.com/originals/19/9e/a9/199ea9141d25c61572cc665158c13be7.jpg) center;
  228.  
  229. background-repeat:no-repeat; background-size:cover;"></div>
  230.  
  231. <div class="col ml-3">
  232. <a class="text-uppercase text-dark"
  233. href="URL_HERE">
  234. Character Name
  235. </a>
  236. <p>
  237. <i class="fas 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;
  256.  
  257. background: url(https://i.pinimg.com/originals/d1/e1/a7/d1e1a7fb12ac7e8c255caea385e50a0f.jpg) center;
  258.  
  259. background-repeat:no-repeat; background-size:cover;"></div>
  260.  
  261. <div class="col ml-3">
  262. <a class="text-uppercase text-dark"
  263. href="URL_HERE">
  264. Character Name
  265. </a>
  266. <p>
  267. <i class="fas fa-skull"></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;
  286.  
  287. background: url(https://64.media.tumblr.com/1065973ad647d3eebf80773ab838b8e9/5378d17fc150c4f2-de/s1280x1920/1176bac9572e52646ade97f9cccb103c41cecbff.jpg) center;
  288.  
  289. background-repeat:no-repeat; background-size:cover;"></div>
  290.  
  291. <div class="col ml-3">
  292. <a class="text-uppercase text-dark"
  293. href="URL_HERE">
  294. Character Name
  295. </a>
  296. <p>
  297. <i class="fas 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" >
  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 btn-secondary text-muted" style="border-radius:1.5em;border-width:1px;border-style:solid;">
  340. <a class="btn btn-sm melody-embed border-0 m-0" >
  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">
  348. <span class="col-8 col-md-7 text-truncate my-auto mr-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 btn-secondary text-muted" style="border-radius:1.5em;border-width:1px;border-style:solid;">
  356. <a class="btn btn-sm melody-embed border-0 m-0" >
  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">
  364. <span class="col-8 col-md-7 text-truncate my-auto mr-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 btn-secondary text-muted" style="border-radius:1.5em;border-width:1px;border-style:solid;">
  372. <a class="btn btn-sm melody-embed border-0 m-0" >
  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">
  380. <span class="col-8 col-md-7 text-truncate my-auto mr-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 btn-secondary text-muted" style="border-radius:1.5em;border-width:1px;border-style:solid;">
  388. <a class="btn btn-sm melody-embed border-0 m-0" >
  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">
  396. <span class="col-8 col-md-7 text-truncate my-auto mr-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 btn-secondary text-muted" style="border-radius:1.5em;border-width:1px;border-style:solid;">
  404. <a class="btn btn-sm melody-embed border-0 m-0" >
  405. <iframe style="opacity:.01;position:absolute;left:-260px;top:170px;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">
  412. <span class="col-8 col-md-7 text-truncate my-auto mr-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 btn-secondary text-muted py-2 p-0 m-1" style="width:2.5em; border-radius:2em" data-toggle="tab" href="#one">
  431. <i class="fas fa-user"></i></a>
  432.  
  433. <a class="nav-item btn btn-secondary text-muted py-2 p-0 mx-0 m-1" style="width:2.5em; border-radius:2em; " data-toggle="tab" href="#two">
  434. <i class="fas fa-heart"></i></a>
  435.  
  436. <a class="nav-item btn btn-secondary text-muted py-2 p-0 mx-0 m-1" style="width:2.5em; border-radius:2em; " data-toggle="tab" href="#three">
  437. <i class="fas fa-book"></i></a>
  438.  
  439. <a class="nav-item btn btn-secondary text-muted py-2 p-0 mx-0 m-1" style="width:2.5em; border-radius:2em; " data-toggle="tab" href="#four">
  440. <i class="fas fa-users"></i></a>
  441.  
  442. <a class="nav-item btn btn-secondary text-muted py-2 p-0 mx-0 m-1" style="width:2.5em; border-radius:2em; " data-toggle="tab" href="#five">
  443. <i class="fas fa-music"></i></a>
  444.  
  445. </div>
  446.  
  447. </div>
  448. </div>
  449. <!----------Credit do not remove---------->
  450. <div class="col-12 p-1 text-center mx-auto" style="width:500px;">
  451. <a href="/LeafJelly" class="tooltipster" title="HTML by LeafJelly"><i class="far fa-code fa-xs text-muted"></i></a>
  452. </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!