Guest User

Untitled

a guest
Nov 22nd, 2019
94
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!--
  2. Some helpful info!
  3. content
  4. BOOTSTRAPS COLORS:
  5. primary (blue)
  6. secondary (gray)
  7. success (green)
  8. danger (red)
  9. warning (yellow)
  10. info (cyan blue)
  11.  
  12. CHANGING COLORS:
  13. background: change bg-faded to bg-[color]
  14. text color: remove text-muted or add/change text-[color] (not advised)
  15. border color: add card-outline-[color]
  16. button color: change btn-[color]
  17.  
  18. BORDER:
  19. round corners: remove 'rounded-0'
  20. remove border: add 'border-0'
  21. -->
  22.  
  23. <div class="col-lg-12 p-0">
  24. <a name="TOPPAGE"></a>
  25. <div class="row mx-auto">
  26. <!-- --------------- SIDE COLUMN --------------- -->
  27. <div class="col-lg-4 push-lg-8 p-0">
  28. <div class="card bg-faded p-2 m-1 mt-2 rounded-0">
  29. <!-- allow img to show up even on mobile by removing 'd-none d-md-block' -->
  30. <div class="card rounded-0 m-1 mb-2">
  31. <!-- width of image probably needs to be upwards of 800px -->
  32. <img src="https://orig00.deviantart.net/dd97/f/2018/140/d/0/dhsolifk_by_vengencevinny-dcc35to.jpg" class="w-100 h-auto">
  33. </div>
  34. <!-- allow bottom lines in list to touch the edge of the box by removing 'px-2'
  35. remove lines by putting 'border-0' in each li class
  36. to change box color on hover, add 'list-group-item-action' to each li class -->
  37. <div class="card rounded-0 m-1">
  38. <ul class="list-group list-group-flush">
  39. <li class="list-group-item list-group-item-action justify-content-between">
  40. <span class="text-uppercase text-muted" style="letter-spacing:2px;font-size:.8rem;">Full Name</span>
  41. <span class="text-lowercase text-muted" style="letter-spacing:1px;font-size:.75rem;">content</span>
  42. </li>
  43. <li class="list-group-item list-group-item-action justify-content-between">
  44. <span class="text-uppercase text-muted" style="letter-spacing:2px;font-size:.8rem;">Nickname(s)</span>
  45. <span class="text-lowercase text-muted" style="letter-spacing:1px;font-size:.75rem;">content</span>
  46. <li class="list-group-item list-group-item-action justify-content-between">
  47. <span class="text-uppercase text-muted" style="letter-spacing:2px;font-size:.8rem;">Age</span>
  48. <span class="text-lowercase text-muted" style="letter-spacing:1px;font-size:.75rem;">content</span>
  49. </li>
  50. <li class="list-group-item list-group-item-action justify-content-between">
  51. <span class="text-uppercase text-muted" style="letter-spacing:2px;font-size:.8rem;">Gender</span>
  52. <span class="text-lowercase text-muted" style="letter-spacing:1px;font-size:.75rem;">content</span>
  53. </li>
  54. <li class="list-group-item list-group-item-action justify-content-between">
  55. <span class="text-uppercase text-muted" style="letter-spacing:2px;font-size:.8rem;">Orientation</span>
  56. <span class="text-lowercase text-muted" style="letter-spacing:1px;font-size:.75rem;">content</span>
  57. </li>
  58. <li class="list-group-item list-group-item-action justify-content-between">
  59. <span class="text-uppercase text-muted" style="letter-spacing:2px;font-size:.8rem;">Livelihood</span>
  60. <span class="text-lowercase text-muted" style="letter-spacing:1px;font-size:.75rem;">content</span>
  61. </li>
  62. <li class="list-group-item list-group-item-action justify-content-between">
  63. <span class="text-uppercase text-muted" style="letter-spacing:2px;font-size:.8rem;">Nationality</span>
  64. <span class="text-lowercase text-muted" style="letter-spacing:1px;font-size:.75rem;">content</span>
  65. </li>
  66. <li class="list-group-item list-group-item-action justify-content-between">
  67. <span class="text-uppercase text-muted" style="letter-spacing:2px;font-size:.8rem;">Height</span>
  68. <span class="text-lowercase text-muted" style="letter-spacing:1px;font-size:.75rem;">content</span>
  69. </li>
  70. <li class="list-group-item list-group-item-action justify-content-between">
  71. <span class="text-uppercase text-muted" style="letter-spacing:2px;font-size:.8rem;">Build</span>
  72. <span class="text-lowercase text-muted" style="letter-spacing:1px;font-size:.75rem;">content</span>
  73. <li class="list-group-item list-group-item-action justify-content-between">
  74. <span class="text-uppercase text-muted" style="letter-spacing:2px;font-size:.8rem;">Alignment</span>
  75. <span class="text-lowercase text-muted" style="letter-spacing:1px;font-size:.75rem;">content</span>
  76. <li class="list-group-item list-group-item-action justify-content-between">
  77. <span class="text-uppercase text-muted" style="letter-spacing:2px;font-size:.8rem;">Theme/Playlist</span>
  78. <a class="text-lowercase text-primary" style="letter-spacing:1px;font-size:.75rem;" href="content">[🎶]</a>
  79. </li>
  80. </ul>
  81. </div>
  82. </div>
  83. </div>
  84. <!-- --------------- MAIN CONTENT --------------- -->
  85. <div class="card rounded-0 bg-faded col-lg-8 pull-lg-4 p-0">
  86. <!-- make sure to change the anchor name here and add a link in quicklinks if adding another section! -->
  87. <a name="BASICINFO"></a>
  88. <!-- -------- LARGE CARD -------- -->
  89. <div class="p-3 m-1 align-center">
  90. <div class="card p-2 m-1 rounded-0 bg-muted"> 
  91. <!--------------------------- NAVIGATION BUTTONS -------------------------------------->
  92. <ul class="nav nav-pills nav-justified">
  93. <li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#ONE"
  94. style="text-align:center"></i> Summary</a></li>
  95. <li class="nav-item"><a class="nav-link rounded-0" data-toggle="tab" href="#TWO"
  96. style="text-align:center"></i> Appearance</a></li>
  97. <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#THREE"
  98. style="text-align:center"></i> Personality</a></li>
  99. <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#FOUR"
  100. style="text-align:center"></i> Backstory</a></li>
  101. </ul>
  102. <div class="tab-content">
  103. <!--------------------------- SECTION ONE -------------------------------------->
  104. <div class="tab-pane fade in active show card-block" style="height:800px;" id="ONE">
  105. <img src="" style="height:400px;width:200px;" class="float-left mr-2">
  106. <h2 class="text-center"><i class="text-muted">"quote content"</i></h2>
  107. </div>
  108. <!--------------------------- SECTION TWO -------------------------------------->
  109. <div class="tab-pane show card-block" style="height:800px;" id="TWO">
  110. <img src="" style="height:400px;width:200px;" class="float-left mr-2">
  111. <h2 class="text-center"><i class="text-muted">
  112. <p> content</p>
  113. <p> content </p>
  114. <p> content</p>
  115. <p>content</p>
  116. </div>
  117. <!--------------------------- SECTION THREE -------------------------------------->
  118. <div class="tab-pane show card-block" style="height:800px;" id="THREE">
  119. <img src="" style="height:400px;width:200px;" class="float-left mr-2">
  120. <h2 class="text-center"><i class="text-muted">
  121. <p> content</p>
  122. <p>content</p>
  123. </div>
  124.  
  125. <!--------------------------- SECTION FOUR -------------------------------------->
  126. <div class="tab-pane show card-block table-responsive" style="height:800px;" id="FOUR">
  127. <img src="" style="height:400px;width:200px;" class="float-left mr-2">
  128. <h2 class="text-center"><i class="text-muted">
  129. <p>content/p>
  130. </div>
  131. </div>
  132. </div>
  133. </div>
  134.  
  135. <!-- CARD HEADING END -->
  136. <!-- -------- LARGE CARD END -------- -->
  137. <!-- -------- CARD ROWS -------- -->
  138. <div class="card bg-faded rounded-0 p-3 m-1 align-center">
  139. <div class="row mx-0 d-flex">
  140. <div class="col-lg-6 p-0 d-flex">
  141. <div class="card w-100 bg- secondary rounded-0 p-3 m-1 align-self-stretch">
  142. <!-- CARD HEADING -->
  143. <div class="d-flex justify-content-between">
  144. <p class="text-muted text-center text-uppercase m-0 text-secondary" style="letter-spacing:2px;font-size:1.2rem;">
  145. Skills & Abilities
  146. </p>
  147. <p class="text-muted text-uppercase m-0 text-secondary" style="letter-spacing:2px;font-size:1.2rem;">
  148. <i class="fa fa-question-circle"></i>
  149. </p>
  150. </div>
  151. <div class="w-100"><hr class="p-0 m-0 my-1"></div>
  152. <!-- CARD HEADING END -->
  153. <div class="text-muted p-2" style="font-size:.85rem">
  154. <ul class="pl-3 mb-0">
  155. <li>content</li>
  156. <li>content</li>
  157. <li>content</li>
  158. <li>content</li>
  159.  
  160. </ul>
  161. </div>
  162. <a href="#TOPPAGE" class="text-muted text-right text-lowercase m-0 mt-1" style="letter-spacing:2px;font-size:.65rem;">Back to Top</a>
  163. </div>
  164. </div>
  165. <div class="col-lg-6 p-0 d-flex">
  166. <div class="card w-100 bg-muted rounded-0 p-3 m-1 align-self-stretch">
  167. <!-- CARD HEADING -->
  168. <div class="d-flex justify-content-between">
  169. <p class="text-muted text-uppercase m-0 text-secondary" style="letter-spacing:2px;font-size:1.2rem;">
  170. Trivia
  171. </p>
  172. <p class="text-muted text-uppercase m-0 text-secondary" style="letter-spacing:2px;font-size:1.2rem;">
  173. <i class="fa fa-wrench"></i>
  174. </p>
  175. </div>
  176. <div class="w-100"><hr class="p-0 m-0 my-1"></div>
  177. <!-- CARD HEADING END -->
  178. <div class="text-muted p-2" style="font-size:.85rem">
  179. <ul class="pl-3 mb-0">
  180. <li>content </li>
  181. <li> content </li>
  182. <li> content</li>
  183. </ul>
  184. </div>
  185. <a href="#TOPPAGE" class="text-muted text-right text-lowercase m-0 mt-1" style="letter-spacing:2px;font-size:.65rem;">Back to Top</a>
  186. </div>
  187. </div>
  188. </div>
  189. <!-- -------- CARD ROWS END -------- -->
  190. <!-- -------- CARD ROWS -------- -->
  191. <div class="row mx-0 d-flex">
  192. <div class="col-lg-6 p-0 d-flex">
  193. <div class="card w-100 bg-muted rounded-0 p-3 m-1 align-self-stretch">
  194. <!-- CARD HEADING -->
  195. <div class="d-flex justify-content-between">
  196. <p class="text-muted text-uppercase text-center m-0 text-secondary" style="letter-spacing:2px;font-size:1.2rem;">
  197. Likes
  198. </p>
  199. <p class="text-muted text-uppercase text-center m-0 text-secondary" style="letter-spacing:2px;font-size:1.2rem;">
  200. <i class="fa fa-user-plus"></i>
  201. </p>
  202. </div>
  203. <div class="w-100"><hr class="p-0 m-0 my-1"></div>
  204. <!-- CARD HEADING END -->
  205. <div class="text-muted p-2" style="font-size:.85rem">
  206. <ul class="pl-3 mb-0">
  207. <li>content</li>
  208. <li>content</li>
  209. <li>content</li>
  210. <li>content</li>
  211. <li>content</li>
  212. <li>content</li>
  213. </ul>
  214. </div>
  215. <a href="#TOPPAGE" class="text-muted text-right text-lowercase m-0 mt-1" style="letter-spacing:2px;font-size:.65rem;">Back to Top</a>
  216. </div>
  217. </div>
  218. <div class="col-lg-6 p-0 d-flex">
  219. <div class="card w-100 bg-muted rounded-0 p-3 m-1 align-self-stretch">
  220. <!-- CARD HEADING -->
  221. <div class="d-flex justify-content-between">
  222. <p class="text-muted text-uppercase m-0 text-secondary" style="letter-spacing:2px;font-size:1.2rem;">
  223. Dislikes
  224. </p>
  225. <p class="text-muted text-uppercase m-0 text-secondary" style="letter-spacing:2px;font-size:1.2rem;">
  226. <i class="fa fa-user-times"></i>
  227. </p>
  228. </div>
  229. <div class="w-100"><hr class="p-0 m-0 my-1"></div>
  230. <!-- CARD HEADING END -->
  231. <div class="text-muted p-2" style="font-size:.85rem">
  232. <ul class="pl-3 mb-0">
  233. <li>content</li>
  234. <li>content</li>
  235. <li>content</li>
  236. <li>content</li>
  237. <li>content</li>
  238. </ul>
  239. </div>
  240. <a href="#TOPPAGE" class="text-muted text-right text-lowercase m-0 mt-1" style="letter-spacing:2px;font-size:.65rem;">Back to Top</a>
  241. </div>
  242. </div>
  243. </div>
  244. <!-- -------- CARD ROWS END -------- -->
  245. </div>
  246. <!-- --------------- RELATIONSHIPS --------------- -->
  247. <div class="card p-2 m-1 mt-2 rounded-0 bg-faded">
  248. <!-- -------- LARGE CARD -------- -->
  249. <div class="card bg- secondary rounded-0 p-3 m-1 align-self-stretch">
  250. <!-- CARD HEADING -->
  251. <!-- make sure to change the anchor name here and add a link in quicklinks if adding another section! -->
  252. <div class="d-flex justify-content-between">
  253. <p class="text-muted text-center text-uppercase m-0" style="letter-spacing:2px;font-size:1.2rem;">
  254. Relationships
  255. </p>
  256. <p class="text-muted text-center text-uppercase m-0" style="letter-spacing:2px;font-size:1.2rem;">
  257. <i class="fa fa-heartbeat"></i>
  258. </p>
  259. </div>
  260. <div class="w-100"><hr class="p-0 m-0 my-1"></div>
  261. <!-- CARD HEADING END -->
  262. <div class="row mx-0 d-flex">
  263. <!-- RELATIONSHIP CARD -->
  264. <div class="col-xl-4 col-lg-6 p-0 d-flex">
  265. <div class="w-100 m-1 p-2 align-self-stretch">
  266. <div class="d-flex justify-content-between">
  267. <a href="content" class="text-muted text-uppercase m-0 text-secondary" style="letter-spacing:1px;font-size:.85rem;">
  268. Name
  269. </a>
  270. <p class="text-muted text-lowercase m-0 " style="letter-spacing:1px;font-size:.85rem;">
  271. <i>ship</i>
  272. </p>
  273. </div>
  274. <div class="w-100"><hr class="p-0 m-0 my-1"></div>
  275. <div class="text-muted p-2" style="font-size:.8rem">
  276. <p>content
  277. <p> <img src="https://orig00.deviantart.net/dd97/f/2018/140/d/0/dhsolifk_by_vengencevinny-dcc35to.jpg" style="width:200px;height:200px;">
  278. </p>
  279. </div>
  280. </div>
  281. </div>
  282. <!-- RELATIONSHIP CARD END-->
  283. <!-- RELATIONSHIP CARD -->
  284. <div class="col-xl-4 col-lg-6 p-0 d-flex">
  285. <div class="w-100 m-1 p-2 align-self-stretch">
  286. <div class="d-flex justify-content-between">
  287. <a href="content" class="text-muted text-uppercase m-0 text-secondary" style="letter-spacing:1px;font-size:.85rem;">
  288. name
  289. </a>
  290. <p class="text-muted text-lowercase m-0" style="letter-spacing:1px;font-size:.85rem;">
  291. <i>ship </i>
  292. </p>
  293. </div>
  294. <div class="w-100"><hr class="p-0 m-0 my-1"></div>
  295. <div class="text-muted p-2" style="font-size:.8rem">
  296. <p>content
  297. <p>   <img src="https://orig00.deviantart.net/dd97/f/2018/140/d/0/dhsolifk_by_vengencevinny-dcc35to.jpg" style="width:200px;height:200px;">
  298. </p>
  299. </div>
  300. </div>
  301. </div>
  302. <!-- RELATIONSHIP CARD END-->
  303. <!-- RELATIONSHIP CARD -->
  304. <div class="col-xl-4 col-lg-6 p-0 d-flex">
  305. <div class="w-100 m-1 p-2 align-self-stretch">
  306. <div class="d-flex justify-content-between">
  307. <a href="content" class="text-muted text-uppercase text-secondary m-0" style="letter-spacing:1px;font-size:.85rem;">
  308. name
  309. </a>
  310. <p class="text-muted text-lowercase m-0 " style="letter-spacing:1px;font-size:.85rem;">
  311. <i>ship</i>
  312. </p>
  313. </div>
  314. <div class="w-100"><hr class="p-0 m-0 my-1"></div>
  315. <div class="text-muted p-2" style="font-size:.8rem">
  316. <p> content
  317. </p> <p>   <img src="https://orig00.deviantart.net/dd97/f/2018/140/d/0/dhsolifk_by_vengencevinny-dcc35to.jpg" style="width:200px;height:200px;">
  318. </p>
  319. </div>
  320. </div>
  321. </div>
  322. <!-- RELATIONSHIP CARD END-->
  323.  
  324. </div>
  325. <a href="#TOPPAGE" class="text-muted text-right text-lowercase m-0 mt-1" style="letter-spacing:2px;font-size:.65rem;">Back to Top</a>
  326. </div>
  327. </div>
  328. </div>
  329. </div>
  330. </div>
  331. </div>
  332. </div>
RAW Paste Data