API tools faq
paste
Advertisement
OmelEttO

plastic blue

OmelEttO
Jul 9th, 2020 (edited)
881
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 18.90 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2. Plastic Blue
  3.  
  4. hello! thankz 4 using plastic blue!
  5. this code is used for characters with a lot of info!
  6. feel free to customize the colors!
  7.  
  8. follow the instructions pliz, in case you have a question or something, please let me know :)
  9.  
  10. Remember to turn off the WYSIWYG or the code wont work
  11. btw this is my first time making a customizable code so it might be a little messy.
  12.  
  13. some things to have in count:
  14. - is not mobile friendly and is not beginer friendly either ( i think so).
  15. - Do not Remove the credit at the end or claim as your own.
  16. - you can combine the code with other codes as long the owner is okay with it.
  17. -->
  18.  
  19.  
  20. <!--Background:
  21. can be an image or a solid color, if you are going to use an image,
  22. put ¨background:url(urlimagehere)¨instead of the color code.-->
  23.  
  24. <div style="position:absolute;top:0;bottom:0;left:0;background: #DFF4F6;fixed center;width:100%;z-index:-1;"></div>
  25. </a>
  26.  
  27. <!--Little images on the left side: DONT change the position of the images (right-left), or the code will not work-->
  28. <div class="row">
  29. <div class="col-3" align="right">
  30. <div style="width:150px;height:150px;border: 2px dashed #FFFFFF;background:url(https://images.unsplash.com/photo-1523633589114-88eaf4b4f1a8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80);background-size:cover;background-position:center;border-radius:5px;">
  31. </div>
  32. <div style="width:150px;height:150px;border: 2px dashed #FFF;background:url(https://images.unsplash.com/photo-1524865291454-215bdc75819e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80);background-size:cover;background-position:center;margin:20px 0px;border-radius:5px;">
  33. </div>
  34. <div style="width:150px;height:150px;border: 2px dashed #FFFFFF;background:url(https://images.unsplash.com/photo-1585854467604-cf2080ccef31?ixlib=rb-1.2.1&auto=format&fit=crop&w=752&q=80);background-size:cover;background-position:center;border-radius:5px;">
  35. </div>
  36. </div>
  37. <!--container:
  38. -Dont change the width, the top and the left, this will screw up the aliegnment with the images on the side, the same with the height.
  39. - in case you dont want a dashed border, change it to solid.
  40. -->
  41. <div class="container px-0 py-lg-5" style="position: top-center;top:-55px;left:-50px;max-width:700px;">
  42. <div class="card p-1 my-2" style="height:490px;background:#C7EBF0;border:2px dashed #FFF;">
  43.  
  44.  
  45. <!--navigation buttons-->
  46.  
  47. <div class="col-lg-8 p-1">
  48. <div class="card border-0 p-1" style="background:#FFFFFF;">
  49. <ul class="nav nav-bar rounded text-center p-1" style="font-size:1rem;border:2px dashed #000;"><li class="nav-item col p-1">
  50. <a class="nav-link p-1 rounded tooltipster" style="background:#BFD5E2;color:#FFF;" data-toggle="tab" href="#ONE" title="Basics" data-original-title="Start">
  51. <i class="fas fa-ice-cream"></i>
  52. </a>
  53. </li>
  54. <li class="nav-item col p-1">
  55. <a class="nav-link p-1 rounded tooltipster" style="background:#BFD5E2;color:#FFF;" data-toggle="tab" href="#TWO" title="Trivia" data-original-title="Fun Facts">
  56. <i class="fas fa-ice-cream"></i>
  57. </a>
  58. </li>
  59. <li class="nav-item col p-1">
  60. <a class="nav-link p-1 rounded tooltipster" style="background:#BFD5E2;color:#FFF;" data-toggle="tab" href="#FOUR" title="info" data-original-title="Stories">
  61. <i class="fas fa-ice-cream"></i>
  62. </a>
  63. </li>
  64. <li class="nav-item col p-1">
  65. <a class="nav-link p-1 rounded tooltipster" style="background:#BFD5E2;color:#FFF;" data-toggle="tab" href="#FIVE" title="characterss" data-original-title="Featured Characters">
  66. <i class="fas fa-ice-cream"></i>
  67. </a>
  68. </li>
  69. </ul>
  70. </div>
  71. <!-- card -->
  72. <div class="card p-3 bg-white mt-2 overflow-auto" style="border:2px dashed #000;height:300px;overflow:auto;">
  73. <div class="tab-content text-center">
  74. <!-- Tab one:basics -->
  75. <div class="tab-pane fade show active" id="ONE">
  76. <h1 class="text-black" style="letter-spacing:2px;font-size:.75rem;font-variant:small-caps;">put a quote in here</p>
  77. </p>
  78. <ul class="list-group list-group-flush">
  79. <li class="list-group-item d-flex justify-content-between" style="font-variant:small-caps;">
  80.  
  81. <i class="fas fa-heart"></i>name</li>
  82.  
  83. <li class="list-group-item d-flex justify-content-between" style="font-variant:small-caps;">
  84. <i class="fas fa-heart"></i>gender</li>
  85.  
  86. <li class="list-group-item d-flex justify-content-between" style="font-variant:small-caps;">
  87. <i class="fas fa-heart"></i>pronouns</a></li>
  88.  
  89. <li class="list-group-item d-flex justify-content-between" style="font-variant:small-caps;">
  90. <i class="fas fa-heart"></i>birthday</li>
  91.  
  92. <li class="list-group-item d-flex justify-content-between" style="font-variant:small-caps;">
  93. <i class="fas fa-heart"></i>species</li>
  94.  
  95. <li class="list-group-item d-flex justify-content-between" style="font-variant:small-caps;">
  96. <i class="fas fa-heart"></i>orientation</li>
  97.  
  98. <li class="list-group-item d-flex justify-content-between" style="font-variant:small-caps;">
  99. <i class="fas fa-heart"></i><a href="SONG LINK" style="color:#B2ABBF">song</a></li>
  100. </li>
  101. </ul></div>
  102.  
  103.  
  104. <!--tab two: trivia-->
  105.  
  106.  
  107.  
  108. <div class="tab-pane fade" id="TWO">
  109. <div class="row">
  110. <div class="col-sm-6 mb-2">
  111. <h4 style="letter-spacing:2px;font-size:.7rem;color:#000;font-variant:small-caps;">Likes</p>
  112. </h4>
  113. <ul class="fa-ul text-left">
  114. <li class="mb-2">put</li>
  115. </li>
  116. <li class="mb-2">some</li>
  117. </li>
  118. <li class="mb-2">info</li>
  119. </li>
  120. </ul></div>
  121. <div class="col-sm-6 mb-2">
  122. <h4 style="letter-spacing:2px;font-size:.7rem;color:#000;font-variant:small-caps;">Dislikes</p>
  123. </h4>
  124. <ul class="fa-ul text-left">
  125. <li class="mb-2">in</li>
  126. </li>
  127. <li class="mb-2">here</li>
  128. </li>
  129. <li class="mb-2">as well</li>
  130. </li>
  131. </ul></div>
  132. <!-- stats -->
  133.  
  134. <div class="col-sm-12">
  135. <div class="card rounded-0 mb-1" style="border-style:dashed none none none;"></div>
  136. </div>
  137. <div class="col-sm-12">
  138. <div class="pt-4 px-4" style="background:none; height: 530px; overflow:auto; padding-bottom:8px;">
  139.  
  140. <div class="row no-gutters mb-3">
  141. <div class="col-auto">
  142. <b style="letter-spacing: 1px;font-variant:small-caps;">Kindness</b></div>
  143. </span>
  144. <div class="col px-1 pb-1">
  145. <div class="h-100" style="border-bottom:1px dotted #D9D9D9;"></div>
  146. </div>
  147. <div class="col-auto">
  148. <i class="fas fa-star fa-fw" />
  149. <i class="fas fa-star fa-fw" />
  150. <i class="fas fa-star fa-fw" />
  151. <i class="fas fa-star fa-fw" />
  152. <i class="fas fa-star fa-fw" />
  153. </div>
  154. </div>
  155.  
  156. <div class="row no-gutters mb-3">
  157. <div class="col-auto">
  158. <b style="letter-spacing: 1px;font-variant:small-caps;">Patience</b></div>
  159. <div class="col px-1 pb-1">
  160. <div class="h-100" style="border-bottom:1px dotted #D9D9D9;"></div>
  161. </div>
  162. <div class="col-auto">
  163. <i class="fas fa-star fa-fw" />
  164. <i class="fas fa-star fa-fw" />
  165. <i class="fas fa-star fa-fw" />
  166. <i class="fas fa-star fa-fw" />
  167. <i class="far fa-star fa-fw" />
  168. </div>
  169. </div>
  170.  
  171. <div class="row no-gutters mb-3">
  172. <div class="col-auto">
  173. <b style="letter-spacing: 1px;font-variant:small-caps;">Courage</b></div>
  174. <div class="col px-1 pb-1">
  175. <div class="h-100" style="border-bottom:1px dotted #D9D9D9;"></div>
  176. </div>
  177. <div class="col-auto">
  178. <i class="fas fa-star fa-fw" />
  179. <i class="fas fa-star fa-fw" />
  180. <i class="far fa-star fa-fw" />
  181. <i class="far fa-star fa-fw" />
  182. <i class="far fa-star fa-fw" />
  183. </div>
  184. </div>
  185.  
  186. <div class="row no-gutters mb-3">
  187. <div class="col-auto">
  188. <b style="letter-spacing: 1px;font-variant:small-caps;">Integrity</b></div>
  189. <div class="col px-1 pb-1">
  190. <div class="h-100" style="border-bottom:1px dotted #D9D9D9;"></div>
  191. </div>
  192. <div class="col-auto">
  193. <i class="fas fa-star fa-fw" />
  194. <i class="fas fa-star fa-fw" />
  195. <i class="fas fa-star fa-fw" />
  196. <i class="fas fa-star fa-fw" />
  197. <i class="fas fa-star fa-fw" />
  198. </div>
  199. </div>
  200.  
  201. <div class="row no-gutters mb-3">
  202. <div class="col-auto">
  203. <b style="letter-spacing: 1px;font-variant:small-caps;">Intellect</b></div>
  204. <div class="col px-1 pb-1">
  205. <div class="h-100" style="border-bottom:1px dotted #D9D9D9;"></div>
  206. </div>
  207. <div class="col-auto">
  208. <i class="fas fa-star fa-fw" />
  209. <i class="fas fa-star fa-fw" />
  210. <i class="fas fa-star fa-fw" />
  211. <i class="far fa-star fa-fw" />
  212. <i class="far fa-star fa-fw" />
  213. </div>
  214. </div>
  215.  
  216. <div class="row no-gutters mb-3">
  217. <div class="col-auto">
  218. <b style="letter-spacing: 1px;font-variant:small-caps;">Charisma</b></div>
  219. <div class="col px-1 pb-1">
  220. <div class="h-100" style="border-bottom:1px dotted #D9D9D9;"></div>
  221. </div>
  222. <div class="col-auto">
  223. <i class="fas fa-star fa-fw" />
  224. <i class="fas fa-star fa-fw" />
  225. <i class="fas fa-star fa-fw" />
  226. <i class="fas fa-star fa-fw" />
  227. <i class="far fa-star fa-fw" />
  228. </div>
  229. </div>
  230.  
  231. <div class="row no-gutters mb-3">
  232. <div class="col-auto">
  233. <b style="letter-spacing: 1px;font-variant:small-caps;">Confidence</b></div>
  234. <div class="col px-1 pb-1">
  235. <div class="h-100" style="border-bottom:1px dotted #D9D9D9;"></div>
  236. </div>
  237. <div class="col-auto">
  238. <i class="fas fa-star fa-fw" />
  239. <i class="fas fa-star fa-fw" />
  240. <i class="far fa-star fa-fw" />
  241. <i class="far fa-star fa-fw" />
  242. <i class="far fa-star fa-fw" />
  243. </div>
  244. </div>
  245.  
  246. <!-- trivia: keep the info short! max: 2 or 3 lines-->
  247. <h3><strong><i class="fas fa-ice-cream"></i> TRIVIA</strong></h3>
  248. <br>
  249. <ul style="text-align:left;font-variant:small-caps;">
  250. <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent finibus purus ut diam fringilla varius. Etiam sit amet aliquam massa.</li>
  251. </span>
  252. <li>Sed sagittis imperdiet lectus. Suspendisse potenti. Donec eleifend rhoncus sem id rhoncus.</li>
  253. </span>
  254. <li>Vestibulum ac orci efficitur, dapibus enim eget, pellentesque nibh. Suspendisse potenti.</li>
  255. </span>
  256. </ul>
  257. </div>
  258. </div>
  259. </div>
  260. </div>
  261. <!--tab four: info. Add as much information as u want!! feel free to change the icons as always-->
  262. <div class="tab-pane fade" id="FOUR">
  263. <h4 class="text-dan text-center" style="letter-spacing:2px;font-size:.8rem;font-variant:small-caps;font-color:#BAA7B0;">
  264. STORY
  265. </h4>
  266. <div class="card rounded-0 mb-1" style="border-style:solid none none none;"></div>
  267. <h1 class="text-black" style="letter-spacing:2px;font-size:.75rem;font-variant:small-caps;">another quote in here</p>
  268. </p>
  269. <div class="one-story">
  270. <h5 class="text-left m-0" style="letter-spacing:2px;font-size:.7rem;font-variant:small-caps;">
  271. <i class="fas fa-heart"></i> . BACKGROUND
  272. </h5>
  273. <p class="mb-3 text-justify"style="font-variant:small-caps;">
  274. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent finibus purus ut diam fringilla varius. Etiam sit amet aliquam massa. In vel augue volutpat, laoreet nibh a, auctor nulla. Sed sagittis imperdiet lectus. Suspendisse potenti. Donec eleifend rhoncus sem id rhoncus. Vestibulum ac orci efficitur, dapibus enim eget, pellentesque nibh. Suspendisse potenti.
  275. </p>
  276. </div>
  277. <div class="one-story">
  278. <h5 class="text-left m-0" style="letter-spacing:2px;font-size:.7rem;font-variant:small-caps;">
  279. <i class="fas fa-heart"></i> . CURRENT EVENTS
  280. </h5>
  281. <p class="mb-3 text-justify" style="font-variant:small-caps;">
  282. Aliquam id arcu vitae erat tincidunt semper. Suspendisse ligula felis, ultricies mollis tristique venenatis, volutpat ut ex. Vestibulum lobortis augue quam, quis ornare turpis porta at. Donec sit amet venenatis turpis. Nulla facilisi.
  283. </p>
  284. </div>
  285. <div class="one-story">
  286. <h5 class="text-left m-0" style="letter-spacing:2px;font-size:.7rem;font-variant:small-caps;">
  287. <i class="fas fa-heart"></i> . SOmething else i dunno
  288. </h5>
  289. <p class="mb-3 text-justify" style="font-variant:small-caps;">
  290. Nullam porta urna ac nisi commodo, nec rutrum velit eleifend. Donec sed luctus nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus.
  291. </p>
  292. </div>
  293. </div>
  294. <!-- Tab five: characters. Feel free to add more -->
  295. <div class="tab-pane fade" id="FIVE">
  296. <h4 class="text-center text-primary" style="letter-spacing:2px;font-variant:small-caps;font-color:#BAA7B0">
  297. relantionships
  298. </h4>
  299. <div class="card rounded-0 mb-3" style="border-style:dashed none none none;"></div>
  300. <div class="row no-gutters">
  301. <div class="col-lg-4 p-1 mx-auto">
  302. <div class="mx-auto text-center">
  303. <a class="d-inline-block card card-inverse card-primary text-white text-center mx-auto px-1" style="letter-spacing:1px;border-radius:10px;font-size:10px;font-weight:600;font-variant:small-caps;" href="#CHARACTERLINK">
  304. name
  305. </a>
  306. </div>
  307. <div class="card bg-faded rounded-circle p-1 mx-auto" style="height:90px;max-width:90px;">
  308. <div class="card rounded-circle border-0 h-100 w-100" style="background:url(https://images.unsplash.com/photo-1499781749692-e8274262c718?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=427&q=80);background-size:cover;background-position:center;"></div>
  309. </div>
  310. <div class="mx-auto text-center">
  311. <div class="d-inline-block card bg-faded text-muted text-center mx-auto px-1" style="letter-spacing:1px;border-radius:10px;font-size:10px;font-weight:600;font-variant:small-caps;">
  312. relantionship
  313. </div>
  314. </div>
  315. </div>
  316. <div class="col-lg-4 p-1 mx-auto">
  317. <div class="mx-auto text-center">
  318. <a class="d-inline-block card card-inverse card-primary text-white text-center mx-auto px-1" style="letter-spacing:1px;border-radius:10px;font-size:10px;font-weight:600;" href="#">
  319. name
  320. </a>
  321. </div>
  322. <div class="card bg-faded rounded-circle p-1 mx-auto" style="height:90px;max-width:90px;">
  323. <div class="card rounded-circle border-0 h-100 w-100" style="background:url(https://images.unsplash.com/photo-1499781749692-e8274262c718?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=427&q=80);background-size:cover;background-position:center;"></div>
  324. </div>
  325. <div class="mx-auto text-center">
  326. <div class="d-inline-block card bg-faded text-muted text-center mx-auto px-1" style="letter-spacing:1px;border-radius:10px;font-size:10px;font-weight:600;font-variant:small-caps;">
  327. relantionship
  328. </div>
  329. </div>
  330. </div>
  331. <div class="col-lg-4 p-1 mx-auto">
  332. <div class="mx-auto text-center">
  333. <a class="d-inline-block card card-inverse card-primary text-white text-center mx-auto px-1" style="letter-spacing:1px;border-radius:10px;font-size:10px;font-weight:600;" href="#">
  334. name
  335. </a>
  336. </div>
  337. <div class="card bg-faded rounded-circle p-1 mx-auto" style="height:90px;max-width:90px;">
  338. <div class="card rounded-circle border-0 h-100 w-100" style="background:url(https://images.unsplash.com/photo-1499781749692-e8274262c718?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=427&q=80);background-size:cover;background-position:center;"></div>
  339. </div>
  340. <div class="mx-auto text-center">
  341. <div class="d-inline-block card bg-faded text-muted text-center mx-auto px-1" style="letter-spacing:1px;border-radius:10px;font-size:10px;font-weight:600;font-variant:small-caps;">
  342. relantionship
  343. </div>
  344. </div>
  345. </div>
  346. </div>
  347. </div>
  348. </div>
  349. </div>
  350. <div>
  351. <!-- bottom image: I recommend using a large image for this, since if the image is very small it will not reach to fill the spaces. Also, dont change the width and height -->
  352. <div class="col-lg-8 p-1">
  353. <div class="card border-0 p-1" style="background:#FFFFFF; width:446px;height:100px;">
  354. <div class="card h-100 p-1" style="background:#fff url(https://images.unsplash.com/photo-1522441815192-d9f04eb0615c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1482&q=80) no-repeat fixed center;background-size: cover;width:437px;height:500px;border:2px dashed #000;">
  355. </div>
  356. </div>
  357. <!-- Side image: use any size, it will eventually resize,Like the image from the bottom, I recommend not to change the width, height and what is the top, right, etc.-->
  358. <img src="https://images.unsplash.com/photo-1530533718754-001d2668365a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80" style="float:right;position:relative;width:215px;height:468px;right:-380px;top:-470px;z-index:1;border:2px dashed #000;">
  359.  
  360.  
  361. </div>
  362. </div>
  363. </div>
  364. </div>
  365. <span class="text- pull-left" style="color:#FFF;letter-spacing:0px;">
  366. <a class="fas fa-crow tooltipster" title="code by corsalus"></i></span>
  367. </div>
  368. </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!