API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Nov 22nd, 2019
137
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 17.08 KB | None | 0 0
raw download clone embed print report
  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>
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!