API tools faq
paste
Advertisement
TomatoTeddy

F2U LIGHT

TomatoTeddy
Jul 30th, 2024 (edited)
239
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 17.37 KB | None | 0 0
raw download clone embed print report
  1. <!--==========================================
  2.  
  3. F2U LIGHT
  4.  
  5. CODE BY TOMATOTEDDY ON TOYHOUSE
  6.  
  7. PLEASE DO NOT REMOVE CREDIT OR STEAL!
  8.  
  9. Make sure to turn off WYSIWYG! It make break otherwise!
  10.  
  11. =========================
  12.  
  13. Colour Palette!
  14. To change the colour, select the colour and press Ctrl+F to replace it
  15.  
  16.  
  17. Accent ------------#535353
  18.  
  19. ==========================================-->
  20. <div class="container">
  21. <div id="carousel" class="carousel slide mx-auto p-1" data-ride="carousel">
  22. <div class="carousel-inner">
  23. <!----- first slide (group info) ----->
  24. <div class="carousel-item active">
  25. <div class="card border-0 text-center mb-2" style="background: url(https://via.placeholder.com/250x180); background-size:cover; background-position:center; min-height:100px; ">
  26. <div class="m-2 text-center">
  27. <p style="margin-top:10px;"><img src="IMG_HERE" style="filter:drop-shadow(2px 2px 2px #ffffff);"><br>
  28. </p>
  29. </div>
  30. </div>
  31. <div class="card col-12 p-4" style="background-color:white;min-height: 400px;color:#000000">
  32. <p class="text-center mb-3">
  33. <b>"Inser a quote here, something"</b>
  34. </p>
  35. <div class="col-12 mb-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ac felis congue, tempor risus sed, lobortis erat. Mauris imperdiet eu diam vitae hendrerit. Mauris volutpat, risus eu efficitur sagittis, elit mauris sagittis odio, vitae blandit nisl felis nec odio. Suspendisse potenti. Morbi consectetur purus orci, quis convallis ligula auctor in. Nam mattis pharetra luctus. Curabitur mi libero, tempor ac placerat a, dictum eu sapien. Fusce ultricies iaculis leo quis luctus. Sed justo ex, congue sed scelerisque eget, iaculis vulputate ligula. Duis orci eros, gravida eget ultricies laoreet, fringilla sit amet risus. Donec ornare enim eget libero venenatis faucibus. Proin elit dui, lacinia vel ex in, convallis mollis lectus. </div>
  36. <div class="card p-5 border-0 bg-transparent justify-content-center mb-3" style="background-image:
  37.  
  38. url(https://via.placeholder.com/250x180)
  39.  
  40. ; background-size: cover; background-position: to; border-radius: 2px;min-width:250px;min-height: 180px;"></div>
  41. </div>
  42. </div>
  43. <!----- second slide (first character left ver) ----->
  44. <div class="carousel-item">
  45. <div class="row no-gutters">
  46. <div class="col-md-3 col-12 p-1">
  47. <div class="col-12" div style="background-image:url(URL_HERE);
  48. background-size: cover; repeat:no-repeat; background-position: center; max-width: 350px;min-height: 500px;">
  49. </div>
  50. </div>
  51. <div class="col-md-9 col-12 p-1">
  52. <div class="card col-12" style="background-color:white;min-height: 500px;color:#000000">
  53. <div class="row m-4">
  54. <div class="row no-gutters">
  55. <div class="row no-gutters justify-content-center mb-3"><a href="CHARLINK" style="color: #535353;">
  56. <div class="pb-0" style="font-size:3rem;color:#535353;">NAME HERE </div>
  57. </a></div>
  58. <div class="row no-gutters mx-n2">
  59. <div class="col-md-6 px-3">
  60. <!--Name-->
  61. <div class="justify-content-between">
  62. <span class="text-uppercase" style="font-weight:600;letter-spacing:.5px;color: #535353;"> Name</span><span> content</span>
  63. </div>
  64. <hr style="border-top:1px solid #535353;">
  65. </div>
  66. <div class="col-md-6 px-3">
  67. <div class="justify-content-between">
  68. <span class="text-uppercase" style="font-weight:600;letter-spacing:.5px;color: #535353;"> Age</span><span> content</span>
  69. </div>
  70. <hr style="border-top:1px solid #535353;">
  71. </div>
  72. <div class="col-md-6 px-3">
  73. <div class="justify-content-between">
  74. <span class="text-uppercase" style="font-weight:600;letter-spacing:.5px;color: #535353;"> Gender</span><span> content</span>
  75. </div>
  76. <hr style="border-top:1px solid #535353;">
  77. </div>
  78. <div class="col-md-6 px-3">
  79. <div class="justify-content-between">
  80. <span class="text-uppercase" style="font-weight:600;letter-spacing:.5px;color: #535353;"> Birthday</span><span> content</span>
  81. </div>
  82. <hr style="border-top:1px solid #535353;">
  83. </div>
  84. <div class="col-md-6 px-3">
  85. <div class="justify-content-between">
  86. <span class="text-uppercase" style="font-weight:600;letter-spacing:.5px;color: #535353;"> Race</span><span> content</span>
  87. </div>
  88. <hr style="border-top:1px solid #535353;">
  89. </div>
  90. <div class="col-md-6 px-3">
  91. <div class="justify-content-between">
  92. <span class="text-uppercase" style="font-weight:600;letter-spacing:.5px;color: #535353;"> Height</span><span> content</span>
  93. </div>
  94. <hr style="border-top:1px solid #535353;">
  95. </div>
  96. </div>
  97. </div>
  98. <div class="col-md-9 col-12 p-1" style="color: #000000; font-weight: bold, font-size:20px;">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. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. 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. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</div>
  99. <div class="col-md-3 p-1"><img src="https://via.placeholder.com/500"></div>
  100. </div>
  101. </div>
  102. </div>
  103. </div>
  104. </div>
  105. <!----- third slide (second character right ver) ----->
  106. <div class="carousel-item">
  107. <div class="row no-gutters">
  108. <div class="col-md-9 col-12 p-1">
  109. <div class="card col-12" style="background-color:white;min-height: 500px;color:#000000">
  110. <div class="row m-4">
  111. <div class="row no-gutters">
  112. <div class="row no-gutters justify-content-center mb-3"><a href="CHARLINK" style="color: #535353;">
  113. <div class="pb-0" style="font-size:3rem;color:#535353;">NAME HERE </div>
  114. </a></div>
  115. <div class="row no-gutters mx-n2">
  116. <div class="col-md-6 px-3">
  117. <!--Name-->
  118. <div class="justify-content-between">
  119. <span class="text-uppercase" style="font-weight:600;letter-spacing:.5px;color: #535353;"> Name</span><span> content</span>
  120. </div>
  121. <hr style="border-top:1px solid #535353;">
  122. </div>
  123. <div class="col-md-6 px-3">
  124. <div class="justify-content-between">
  125. <span class="text-uppercase" style="font-weight:600;letter-spacing:.5px;color: #535353;"> Age</span><span> content</span>
  126. </div>
  127. <hr style="border-top:1px solid #535353;">
  128. </div>
  129. <div class="col-md-6 px-3">
  130. <div class="justify-content-between">
  131. <span class="text-uppercase" style="font-weight:600;letter-spacing:.5px;color: #535353;"> Gender</span><span> content</span>
  132. </div>
  133. <hr style="border-top:1px solid #535353;">
  134. </div>
  135. <div class="col-md-6 px-3">
  136. <div class="justify-content-between">
  137. <span class="text-uppercase" style="font-weight:600;letter-spacing:.5px;color: #535353;"> Birthday</span><span> content</span>
  138. </div>
  139. <hr style="border-top:1px solid #535353;">
  140. </div>
  141. <div class="col-md-6 px-3">
  142. <div class="justify-content-between">
  143. <span class="text-uppercase" style="font-weight:600;letter-spacing:.5px;color: #535353;"> Race</span><span> content</span>
  144. </div>
  145. <hr style="border-top:1px solid #535353;">
  146. </div>
  147. <div class="col-md-6 px-3">
  148. <div class="justify-content-between">
  149. <span class="text-uppercase" style="font-weight:600;letter-spacing:.5px;color: #535353;"> Height</span><span> content</span>
  150. </div>
  151. <hr style="border-top:1px solid #535353;">
  152. </div>
  153. </div>
  154. </div>
  155. <div class="col-md-9 col-12 p-1" style="color: #000000; font-weight: bold, font-size:20px;">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. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. 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. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</div>
  156. <div class="col-md-3 p-1"><img src="https://via.placeholder.com/500"></div>
  157. </div>
  158. </div>
  159. </div>
  160. <div class="col-3 p-1">
  161. <div class="col-12" div style="background-image:url(URL_HERE);
  162. background-size: cover; repeat:no-repeat; background-position: center; max-width: 350px;min-height: 500px;">
  163. </div>
  164. </div>
  165. </div>
  166. </div>
  167. <!----- fourth slide (third character left ver) ----->
  168. <div class="carousel-item">
  169. <div class="row no-gutters">
  170. <div class="col-md-3 col-12 p-1">
  171. <div class="col-12" div style="background-image:url(URL_HERE);
  172. background-size: cover; repeat:no-repeat; background-position: center; max-width: 350px;min-height: 500px;">
  173. </div>
  174. </div>
  175. <div class="col-md-9 col-12 p-1">
  176. <div class="card col-12" style="background-color:white;min-height: 500px;color:#000000">
  177. <div class="row m-4">
  178. <div class="row no-gutters">
  179. <div class="row no-gutters justify-content-center mb-3"><a href="CHARLINK" style="color: #535353;">
  180. <div class="pb-0" style="font-size:3rem;color:#535353;">NAME HERE </div>
  181. </a></div>
  182. <div class="row no-gutters mx-n2">
  183. <div class="col-md-6 px-3">
  184. <!--Name-->
  185. <div class="justify-content-between">
  186. <span class="text-uppercase" style="font-weight:600;letter-spacing:.5px;color: #535353;"> Name</span><span> content</span>
  187. </div>
  188. <hr style="border-top:1px solid #535353;">
  189. </div>
  190. <div class="col-md-6 px-3">
  191. <div class="justify-content-between">
  192. <span class="text-uppercase" style="font-weight:600;letter-spacing:.5px;color: #535353;"> Age</span><span> content</span>
  193. </div>
  194. <hr style="border-top:1px solid #535353;">
  195. </div>
  196. <div class="col-md-6 px-3">
  197. <div class="justify-content-between">
  198. <span class="text-uppercase" style="font-weight:600;letter-spacing:.5px;color: #535353;"> Gender</span><span> content</span>
  199. </div>
  200. <hr style="border-top:1px solid #535353;">
  201. </div>
  202. <div class="col-md-6 px-3">
  203. <div class="justify-content-between">
  204. <span class="text-uppercase" style="font-weight:600;letter-spacing:.5px;color: #535353;"> Birthday</span><span> content</span>
  205. </div>
  206. <hr style="border-top:1px solid #535353;">
  207. </div>
  208. <div class="col-md-6 px-3">
  209. <div class="justify-content-between">
  210. <span class="text-uppercase" style="font-weight:600;letter-spacing:.5px;color: #535353;"> Race</span><span> content</span>
  211. </div>
  212. <hr style="border-top:1px solid #535353;">
  213. </div>
  214. <div class="col-md-6 px-3">
  215. <div class="justify-content-between">
  216. <span class="text-uppercase" style="font-weight:600;letter-spacing:.5px;color: #535353;"> Height</span><span> content</span>
  217. </div>
  218. <hr style="border-top:1px solid #535353;">
  219. </div>
  220. </div>
  221. </div>
  222. <div class="col-md-9 col-12 p-1" style="color: #000000; font-weight: bold, font-size:20px;">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. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. 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. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</div>
  223. <div class="col-md-3 p-1"><img src="https://via.placeholder.com/500"></div>
  224. </div>
  225. </div>
  226. </div>
  227. </div>
  228. </div>
  229. <!----- fifth slide (fourth character right ver) ----->
  230. <div class="carousel-item">
  231. <div class="row no-gutters">
  232. <div class="col-md-9 col-12 p-1">
  233. <div class="card col-12" style="background-color:white;min-height: 500px;color:#000000">
  234. <div class="row m-4">
  235. <div class="row no-gutters">
  236. <div class="row no-gutters justify-content-center mb-3"><a href="CHARLINK" style="color: #535353;">
  237. <div class="pb-0" style="font-size:3rem;color:#535353;">NAME HERE </div>
  238. </a></div>
  239. <div class="row no-gutters mx-n2">
  240. <div class="col-md-6 px-3">
  241. <!--Name-->
  242. <div class="justify-content-between">
  243. <span class="text-uppercase" style="font-weight:600;letter-spacing:.5px;color: #535353;"> Name</span><span> content</span>
  244. </div>
  245. <hr style="border-top:1px solid #535353;">
  246. </div>
  247. <div class="col-md-6 px-3">
  248. <div class="justify-content-between">
  249. <span class="text-uppercase" style="font-weight:600;letter-spacing:.5px;color: #535353;"> Age</span><span> content</span>
  250. </div>
  251. <hr style="border-top:1px solid #535353;">
  252. </div>
  253. <div class="col-md-6 px-3">
  254. <div class="justify-content-between">
  255. <span class="text-uppercase" style="font-weight:600;letter-spacing:.5px;color: #535353;"> Gender</span><span> content</span>
  256. </div>
  257. <hr style="border-top:1px solid #535353;">
  258. </div>
  259. <div class="col-md-6 px-3">
  260. <div class="justify-content-between">
  261. <span class="text-uppercase" style="font-weight:600;letter-spacing:.5px;color: #535353;"> Birthday</span><span> content</span>
  262. </div>
  263. <hr style="border-top:1px solid #535353;">
  264. </div>
  265. <div class="col-md-6 px-3">
  266. <div class="justify-content-between">
  267. <span class="text-uppercase" style="font-weight:600;letter-spacing:.5px;color: #535353;"> Race</span><span> content</span>
  268. </div>
  269. <hr style="border-top:1px solid #535353;">
  270. </div>
  271. <div class="col-md-6 px-3">
  272. <div class="justify-content-between">
  273. <span class="text-uppercase" style="font-weight:600;letter-spacing:.5px;color: #535353;"> Height</span><span> content</span>
  274. </div>
  275. <hr style="border-top:1px solid #535353;">
  276. </div>
  277. </div>
  278. </div>
  279. <div class="col-md-9 col-12 p-1" style="color: #000000; font-weight: bold, font-size:20px;">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. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. 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. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</div>
  280. <div class="col-md-3 p-1"><img src="https://via.placeholder.com/500"></div>
  281. </div>
  282. </div>
  283. </div>
  284. <div class="col-3 p-1">
  285. <div class="col-12" div style="background-image:url(URL_HERE);
  286. background-size: cover; repeat:no-repeat; background-position: center; max-width: 350px;min-height: 500px;">
  287. </div>
  288. </div>
  289. </div>
  290. </div>
  291. <!----- buttons ----->
  292. <div class="col-12 mt-3">
  293. <a class="pull-left" href="#carousel" role="button" data-slide="prev">
  294. <span class="fas fa-arrow-left fa-2xl" aria-hidden="true"></span>
  295. <span class="sr-only">Previous</span>
  296. </a>
  297. <a class="pull-right" href="#carousel" role="button" data-slide="next">
  298. <span class="fas fa-arrow-right fa-2xl" aria-hidden="true"></span>
  299. <span class="sr-only">Next</span>
  300. </a>
  301. </div>
  302. <!-- credit! DO NOT REMOVE-->
  303. <p class="text-center">
  304. <a href="https://toyhou.se/Tomatoteddy"><i class="far fa-star" title="Code by TomatoTeddy"></i>
  305. </a>
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!