API tools faq
paste
Advertisement
LeafJelly

Monochrome Box Chara Code - Custom Colors

LeafJelly
Nov 14th, 2022 (edited)
1,333
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 18.36 KB | None | 0 0
raw download clone embed print report
  1. <!----------------
  2. Free to Use Small Character Code
  3. Monochrome Box by LeafJelly
  4. Custom Colors
  5.  
  6. Use Ctrl+F and replace all to change the color
  7. Card BG: #D2D2D2
  8. Inside BG: #FFF
  9. Font: #333
  10. Accent: #555
  11. Borders:#999
  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-1 mx-auto h-100" style="border-radius:2em; width:500px; font-size:12px; font-family:calibri; background:#D2D2D2; color:#333">
  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://w0.peakpx.com/wallpaper/682/817/HD-wallpaper-jujutsu-kaisen-anime-manga-satoru-gojo-theme.jpg);
  31. background-position:center; background-size:cover; border-radius:1.5em; height:230px" 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://steamuserimages-a.akamaihd.net/ugc/1667986590235161045/D10D1F19D60E0BC506873BA1B9A2BCE1DAD0DE8C/?imw=637&imh=358&ima=fit&impolicy=Letterbox&imcolor=%23000000&letterbox=true);
  37. background-position:center; background-size:cover; border-radius:1.5em; height:230px" 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://64.media.tumblr.com/825315c64127dbdd432615601b147ea9/18c4ec2e9391987d-bc/s640x960/98616aac653b0d8309fa5362a6e309a2c8040b6a.jpg);
  43. background-position:center; background-size:cover; border-radius:1.5em; height:230px" 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.wikia.nocookie.net/jujutsu-kaisen/images/f/fe/Satoru_Gojo_%28Jump_GIGA%29.png);
  49. background-position:center; background-size:cover; border-radius:1.5em; height:230px" 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 " style="color:#333" href="#carouselb" data-slide="prev">
  59. <span><i class="fas fa-chevron-left fa-lg" style="margin-left:-22px;"></i></span></a>
  60. <a class="carousel-control-next " style="color:#333" href="#carouselb" data-slide="next">
  61. <span><i class="fas fa-chevron-right fa-lg" style="margin-left:20px;"></i></span></a>
  62. </div>
  63.  
  64. <div class="col-8 px-1" style="height:235px; overflow:auto">
  65. <div class="tab-content">
  66. <!---============ Tab One =========================--->
  67. <div class="tab-pane fade active show" id="one">
  68. <div class="col-13 row no-gutters">
  69.  
  70. <div class="col-md-6 py-1 row no-gutters">
  71. <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-color:#999; border-radius:1.2em 0em 0em 1.2em">
  72. <i class="far fa-signature"></i></div>
  73. <div class="card col-9 justify-content-center p-1 mb-1" style="background:#FFF;border-width:1px 1px 1px 0px; border-radius:0em 1.2em 1.2em 0em">
  74. Name
  75. </div>
  76. </div>
  77.  
  78. <div class="col-md-6 py-1 pl-1 row no-gutters">
  79. <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-color:#999; border-radius:1.2em 0em 0em 1.2em">
  80. <i class="far fa-hourglass-end"></i></div>
  81. <div class="card col-9 justify-content-center p-1 mb-1 " style="background:#FFF;border-width:1px 1px 1px 0px; border-radius:0em 1.2em 1.2em 0em">
  82. Age
  83. </div>
  84. </div>
  85.  
  86. <div class="col-md-6 py-1 row no-gutters">
  87. <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-color:#999; border-radius:1.2em 0em 0em 1.2em">
  88. <i class="far fa-user"></i></div>
  89. <div class="card col-9 justify-content-center p-1 mb-1 " style="background:#FFF;border-width:1px 1px 1px 0px; border-radius:0em 1.2em 1.2em 0em">
  90. Pronouns
  91. </div>
  92. </div>
  93.  
  94. <div class="col-md-6 py-1 pl-1 row no-gutters">
  95. <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-color:#999; border-radius:1.2em 0em 0em 1.2em">
  96. <i class="far fa-sun"></i></div>
  97. <div class="card col-9 justify-content-center p-1 mb-1 " style="background:#FFF;border-width:1px 1px 1px 0px; border-radius:0em 1.2em 1.2em 0em">
  98. Gender
  99. </div>
  100. </div>
  101.  
  102. <div class="col-md-6 py-1 row no-gutters">
  103. <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-color:#999; border-radius:1.2em 0em 0em 1.2em">
  104. <i class="far fa-earth"></i></div>
  105. <div class="card col-9 justify-content-center p-1 mb-1 " style="background:#FFF;border-width:1px 1px 1px 0px; border-radius:0em 1.2em 1.2em 0em">
  106. Race/Species
  107. </div>
  108. </div>
  109.  
  110. <div class="col-md-6 py-1 pl-1 row no-gutters">
  111. <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-color:#999; border-radius:1.2em 0em 0em 1.2em">
  112. <i class="far fa-cloud-rainbow"></i></div>
  113. <div class="card col-9 justify-content-center p-1 mb-1 " style="background:#FFF;border-width:1px 1px 1px 0px; border-radius:0em 1.2em 1.2em 0em">
  114. Sexuality
  115. </div>
  116. </div>
  117.  
  118. </div>
  119.  
  120. <!--------Moodboard----------->
  121. <div class="col-12 p-0">
  122. <div class="row no-gutters" style="height:98px;">
  123. <!---- Image 1 ----->
  124. <div class="col-4 h-100" style="border-radius:1.5em 0em 0em 1.5em; background-position:center; background-size:cover;
  125. background-image: url(http://pm1.narvii.com/6538/51c7864f1b1ee6131e4fb493ec13eb38aea9ae5d_00.jpg)
  126. "></div>
  127.  
  128. <!---- Image 2 ----->
  129. <div class="col-4 h-100" style="background-size:cover; background-position:center;
  130. background-image: url(https://i.pinimg.com/736x/22/a6/18/22a618b165e67156c4a8f770b69730d6--splash-photography-photography-studios.jpg)
  131. "></div>
  132.  
  133. <!---- Image 3 ----->
  134. <div class="col-4 h-100" style="border-radius:0em 1.5em 1.5em 0em; background-position:center; background-size:cover;
  135. background-image: url(https://wallpapers.com/images/hd/black-and-white-aesthetic-moon-shine-q5ypqtw1ws0r5xkm.jpg)
  136. "></div>
  137.  
  138. </div>
  139. </div>
  140.  
  141. </div>
  142.  
  143. <!---============ Tab two =========================--->
  144. <div class="tab-pane fade" id="two">
  145.  
  146. <p class="text-center text-uppercase" >
  147. About
  148. </p>
  149. <hr class="my-1">
  150.  
  151. <div class="row no-gutters text-center">
  152. <!----------Brief about---------------->
  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.</p>
  154. <!------Likes------>
  155. <ul class="col-6 px-1 mt-2 text-left" style="list-style-type:none;">
  156. <li><i class="far fa-check" ></i>
  157. one
  158. </li>
  159.  
  160. <li><i class="far fa-check" ></i>
  161. two
  162. </li>
  163.  
  164. <li><i class="far fa-check" ></i>
  165. three
  166. </li>
  167.  
  168. <li><i class="far fa-check" ></i>
  169. four
  170. </li>
  171.  
  172. <li><i class="far fa-check" ></i>
  173. five
  174. </li>
  175. </ul>
  176.  
  177. <!------Disikes------>
  178. <ul class="col-6 mt-2 text-left" style="list-style-type:none;">
  179. <li><i class="far fa-xmark " ></i>
  180. one
  181. </li>
  182.  
  183. <li><i class="far fa-xmark " ></i>
  184. two
  185. </li>
  186.  
  187. <li><i class="far fa-xmark " ></i>
  188. three
  189. </li>
  190.  
  191. <li><i class="far fa-xmark " ></i>
  192. four
  193. </li>
  194.  
  195. <li><i class="far fa-xmark " ></i>
  196. five
  197. </li>
  198. </ul>
  199.  
  200. </div>
  201. </div>
  202.  
  203. <!---============ Tab three =========================--->
  204. <div class="tab-pane fade" id="three">
  205.  
  206. <p class="text-center text-uppercase" >
  207. Trivia
  208. </p>
  209. <hr class="my-1">
  210. <!------Trivia------>
  211. <ul class="col-12">
  212. <li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra.</li>
  213.  
  214. <li>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat.</li>
  215.  
  216. <li>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus.</li>
  217.  
  218. <li>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor.</li>
  219. </ul>
  220.  
  221. </div>
  222.  
  223.  
  224. <!---============ Tab four =========================--->
  225. <div class="tab-pane fade" id="four">
  226. <!--------Relationship 1 start----------->
  227. <div class="row no-gutters">
  228. <div class="col-10 row no-gutters align-items-center mx-auto">
  229. <!-----Chara Icon Replace the URL------>
  230. <div class="rounded-circle" style="height:60px; width:60px;
  231.  
  232. background: url(https://i.pinimg.com/originals/19/9e/a9/199ea9141d25c61572cc665158c13be7.jpg) center;
  233.  
  234. background-repeat:no-repeat; background-size:cover;"></div>
  235.  
  236. <div class="col ml-3">
  237. <a class="text-uppercase" style="color:#555"
  238. href="URL_HERE">
  239. Character Name
  240. </a>
  241. <p>
  242. <i class="fas fa-heart"></i>
  243. Relationship Type
  244. </p>
  245. </div>
  246.  
  247. </div>
  248. <!-------Text ------>
  249. <p class="text-center">
  250. 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.
  251. </p>
  252. <hr class="col my-1">
  253. </div>
  254. <!--------Relationship 1 end----------->
  255.  
  256. <!--------Relationship 2 start----------->
  257. <div class="row no-gutters">
  258. <div class="col-10 row no-gutters align-items-center mx-auto">
  259. <!-----Chara Icon Replace the URL------>
  260. <div class="rounded-circle" style="height:60px;width:60px;
  261.  
  262. background: url(https://i.pinimg.com/originals/d1/e1/a7/d1e1a7fb12ac7e8c255caea385e50a0f.jpg) center;
  263.  
  264. background-repeat:no-repeat; background-size:cover;"></div>
  265.  
  266. <div class="col ml-3">
  267. <a class="text-uppercase" style="color:#555"
  268. href="URL_HERE">
  269. Character Name
  270. </a>
  271. <p>
  272. <i class="fas fa-skull"></i>
  273. Relationship Type
  274. </p>
  275. </div>
  276.  
  277. </div>
  278. <!-------Text ------>
  279. <p class="text-center">
  280. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
  281. </p>
  282. <hr class="col my-1">
  283. </div>
  284. <!--------Relationship 2 end----------->
  285.  
  286. <!--------Relationship 3 start----------->
  287. <div class="row no-gutters">
  288. <div class="col-10 row no-gutters align-items-center mx-auto">
  289. <!-----Chara Icon Replace the URL------>
  290. <div class="rounded-circle" style="height:60px;width:60px;
  291.  
  292. background: url(https://64.media.tumblr.com/1065973ad647d3eebf80773ab838b8e9/5378d17fc150c4f2-de/s1280x1920/1176bac9572e52646ade97f9cccb103c41cecbff.jpg) center;
  293.  
  294. background-repeat:no-repeat; background-size:cover;"></div>
  295.  
  296. <div class="col ml-3">
  297. <a class="text-uppercase" style="color:#555"
  298. href="URL_HERE">
  299. Character Name
  300. </a>
  301. <p>
  302. <i class="fas fa-handshake"></i>
  303. Relationship Type
  304. </p>
  305. </div>
  306.  
  307. </div>
  308. <!-------Text ------>
  309. <p class="text-center">
  310. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
  311. </p>
  312. <hr class="col my-1">
  313. </div>
  314. <!--------Relationship 3 end----------->
  315.  
  316. <!----------Copy and paste above here for more relationships sections----------->
  317.  
  318. </div>
  319.  
  320.  
  321. <!---============ Tab five =========================--->
  322. <div class="tab-pane fade text-right" id="five">
  323.  
  324. <p class="text-center text-uppercase" >
  325. Playlist
  326. </p>
  327. <hr class="my-1">
  328.  
  329.  
  330. <!--------How To Use the Music Code------
  331. These are individual song players using youtube links.
  332. The songs can NOT be copy and pasted for more songs
  333. , but they can be DELETED for less songs.
  334.  
  335. Changed the youtube ID, replacing ONLY the words ID_HERE
  336. KEEP the /embed/ amd ?controls=0 after the ID_HERE
  337.  
  338. You can find the youtube ID by clicking the share button on the video
  339. and copying the string of letters and numbers at the end
  340. of the https://youtu.be/ URL.
  341. ---------------------------------------->
  342.  
  343. <!---------------Song 1------------------>
  344. <div class="row no-gutters my-2" style="background:#FFF;border-color:#999; color:#333;border-radius:1.5em;border-width:1px;border-style:solid;">
  345. <a class="btn btn-sm melody-embed border-0 m-0" >
  346. <iframe style="opacity:.01;position:absolute;left:-260px;top:30px;height:80px;width:300px;transform:rotate(180deg)"
  347.  
  348. src="https://www.youtube-nocookie.com/embed/ID_HERE?controls=0" frameborder="0"></iframe>
  349.  
  350. <i class="fas fa-play-pause fa-fw"></i></a>
  351.  
  352. <hr class="col my-auto h-100">
  353. <span class="col-8 col-md-7 text-truncate my-auto mr-1">
  354. Song Name 1 - Artist Name
  355. </span>
  356. </div>
  357. <!--------Song 1 End------------>
  358.  
  359. <!---------------Song 2------------------>
  360. <div class="row no-gutters my-2 " style="background:#FFF;border-color:#999; color:#333;border-radius:1.5em;border-width:1px;border-style:solid;">
  361. <a class="btn btn-sm melody-embed border-0 m-0" >
  362. <iframe style="opacity:.01;position:absolute;left:-260px;top:70px;height:80px;width:300px;transform:rotate(180deg)"
  363.  
  364. src="https://www.youtube-nocookie.com/embed/ID_HERE?controls=0" frameborder="0"></iframe>
  365.  
  366. <i class="fas fa-play-pause fa-fw"></i></a>
  367.  
  368. <hr class="col my-auto h-100">
  369. <span class="col-8 col-md-7 text-truncate my-auto mr-1">
  370. Song Name 2 - Artist Name
  371. </span>
  372. </div>
  373. <!--------Song 2 End------------>
  374.  
  375. <!---------------Song 3------------------>
  376. <div class="row no-gutters my-2 " style="background:#FFF;border-color:#999; color:#333;border-radius:1.5em;border-width:1px;border-style:solid;">
  377. <a class="btn btn-sm melody-embed border-0 m-0" >
  378. <iframe style="opacity:.01;position:absolute;left:-260px;top:107px;height:80px;width:300px;transform:rotate(180deg)"
  379.  
  380. src="https://www.youtube-nocookie.com/embed/ID_HERE?controls=0" frameborder="0"></iframe>
  381.  
  382. <i class="fas fa-play-pause fa-fw"></i></a>
  383.  
  384. <hr class="col my-auto h-100">
  385. <span class="col-8 col-md-7 text-truncate my-auto mr-1">
  386. Song Name 3 - Artist Name
  387. </span>
  388. </div>
  389. <!--------Song 3 End------------>
  390.  
  391. <!---------------Song 4------------------>
  392. <div class="row no-gutters my-2 " style="background:#FFF;border-color:#999; color:#333;border-radius:1.5em;border-width:1px;border-style:solid;">
  393. <a class="btn btn-sm melody-embed border-0 m-0" >
  394. <iframe style="opacity:.01;position:absolute;left:-260px;top:140px;height:80px;width:300px;transform:rotate(180deg)"
  395.  
  396. src="https://www.youtube-nocookie.com/embed/ID_HERE?controls=0" frameborder="0"></iframe>
  397.  
  398. <i class="fas fa-play-pause fa-fw"></i></a>
  399.  
  400. <hr class="col my-auto h-100">
  401. <span class="col-8 col-md-7 text-truncate my-auto mr-1">
  402. Song Name 4 - Artist Name
  403. </span>
  404. </div>
  405. <!--------Song 4 End------------>
  406.  
  407. <!---------------Song 5------------------>
  408. <div class="row no-gutters my-2 " style="background:#FFF;border-color:#999; color:#333;border-radius:1.5em;border-width:1px;border-style:solid;">
  409. <a class="btn btn-sm melody-embed border-0 m-0" >
  410. <iframe style="opacity:.01;position:absolute;left:-260px;top:170px;height:65px;width:300px;transform:rotate(180deg)"
  411.  
  412. src="https://www.youtube-nocookie.com/embed/ID_HERE?controls=0" frameborder="0"></iframe>
  413.  
  414. <i class="fas fa-play-pause fa-fw"></i></a>
  415.  
  416. <hr class="col my-auto h-100">
  417. <span class="col-8 col-md-7 text-truncate my-auto mr-1">
  418. Song Name 5 - Artist Name
  419. </span>
  420. </div>
  421. <!--------Song 5 End------------>
  422.  
  423. </div>
  424. <!---------->
  425.  
  426. </div>
  427. </div>
  428.  
  429. </div>
  430.  
  431. <!---============ Buttons
  432. Change the symbols by changing fa-word using font-awesome symbols
  433. =========================--->
  434. <div class="col-auto col-md-1 nav flex-lg-column m-auto">
  435. <a class="nav-item active btn py-2 p-0 m-1" style="background:#FFF; border-color:#999; color:#333; width:2.5em; border-radius:2em" data-toggle="tab" href="#one">
  436. <i class="fas fa-user"></i></a>
  437.  
  438. <a class="nav-item btn py-2 p-0 mx-0 m-1" style="background:#FFF; border-color:#999; color:#333; width:2.5em; border-radius:2em; " data-toggle="tab" href="#two">
  439. <i class="fas fa-heart"></i></a>
  440.  
  441. <a class="nav-item btn py-2 p-0 mx-0 m-1" style="background:#FFF; border-color:#999; color:#333; width:2.5em; border-radius:2em; " data-toggle="tab" href="#three">
  442. <i class="fas fa-book"></i></a>
  443.  
  444. <a class="nav-item btn py-2 p-0 mx-0 m-1" style="background:#FFF; border-color:#999; color:#333; width:2.5em; border-radius:2em; " data-toggle="tab" href="#four">
  445. <i class="fas fa-users"></i></a>
  446.  
  447. <a class="nav-item btn py-2 p-0 mx-0 m-1" style="background:#FFF; border-color:#999; color:#333; width:2.5em; border-radius:2em; " data-toggle="tab" href="#five">
  448. <i class="fas fa-music"></i></a>
  449.  
  450. </div>
  451.  
  452. </div>
  453. </div>
  454. <!----------Credit do not remove---------->
  455. <div class="col-12 p-1 text-center mx-auto" style="width:500px;">
  456. <a href="/LeafJelly" class="tooltipster" title="HTML by LeafJelly"><i class="far fa-code fa-xs text-muted"></i></a>
  457. </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!