API tools faq
paste
Advertisement
lucacodedump

OVERLAPPING . f2u toyhouse code

lucacodedump
Dec 17th, 2023 (edited)
691
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 27.70 KB | None | 0 0
raw download clone embed print report
  1. <!-------
  2. f2u - overlapping by raggedinsomnia
  3. accent: 5F2C2C - use ctrl + f to quickly find and replace the color!
  4.  
  5. need a live code editor? use [https://th.circlejourney.net/]!
  6. need more icons? check [https://fontawesome.com/search]!
  7. replace IMAGELINK with the link to your image! keep it in parentheses or it wont work.
  8.  
  9. -------->
  10.  
  11.  
  12.  
  13. <div class="container px-0 py-2 mx-auto text-justify" style="max-width:720px; font-size:12.5px; letter-spacing:0.7px;">
  14.  
  15. <div class="card rounded-0 m-1 p-1 border-0" style="background:#5F2C2C;">
  16.  
  17. <div class="justify-content-between">
  18.  
  19. <!---- character name ---->
  20.  
  21. <span class="text-uppercase ml-1" style="letter-spacing:1.7px; font-size:14.5px; font-weight:200; font-family:georgia;">
  22. character name
  23. </span>
  24.  
  25. <!--- icon .. you can replace this with one that fits your character more! --->
  26.  
  27. <i class="fa-duotone fa-paw-claws mt-1 mr-1" style="font-size:14.5px;"></i>
  28. </div>
  29. </div>
  30.  
  31. <div class="row no-gutters">
  32. <div class="col-md-4">
  33.  
  34. <!---- icon ---->
  35.  
  36. <div class="card rounded-0 m-1 mb-2 p-1 border-0" style="background:#5f2c2c; height:15px; opacity:0.5;">
  37. </div>
  38.  
  39. <div class="card rounded-0 bg-faded m-1" style="z-index:9;">
  40. <div class="card rounded-0 p-1 m-1" style="
  41.  
  42. background-image: url(IMAGELINK);
  43.  
  44. background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: scroll; height:220px;">
  45. </div>
  46. </div>
  47. </div>
  48.  
  49. <!---- basic infos ---->
  50.  
  51. <div class="col-md-8">
  52. <div class="card rounded-0 bg-faded p-1 m-1" style="max-height:223px; z-index:1;">
  53. <div class="card rounded-0 p-1" style="overflow:auto;">
  54. <div class="row no-gutters">
  55.  
  56. <div class="col-md-6 pt-2 pl-2 pr-2">
  57. <div class="justify-content-between">
  58. <span style="color:#5F2C2C; font-weight:500;">
  59. <i class="fa-light fa-signature"></i> name
  60. </span> content
  61. </div>
  62. </div>
  63.  
  64. <div class="col-md-6 pt-2 pl-2 pr-2">
  65. <div class="justify-content-between">
  66. <span style="color:#5F2C2C; font-weight:500;">
  67. <i class="fa-light fa-cake"></i> age
  68. </span> ## (birthday)
  69. </div>
  70. </div>
  71.  
  72. <div class="col-md-6 pt-2 pl-2 pr-2">
  73. <div class="justify-content-between">
  74. <span style="color:#5F2C2C; font-weight:500;">
  75. <i class="fa-light fa-transgender"></i> gender
  76. </span> content
  77. </div>
  78. </div>
  79.  
  80. <div class="col-md-6 pt-2 pl-2 pr-2">
  81. <div class="justify-content-between">
  82. <span style="color:#5F2C2C; font-weight:500;">
  83. <i class="fa-light fa-comments"></i> pronouns
  84. </span> con/tent
  85. </div>
  86. </div>
  87.  
  88. <div class="col-md-6 pt-2 pl-2 pr-2">
  89. <div class="justify-content-between">
  90. <span style="color:#5F2C2C; font-weight:500;">
  91. <i class="fa-light fa-dna"></i> species
  92. </span> or race
  93. </div>
  94. </div>
  95.  
  96. <div class="col-md-6 pt-2 pl-2 pr-2">
  97. <div class="justify-content-between">
  98. <span style="color:#5F2C2C; font-weight:500;">
  99. <i class="fa-light fa-location-dot"></i> residence
  100. </span> content
  101. </div>
  102. </div>
  103.  
  104. <div class="col-md-6 pt-2 pl-2 pr-2">
  105. <div class="justify-content-between">
  106. <span style="color:#5F2C2C; font-weight:500;">
  107. <i class="fa-light fa-heart"></i> orientation
  108. </span> content
  109. </div>
  110. </div>
  111.  
  112. <div class="col-md-6 pt-2 pl-2 pr-2">
  113. <div class="justify-content-between">
  114. <span style="color:#5F2C2C; font-weight:500;">
  115. <i class="fa-light fa-music"></i> theme
  116. </span>
  117.  
  118. <!--- music player
  119. replace STRING with the keysmash that comes after the "watch?v=" in youtube urls!
  120.  
  121. ex: https://www.youtube.com/watch?v=[0I647GU3Jsc]
  122.  
  123. ----->
  124.  
  125. <span>
  126. <a data-toggle="tooltip" title="song - artist">
  127.  
  128. <iframe frameborder="0" style="height:1rem; width:1rem; position:absolute; opacity:0.001;"
  129. src="https://www.youtube.com/embed/STRING?controls=0"></iframe>
  130.  
  131. <i class="fa-solid fa-play" style="color:#5F2C2C; font-size:16px;"></i>
  132.  
  133. </a>
  134. </span>
  135.  
  136. <!---- short summary ---->
  137.  
  138. </div>
  139. </div> <hr class="w-100 mt-2 mb-2">
  140.  
  141. <p>write about your character here! i reccomend a short summary, but the box will scroll, so write as much as you want. Integer mattis ultricies libero Quisque nunc placerat ante nullam nisi integer lacus morbi luctus. Mus conubia blandit aenean molestie massa est nostra bibendum et dictum. Primis vitae neque. A egestas fringilla posuere nullam nisl leo orci nec vel. Faucibus nunc.</p>
  142.  
  143. </div>
  144. </div>
  145. </div>
  146. </div>
  147.  
  148. <div class="col-md-9">
  149.  
  150.  
  151. <!---- TRIVIA ----->
  152.  
  153.  
  154. <div class="card rounded-0 bg-faded mt-n4 m-1 p-1 ml-4" style="max-height:210px; z-index:2;">
  155. <div class="card rounded-0 p-1" style="overflow:auto;">
  156.  
  157. <!---- header ---->
  158.  
  159. <div class="display-4 text-md-right text-uppercase font-italic pr-1" style="color:#5F2C2C; font-weight:500; letter-spacing:0.3px; font-family:georgia;">
  160. trivia
  161. </div>
  162.  
  163.  
  164. <hr class="w-100 mt-1 mb-2">
  165.  
  166. <ul class="fa-ul ml-1 pr-3">
  167.  
  168. <li>
  169. <span cass="fa-li">
  170. <i class="fa-light fa-star mt-2" style="color:#5F2C2C;"></i>
  171. </span>
  172. some facts about your character here! box will scroll, so add as many as you want
  173. </li>
  174.  
  175. <li>
  176. <span cass="fa-li">
  177. <i class="fa-light fa-star mt-2" style="color:#5F2C2C;"></i>
  178. </span>
  179. Vitae posuere egestas. Metus varius Litora congue quam feugiat nec.
  180. </li>
  181.  
  182. <li>
  183. <span cass="fa-li">
  184. <i class="fa-light fa-star mt-2" style="color:#5F2C2C;"></i>
  185. </span>
  186. Elit. Hendrerit orci risus nam rutrum accimsan etiam varius vestibulum.
  187. </li>
  188.  
  189. <li>
  190. <span cass="fa-li">
  191. <i class="fa-light fa-star mt-2" style="color:#5F2C2C;"></i>
  192. </span>
  193. Ornare adipiscing, ad sollicitudin curae. Vestibulum pretium ante fermentum ligula.
  194. </li>
  195.  
  196. <li>
  197. <span cass="fa-li">
  198. <i class="fa-light fa-star mt-2" style="color:#5F2C2C;"></i>
  199. </span>
  200. Rutrum varius libero fames viverra massa curabitur. Maecenas condimentum penatibus.
  201. </li>
  202.  
  203. <!---- add/delete above this line! ---->
  204.  
  205. </ul>
  206. </div>
  207. </div>
  208.  
  209. <div class="row no-gutters">
  210.  
  211. <div class="col-md-1">
  212. <div class="card rounded-0 border-0 m-1 p-1 " style="background:#5F2C2C; height:230px;">
  213. <div class="sticky-top">
  214. <i class="fa-duotone fa-moon-stars text-center pl-2 pt-1" style="font-size:17px;"></i></div>
  215.  
  216. </div>
  217. </div>
  218.  
  219. <div class="col-md-10">
  220. <div class="card rounded-0 bg-faded m-1 p-1 w-100" style="height:230px; z-index:3;">
  221. <div class="card rounded-0 p-1 w-100 h-100" style="overflow:auto;">
  222.  
  223. <!---- design notes start ---->
  224.  
  225. <div class="display-4 text-left text-uppercase font-italic pr-1" style="color:#5F2C2C; font-weight:500; letter-spacing:0.3px; font-family:georgia;">
  226. design notes
  227. </div>
  228. <hr class="w-100 mt-1 mb-2">
  229.  
  230. <ul class="fa-ul ml-1 pr-3">
  231.  
  232. <li>
  233. <span cass="fa-li">
  234. <i class="fa-light fa-star mt-2" style="color:#5F2C2C;"></i>
  235. </span>
  236. some important design notes for your character here! box will scroll, so add as many as you want!
  237. </li>
  238.  
  239. <li>
  240. <span cass="fa-li">
  241. <i class="fa-light fa-star mt-2" style="color:#5F2C2C;"></i>
  242. </span>
  243. Habitant blandit proin Fringilla pellentesque varius, quam lectus tempor Duis.
  244. </li>
  245.  
  246. <li>
  247. <span cass="fa-li">
  248. <i class="fa-light fa-star mt-2" style="color:#5F2C2C;"></i>
  249. </span>
  250. Curabitur. Pharetra habitasse. Sollicitudin diam consectetuer eu cras nonummy nulla.
  251. </li>
  252.  
  253. <li>
  254. <span cass="fa-li">
  255. <i class="fa-light fa-star mt-2" style="color:#5F2C2C;"></i>
  256. </span>
  257. Dignissim class arcu interdum. Facilisis. Sem nec sociis tempor ipsum.
  258. </li>
  259.  
  260. <li>
  261. <span cass="fa-li">
  262. <i class="fa-light fa-star mt-2" style="color:#5F2C2C;"></i>
  263. </span>
  264. Praesent mus habitant sociis. Platea etiam suspendisse Mattis urna. Enim.
  265. </li>
  266.  
  267. <!---- add/delete above this line! ---->
  268.  
  269. </ul>
  270. </div>
  271. </div>
  272. </div>
  273.  
  274. </div>
  275.  
  276. </div>
  277.  
  278. <div class="col-md-3">
  279. <div class="card rounded-0 m-1 p-1 border-0 mt-n4" style="background:#5F2C2C; height:16px;">
  280. </div>
  281.  
  282. <!---- reference sheet ---->
  283.  
  284. <div class="card rounded-0 bg-faded p-1 m-1" style="height:409px;">
  285. <div class="card rounded-0 p-1 h-100" style="
  286.  
  287. background-image: url(IMAGELINK);
  288.  
  289. background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: scroll;">
  290. </div>
  291.  
  292. <!--- ref sheet credits --->
  293.  
  294. <span class="pt-1" style="font-size:8.6px;">
  295.  
  296. <a href="LINK TO FULL IMAGE" class="text-muted"><i class="fa-regular fa-image"></i></a>
  297. ||
  298.  
  299. <a href="DESIGNER LINK" class="text-muted"><i class="fa-regular fa-paintbrush"></i></a>
  300.  
  301. ||
  302.  
  303. <a href="ARTIST LINK" class="text-muted"><i class="fa-regular fa-palette"></i></a>
  304.  
  305. </span>
  306. </div>
  307.  
  308. </div>
  309. </div>
  310.  
  311. <!--- story section start ---->
  312.  
  313. <div class="row no-gutters">
  314.  
  315. <div class="col-md-7">
  316.  
  317.  
  318. <div class="card rounded-0 m-1 p-1 border-0" style="background:#5F2C2C;">
  319.  
  320. <!--- quote --->
  321.  
  322. <span class="font-italic" style="font-family:georgia; font-size:11.5px;">"a quote here, if you want. box will grow, but one line is ideal."</span>
  323.  
  324. </div>
  325.  
  326. <!---- focal image ---->
  327.  
  328. <div class="card rounded-0 bg-faded p-1 m-1" style="height:500px;">
  329. <div class="card rounded-0 p-1 h-100" style="
  330.  
  331. background-image: url(IMAGELINK);
  332.  
  333. background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: scroll;">
  334. </div>
  335.  
  336. <!--- art credits ... you can remove it if the art is yours if you want ---->
  337.  
  338. <span class="text-muted pt-1" style="font-size:10px;">art by <a href="ARTIST LINK" style="color:#5F2C2C;">artist</a></span>
  339.  
  340. </div>
  341. </div>
  342.  
  343. <div class="col-md-5">
  344. <div class="card rounded-0 bg-faded mt-n3 p-1" style="height:235px;">
  345. <div class="card rounded-0 p-1 h-100" style="overflow:auto;">
  346.  
  347. <!---- story section start ---->
  348.  
  349. <div class="display-4 text-md-right text-uppercase font-italic pr-1" style="color:#5F2C2C; font-weight:500; letter-spacing:0.3px; font-family:georgia;">
  350. story
  351. </div> <hr class="w-100 mt-1 mb-2">
  352.  
  353. <!--- subheader --->
  354.  
  355. <h6 class="text-uppercase pl-1 mt-1 mb-0" style="color:#5F2C2C;"><i class="fa-thin fa-book-bookmark"></i> subheader</h6>
  356.  
  357. <!---- content warnings ---->
  358.  
  359. <p class="mt-0 mb-1 text-muted" style="font-size:10.5px;"><i class="fa-thin fa-triangle-exclamation"></i> no specific warnings </p><hr class="mt-0 mb-1 w-100">
  360.  
  361. <!--- story ---->
  362.  
  363. <p>character's backstory goes here. box will scroll, so write as much as you want and add as many sectionas as you want to!</p>
  364.  
  365. <p>Viverra, consequat tortor egestas elit neque vehicula pellentesque turpis vitae conubia congue duis. Ullamcorper integer nulla class metus class metus at accimsan.</p>
  366.  
  367. <hr class="mt-1 mb-1 w-100">
  368.  
  369. <!--- subheader --->
  370.  
  371. <h6 class="text-uppercase pl-1 mt-1 mb-0" style="color:#5F2C2C;"><i class="fa-thin fa-book-bookmark"></i> subheader</h6>
  372.  
  373. <!---- content warnings ---->
  374.  
  375. <p class="mt-0 mb-1 text-muted" style="font-size:10.5px;"><i class="fa-thin fa-triangle-exclamation"></i> content warning, content warning</p><hr class="mt-0 mb-1 w-100">
  376.  
  377. <!--- story ---->
  378.  
  379. <p>Elit parturient ut adipiscing. Integer vestibulum sem, odio vel facilisis molestie neque. Semper. At condimentum congue conubia tortor rutrum class convallis. Sociis hac blandit eu facilisi adipiscing dictumst parturient ornare montes neque tortor platea inceptos hymenaeos faucibus varius condimentum parturient.</p>
  380.  
  381. <p>Imperdiet lobortis penatibus sollicitudin quam placerat a. Vel sed, faucibus faucibus praesent Duis litora morbi phasellus consectetuer aliquet class ornare.</p>
  382.  
  383. <hr class="mt-1 mb-1 w-100">
  384.  
  385. <h6 class="text-uppercase pl-1 mt-1 mb-0" style="color:#5F2C2C;"><i class="fa-thin fa-book-bookmark"></i> subheader</h6>
  386.  
  387. <!---- content warnings ---->
  388.  
  389. <p class="mt-0 mb-1 text-muted" style="font-size:10.5px;"><i class="fa-thin fa-triangle-exclamation"></i> content warning</p><hr class="mt-0 mb-1 w-100">
  390.  
  391. <!--- story ---->
  392.  
  393. <p>Parturient. Morbi nullam praesent vulputate inceptos mauris cubilia lorem pharetra proin dignissim non ipsum senectus ac id litora justo risus.</p>
  394.  
  395. <p>Congue luctus risus habitasse, nunc posuere. Nascetur non feugiat purus montes mus dictum elit tristique lobortis proin neque pede ullamcorper lobortis sodales. Imperdiet mus condimentum dolor eu facilisis natoque dictum.</p>
  396.  
  397. <!---- add more sections above this line! ---->
  398.  
  399. </div>
  400. </div>
  401.  
  402. <!--- relationships section --->
  403.  
  404. <!---- character one start ---->
  405.  
  406. <div class="card rounded-0 bg-faded p-1 mt-1 mr-3">
  407. <div class="row no-gutters">
  408. <div class="col-md-5">
  409.  
  410. <div class="card rounded-0 p-1">
  411.  
  412. <!---- icon ---->
  413.  
  414. <div class="card rounded-0 p-1" style="
  415.  
  416. background-image: url(IMAGELINK);
  417.  
  418. background-size: cover; background-position: center; background-repeat: no-repeat; height:70px;">
  419. </div>
  420. </div>
  421. </div>
  422.  
  423. <div class="col-md-7">
  424.  
  425. <a href="CHARACTER LINK" style="color:#5F2C2C; font-size:13px; font-family:georgia;" class="m-1">CHARACTER NAME</a>
  426.  
  427. <p class="mt-n1 text-muted m-1" style="font-size:11px;">relationship type</p>
  428.  
  429. <!--- overview --->
  430.  
  431. <div class="card rounded-0 p-1 m-1 mt-n1" style="height:45px; overflow:auto; font-size:11px;">
  432.  
  433. <p>write a bit about their relationship here... box will scroll, but not meant for a lot of info!</p>
  434.  
  435. </div>
  436. </div>
  437.  
  438. </div>
  439. </div>
  440.  
  441. <!---- character one end ---->
  442.  
  443.  
  444.  
  445. <!---- character two start ---->
  446.  
  447. <div class="card rounded-0 bg-faded p-1 mt-1 mr-3">
  448. <div class="row no-gutters">
  449. <div class="col-md-5">
  450.  
  451. <div class="card rounded-0 p-1">
  452.  
  453. <!---- icon ---->
  454.  
  455. <div class="card rounded-0 p-1" style="
  456.  
  457. background-image: url(IMAGELINK);
  458.  
  459. background-size: cover; background-position: center; background-repeat: no-repeat; height:70px;">
  460. </div>
  461. </div>
  462. </div>
  463.  
  464. <div class="col-md-7">
  465.  
  466. <a href="CHARACTER LINK" style="color:#5F2C2C; font-size:13px; font-family:georgia;" class="m-1">CHARACTER NAME</a>
  467.  
  468. <p class="mt-n1 text-muted m-1" style="font-size:11px;">relationship type</p>
  469.  
  470. <!--- overview --->
  471.  
  472. <div class="card rounded-0 p-1 m-1 mt-n1" style="height:45px; overflow:auto; font-size:11px;">
  473.  
  474. <p>Vivamus phasellus quam ut class nisi aenean leo eros faucibus sit, auctor vel. Habitant tellus consectetuer dictum tincidunt purus class.</p>
  475.  
  476. </div>
  477. </div>
  478.  
  479. </div>
  480. </div>
  481.  
  482. <!---- character two end ---->
  483.  
  484.  
  485. <!---- character three start ---->
  486.  
  487. <div class="card rounded-0 bg-faded p-1 mt-1 mr-3">
  488. <div class="row no-gutters">
  489. <div class="col-md-5">
  490.  
  491. <div class="card rounded-0 p-1">
  492.  
  493. <!---- icon ---->
  494.  
  495. <div class="card rounded-0 p-1" style="
  496.  
  497. background-image: url(IMAGELINK);
  498.  
  499. background-size: cover; background-position: center; background-repeat: no-repeat; height:70px;">
  500. </div>
  501. </div>
  502. </div>
  503.  
  504. <div class="col-md-7">
  505.  
  506. <a href="CHARACTER LINK" style="color:#5F2C2C; font-size:13px; font-family:georgia;" class="m-1">CHARACTER NAME</a>
  507.  
  508. <p class="mt-n1 text-muted m-1" style="font-size:11px;">relationship type</p>
  509.  
  510. <!--- overview --->
  511.  
  512. <div class="card rounded-0 p-1 m-1 mt-n1" style="height:45px; overflow:auto; font-size:11px;">
  513.  
  514. <p>Suscipit interdum iaculis suspendisse sociosqu ultrices habitant donec ridiculus morbi nulla. Gravida imperdiet. Aliquam eleifend laoreet tortor. Morbi torquent natoque.</p>
  515.  
  516. </div>
  517. </div>
  518.  
  519. </div>
  520. </div>
  521.  
  522. <!---- character three end ---->
  523.  
  524. <!---- you can add more above THIS line... though three looks the best! ---->
  525.  
  526.  
  527. <!---- another quote ---->
  528.  
  529. <div class="card rounded-0 mt-1 p-1 border-0" style="background:#5F2C2C; height:25px;">
  530.  
  531. <!--- quote --->
  532.  
  533. <span class="font-italic text-right" style="font-family:georgia; font-size:11.5px;">"another quote here, if you want."</span>
  534. </div>
  535.  
  536. </div>
  537.  
  538. </div>
  539.  
  540. <div class="row no-gutters">
  541. <div class="col-md-6">
  542. <div class="card rounded-0 bg-faded m-1 p-1" style="height: 365px;">
  543. <div class="card rounded-0 p-1 h-100" style="overflow:auto;">
  544.  
  545. <!----- header ----->
  546.  
  547. <div class="display-4 text-left text-uppercase font-italic pr-1" style="color:#5F2C2C; font-weight:500; letter-spacing:0.3px; font-family:georgia;">
  548. personality
  549. </div>
  550. <hr class="w-100 mt-1 mb-2">
  551.  
  552. <!---- personality description ---->
  553.  
  554. <p>write some stuff about your character's personality here. like every other box, it'll scroll! Primis elementum maecenas facilisis diam mi ultrices hendrerit primis curabitur. Potenti elit parturient vitae vulputate phasellus conubia bibendum semper volutpat taciti cim vestibulum arcu lacus sodales vulputate. Amet sociis ut fusce conubia scelerisque felis vivamus pellentesque et. Eget eu vulputate malesuada sem, urna aliquet felis. A consectetuer mi. Maecenas elit.</p>
  555.  
  556. <p>Nascetur senectus lacus donec elementum volutpat bibendum, ultricies tempor egestas est primis. Parturient felis vel phasellus sapien tortor integer purus, dignissim aliquet platea consequat urna malesuada duis nam pellentesque parturient platea tincidunt magna scelerisque lacinia penatibus odio ipsum ultrices cim. Arcu. Ultrices, leo convallis per fringilla massa accimsan urna dictumst sit imperdiet. Commodo. Fusce dignissim inceptos molestie iaculis dictumst mus Lectus viverra blandit. Nullam nulla vulputate posuere. Tempus mauris gravida.</p>
  557.  
  558. </div>
  559. </div>
  560.  
  561. <!---- mini moodboard ---->
  562.  
  563. <div class="card rounded-0 m-1 p-1 bg-faded">
  564. <div class="card rounded-0 w-100 h-100 p-1">
  565.  
  566. <div class="row align-items-center no-gutters">
  567.  
  568. <!--- image one --->
  569.  
  570. <div class="col p-1">
  571. <div style="min-height:30px;
  572.  
  573. background-image:url('IMAGELINK');
  574.  
  575. background-size:cover;
  576. background-position:center;">
  577. </div>
  578. </div>
  579.  
  580. <!--- image one end --->
  581.  
  582. <!--- image two --->
  583.  
  584. <div class="col p-1">
  585. <div style="min-height:30px;
  586.  
  587. background-image:url('https://file.garden/YZgTmvtBp0P7hdNF/toyhouse/h/photo-1509114397022-ed747cca3f65');
  588.  
  589. background-size:cover;
  590. background-position:center;">
  591. </div>
  592. </div>
  593.  
  594. <!--- image two end --->
  595.  
  596. <!--- image three --->
  597.  
  598. <div class="col p-1">
  599. <div style="min-height:30px;
  600.  
  601. background-image:url('IMAGELINK');
  602.  
  603. background-size:cover;
  604. background-position:center;">
  605. </div>
  606. </div>
  607.  
  608. <!--- image three end --->
  609.  
  610. <!--- image four --->
  611.  
  612. <div class="col p-1">
  613. <div style="min-height:30px;
  614.  
  615. background-image:url('IMAGELINK');
  616.  
  617. background-size:cover;
  618. background-position:center;">
  619. </div>
  620. </div>
  621.  
  622. <!--- image four end --->
  623.  
  624. <!--- add more/delete above THIS line... 3-4 looks best though! ---->
  625.  
  626. </div>
  627. </div>
  628. </div>
  629.  
  630. <!---- CREDITS - DO NOT REMOVE PLS! ---->
  631.  
  632. <div class="card rounded-0 border-0 m-1 p-1" style="background:#5F2C2C;">
  633.  
  634. <div class="font-italic" style="font-size:10px; font-family:georgia;">
  635. <a href="https://toyhou.se/raggedinsomnia/" style="color:#fff"><i class="fa-light fa-code"></i> code by raggedinsomnia</a> <span class="text-muted">||</span> <a href="https://toyhou.se/togo/" style="color:#fff"><i class="fa-light fa-table-layout"></i> layout by togo</a>
  636. </div>
  637. </div>
  638.  
  639. </div>
  640.  
  641. <div class="col-md-6">
  642. <div class="card rounded-0 bg-faded m-1 p-1" style="height: 454px;">
  643.  
  644. <!---- image ---->
  645.  
  646. <div class="card rounded-0 p-1 h-100" style=" background-image: url(IMAGELINK);
  647.  
  648. background-size: cover; background-position: center; background-repeat: no-repeat;">
  649.  
  650. </div>
  651. </div>
  652. </div>
  653. </div>
  654.  
  655. </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!