API tools faq
paste
Advertisement
celestiials

GRAND ORDER

celestiials
Jul 5th, 2021
127
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 61.04 KB | None | 0 0
raw download clone embed print report
  1. <div class="container">
  2. <div class="row">
  3. <!-- IMAGE CAROUSEL; honestly don't worry about it besides images and captions -->
  4. <div class="col-lg-4 col-sm-4">
  5. <div id="ascensions" class="carousel slide">
  6. <ol class="carousel-indicators">
  7. <li data-target="#ascensions" data-slide-to="0" class="active"></li>
  8. <li data-target="#ascensions" data-slide-to="1"></li>
  9. <li data-target="#ascensions" data-slide-to="2"></li>
  10. <li data-target="#ascensions" data-slide-to="3"></li>
  11. <li data-target="#ascensions" data-slide-to="4"></li>
  12. </ol>
  13.  
  14. <div class="carousel-inner">
  15. <!-- FIRST ASCENSION -->
  16. <div class="carousel-item active">
  17. <img class="d-block w-100" src="https://via.placeholder.com/512x724.png">
  18. <div class="carousel-caption">
  19. <h1>First Ascension</h1>
  20. </div>
  21. </div>
  22. <!-- /FIRST ASCENSION -->
  23.  
  24. <!-- SECOND ASCENSION -->
  25. <div class="carousel-item">
  26. <img class="d-block w-100" src="https://via.placeholder.com/512x724.png">
  27. <div class="carousel-caption">
  28. <h1>Second Ascension</h1>
  29. </div>
  30. </div>
  31. <!-- /SECOND ASCENSION -->
  32.  
  33. <!-- THIRD ASCENSION -->
  34. <div class="carousel-item">
  35. <img class="d-block w-100" src="https://via.placeholder.com/512x724.png">
  36. <div class="carousel-caption">
  37. <h1>Third Ascension</h1>
  38. </div>
  39. </div>
  40. <!-- /THIRD ASCENSION -->
  41.  
  42. <!-- FINAL ASCENSION -->
  43. <div class="carousel-item">
  44. <img class="d-block w-100" src="https://via.placeholder.com/512x724.png">
  45. <div class="carousel-caption">
  46. <h1>Final Ascension</h1>
  47. </div>
  48. </div>
  49. <!-- /FINAL ASCENSION -->
  50.  
  51. <!-- APRIL FOOL'S -->
  52. <div class="carousel-item">
  53. <img class="d-block w-100" src="https://via.placeholder.com/512x724.png">
  54. <div class="carousel-caption">
  55. <h1>April Fool's</h1>
  56. </div>
  57. </div>
  58. <!-- /APRIL FOOL'S -->
  59. </div>
  60.  
  61. <a class="carousel-control-prev" href="#ascensions" role="button" data-slide="prev">
  62. <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  63. <span class="sr-only">Previous</span>
  64. </a>
  65.  
  66. <a class="carousel-control-next" href="#ascensions" role="button" data-slide="next">
  67. <span class="carousel-control-next-icon" aria-hidden="true"></span>
  68. <span class="sr-only">Next</span>
  69. </a>
  70. </div>
  71. </div>
  72. <!-- /IMAGE CAROUSEL -->
  73.  
  74. <div class="col-lg-8 col-sm-8">
  75.  
  76. <!-- NAME AND CLASS -->
  77. <h1 class="text-right">CHARACTER NAME</h1>
  78. <p class="text-right">CLASS</p>
  79. <!-- /NAME AND CLASS -->
  80. <br>
  81.  
  82. <!-- BUTTONS; don't worry about this tbh -->
  83. <ul class="nav nav-pills nav-justified">
  84. <li class="nav-item">
  85. <a class="nav-link active" href="#status" data-toggle="tab">Status</a>
  86. </li>
  87. <li class="nav-item">
  88. <a class="nav-link" href="#profile" data-toggle="tab">Profile</a>
  89. </li>
  90. <li class="nav-item">
  91. <a class="nav-link" href="#skin" data-toggle="tab">Character Skin</a>
  92. </li>
  93. <li class="nav-item">
  94. <a class="nav-link" href="#voice" data-toggle="tab">Voice</a>
  95. </li>
  96. </ul>
  97. <!-- /BUTTONS -->
  98.  
  99. <br>
  100.  
  101. <div class="tab-content">
  102.  
  103. <!-- FIRST SECTION (STATUS) -->
  104. <div class="tab-pane fade in active show" id="status">
  105. <div class="table-responsive card col-lg-12 col-sm-12" style="max-height:370px;">
  106. <br>
  107. <!-- STATUS BOX -->
  108. <div class="card col-lg-12 col-sm-12">
  109. <div class="card-body">
  110. <br>
  111. <h1 class="card-title">Status</h1>
  112. <div class="container">
  113. <!-- SERVANT ICON; recommended size is 256 x 256 -->
  114. <div class="col-lg-4 col-sm-4">
  115. <img class="float-left" src="https://via.placeholder.com/256.png">
  116. </div>
  117. <!-- /SERVANT ICON -->
  118. <!-- LEVEL, HP, ATTACK, AND COST -->
  119. <div class="row">
  120. <div class="col-lg-8 col-sm-8">
  121. <h1>Lv. 100/100</h1>
  122. <div class="container">
  123. <div class="row">
  124. <div class="col-lg-7 col-sm-7">
  125. <h3>HP 69,420</h3>
  126. </div>
  127. <div class="col-lg-7 col-sm-7">
  128. <h3>ATK 69,420</h3>
  129. </div>
  130. <div class="col-lg-7 col-sm-7">
  131. <h3>COST 69</h3>
  132. </div>
  133. </div>
  134. </div>
  135. </div>
  136. </div>
  137. <!-- /LEVEL, HP, ATTACK, AND COST -->
  138. </div>
  139. </div>
  140. <br>
  141. </div>
  142. <!-- /STATUS BOX -->
  143. <br>
  144. <!-- SKILLS BOX -->
  145. <div class="card col-lg-12 col-sm-12">
  146. <div class="card-body">
  147. <br>
  148. <h1 class="card-title">Skills</h1>
  149. <div class="container">
  150.  
  151. <!-- SKILL 1 -->
  152. <div class="col-lg-12 col-sm-12">
  153. <div class="row">
  154. <!-- SKILL NAME + COOLDOWN -->
  155. <div class="col-lg-3 col-sm-3">
  156. <h3>Skill 1</h3>
  157. Cooldown
  158. <br>10
  159. </div>
  160. <!-- /SKILL NAME + COOLDOWN -->
  161.  
  162. <!-- SKILL ICON -->
  163. <div class="col-lg-4 col-sm-4">
  164. <img src="https://via.placeholder.com/75.png">
  165. </div>
  166. <!-- /SKILL ICON -->
  167.  
  168. <!-- SKILL DESCRIPTION -->
  169. <div class="col-lg-5 col-sm-5">
  170. <p>SKILL 1 DESCRIPTION</p>
  171. </div>
  172. <!-- /SKILL DESCRIPTION -->
  173. </div>
  174. </div>
  175. <!-- /SKILL 1 -->
  176.  
  177. <br>
  178.  
  179. <!-- SKILL 2 -->
  180. <div class="col-lg-12 col-sm-12">
  181. <div class="row">
  182. <!-- SKILL NAME + COOLDOWN -->
  183. <div class="col-lg-3 col-sm-3">
  184. <h3>SKILL 2</h3>
  185. Cooldown
  186. <br>10
  187. </div>
  188. <!-- /SKILL NAME + COOLDOWN -->
  189.  
  190. <!-- SKILL ICON -->
  191. <div class="col-lg-4 col-sm-4">
  192. <img src="https://via.placeholder.com/75.png">
  193. </div>
  194. <!-- /SKILL ICON -->
  195.  
  196. <!-- SKILL DESCRIPTION -->
  197. <div class="col-lg-5 col-sm-5">
  198. <p>SKILL 2 DESCRIPTION</p>
  199. </div>
  200. <!-- /SKILL DESCRIPTION -->
  201. </div>
  202. </div>
  203. <!-- /SKILL 2 -->
  204.  
  205. <br>
  206.  
  207. <!-- SKILL 3 -->
  208. <div class="col-lg-12 col-sm-12">
  209. <div class="row">
  210. <!-- SKILL NAME + COOLDOWN -->
  211. <div class="col-lg-3 col-sm-3">
  212. <h3>SKILL 3</h3>
  213. Cooldown
  214. <br>10
  215. </div>
  216. <!-- /SKILL NAME + COOLDOWN -->
  217.  
  218. <!-- SKILL ICON -->
  219. <div class="col-lg-4 col-sm-4">
  220. <img src="https://via.placeholder.com/75.png">
  221. </div>
  222. <!-- /SKILL ICON -->
  223.  
  224. <!-- SKILL DESCRIPTION -->
  225. <div class="col-lg-5 col-sm-5">
  226. <p>SKILL 3 DESCRIPTION</p>
  227. </div>
  228. <!-- /SKILL DESCRIPTION -->
  229. </div>
  230. </div>
  231. <!-- /SKILL 3 -->
  232.  
  233. <br>
  234. </div>
  235. </div>
  236. </div>
  237. <!-- /SKILLS BOX -->
  238.  
  239. <br>
  240.  
  241. <!-- CLASS SKILLS BOX -->
  242. <div class="card col-lg-12 col-sm-12">
  243. <div class="card-body">
  244. <br>
  245. <h1 class="card-title">Class Skills</h1>
  246.  
  247. <div class="container">
  248. <!-- SKILL 1 -->
  249. <div class="col-lg-12 col-sm-12">
  250. <div class="row">
  251. <!-- SKILL TITLE -->
  252. <div class="col-lg-3 col-sm-3">
  253. <h3>CLASS SKILL 1</h3>
  254. </div>
  255. <!-- /SKILL TITLE -->
  256.  
  257. <!-- SKILL ICON -->
  258. <div class="col-lg-4 col-sm-4">
  259. <img src="https://via.placeholder.com/75.png">
  260. </div>
  261. <!-- /SKILL ICON -->
  262.  
  263. <!-- SKILL DESC -->
  264. <div class="col-lg-5 col-sm-5">
  265. <p>CLASS SKILL 1 DESCRIPTION GOES HERE</p>
  266. </div>
  267. <!-- /SKILL DESC -->
  268. </div>
  269. </div>
  270. <!-- /SKILL 1 -->
  271.  
  272. <br>
  273.  
  274. <!-- SKILL 2 -->
  275. <div class="col-lg-12 col-sm-12">
  276. <div class="row">
  277. <!-- SKILL TITLE -->
  278. <div class="col-lg-3 col-sm-3">
  279. <h3>CLASS SKILL 2</h3>
  280. </div>
  281. <!-- /SKILL TITLE -->
  282.  
  283. <!-- SKILL ICON -->
  284. <div class="col-lg-4 col-sm-4">
  285. <img src="https://via.placeholder.com/75.png">
  286. </div>
  287. <!-- /SKILL ICON -->
  288.  
  289. <!-- SKILL DESC -->
  290. <div class="col-lg-5 col-sm-5">
  291. <p>CLASS SKILL 2 DESCRIPTION GOES HERE</p>
  292. </div>
  293. <!-- /SKILL DESC -->
  294. </div>
  295. </div>
  296. <!-- /SKILL 2 -->
  297.  
  298. <br>
  299. </div>
  300. </div>
  301. </div>
  302. <!-- /CLASS SKILLS BOX -->
  303.  
  304. <br>
  305.  
  306. <!-- NOBLE PHANTASM BOX -->
  307. <div class="card col-lg-12 col-sm-12">
  308. <div class="card-body">
  309. <br>
  310. <h1 class="card-title">Noble Phantasm</h1>
  311. <div class="container">
  312. <div class="col-lg-12 col-sm-12">
  313. <div class="row">
  314. <!-- NP ICON; RECOMMENDED SIZE IS 250 x 250 -->
  315. <div class="col-lg-4 col-sm-4">
  316. <img src="https://via.placeholder.com/250.png">
  317. </div>
  318. <!-- /NP ICON -->
  319. <div class="col-lg-8 col-sm-8">
  320. <!-- NP NAME + STATS -->
  321. <h1>NAME</h1>
  322. <h3>Rank: ???</h3>
  323. <h3>Class: ???</h3>
  324. <h3>NP Level: ???/5</h3>
  325. <h3>NP Gauge: (MAX 100%)</h3>
  326. <div class="progress"> <!-- 33% = 100% MAX, 66% = 200% MAX, 100% = 300% MAX -->
  327. <div class="progress-bar" role="progressbar" style="width: 33%"></div>
  328. <!-- /NP NAME + STATS -->
  329. </div>
  330. <br>
  331. <!-- NP DESCRIPTION -->
  332. <p>NOBLE PHANTASM DESCRIPTION GOES HERE</p>
  333. <!-- /NP DESCRIPTION -->
  334. </div>
  335. </div>
  336. </div>
  337. <br>
  338. </div>
  339. </div>
  340. </div>
  341. <!-- /NOBLE PHANTASM BOX -->
  342.  
  343. <br>
  344. </div>
  345.  
  346.  
  347. </div>
  348. <!-- /FIRST SECTION (STATUS) -->
  349.  
  350. <!-- SECOND SECTION (PROFILE) -->
  351. <div class="tab-pane fade in" id="profile">
  352. <div class="table-responsive card col-lg-12 col-sm-12" style="max-height:370px;">
  353. <br>
  354.  
  355. <!-- ILLUSTRATOR + VOICE ACTOR; feel free to remove this if you don't want it -->
  356. <div class="card col-lg-12 col-sm-12">
  357. <div class="card-body">
  358. <br>
  359. <h1 class="card-title">Illustrator/Voice Actor</h1>
  360. <div class="container">
  361. <!-- TEXT -->
  362. <div class="col-lg-12 col-sm-12">
  363. <h3>Illustrator: ???
  364. <br>CV: ???</h3>
  365. </div>
  366. <!-- /TEXT -->
  367. <br>
  368. </div>
  369. </div>
  370. </div>
  371. <!-- /ILLUSTRATOR + VOICE ACTOR -->
  372.  
  373. <br>
  374.  
  375. <!-- CHARACTER INFO -->
  376. <div class="card col-lg-12 col-sm-12">
  377. <div class="card-body">
  378. <br>
  379. <h1 class="card-title">Character Info</h1>
  380. <div class="container">
  381. <!-- TEXT -->
  382. <div class="col-lg-12 col-sm-12">
  383. <p>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.</p>
  384. </div>
  385. <!-- /TEXT -->
  386. <br>
  387. </div>
  388. </div>
  389. </div>
  390. <!-- /CHARACTER INFO -->
  391.  
  392. <br>
  393.  
  394. <!-- PARAMETERS; E is 20%, D is 40%, C is 60$, B is 80%, A is 100% -->
  395. <div class="card col-lg-12 col-sm-12">
  396. <div class="card-body">
  397. <br>
  398. <h1 class="card-title">Parameters</h1>
  399. <div class="container">
  400. <div class="row">
  401. <div class="col-sm-6 col-lg-6">
  402.  
  403. STRENGTH (?)
  404. <div class="progress">
  405. <div class="progress-bar" role="progressbar" style="width: 80%"></div>
  406. </div>
  407. <br>
  408.  
  409. AGILITY (?)
  410. <div class="progress">
  411. <div class="progress-bar" role="progressbar" style="width: 100%"></div>
  412. </div>
  413. <br>
  414.  
  415. LUCK (?)
  416. <div class="progress">
  417. <div class="progress-bar" role="progressbar" style="width: 20%"></div>
  418. </div>
  419. </div>
  420.  
  421. <div class="col-sm-6 col-lg-6">
  422. ENDURANCE (?)
  423. <div class="progress">
  424. <div class="progress-bar" role="progressbar" style="width: 80%"></div>
  425. </div>
  426. <br>
  427.  
  428. MANA (?)
  429. <div class="progress">
  430. <div class="progress-bar" role="progressbar" style="width: 80%"></div>
  431. </div>
  432. <br>
  433.  
  434. NOBLE PHANTASM (?)
  435. <div class="progress">
  436. <div class="progress-bar" role="progressbar" style="width: 100%"></div>
  437. </div>
  438. </div>
  439. </div>
  440. </div>
  441. <br>
  442. </div>
  443. </div>
  444. <!-- /PARAMETERS -->
  445.  
  446. <br>
  447.  
  448. <!-- PROFILE 1 -->
  449. <div class="card col-lg-12 col-sm-12">
  450. <div class="card-body">
  451. <br>
  452. <h1 class="card-title">Profile 1</h1>
  453. <div class="container">
  454. <!-- TEXT -->
  455. <div class="col-lg-12 col-sm-12">
  456. <p>Height/Weight: ???m, ???kg
  457. <br>Origin: ???
  458. <br>Region: ???
  459. <br>Alignment: ???
  460. <br>Gender: ???
  461. <br>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.</p>
  462. </div>
  463. <!-- /TEXT -->
  464. <br>
  465. </div>
  466. </div>
  467. </div>
  468. <!-- /PROFILE 1 -->
  469.  
  470. <br>
  471.  
  472. <!-- PROFILE 2 -->
  473. <div class="card col-lg-12 col-sm-12">
  474. <div class="card-body">
  475. <br>
  476. <h1 class="card-title">Profile 2</h1>
  477. <div class="container">
  478. <!-- TEXT -->
  479. <div class="col-lg-12 col-sm-12">
  480. <p>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.</p>
  481. </div>
  482. <!-- /TEXT -->
  483. <br>
  484. </div>
  485. </div>
  486. </div>
  487. <!-- /PROFILE 2 -->
  488.  
  489. <br>
  490.  
  491. <!-- PROFILE 3 -->
  492. <div class="card col-lg-12 col-sm-12">
  493. <div class="card-body">
  494. <br>
  495. <h1 class="card-title">Profile 3</h1>
  496. <div class="container">
  497. <!-- TEXT -->
  498. <div class="col-lg-12 col-sm-12">
  499. <p>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.</p>
  500. </div>
  501. <!-- /TEXT -->
  502. <br>
  503. </div>
  504. </div>
  505. </div>
  506. <!-- /PROFILE 3 -->
  507.  
  508. <br>
  509.  
  510. <!-- PROFILE 4 -->
  511. <div class="card col-lg-12 col-sm-12">
  512. <div class="card-body">
  513. <br>
  514. <h1 class="card-title">Profile 4</h1>
  515. <div class="container">
  516. <!-- TEXT -->
  517. <div class="col-lg-12 col-sm-12">
  518. <p>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.</p>
  519. </div>
  520. <!-- /TEXT -->
  521. <br>
  522. </div>
  523. </div>
  524. </div>
  525. <!-- /PROFILE 4 -->
  526.  
  527. <br>
  528.  
  529. <!-- PROFILE 5 -->
  530. <div class="card col-lg-12 col-sm-12">
  531. <div class="card-body">
  532. <br>
  533. <h1 class="card-title">Profile 5</h1>
  534. <div class="container">
  535. <!-- TEXT -->
  536. <div class="col-lg-12 col-sm-12">
  537. <p>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.</p>
  538. </div>
  539. <!-- /TEXT -->
  540. <br>
  541. </div>
  542. </div>
  543. </div>
  544. <!-- /PROFILE 5 -->
  545.  
  546. <br>
  547.  
  548. <!-- PROFILE 6 -->
  549. <div class="card col-lg-12 col-sm-12">
  550. <div class="card-body">
  551. <br>
  552. <h1 class="card-title">Profile 6</h1>
  553. <div class="container">
  554. <!-- TEXT -->
  555. <div class="col-lg-12 col-sm-12">
  556. <p>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.</p>
  557. </div>
  558. <!-- /TEXT -->
  559. <br>
  560. </div>
  561. </div>
  562. </div>
  563. <!-- /PROFILE 6 -->
  564.  
  565. <br>
  566. </div>
  567. </div>
  568. <!-- /SECOND SECTION (PROFILE) -->
  569.  
  570. <!-- THIRD SECTION (CHARACTER SKIN) -->
  571. <div class="tab-pane fade in" id="skin">
  572. <div class="table-responsive card col-lg-12 col-sm-12" style="max-height:370px;">
  573. <br>
  574. <!-- BUTTONS; don't worry about these -->
  575. <ul class="nav nav-pills nav-justified">
  576. <li class="nav-item">
  577. <a class="nav-link active" href="#first" data-toggle="tab">1st Ascension</a>
  578. </li>
  579. <li class="nav-item">
  580. <a class="nav-link" href="#second" data-toggle="tab">2nd Ascension</a>
  581. </li>
  582. <li class="nav-item">
  583. <a class="nav-link" href="#third" data-toggle="tab">3rd Ascension</a>
  584. </li>
  585. </ul>
  586. <!-- /BUTTONS-->
  587.  
  588. <div class="tab-content">
  589. <!-- FIRST ASCENSION -->
  590. <div class="tab-pane fade in active show" id="first">
  591. <div class="card-body">
  592. <img class="mx-auto d-block img-fluid" src="https://via.placeholder.com/1000.png">
  593. </div>
  594. </div>
  595. <!-- /FIRST ASCENSION -->
  596.  
  597. <!-- SECOND ASCENSION -->
  598. <div class="tab-pane fade in" id="second">
  599. <div class="card-body">
  600. <img class="mx-auto d-block img-fluid" src="https://via.placeholder.com/1000.png">
  601. </div>
  602. </div>
  603. <!-- /SECOND ASCENSION -->
  604.  
  605. <!-- THIRD ASCENSION -->
  606. <div class="tab-pane fade in" id="third">
  607. <div class="card-body">
  608. <img class="mx-auto d-block img-fluid" src="https://via.placeholder.com/1000.png">
  609. </div>
  610. </div>
  611. <!-- /THIRD ASCENSION -->
  612. </div>
  613. </div>
  614. </div>
  615. <!-- /THIRD SECTION (CHARACTER SKIN) -->
  616.  
  617. <!-- FOURTH SECTION (VOICE) -->
  618.  
  619. <!-- If you want to put more quotes in, copy this and paste it into your desired tab. Sorry that I can't really keep the comments in without breaking this dkjfhgdfg
  620.  
  621. <div class="card container col-lg-12 col-sm-12">
  622. <div class="row">
  623. <div class="col-lg-1 col-sm-1 bg-primary">
  624. <p align="center" class="card-text">
  625. <span style="color: #ffffff;">
  626. <i class="fal fa-birthday-cake fa-2x"></i>
  627. </span>
  628. </p>
  629. </div>
  630. <div class="col-lg-11 col-sm-11">
  631. <h1 class="display-5">EVENT THAT CAUSES THIS QUOTE</h1>
  632. </div>
  633. </div>
  634. <div class="row">
  635. <p class="card-text">QUOTE GOES HERE</p>
  636. </div>
  637. </div>
  638.  
  639. -->
  640.  
  641. <div class="tab-pane fade in" id="voice">
  642. <div class="table-responsive card col-lg-12 col-sm-12" style="max-height:370px;">
  643. <br>
  644. <!-- BUTTONS; don't worry about these -->
  645. <ul class="nav nav-pills nav-justified">
  646. <li class="nav-item">
  647. <a class="nav-link active" href="#battle" data-toggle="tab">Battle</a>
  648. </li>
  649. <li class="nav-item">
  650. <a class="nav-link" href="#misc" data-toggle="tab">Enhancement and Other</a>
  651. </li>
  652. <li class="nav-item">
  653. <a class="nav-link" href="#myroom" data-toggle="tab">My Room</a>
  654. </li>
  655. </ul>
  656. <!-- /BUTTONS -->
  657.  
  658. <div class="card-body">
  659. <div class="tab-content">
  660. <!-- BATTLE QUOTES -->
  661. <div class="tab-pane fade in active show" id="battle">
  662. <br>
  663. <h1>Battle</h1>
  664.  
  665. <!-- BATTLE QUOTE 1-->
  666. <div class="card container col-lg-12 col-sm-12">
  667. <div class="row">
  668. <!-- FA ICON + QUOTE TITLE -->
  669. <div class="col-lg-1 col-sm-1 bg-primary">
  670. <p align="center" class="card-text">
  671. <span style="color: #ffffff;">
  672. <i class="fal fa-bow-arrow fa-2x"></i>
  673. </span>
  674. </p>
  675. </div>
  676. <!-- /FA ICON + QUOTE TITLE -->
  677. <div class="col-lg-11 col-sm-11">
  678. <h1 class="display-5">Battle Start</h1>
  679. </div>
  680. </div>
  681. <!-- ACTUAL TEXT -->
  682. <div class="row">
  683. <p class="card-text">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.</p>
  684. </div>
  685. <!-- /ACTUAL TEXT -->
  686. </div>
  687. <!-- /BATTLE QUOTE 1-->
  688.  
  689. <br>
  690.  
  691. <!-- BATTLE QUOTE 2-->
  692. <div class="card container col-lg-12 col-sm-12">
  693. <div class="row">
  694. <!-- FA ICON + QUOTE TITLE -->
  695. <div class="col-lg-1 col-sm-1 bg-primary">
  696. <p align="center" class="card-text">
  697. <span style="color: #ffffff;">
  698. <i class="fal fa-bow-arrow fa-2x"></i>
  699. </span>
  700. </p>
  701. </div>
  702. <!-- /FA ICON + QUOTE TITLE -->
  703. <div class="col-lg-11 col-sm-11">
  704. <h1 class="display-5">Skills</h1>
  705. </div>
  706. </div>
  707. <!-- ACTUAL TEXT -->
  708. <div class="row">
  709. <p class="card-text">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.</p>
  710. </div>
  711. <!-- /ACTUAL TEXT -->
  712. </div>
  713. <!-- /BATTLE QUOTE 2-->
  714.  
  715. <br>
  716.  
  717. <!-- BATTLE QUOTE 3-->
  718. <div class="card container col-lg-12 col-sm-12">
  719. <div class="row">
  720. <!-- FA ICON + QUOTE TITLE -->
  721. <div class="col-lg-1 col-sm-1 bg-primary">
  722. <p align="center" class="card-text">
  723. <span style="color: #ffffff;">
  724. <i class="fal fa-bow-arrow fa-2x"></i>
  725. </span>
  726. </p>
  727. </div>
  728. <!-- /FA ICON + QUOTE TITLE -->
  729. <div class="col-lg-11 col-sm-11">
  730. <h1 class="display-5">Attack Selected</h1>
  731. </div>
  732. </div>
  733. <!-- ACTUAL TEXT -->
  734. <div class="row">
  735. <p class="card-text">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.</p>
  736. </div>
  737. <!-- /ACTUAL TEXT -->
  738. </div>
  739. <!-- /BATTLE QUOTE 3-->
  740.  
  741. <br>
  742.  
  743. <!-- BATTLE QUOTE 4-->
  744. <div class="card container col-lg-12 col-sm-12">
  745. <div class="row">
  746. <!-- FA ICON + QUOTE TITLE -->
  747. <div class="col-lg-1 col-sm-1 bg-primary">
  748. <p align="center" class="card-text">
  749. <span style="color: #ffffff;">
  750. <i class="fal fa-bow-arrow fa-2x"></i>
  751. </span>
  752. </p>
  753. </div>
  754. <!-- /FA ICON + QUOTE TITLE -->
  755. <div class="col-lg-11 col-sm-11">
  756. <h1 class="display-5">Noble Phantasm Selected</h1>
  757. </div>
  758. </div>
  759. <!-- ACTUAL TEXT -->
  760. <div class="row">
  761. <p class="card-text">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.</p>
  762. </div>
  763. <!-- /ACTUAL TEXT -->
  764. </div>
  765. <!-- /BATTLE QUOTE 4-->
  766.  
  767. <br>
  768.  
  769. <!-- BATTLE QUOTE 5-->
  770. <div class="card container col-lg-12 col-sm-12">
  771. <div class="row">
  772. <!-- FA ICON + QUOTE TITLE -->
  773. <div class="col-lg-1 col-sm-1 bg-primary">
  774. <p align="center" class="card-text">
  775. <span style="color: #ffffff;">
  776. <i class="fal fa-bow-arrow fa-2x"></i>
  777. </span>
  778. </p>
  779. </div>
  780. <!-- /FA ICON + QUOTE TITLE -->
  781. <div class="col-lg-11 col-sm-11">
  782. <h1 class="display-5">Noble Phantasm</h1>
  783. </div>
  784. </div>
  785. <!-- ACTUAL TEXT -->
  786. <div class="row">
  787. <p class="card-text">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.</p>
  788. </div>
  789. <!-- /ACTUAL TEXT -->
  790. </div>
  791. <!-- /BATTLE QUOTE 5-->
  792.  
  793. <br>
  794.  
  795. <!-- BATTLE QUOTE 6-->
  796. <div class="card container col-lg-12 col-sm-12">
  797. <div class="row">
  798. <!-- FA ICON + QUOTE TITLE -->
  799. <div class="col-lg-1 col-sm-1 bg-primary">
  800. <p align="center" class="card-text">
  801. <span style="color: #ffffff;">
  802. <i class="fal fa-bow-arrow fa-2x"></i>
  803. </span>
  804. </p>
  805. </div>
  806. <!-- /FA ICON + QUOTE TITLE -->
  807. <div class="col-lg-11 col-sm-11">
  808. <h1 class="display-5">Attack</h1>
  809. </div>
  810. </div>
  811. <!-- ACTUAL TEXT -->
  812. <div class="row">
  813. <p class="card-text">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.</p>
  814. </div>
  815. <!-- /ACTUAL TEXT -->
  816. </div>
  817. <!-- /BATTLE QUOTE 6-->
  818.  
  819. <br>
  820.  
  821. <!-- BATTLE QUOTE 7-->
  822. <div class="card container col-lg-12 col-sm-12">
  823. <div class="row">
  824. <!-- FA ICON + QUOTE TITLE -->
  825. <div class="col-lg-1 col-sm-1 bg-primary">
  826. <p align="center" class="card-text">
  827. <span style="color: #ffffff;">
  828. <i class="fal fa-claw-marks fa-2x"></i>
  829. </span>
  830. </p>
  831. </div>
  832. <!-- /FA ICON + QUOTE TITLE -->
  833. <div class="col-lg-11 col-sm-11">
  834. <h1 class="display-5">Damage from Noble Phantasm</h1>
  835. </div>
  836. </div>
  837. <!-- ACTUAL TEXT -->
  838. <div class="row">
  839. <p class="card-text">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.</p>
  840. </div>
  841. <!-- /ACTUAL TEXT -->
  842. </div>
  843. <!-- /BATTLE QUOTE 7-->
  844.  
  845. <br>
  846.  
  847. <!-- BATTLE QUOTE 8-->
  848. <div class="card container col-lg-12 col-sm-12">
  849. <div class="row">
  850. <!-- FA ICON + QUOTE TITLE -->
  851. <div class="col-lg-1 col-sm-1 bg-primary">
  852. <p align="center" class="card-text">
  853. <span style="color: #ffffff;">
  854. <i class="fal fa-claw-marks fa-2x"></i>
  855. </span>
  856. </p>
  857. </div>
  858. <!-- /FA ICON + QUOTE TITLE -->
  859. <div class="col-lg-11 col-sm-11">
  860. <h1 class="display-5">Regular Damage</h1>
  861. </div>
  862. </div>
  863. <!-- ACTUAL TEXT -->
  864. <div class="row">
  865. <p class="card-text">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.</p>
  866. </div>
  867. <!-- /ACTUAL TEXT -->
  868. </div>
  869. <!-- /BATTLE QUOTE 8-->
  870.  
  871. <br>
  872.  
  873. <!-- BATTLE QUOTE 9-->
  874. <div class="card container col-lg-12 col-sm-12">
  875. <div class="row">
  876. <!-- FA ICON + QUOTE TITLE -->
  877. <div class="col-lg-1 col-sm-1 bg-primary">
  878. <p align="center" class="card-text">
  879. <span style="color: #ffffff;">
  880. <i class="fal fa-skull fa-2x"></i>
  881. </span>
  882. </p>
  883. </div>
  884. <!-- /FA ICON + QUOTE TITLE -->
  885. <div class="col-lg-11 col-sm-11">
  886. <h1 class="display-5">Defeated</h1>
  887. </div>
  888. </div>
  889. <!-- ACTUAL TEXT -->
  890. <div class="row">
  891. <p class="card-text">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.</p>
  892. </div>
  893. <!-- /ACTUAL TEXT -->
  894. </div>
  895. <!-- /BATTLE QUOTE 9-->
  896.  
  897. <br>
  898.  
  899. <!-- BATTLE QUOTE 10-->
  900. <div class="card container col-lg-12 col-sm-12">
  901. <div class="row">
  902. <!-- FA ICON + QUOTE TITLE -->
  903. <div class="col-lg-1 col-sm-1 bg-primary">
  904. <p align="center" class="card-text">
  905. <span style="color: #ffffff;">
  906. <i class="fal fa-award fa-2x"></i>
  907. </span>
  908. </p>
  909. </div>
  910. <!-- /FA ICON + QUOTE TITLE -->
  911. <div class="col-lg-11 col-sm-11">
  912. <h1 class="display-5">Victory</h1>
  913. </div>
  914. </div>
  915. <!-- ACTUAL TEXT -->
  916. <div class="row">
  917. <p class="card-text">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.</p>
  918. </div>
  919. <!-- /ACTUAL TEXT -->
  920. </div>
  921. <!-- /BATTLE QUOTE 10-->
  922.  
  923. <br>
  924.  
  925. <!-- Put more above this line if needed, but don't forget the <br> in between boxes -->
  926.  
  927. </div>
  928. <!-- /BATTLE QUOTES -->
  929.  
  930. <!-- MISC QUOTES -->
  931. <div class="tab-pane fade in" id="misc">
  932. <br>
  933. <h1>Enhancement</h1>
  934. <!-- MISC QUOTE 1 -->
  935. <div class="card container col-lg-12 col-sm-12">
  936. <div class="row">
  937. <!-- FA ICON + QUOTE TITLE -->
  938. <div class="col-lg-1 col-sm-1 bg-primary">
  939. <p align="center" class="card-text">
  940. <span style="color: #ffffff;">
  941. <i class="fal fa-sparkles fa-2x"></i>
  942. </span>
  943. </p>
  944. </div>
  945. <!-- /FA ICON + QUOTE TITLE -->
  946. <div class="col-lg-11 col-sm-11">
  947. <h1 class="display-5">Level Up</h1>
  948. </div>
  949. </div>
  950. <!-- ACTUAL TEXT -->
  951. <div class="row">
  952. <p class="card-text">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.</p>
  953. </div>
  954. <!-- /ACTUAL TEXT -->
  955. </div>
  956. <!-- /MISC QUOTE 1 -->
  957.  
  958. <br>
  959.  
  960. <!-- MISC QUOTE 2 -->
  961. <div class="card container col-lg-12 col-sm-12">
  962. <div class="row">
  963. <!-- FA ICON + QUOTE TITLE -->
  964. <div class="col-lg-1 col-sm-1 bg-primary">
  965. <p align="center" class="card-text">
  966. <span style="color: #ffffff;">
  967. <i class="fal fa-sparkles fa-2x"></i>
  968. </span>
  969. </p>
  970. </div>
  971. <!-- /FA ICON + QUOTE TITLE -->
  972. <div class="col-lg-11 col-sm-11">
  973. <h1 class="display-5">1st Ascension</h1>
  974. </div>
  975. </div>
  976. <!-- ACTUAL TEXT -->
  977. <div class="row">
  978. <p class="card-text">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.</p>
  979. </div>
  980. <!-- /ACTUAL TEXT -->
  981. </div>
  982. <!-- /MISC QUOTE 2 -->
  983.  
  984. <br>
  985.  
  986. <!-- MISC QUOTE 3 -->
  987. <div class="card container col-lg-12 col-sm-12">
  988. <div class="row">
  989. <!-- FA ICON + QUOTE TITLE -->
  990. <div class="col-lg-1 col-sm-1 bg-primary">
  991. <p align="center" class="card-text">
  992. <span style="color: #ffffff;">
  993. <i class="fal fa-sparkles fa-2x"></i>
  994. </span>
  995. </p>
  996. </div>
  997. <!-- /FA ICON + QUOTE TITLE -->
  998. <div class="col-lg-11 col-sm-11">
  999. <h1 class="display-5">2nd Ascension</h1>
  1000. </div>
  1001. </div>
  1002. <!-- ACTUAL TEXT -->
  1003. <div class="row">
  1004. <p class="card-text">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.</p>
  1005. </div>
  1006. <!-- /ACTUAL TEXT -->
  1007. </div>
  1008. <!-- /MISC QUOTE 3 -->
  1009.  
  1010. <br>
  1011.  
  1012. <!-- MISC QUOTE 4 -->
  1013. <div class="card container col-lg-12 col-sm-12">
  1014. <div class="row">
  1015. <!-- FA ICON + QUOTE TITLE -->
  1016. <div class="col-lg-1 col-sm-1 bg-primary">
  1017. <p align="center" class="card-text">
  1018. <span style="color: #ffffff;">
  1019. <i class="fal fa-sparkles fa-2x"></i>
  1020. </span>
  1021. </p>
  1022. </div>
  1023. <!-- /FA ICON + QUOTE TITLE -->
  1024. <div class="col-lg-11 col-sm-11">
  1025. <h1 class="display-5">3rd Ascension</h1>
  1026. </div>
  1027. </div>
  1028. <!-- ACTUAL TEXT -->
  1029. <div class="row">
  1030. <p class="card-text">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.</p>
  1031. </div>
  1032. <!-- /ACTUAL TEXT -->
  1033. </div>
  1034. <!-- /MISC QUOTE 4 -->
  1035.  
  1036. <br>
  1037.  
  1038. <!-- MISC QUOTE 5 -->
  1039. <div class="card container col-lg-12 col-sm-12">
  1040. <div class="row">
  1041. <!-- FA ICON + QUOTE TITLE -->
  1042. <div class="col-lg-1 col-sm-1 bg-primary">
  1043. <p align="center" class="card-text">
  1044. <span style="color: #ffffff;">
  1045. <i class="fal fa-sparkles fa-2x"></i>
  1046. </span>
  1047. </p>
  1048. </div>
  1049. <!-- /FA ICON + QUOTE TITLE -->
  1050. <div class="col-lg-11 col-sm-11">
  1051. <h1 class="display-5">Final Ascension</h1>
  1052. </div>
  1053. </div>
  1054. <!-- ACTUAL TEXT -->
  1055. <div class="row">
  1056. <p class="card-text">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.</p>
  1057. </div>
  1058. <!-- /ACTUAL TEXT -->
  1059. </div>
  1060. <!-- /MISC QUOTE 5 -->
  1061.  
  1062. <br>
  1063. <h1>Other</h1>
  1064.  
  1065. <!-- MISC QUOTE 6 -->
  1066. <div class="card container col-lg-12 col-sm-12">
  1067. <div class="row">
  1068. <!-- FA ICON + QUOTE TITLE -->
  1069. <div class="col-lg-1 col-sm-1 bg-primary">
  1070. <p align="center" class="card-text">
  1071. <span style="color: #ffffff;">
  1072. <i class="fal fa-magic fa-2x"></i>
  1073. </span>
  1074. </p>
  1075. </div>
  1076. <!-- /FA ICON + QUOTE TITLE -->
  1077. <div class="col-lg-11 col-sm-11">
  1078. <h1 class="display-5">Summoning</h1>
  1079. </div>
  1080. </div>
  1081. <!-- ACTUAL TEXT -->
  1082. <div class="row">
  1083. <p class="card-text">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.</p>
  1084. </div>
  1085. <!-- /ACTUAL TEXT -->
  1086. </div>
  1087. <!-- /MISC QUOTE 6 -->
  1088.  
  1089. <br>
  1090.  
  1091. <!-- Put more above this line if needed, but don't forget the <br> in between boxes -->
  1092.  
  1093. </div>
  1094. <!-- /MISC QUOTES -->
  1095.  
  1096. <!-- MY ROOM QUOTES -->
  1097. <div class="tab-pane fade in" id="myroom">
  1098. <br>
  1099. <h1>My Room</h1>
  1100.  
  1101. <!-- MY ROOM QUOTE 1 -->
  1102. <div class="card container col-lg-12 col-sm-12">
  1103. <div class="row">
  1104. <!-- FA ICON + QUOTE TITLE -->
  1105. <div class="col-lg-1 col-sm-1 bg-primary">
  1106. <p align="center" class="card-text">
  1107. <span style="color: #ffffff;">
  1108. <i class="fal fa-comment-lines fa-2x"></i>
  1109. </span>
  1110. </p>
  1111. </div>
  1112. <!-- /FA ICON + QUOTE TITLE -->
  1113. <div class="col-lg-11 col-sm-11">
  1114. <h1 class="display-5">Bond Level 1</h1>
  1115. </div>
  1116. </div>
  1117. <!-- ACTUAL TEXT -->
  1118. <div class="row">
  1119. <p class="card-text">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.</p>
  1120. </div>
  1121. <!-- /ACTUAL TEXT -->
  1122. </div>
  1123. <!-- /MY ROOM QUOTE 1 -->
  1124.  
  1125. <br>
  1126.  
  1127. <!-- MY ROOM QUOTE 2 -->
  1128. <div class="card container col-lg-12 col-sm-12">
  1129. <div class="row">
  1130. <!-- FA ICON + QUOTE TITLE -->
  1131. <div class="col-lg-1 col-sm-1 bg-primary">
  1132. <p align="center" class="card-text">
  1133. <span style="color: #ffffff;">
  1134. <i class="fal fa-comment-lines fa-2x"></i>
  1135. </span>
  1136. </p>
  1137. </div>
  1138. <!-- /FA ICON + QUOTE TITLE -->
  1139. <div class="col-lg-11 col-sm-11">
  1140. <h1 class="display-5">Bond Level 2</h1>
  1141. </div>
  1142. </div>
  1143. <!-- ACTUAL TEXT -->
  1144. <div class="row">
  1145. <p class="card-text">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.</p>
  1146. </div>
  1147. <!-- /ACTUAL TEXT -->
  1148. </div>
  1149. <!-- /MY ROOM QUOTE 2 -->
  1150.  
  1151. <br>
  1152.  
  1153. <!-- MY ROOM QUOTE 3 -->
  1154. <div class="card container col-lg-12 col-sm-12">
  1155. <div class="row">
  1156. <!-- FA ICON + QUOTE TITLE -->
  1157. <div class="col-lg-1 col-sm-1 bg-primary">
  1158. <p align="center" class="card-text">
  1159. <span style="color: #ffffff;">
  1160. <i class="fal fa-comment-lines fa-2x"></i>
  1161. </span>
  1162. </p>
  1163. </div>
  1164. <!-- /FA ICON + QUOTE TITLE -->
  1165. <div class="col-lg-11 col-sm-11">
  1166. <h1 class="display-5">Bond Level 3</h1>
  1167. </div>
  1168. </div>
  1169. <!-- ACTUAL TEXT -->
  1170. <div class="row">
  1171. <p class="card-text">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.</p>
  1172. </div>
  1173. <!-- /ACTUAL TEXT -->
  1174. </div>
  1175. <!-- /MY ROOM QUOTE 3 -->
  1176.  
  1177. <br>
  1178.  
  1179. <!-- MY ROOM QUOTE 4 -->
  1180. <div class="card container col-lg-12 col-sm-12">
  1181. <div class="row">
  1182. <!-- FA ICON + QUOTE TITLE -->
  1183. <div class="col-lg-1 col-sm-1 bg-primary">
  1184. <p align="center" class="card-text">
  1185. <span style="color: #ffffff;">
  1186. <i class="fal fa-comment-lines fa-2x"></i>
  1187. </span>
  1188. </p>
  1189. </div>
  1190. <!-- /FA ICON + QUOTE TITLE -->
  1191. <div class="col-lg-11 col-sm-11">
  1192. <h1 class="display-5">Bond Level 4</h1>
  1193. </div>
  1194. </div>
  1195. <!-- ACTUAL TEXT -->
  1196. <div class="row">
  1197. <p class="card-text">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.</p>
  1198. </div>
  1199. <!-- /ACTUAL TEXT -->
  1200. </div>
  1201. <!-- /MY ROOM QUOTE 4 -->
  1202.  
  1203. <br>
  1204.  
  1205. <!-- MY ROOM QUOTE 5 -->
  1206. <div class="card container col-lg-12 col-sm-12">
  1207. <div class="row">
  1208. <!-- FA ICON + QUOTE TITLE -->
  1209. <div class="col-lg-1 col-sm-1 bg-primary">
  1210. <p align="center" class="card-text">
  1211. <span style="color: #ffffff;">
  1212. <i class="fal fa-comment-lines fa-2x"></i>
  1213. </span>
  1214. </p>
  1215. </div>
  1216. <!-- /FA ICON + QUOTE TITLE -->
  1217. <div class="col-lg-11 col-sm-11">
  1218. <h1 class="display-5">Bond Level 5</h1>
  1219. </div>
  1220. </div>
  1221. <!-- ACTUAL TEXT -->
  1222. <div class="row">
  1223. <p class="card-text">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.</p>
  1224. </div>
  1225. <!-- /ACTUAL TEXT -->
  1226. </div>
  1227. <!-- /MY ROOM QUOTE 5 -->
  1228.  
  1229. <br>
  1230.  
  1231. <!-- MY ROOM QUOTE 6 -->
  1232. <div class="card container col-lg-12 col-sm-12">
  1233. <div class="row">
  1234. <!-- FA ICON + QUOTE TITLE -->
  1235. <div class="col-lg-1 col-sm-1 bg-primary">
  1236. <p align="center" class="card-text">
  1237. <span style="color: #ffffff;">
  1238. <i class="fal fa-comment-lines fa-2x"></i>
  1239. </span>
  1240. </p>
  1241. </div>
  1242. <!-- /FA ICON + QUOTE TITLE -->
  1243. <div class="col-lg-11 col-sm-11">
  1244. <h1 class="display-5">Dialogue 1</h1>
  1245. </div>
  1246. </div>
  1247. <!-- ACTUAL TEXT -->
  1248. <div class="row">
  1249. <p class="card-text">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.</p>
  1250. </div>
  1251. <!-- /ACTUAL TEXT -->
  1252. </div>
  1253. <!-- /MY ROOM QUOTE 6 -->
  1254.  
  1255. <br>
  1256.  
  1257. <!-- MY ROOM QUOTE 7 -->
  1258. <div class="card container col-lg-12 col-sm-12">
  1259. <div class="row">
  1260. <!-- FA ICON + QUOTE TITLE -->
  1261. <div class="col-lg-1 col-sm-1 bg-primary">
  1262. <p align="center" class="card-text">
  1263. <span style="color: #ffffff;">
  1264. <i class="fal fa-comment-lines fa-2x"></i>
  1265. </span>
  1266. </p>
  1267. </div>
  1268. <!-- /FA ICON + QUOTE TITLE -->
  1269. <div class="col-lg-11 col-sm-11">
  1270. <h1 class="display-5">Dialogue 2</h1>
  1271. </div>
  1272. </div>
  1273. <!-- ACTUAL TEXT -->
  1274. <div class="row">
  1275. <p class="card-text">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.</p>
  1276. </div>
  1277. <!-- /ACTUAL TEXT -->
  1278. </div>
  1279. <!-- /MY ROOM QUOTE 7 -->
  1280.  
  1281. <br>
  1282.  
  1283. <!-- MY ROOM QUOTE 8 -->
  1284. <div class="card container col-lg-12 col-sm-12">
  1285. <div class="row">
  1286. <!-- FA ICON + QUOTE TITLE -->
  1287. <div class="col-lg-1 col-sm-1 bg-primary">
  1288. <p align="center" class="card-text">
  1289. <span style="color: #ffffff;">
  1290. <i class="fal fa-comment-lines fa-2x"></i>
  1291. </span>
  1292. </p>
  1293. </div>
  1294. <!-- /FA ICON + QUOTE TITLE -->
  1295. <div class="col-lg-11 col-sm-11">
  1296. <h1 class="display-5">Dialogue 3</h1>
  1297. </div>
  1298. </div>
  1299. <!-- ACTUAL TEXT -->
  1300. <div class="row">
  1301. <p class="card-text">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.</p>
  1302. </div>
  1303. <!-- /ACTUAL TEXT -->
  1304. </div>
  1305. <!-- /MY ROOM QUOTE 8 -->
  1306.  
  1307. <br>
  1308.  
  1309. <!-- MY ROOM QUOTE 9 -->
  1310. <div class="card container col-lg-12 col-sm-12">
  1311. <div class="row">
  1312. <!-- FA ICON + QUOTE TITLE -->
  1313. <div class="col-lg-1 col-sm-1 bg-primary">
  1314. <p align="center" class="card-text">
  1315. <span style="color: #ffffff;">
  1316. <i class="fal fa-comment-lines fa-2x"></i>
  1317. </span>
  1318. </p>
  1319. </div>
  1320. <!-- /FA ICON + QUOTE TITLE -->
  1321. <div class="col-lg-11 col-sm-11">
  1322. <h1 class="display-5">Dialogue 4</h1>
  1323. </div>
  1324. </div>
  1325. <!-- ACTUAL TEXT -->
  1326. <div class="row">
  1327. <p class="card-text">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.</p>
  1328. </div>
  1329. <!-- /ACTUAL TEXT -->
  1330. </div>
  1331. <!-- /MY ROOM QUOTE 9 -->
  1332.  
  1333. <br>
  1334.  
  1335. <!-- MY ROOM QUOTE 10 -->
  1336. <div class="card container col-lg-12 col-sm-12">
  1337. <div class="row">
  1338. <!-- FA ICON + QUOTE TITLE -->
  1339. <div class="col-lg-1 col-sm-1 bg-primary">
  1340. <p align="center" class="card-text">
  1341. <span style="color: #ffffff;">
  1342. <i class="fal fa-comment-lines fa-2x"></i>
  1343. </span>
  1344. </p>
  1345. </div>
  1346. <!-- /FA ICON + QUOTE TITLE -->
  1347. <div class="col-lg-11 col-sm-11">
  1348. <h1 class="display-5">Dialogue 5</h1>
  1349. </div>
  1350. </div>
  1351. <!-- ACTUAL TEXT -->
  1352. <div class="row">
  1353. <p class="card-text">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.</p>
  1354. </div>
  1355. <!-- /ACTUAL TEXT -->
  1356. </div>
  1357. <!-- /MY ROOM QUOTE 10 -->
  1358.  
  1359. <br>
  1360.  
  1361. <!-- MY ROOM QUOTE 11 -->
  1362. <div class="card container col-lg-12 col-sm-12">
  1363. <div class="row">
  1364. <!-- FA ICON + QUOTE TITLE -->
  1365. <div class="col-lg-1 col-sm-1 bg-primary">
  1366. <p align="center" class="card-text">
  1367. <span style="color: #ffffff;">
  1368. <i class="fal fa-comment-lines fa-2x"></i>
  1369. </span>
  1370. </p>
  1371. </div>
  1372. <!-- /FA ICON + QUOTE TITLE -->
  1373. <div class="col-lg-11 col-sm-11">
  1374. <h1 class="display-5">Dialogue 6</h1>
  1375. </div>
  1376. </div>
  1377. <!-- ACTUAL TEXT -->
  1378. <div class="row">
  1379. <p class="card-text">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.</p>
  1380. </div>
  1381. <!-- /ACTUAL TEXT -->
  1382. </div>
  1383. <!-- /MY ROOM QUOTE 11 -->
  1384.  
  1385. <br>
  1386. <!-- MY ROOM QUOTE 12 -->
  1387. <div class="card container col-lg-12 col-sm-12">
  1388. <div class="row">
  1389. <!-- FA ICON + QUOTE TITLE -->
  1390. <div class="col-lg-1 col-sm-1 bg-primary">
  1391. <p align="center" class="card-text">
  1392. <span style="color: #ffffff;">
  1393. <i class="fal fa-heart fa-2x"></i>
  1394. </span>
  1395. </p>
  1396. </div>
  1397. <!-- /FA ICON + QUOTE TITLE -->
  1398. <div class="col-lg-11 col-sm-11">
  1399. <h1 class="display-5">Something You Like</h1>
  1400. </div>
  1401. </div>
  1402. <!-- ACTUAL TEXT -->
  1403. <div class="row">
  1404. <p class="card-text">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.</p>
  1405. </div>
  1406. <!-- /ACTUAL TEXT -->
  1407. </div>
  1408. <!-- /MY ROOM QUOTE 12 -->
  1409.  
  1410. <br>
  1411.  
  1412. <!-- MY ROOM QUOTE 13 -->
  1413. <div class="card container col-lg-12 col-sm-12">
  1414. <div class="row">
  1415. <!-- FA ICON + QUOTE TITLE -->
  1416. <div class="col-lg-1 col-sm-1 bg-primary">
  1417. <p align="center" class="card-text">
  1418. <span style="color: #ffffff;">
  1419. <i class="fal fa-heart-broken fa-2x"></i>
  1420. </span>
  1421. </p>
  1422. </div>
  1423. <!-- /FA ICON + QUOTE TITLE -->
  1424. <div class="col-lg-11 col-sm-11">
  1425. <h1 class="display-5">Something You Hate</h1>
  1426. </div>
  1427. </div>
  1428. <!-- ACTUAL TEXT -->
  1429. <div class="row">
  1430. <p class="card-text">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.</p>
  1431. </div>
  1432. <!-- /ACTUAL TEXT -->
  1433. </div>
  1434. <!-- /MY ROOM QUOTE 13 -->
  1435.  
  1436. <br>
  1437.  
  1438. <!-- MY ROOM QUOTE 14 -->
  1439. <div class="card container col-lg-12 col-sm-12">
  1440. <div class="row">
  1441. <!-- FA ICON + QUOTE TITLE -->
  1442. <div class="col-lg-1 col-sm-1 bg-primary">
  1443. <p align="center" class="card-text">
  1444. <span style="color: #ffffff;">
  1445. <i class="fal fa-trophy fa-2x"></i>
  1446. </span>
  1447. </p>
  1448. </div>
  1449. <!-- /FA ICON + QUOTE TITLE -->
  1450. <div class="col-lg-11 col-sm-11">
  1451. <h1 class="display-5">About the Holy Grail</h1>
  1452. </div>
  1453. </div>
  1454. <!-- ACTUAL TEXT -->
  1455. <div class="row">
  1456. <p class="card-text">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.</p>
  1457. </div>
  1458. <!-- /ACTUAL TEXT -->
  1459. </div>
  1460. <!-- /MY ROOM QUOTE 14 -->
  1461.  
  1462. <br>
  1463.  
  1464. <!-- MY ROOM QUOTE 15 -->
  1465. <div class="card container col-lg-12 col-sm-12">
  1466. <div class="row">
  1467. <!-- FA ICON + QUOTE TITLE -->
  1468. <div class="col-lg-1 col-sm-1 bg-primary">
  1469. <p align="center" class="card-text">
  1470. <span style="color: #ffffff;">
  1471. <i class="fal fa-comment-lines fa-2x"></i>
  1472. </span>
  1473. </p>
  1474. </div>
  1475. <!-- /FA ICON + QUOTE TITLE -->
  1476. <div class="col-lg-11 col-sm-11">
  1477. <h1 class="display-5">During an Event</h1>
  1478. </div>
  1479. </div>
  1480. <!-- ACTUAL TEXT -->
  1481. <div class="row">
  1482. <p class="card-text">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.</p>
  1483. </div>
  1484. <!-- /ACTUAL TEXT -->
  1485. </div>
  1486. <!-- /MY ROOM QUOTE 15 -->
  1487.  
  1488. <br>
  1489.  
  1490. <!-- MY ROOM QUOTE 16 -->
  1491. <div class="card container col-lg-12 col-sm-12">
  1492. <div class="row">
  1493. <!-- FA ICON + QUOTE TITLE -->
  1494. <div class="col-lg-1 col-sm-1 bg-primary">
  1495. <p align="center" class="card-text">
  1496. <span style="color: #ffffff;">
  1497. <i class="fal fa-birthday-cake fa-2x"></i>
  1498. </span>
  1499. </p>
  1500. </div>
  1501. <!-- /FA ICON + QUOTE TITLE -->
  1502. <div class="col-lg-11 col-sm-11">
  1503. <h1 class="display-5">Birthday</h1>
  1504. </div>
  1505. </div>
  1506. <!-- ACTUAL TEXT -->
  1507. <div class="row">
  1508. <p class="card-text">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.</p>
  1509. </div>
  1510. <!-- /ACTUAL TEXT -->
  1511. </div>
  1512. <!-- /MY ROOM QUOTE 16 -->
  1513. <br>
  1514.  
  1515. <!-- Put more above this line if needed, but don't forget the <br> in between boxes -->
  1516.  
  1517. </div>
  1518. <!-- /MY ROOM QUOTES -->
  1519. </div>
  1520. </div>
  1521. </div>
  1522.  
  1523. </div>
  1524. <!-- /FOURTH SECTION (VOICE) -->
  1525.  
  1526. </div>
  1527. </div>
  1528. </div>
  1529. </div>
  1530.  
  1531. <!-- CREDITS; please don't remove these aaaa -->
  1532. <p align="right">
  1533. <small class="text-muted">Coding by @celestiials</small>
  1534. </p>
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!