API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Nov 10th, 2019
585
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 20.76 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. <div class="bg-success mb-2" style="height:1px"></div>
  33. <ul class="list-unstyled">
  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. <li><i class="fa fa-star-o"></i>&nbsp;Fact</li>
  39. </ul>
  40. </div>
  41.  
  42. <div class="card col card-block">
  43. <h2 class="text-center">Likes</h2>
  44. <div class="bg-success mb-2" style="height:1px"></div>
  45. <ul class="list-unstyled">
  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. <li><i class="fa fa-plus-circle"></i>&nbsp;Like</li>
  50. <li><i class="fa fa-plus-circle"></i>&nbsp;Like</li>
  51. </ul>
  52. </div>
  53.  
  54. <div class="card col card-block mx-3">
  55. <h2 class="text-center">Dislikes</h2>
  56. <div class="bg-success mb-2" style="height:1px"></div>
  57. <ul class="list-unstyled">
  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. <li><i class="fa fa-minus-circle"></i>&nbsp;Dislike</li>
  61. <li><i class="fa fa-minus-circle"></i>&nbsp;Dislike</li>
  62. <li><i class="fa fa-minus-circle"></i>&nbsp;Dislike</li>
  63. </ul>
  64. </div>
  65. </div>
  66.  
  67. </div>
  68. </div>
  69.  
  70. <div id="Details" class="tab-pane fade"><br>
  71. <div class="card card-block bg-faded">
  72. <div class="row">
  73.  
  74. <div class="card card-block col mx-3">
  75.  
  76. <div class="row pb-3">
  77. <div class="col-4">
  78. <b>Name</b>
  79. <p>?</p>
  80. </div>
  81. <div class="col-4">
  82. <b>Alias</b>
  83. <p>?</p>
  84. </div>
  85. <div class="col-4">
  86. <b>World</b>
  87. <p>?</p>
  88. </div>
  89. </div>
  90.  
  91. <div class="row pb-3">
  92. <div class="col-4">
  93. <b>Age<b>
  94. <p>?</p>
  95. </div>
  96. <div class="col-4">
  97. <b>Gender</b>
  98. <p>?</p>
  99. </div>
  100. <div class="col-4">
  101. <b>Sexuality</b>
  102. <p>?</p>
  103. </div>
  104. </div>
  105.  
  106. <div class="row pb-3">
  107. <div class="col-4">
  108. <b>Affiliation<b>
  109. <p>?</p>
  110. </div>
  111. <div class="col-4">
  112. <b>Demeanor</b>
  113. <p>?</p>
  114. </div>
  115. <div class="col-4">
  116. <b>Born (Zodiac)</b>
  117. <p>?</p>
  118. </div>
  119. </div>
  120.  
  121. <div class="bg-success mb-2" style="height:1px"></div>
  122.  
  123. <div class="row pb-3">
  124. <div class="col-4">
  125. <b>Species<b>
  126. <p>Human</p>
  127. </div>
  128. <div class="col-4">
  129. <b>Ethnicity</b>
  130. <p>?</p>
  131. </div>
  132. <div class="col-4">
  133. <b>Occupation</b>
  134. <p>?</p>
  135. </div>
  136. </div>
  137.  
  138. <div class="row pb-3">
  139. <div class="col-4">
  140. <b>Stature<b>
  141. <p>?</p>
  142. </div>
  143. <div class="col-4">
  144. <b>Height</b>
  145. <p>?</p>
  146. </div>
  147. <div class="col-4">
  148. <b>Residence</b>
  149. <p>?</p>
  150. </div>
  151. </div>
  152.  
  153. <div class="row">
  154. <div class="col-4">
  155. <b>Hair<b>
  156. <p>?</p>
  157. </div>
  158.  
  159. <div class="col-4">
  160. <b>Eyes</b>
  161. <p>?</p>
  162. </div>
  163.  
  164. <div class="col-4">
  165. <b>Status</b>
  166. <p>?</p>
  167. </div>
  168. </div>
  169.  
  170. </div>
  171.  
  172. <div class="card card-block col-4 mr-3">
  173. <h3 class="display-4 text-center mb-4">Attributes</h3>
  174.  
  175. <div class="row mb-2">
  176. <div class="col-4">
  177. <p>Strength</p>
  178. </div>
  179. <div class="container col-8 mt-1">
  180. <div class="progress"><div class="progress-bar bg-success" style="width:50%"></div></div>
  181. </div>
  182. </div>
  183.  
  184. <div class="row mb-2">
  185. <div class="col-4">
  186. <p>Agility</p>
  187. </div>
  188. <div class="container col-8 mt-1">
  189. <div class="progress"><div class="progress-bar bg-success" style="width:50%"></div></div>
  190. </div>
  191. </div>
  192.  
  193. <div class="row mb-2">
  194. <div class="col-4">
  195. <p>Spirit</p>
  196. </div>
  197. <div class="container col-8 mt-1">
  198. <div class="progress"><div class="progress-bar bg-success" style="width:50%"></div></div>
  199. </div>
  200. </div>
  201.  
  202. <div class="row mb-2">
  203. <div class="col-4">
  204. <p>Dexterity</p>
  205. </div>
  206. <div class="container col-8 mt-1">
  207. <div class="progress"><div class="progress-bar bg-success" style="width:50%"></div></div>
  208. </div>
  209. </div>
  210.  
  211. <div class="row mb-2">
  212. <div class="col-4">
  213. <p>Stamina</p>
  214. </div>
  215. <div class="container col-8 mt-1">
  216. <div class="progress"><div class="progress-bar bg-success" style="width:50%"></div></div>
  217. </div>
  218. </div>
  219.  
  220. <div class="row mb-2">
  221. <div class="col-4">
  222. <p>Charisma</p>
  223. </div>
  224. <div class="container col-8 mt-1">
  225. <div class="progress"><div class="progress-bar bg-success" style="width:50%"></div></div>
  226. </div>
  227. </div>
  228.  
  229. <div class="row mb-2">
  230. <div class="col-4">
  231. <p>Intelligence</p>
  232. </div>
  233. <div class="container col-8 mt-1">
  234. <div class="progress"><div class="progress-bar bg-success" style="width:50%"></div></div>
  235. </div>
  236. </div>
  237.  
  238. <div class="row mb-2">
  239. <div class="col-4">
  240. <p>Resourcefulness</p>
  241. </div>
  242. <div class="container col-8 mt-1">
  243. <div class="progress"><div class="progress-bar bg-success" style="width:50%"></div></div>
  244. </div>
  245. </div>
  246.  
  247. <div class="row mb-2">
  248. <div class="col-4">
  249. <p>Education</p>
  250. </div>
  251. <div class="container col-8 mt-1">
  252. <div class="progress"><div class="progress-bar bg-success" style="width:50%"></div></div>
  253. </div>
  254. </div>
  255.  
  256. <div class="row mb-2">
  257. <div class="col-4">
  258. <p>Combat</p>
  259. </div>
  260. <div class="container col-8 mt-1">
  261. <div class="progress"><div class="progress-bar bg-success" style="width:50%"></div></div>
  262. </div>
  263. </div>
  264. </div>
  265.  
  266. </div>
  267.  
  268. <div class="row">
  269. <div class="card card-block mx-3 mt-3">
  270. <a href="#RefSheet" data-toggle="collapse" class="btn btn-block btn-lg btn-outline-success p-2">Reference Sheet (if needed)</a>
  271. <div id="RefSheet" class="collapse">
  272. <img src="insert img-url here" class="b-block mx-auto mt-2">
  273. </div>
  274. </div>
  275. </div>
  276.  
  277. </div>
  278. </div>
  279.  
  280. <div id="Biography" class="tab-pane fade"><br>
  281. <div class="card card-block bg-faded">
  282.  
  283. <div class="card card-block">
  284. <h3 class="display-4">Early Life</h3>
  285. <div class="bg-success mb-2" style="height:1px; width:80%"></div>
  286. <p align="justify">This paragraph describes the character's upbringing and childhood...<br>
  287. 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>
  288. <h3 class="display-4 text-right">Tba (individual mark)</h3>
  289. <div class="bg-success mb-2 align-self-end" style="height:1px; width:80%"></div>
  290. <p align="justify" class="text-right">This paragraph marks a special event that greatly influenced the character's story...<br>
  291. 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>
  292. <h3 class="display-4">To be continued...</h3>
  293. <div class="bg-success mb-2" style="height:1px; width:80%"></div>
  294. <p align="justify">This paragraph describes how the character's story continues and, if the case, comes to an end...<br>
  295. 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>
  296. </div>
  297.  
  298. </div>
  299. </div>
  300.  
  301. <div id="Relationships" class="tab-pane fade"><br>
  302. <div class="card card-block bg-faded">
  303.  
  304. <div class="row">
  305. <div class="card card-block col mx-3">
  306. <h2 class="display-4 text-center">Relationships</h3>
  307.  
  308. <h1>Name1 <small>relationship</small></h2>
  309.  
  310. <div class="bg-success mb-2" style="height:1px; width:50%"></div>
  311. <div class="row">
  312. <div class="container col-2">
  313. <img src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_960_720.png" class="rounded-circle">
  314. </div>
  315. <div class="container col-10">
  316. <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>
  317. </div>
  318. </div>
  319.  
  320. <h1 class="text-right"><small>relationship</small> Name2</h2>
  321. <div class="bg-success mb-2 align-self-end" style="height:1px; width:50%"></div>
  322. <div class="row">
  323. <div class="container col-10">
  324. <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>
  325. </div>
  326. <div class="container col-2">
  327. <img src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_960_720.png" class="rounded-circle">
  328. </div>
  329. </div>
  330.  
  331. <h1>Name3 <small>relationship</small></h2>
  332.  
  333. <div class="bg-success mb-2" style="height:1px; width:50%"></div>
  334. <div class="row">
  335. <div class="container col-2">
  336. <img src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_960_720.png" class="rounded-circle">
  337. </div>
  338. <div class="container col-10">
  339. <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>
  340. </div>
  341. </div>
  342.  
  343. </div>
  344. </div>
  345. </div>
  346. </div>
  347.  
  348. </div>
  349. </div>
  350.  
  351. <div class="card card-block col-2 mr-4">
  352. <h3 class="text-center display-4">Called Name</h3>
  353.  
  354. <div class="bg-success mb-2" style="height:2px"></div>
  355.  
  356. <img src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_960_720.png">
  357.  
  358. <div class="bg-success my-2" style="height:2px"></div>
  359.  
  360. <h3 class="text-center">Information</h3>
  361.  
  362. <div class="bg-success mb-2" style="height:2px"></div>
  363.  
  364. <div class="row mb-2">
  365. <div class="col-4 text-right">
  366. <b>Name</b>
  367. </div>
  368. <div class="col-8 text-left">
  369. <p>Full Name</p>
  370. </div>
  371. </div>
  372.  
  373. <div class="row mb-2">
  374. <div class="col-4 text-right">
  375. <b>Age</b>
  376. </div>
  377. <div class="col-8 text-left">
  378. <p>Their age</p>
  379. </div>
  380. </div>
  381.  
  382. <div class="row mb-2">
  383. <div class="col-4 text-right">
  384. <b>Gender</b>
  385. </div>
  386. <div class="col-8 text-left">
  387. <p>Their gender</p>
  388. </div>
  389. </div>
  390.  
  391. <div class="bg-success mb-2" style="height:2px"></div>
  392.  
  393. <h3 class="text-center">Family</h3>
  394.  
  395. <div class="bg-success mb-2" style="height:2px"></div>
  396.  
  397. <div class="row mb-2">
  398. <div class="col-4 text-right">
  399. <b>Father</b>
  400. </div>
  401. <div class="col-8 text-left">
  402. <p>???</p>
  403. </div>
  404. </div>
  405.  
  406. <div class="row mb-2">
  407. <div class="col-4 text-right">
  408. <b>Mother</b>
  409. </div>
  410. <div class="col-8 text-left">
  411. <p>???</p>
  412. </div>
  413. </div>
  414.  
  415. <div class="row mb-2">
  416. <div class="col-4 text-right">
  417. <b>Brother</b>
  418. </div>
  419. <div class="col-8 text-left">
  420. <p>???</p>
  421. </div>
  422. </div>
  423.  
  424. <div class="row mb-2">
  425. <div class="col-4 text-right">
  426. <b>Sister</b>
  427. </div>
  428. <div class="col-8 text-left">
  429. <p>???</p>
  430. </div>
  431. </div>
  432.  
  433. <div class="bg-success mb-2" style="height:1px"></div>
  434.  
  435. <div class="row mb-2">
  436. <div class="col-4 text-right">
  437. <b>Partner</b>
  438. </div>
  439. <div class="col-8 text-left">
  440. <p>???</p>
  441. </div>
  442. </div>
  443.  
  444. </div>
  445.  
  446. </div>
  447.  
  448.  
  449. </body>
  450. </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!