API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Nov 24th, 2019
529
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 23.26 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <body>
  3. <div class="row">
  4. <div class="container col-sm-9">
  5.  
  6. <div>
  7. <blockquote class="blockquote">
  8. <p><em>"Quote"</em></p>
  9. </div>
  10.  
  11. <ul class="nav col">
  12. <li class="nav-item col"><a style="max-width:200px" class="btn btn-outline-success btn-block active" data-toggle="tab" href="#About">About</a></li>
  13. <li class="nav-item col"><a style="max-width:200px" class="btn btn-outline-success btn-block" data-toggle="tab" href="#Details">Details</a></li>
  14. <li class="nav-item col"><a style="max-width:200px" class="btn btn-outline-success btn-block" data-toggle="tab" href="#Biography">Biography</a></li>
  15. <li class="nav-item col"><a style="max-width:200px" class="btn btn-outline-success btn-block" data-toggle="tab" href="#Relationships">Relationships</a></li>
  16. </ul>
  17. <div class="tab-content">
  18.  
  19. <div id="About" class="tab-pane fade active show"><br>
  20. <div class="card card-block bg-faded">
  21.  
  22. <div class="card card-block mb-2">
  23. <h3 class="display-4">About</h3>
  24. <p align="justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. Integer interdum urna ac dui sollicitudin sollicitudin. In feugiat posuere nulla, eget lobortis ante. Aliquam magna libero, dictum sit amet scelerisque ac, scelerisque tincidunt magna. Nulla et consectetur diam. Aliquam ipsum mi, tristique sed vestibulum ac, aliquet eget magna. Aliquam quis fringilla erat. Morbi sollicitudin id lorem eu efficitur. Mauris varius id magna vitae ullamcorper.</p>
  25. <h3 class="text-right display-4">Appearance</h3>
  26. <p align="justify" class="text-right">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. Integer interdum urna ac dui sollicitudin sollicitudin. In feugiat posuere nulla, eget lobortis ante. Aliquam magna libero, dictum sit amet scelerisque ac, scelerisque tincidunt magna. Nulla et consectetur diam. </p>
  27. </div>
  28.  
  29. <div class=row>
  30. <div class="card col-5 card-block mx-3">
  31. <h2 class="text-center">Trivia</h2>
  32. <ul class="list-unstyled">
  33. <li><i class="fa fa-star-o"></i>&nbsp;Fact</li>
  34. <li><i class="fa fa-star-o"></i>&nbsp;Fact</li>
  35. <li><i class="fa fa-star-o"></i>&nbsp;Fact</li>
  36. <li><i class="fa fa-star-o"></i>&nbsp;Fact</li>
  37. <li><i class="fa fa-star-o"></i>&nbsp;Fact</li>
  38. </ul>
  39. </div>
  40.  
  41. <div class="card col card-block">
  42. <h2 class="text-center">Likes</h2>
  43. <ul class="list-unstyled">
  44. <li><i class="fa fa-plus-circle"></i>&nbsp;Like</li>
  45. <li><i class="fa fa-plus-circle"></i>&nbsp;Like</li>
  46. <li><i class="fa fa-plus-circle"></i>&nbsp;Like</li>
  47. <li><i class="fa fa-plus-circle"></i>&nbsp;Like</li>
  48. <li><i class="fa fa-plus-circle"></i>&nbsp;Like</li>
  49. </ul>
  50. </div>
  51.  
  52. <div class="card col card-block mx-3">
  53. <h2 class="text-center">Dislikes</h2>
  54. <ul class="list-unstyled">
  55. <li><i class="fa fa-minus-circle"></i>&nbsp;Dislike</li>
  56. <li><i class="fa fa-minus-circle"></i>&nbsp;Dislike</li>
  57. <li><i class="fa fa-minus-circle"></i>&nbsp;Dislike</li>
  58. <li><i class="fa fa-minus-circle"></i>&nbsp;Dislike</li>
  59. <li><i class="fa fa-minus-circle"></i>&nbsp;Dislike</li>
  60. </ul>
  61. </div>
  62. </div>
  63.  
  64. </div>
  65. </div>
  66.  
  67. <div id="Details" class="tab-pane fade"><br>
  68. <div class="card card-block bg-faded">
  69. <div class="row">
  70.  
  71. <div class="card card-block col mx-3">
  72.  
  73. <div class="row pb-3">
  74. <div class="col-4">
  75. <b>Name</b>
  76. <p>?</p>
  77. </div>
  78. <div class="col-4">
  79. <b>Gender</b>
  80. <p>?</p>
  81. </div>
  82. <div class="col-4">
  83. <b>World</b>
  84. <p>Warrior Cats</p>
  85. </div>
  86. </div>
  87.  
  88. <div class="row pb-3">
  89. <div class="col-4">
  90. <b>Age<b>
  91. <p>?</p>
  92. </div>
  93. <div class="col-4">
  94. <b>Demeanor</b>
  95. <p>?</p>
  96. </div>
  97. <div class="col-4">
  98. <b>Sexuality</b>
  99. <p>?</p>
  100. </div>
  101. </div>
  102.  
  103. <div class="row pb-3">
  104. <div class="col-4">
  105. <b>Affiliation<b>
  106. <p>?</p>
  107. </div>
  108. <div class="col-4">
  109. <b>Position</b>
  110. <p>?</p>
  111. </div>
  112. <div class="col-4">
  113. <b>Born</b>
  114. <p>?</p>
  115. </div>
  116. </div>
  117.  
  118. <div class="bg-success mb-2" style="height:1px"></div>
  119.  
  120. <div class="row pb-3">
  121. <div class="col-4">
  122. <b>Species<b>
  123. <p>?</p>
  124. </div>
  125. <div class="col-4">
  126. <b>Breed</b>
  127. <p>?</p>
  128. </div>
  129. <div class="col-4">
  130. <b>Pattern</b>
  131. <p>?</p>
  132. </div>
  133. </div>
  134.  
  135. <div class="row pb-3">
  136. <div class="col-4">
  137. <b>Build<b>
  138. <p>?</p>
  139. </div>
  140. <div class="col-4">
  141. <b>Height</b>
  142. <p>?</p>
  143. </div>
  144. <div class="col-4">
  145. <b>Fur</b>
  146. <p>?</p>
  147. </div>
  148. </div>
  149.  
  150. <div class="row pb-3">
  151. <div class="col-4">
  152. <b>Eyes<b>
  153. <p>?</p>
  154. </div>
  155.  
  156. <div class="col-4">
  157. <b>Scars</b>
  158. <p>?</p>
  159. </div>
  160.  
  161. <div class="col-4">
  162. <b>Status</b>
  163. <p>?</p>
  164. </div>
  165. </div>
  166.  
  167. </div>
  168.  
  169. <div class="card card-block col-4 mr-3">
  170. <h3 class="display-4 text-center mb-4">Attributes</h3>
  171.  
  172. <div class="row mb-3">
  173. <div class="col-4">
  174. <p>Strength</p>
  175. </div>
  176. <div class="container col-8 mt-1">
  177. <div class="progress"><div class="progress-bar bg-success" style="width:50%"></div></div>
  178. </div>
  179. </div>
  180.  
  181. <div class="row mb-3">
  182. <div class="col-4">
  183. <p>Agility</p>
  184. </div>
  185. <div class="container col-8 mt-1">
  186. <div class="progress"><div class="progress-bar bg-success" style="width:50%"></div></div>
  187. </div>
  188. </div>
  189.  
  190. <div class="row mb-3">
  191. <div class="col-4">
  192. <p>Spirit</p>
  193. </div>
  194. <div class="container col-8 mt-1">
  195. <div class="progress"><div class="progress-bar bg-success" style="width:50%"></div></div>
  196. </div>
  197. </div>
  198.  
  199. <div class="row mb-3">
  200. <div class="col-4">
  201. <p>Dexterity</p>
  202. </div>
  203. <div class="container col-8 mt-1">
  204. <div class="progress"><div class="progress-bar bg-success" style="width:50%"></div></div>
  205. </div>
  206. </div>
  207.  
  208. <div class="row mb-3">
  209. <div class="col-4">
  210. <p>Stamina</p>
  211. </div>
  212. <div class="container col-8 mt-1">
  213. <div class="progress"><div class="progress-bar bg-success" style="width:50%"></div></div>
  214. </div>
  215. </div>
  216.  
  217. <div class="row mb-3">
  218. <div class="col-4">
  219. <p>Charisma</p>
  220. </div>
  221. <div class="container col-8 mt-1">
  222. <div class="progress"><div class="progress-bar bg-success" style="width:50%"></div></div>
  223. </div>
  224. </div>
  225.  
  226. <div class="row mb-3">
  227. <div class="col-4">
  228. <p>Intelligence</p>
  229. </div>
  230. <div class="container col-8 mt-1">
  231. <div class="progress"><div class="progress-bar bg-success" style="width:50%"></div></div>
  232. </div>
  233. </div>
  234.  
  235. <div class="row">
  236. <div class="col-4">
  237. <p>Resourcefulness</p>
  238. </div>
  239. <div class="container col-8 mt-1">
  240. <div class="progress"><div class="progress-bar bg-success" style="width:50%"></div></div>
  241. </div>
  242. </div>
  243. </div>
  244.  
  245. </div>
  246.  
  247. <div class="row">
  248. <div class="card card-block mx-3 mt-3">
  249. <a href="#RefSheet" data-toggle="collapse" class="btn btn-block btn-lg btn-outline-success p-2">Reference Sheet (if needed)</a>
  250. <div id="RefSheet" class="collapse">
  251. <img src="insert img-url here" class="b-block mx-auto mt-2">
  252. </div>
  253. </div>
  254. </div>
  255.  
  256. </div>
  257. </div>
  258.  
  259. <div id="Biography" class="tab-pane fade"><br>
  260. <div class="card card-block bg-faded">
  261.  
  262. <div class="card card-block">
  263. <h3 class="display-4">Early Life</h3>
  264. <p align="justify">This paragraph describes the character's upbringing and childhood...<br>
  265. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. Integer interdum urna ac dui sollicitudin sollicitudin. In feugiat posuere nulla, eget lobortis ante. Aliquam magna libero, dictum sit amet scelerisque ac, scelerisque tincidunt magna. Nulla et consectetur diam. Aliquam ipsum mi, tristique sed vestibulum ac, aliquet eget magna. Aliquam quis fringilla erat. Morbi sollicitudin id lorem eu efficitur. Mauris varius id magna vitae ullamcorper.</p>
  266. <h3 class="display-4 text-right">Tba (individual mark)</h3>
  267. <p align="justify" class="text-right">This paragraph marks a special event that greatly influenced the character's story...<br>
  268. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. Integer interdum urna ac dui sollicitudin sollicitudin. In feugiat posuere nulla, eget lobortis ante. Aliquam magna libero, dictum sit amet scelerisque ac, scelerisque tincidunt magna. Nulla et consectetur diam. Aliquam ipsum mi, tristique sed vestibulum ac, aliquet eget magna. Aliquam quis fringilla erat. Morbi sollicitudin id lorem eu efficitur. Mauris varius id magna vitae ullamcorper.</p>
  269. <h3 class="display-4">To be continued...</h3>
  270. <p align="justify">This paragraph describes how the character's story continues and, if the case, comes to an end...<br>
  271. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. Integer interdum urna ac dui sollicitudin sollicitudin. In feugiat posuere nulla, eget lobortis ante. Aliquam magna libero, dictum sit amet scelerisque ac, scelerisque tincidunt magna. Nulla et consectetur diam. Aliquam ipsum mi, tristique sed vestibulum ac, aliquet eget magna. Aliquam quis fringilla erat. Morbi sollicitudin id lorem eu efficitur. Mauris varius id magna vitae ullamcorper.</p>
  272. </div>
  273.  
  274. </div>
  275. </div>
  276.  
  277. <div id="Relationships" class="tab-pane fade"><br>
  278. <div class="card card-block bg-faded">
  279. <div class="row">
  280. <div class="card card-block col-4 ml-3">
  281.  
  282. <h3 class="display-4">Kin</h3>
  283. <div class="bg-success mb-2" style="height:2px"></div>
  284.  
  285. <div class="row mb-3">
  286. <div class="col text-right">
  287. <b>Grandfather (f)</b>
  288. </div>
  289. <div class="col">
  290. <p>Granddaddy</p>
  291. </div>
  292. </div>
  293. <div class="row mb-3">
  294. <div class="col text-right">
  295. <b>Grandmother (f)</b>
  296. </div>
  297. <div class="col">
  298. <p>Grandmommy</p>
  299. </div>
  300. </div>
  301. <div class="row mb-3">
  302. <div class="col text-right">
  303. <b>Grandfather (m)</b>
  304. </div>
  305. <div class="col">
  306. <p>Granddaddy</p>
  307. </div>
  308. </div>
  309. <div class="row mb-3">
  310. <div class="col text-right">
  311. <b>Grandmother (m)</b>
  312. </div>
  313. <div class="col">
  314. <p>Grandmommy</p>
  315. </div>
  316. </div>
  317.  
  318. <div class="bg-success mb-2" style="height:1px"></div>
  319.  
  320. <div class="row mb-3">
  321. <div class="col text-right">
  322. <b>Father</b>
  323. </div>
  324. <div class="col">
  325. <p>Daddy</p>
  326. </div>
  327. </div>
  328. <div class="row mb-3">
  329. <div class="col text-right">
  330. <b>Mother</b>
  331. </div>
  332. <div class="col">
  333. <p>Mommy</p>
  334. </div>
  335. </div>
  336. <div class="row mb-3">
  337. <div class="col text-right">
  338. <b>Brother</b>
  339. </div>
  340. <div class="col">
  341. <p>Bro</p>
  342. </div>
  343. </div>
  344. <div class="row mb-3">
  345. <div class="col text-right">
  346. <b>Sister</b>
  347. </div>
  348. <div class="col">
  349. <p>Sis</p>
  350. </div>
  351. </div>
  352.  
  353. <div class="bg-success mb-2" style="height:1px"></div>
  354.  
  355. <div class="row mb-3">
  356. <div class="col text-right">
  357. <b>Mate</b>
  358. </div>
  359. <div class="col">
  360. <p>Love</p>
  361. </div>
  362. </div>
  363.  
  364. <div class="bg-success mb-2" style="height:1px"></div>
  365.  
  366. <div class="row mb-3">
  367. <div class="col text-right">
  368. <b>Son</b>
  369. </div>
  370. <div class="col">
  371. <p>Babyboy</p>
  372. </div>
  373. </div>
  374. <div class="row mb-3">
  375. <div class="col text-right">
  376. <b>Daughter</b>
  377. </div>
  378. <div class="col">
  379. <p>Babygirl</p>
  380. </div>
  381. </div>
  382. <div class="row mb-3">
  383. <div class="col text-right">
  384. <b>Nephew</b>
  385. </div>
  386. <div class="col">
  387. <p>Babynephew</p>
  388. </div>
  389. </div>
  390. <div class="row mb-3">
  391. <div class="col text-right">
  392. <b>Niece</b>
  393. </div>
  394. <div class="col">
  395. <p>Babyniece</p>
  396. </div>
  397. </div>
  398.  
  399. </div>
  400.  
  401. <div class="card card-block col mx-3">
  402. <h2 class="display-4 text-center">Relationships</h3>
  403.  
  404. <h1>Name1 <small>relationship</small></h2>
  405.  
  406. <div class="bg-success mb-2" style="height:1px; width:70%"></div>
  407. <div class="row">
  408. <div class="container col-3">
  409. <img src="https://file.toyhou.se/images/12521749_wI6BhKOU8xqBODq.png?1551785411" class="rounded-circle">
  410. </div>
  411. <div class="container col-9">
  412. <p align="justify" class="mb-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. Integer interdum urna ac dui sollicitudin sollicitudin. In feugiat posuere nulla, eget lobortis ante. Aliquam magna libero, dictum sit amet scelerisque ac, scelerisque tincidunt magna. Nulla et consectetur diam. Aliquam ipsum mi, tristique sed vestibulum ac, aliquet eget magna. Aliquam quis fringilla erat. Morbi sollicitudin id lorem eu efficitur. Mauris varius id magna vitae ullamcorper.</p>
  413. </div>
  414. </div>
  415.  
  416. <h1 class="text-right"><small>relationship</small> Name2</h2>
  417. <div class="bg-success mb-2 align-self-end" style="height:1px; width:70%"></div>
  418. <div class="row">
  419. <div class="container col-9">
  420. <p align="justify" class="text-right mb-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. Integer interdum urna ac dui sollicitudin sollicitudin. In feugiat posuere nulla, eget lobortis ante. Aliquam magna libero, dictum sit amet scelerisque ac, scelerisque tincidunt magna. Nulla et consectetur diam. Aliquam ipsum mi, tristique sed vestibulum ac, aliquet eget magna. Aliquam quis fringilla erat. Morbi sollicitudin id lorem eu efficitur. Mauris varius id magna vitae ullamcorper.</p>
  421. </div>
  422. <div class="container col-3">
  423. <img src="https://file.toyhou.se/images/12521749_wI6BhKOU8xqBODq.png?1551785411" class="rounded-circle">
  424. </div>
  425. </div>
  426.  
  427. <h1>Name3 <small>relationship</small></h2>
  428.  
  429. <div class="bg-success mb-2" style="height:1px; width:70%"></div>
  430. <div class="row">
  431. <div class="container col-3">
  432. <img src="https://file.toyhou.se/images/12521749_wI6BhKOU8xqBODq.png?1551785411" class="rounded-circle">
  433. </div>
  434. <div class="container col-9">
  435. <p align="justify" class="mb-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. Integer interdum urna ac dui sollicitudin sollicitudin. In feugiat posuere nulla, eget lobortis ante. Aliquam magna libero, dictum sit amet scelerisque ac, scelerisque tincidunt magna. Nulla et consectetur diam. Aliquam ipsum mi, tristique sed vestibulum ac, aliquet eget magna. Aliquam quis fringilla erat. Morbi sollicitudin id lorem eu efficitur. Mauris varius id magna vitae ullamcorper.</p>
  436. </div>
  437. </div>
  438.  
  439. </div>
  440.  
  441. </div>
  442.  
  443. </div>
  444. </div>
  445.  
  446. </div>
  447. </div>
  448. <div class="col-sm-3 mr-4" style="max-width:350px">
  449. <table class="table">
  450. <thead>
  451. <tr>
  452. <th colspan="2" class="col text-center" style="padding:5px; font-size:140%">Character Name</th>
  453. </tr>
  454. </thead>
  455. <tr>
  456. <td class="col" colspan="2"><img src="https://file.toyhou.se/images/12521749_wI6BhKOU8xqBODq.png?1551785411"></td>
  457. </tr>
  458. <tr>
  459. <th class="text-center" style="padding:5px; font-size:110%" colspan="2">Information</th>
  460. </tr>
  461. <tr>
  462. <td class="text-right"><b>Gender</b></td>
  463. <td class="text-left">???</td>
  464. </tr>
  465. <tr>
  466. <td class="text-right"><b>Rank</b></td>
  467. <td class="text-left">???</td>
  468. </tr>
  469. <tr>
  470. <td class="text-right"><b>Affiliation</b></td>
  471. <td class="text-left">???</td>
  472. </tr>
  473. <tr>
  474. <th class="text-center" style="padding:5px; font-size:110%" colspan="2">Name</th>
  475. </tr>
  476. <tr>
  477. <td class="text-right"><b>Kit</b></td>
  478. <td class="text-left">???</td>
  479. </tr>
  480. <tr>
  481. <td class="text-right"><b>Apprentice</b></td>
  482. <td class="text-left">???</td>
  483. </tr>
  484. <tr>
  485. <td class="text-right"><b>Warrior</b></td>
  486. <td class="text-left">???</td>
  487. </tr>
  488. <tr>
  489. <th class="text-center" style="padding:5px; font-size:110%" colspan="2">Education</th>
  490. </tr>
  491. <tr>
  492. <td class="text-right"><b>Mentor</b></td>
  493. <td class="text-left">???</td>
  494. </tr>
  495. <tr>
  496. <td class="text-right"><b>Apprentices</b></td>
  497. <td class="text-left">???</td>
  498. </tr>
  499. <tr>
  500. <td class="text-right"><b></b></td>
  501. <td class="text-left">???</td>
  502. </tr>
  503. <tr>
  504. <td class="text-right"><b></b></td>
  505. <td class="text-left">???</td>
  506. </tr>
  507. </table>
  508. </div>
  509. </div>
  510.  
  511. </body>
  512. </html>
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!