API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Feb 18th, 2020
99
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.41 KB | None | 0 0
raw download clone embed print report
  1. <div class="container-fluid px-0" style="max-width: 1000px;">
  2. <div class="row">
  3. <div class="col-md-4 col-sm-5 mb-md-2 mb-4">
  4. <!--------- SIDE STATS -------------------------------------------------------->
  5. <ul class="list-group">
  6. <li class="list-group-item bg-faded d-block">
  7. <!-------------- CHARACTER NAME ----------------------------------------->
  8. <h1 class="text-center mb-0" style="font-weight: 300;">Name</h1>
  9. </li>
  10. <!---------------- FOCAL IMAGE -- WILL SCALE ACROSS SCREEN SIZES ---------->
  11. <li style="background-image:url(IMG URL);background-size:cover;background-position:center 0;background-repeat:no-repeat;min-height:300px;" class="list-group-item d-block" >
  12. </li>
  13. <li class="list-group-item d-block">
  14. <span class="text-uppercase text-muted" style="letter-spacing:1px;">age</span>
  15. <span class="pull-right">content</span>
  16. </li>
  17. <li class="list-group-item d-block">
  18. <span class="text-uppercase text-muted" style="letter-spacing:1px;">gender</span>
  19. <span class="pull-right">content</span>
  20. </li>
  21. <li class="list-group-item d-block">
  22. <span class="text-uppercase text-muted" style="letter-spacing:1px;">race</span>
  23. <span class="pull-right">or species</span>
  24. </li>
  25. <li class="list-group-item d-block">
  26. <span class="text-uppercase text-muted" style="letter-spacing:1px;">role</span>
  27. <span class="pull-right">content</span>
  28. </li>
  29. <li class="list-group-item d-block">
  30. <span class="text-uppercase text-muted" style="letter-spacing:1px;">theme</span>
  31. <span class="pull-right"><a href="#SONG LINK" target="_BLANK"><i class="fas fa-music-alt" /> <i class="fas fa-music" /> <i class="fas fa-music-alt" /></a></span>
  32. </li>
  33. </ul>
  34. </div>
  35. <div class="col-md-8 col-sm-7 mb-2">
  36. <div class="card">
  37. <div class="card-header bg-faded">
  38. <!--------------------------- NAVIGATION BUTTONS -------------------------------------->
  39. <ul class="nav nav-tabs card-header-tabs nav-justified text-uppercase" style="letter-spacing:1px;">
  40. <li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#ONE" style="color: #383838">About</a></li>
  41. <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#TWO" style="color: #383838">Details</a></li>
  42. <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#THREE" style="color: #383838">Story</a></li>
  43. <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#FOUR" style="color: #383838">Links</a></li>
  44. </ul>
  45. </div>
  46. <div class="tab-content">
  47. <!--------------------------- SECTION ONE --- ABOUT ----------------------------------->
  48. <div class="tab-pane active show card-block pb-1" style="height: 530px; overflow:auto;" id="ONE">
  49. <div class="row">
  50. <div class="col-md-6 mb-1">
  51. <div class="d-flex justify-content-between">
  52. <span class="text-muted text-uppercase" style="letter-spacing:1px;">height</span>
  53. <span>content</span>
  54. </div>
  55. <hr class="my-2">
  56. </div>
  57.  
  58. <div class="col-md-6 mb-1">
  59. <div class="d-flex justify-content-between">
  60. <span class="text-muted text-uppercase" style="letter-spacing:1px;">build</span>
  61. <span>content</span>
  62. </div>
  63. <hr class="my-2">
  64. </div>
  65.  
  66. <div class="col-md-6 mb-1">
  67. <div class="d-flex justify-content-between">
  68. <span class="text-muted text-uppercase" style="letter-spacing:1px;">pronouns</span>
  69. <span>content</span>
  70. </div>
  71. <hr class="my-2">
  72. </div>
  73.  
  74. <div class="col-md-6 mb-1">
  75. <div class="d-flex justify-content-between">
  76. <span class="text-muted text-uppercase" style="letter-spacing:1px;">s.o.</span>
  77. <span>(sexual orientation)</span>
  78. </div>
  79. <hr class="my-2">
  80. </div>
  81.  
  82. <div class="col-md-6 mb-1">
  83. <div class="d-flex justify-content-between">
  84. <span class="text-muted text-uppercase" style="letter-spacing:1px;">dob</span>
  85. <span>content</span>
  86. </div>
  87. <hr class="my-2">
  88. </div>
  89.  
  90. <div class="col-md-6 mb-1">
  91. <div class="d-flex justify-content-between">
  92. <span class="text-muted text-uppercase" style="letter-spacing:1px;">sign</span>
  93. <span>content</span>
  94. </div>
  95. <hr class="my-2">
  96. </div>
  97.  
  98. <div class="col-md-6 mb-1">
  99. <div class="d-flex justify-content-between">
  100. <span class="text-muted text-uppercase" style="letter-spacing:1px;">origin</span>
  101. <span>content</span>
  102. </div>
  103. <hr class="my-2">
  104. </div>
  105.  
  106. <div class="col-md-6 mb-1">
  107. <div class="d-flex justify-content-between">
  108. <span class="text-muted text-uppercase" style="letter-spacing:1px;">occupation</span>
  109. <span>content</span>
  110. </div>
  111. <hr class="my-2">
  112. </div>
  113.  
  114. <div class="col-md-6 mb-1">
  115. <div class="d-flex justify-content-between">
  116. <span class="text-muted text-uppercase" style="letter-spacing:1px;">mbti</span>
  117. <span>content</span>
  118. </div>
  119. <hr class="my-2">
  120. </div>
  121.  
  122. <div class="col-md-6 mb-1">
  123. <div class="d-flex justify-content-between">
  124. <span class="text-muted text-uppercase" style="letter-spacing:1px;">demeanor</span>
  125. <span>content</span>
  126. </div>
  127. <hr class="my-2">
  128. </div>
  129.  
  130. <div class="col-md-6 mb-1">
  131. <div class="d-flex justify-content-between">
  132. <span class="text-muted text-uppercase" style="letter-spacing:1px;">tarot</span>
  133. <span>content</span>
  134. </div>
  135. <hr class="my-2">
  136. </div>
  137.  
  138. <div class="col-md-6 mb-1">
  139. <div class="d-flex justify-content-between">
  140. <span class="text-muted text-uppercase" style="letter-spacing:1px;">element</span>
  141. <span>$$$</span>
  142. </div>
  143. <hr class="my-2">
  144. </div>
  145.  
  146. <div class="col-md-6 mb-1">
  147. <div class="d-flex justify-content-between">
  148. <span class="text-muted text-uppercase" style="letter-spacing:1px;">obtained</span>
  149. <span>content</span>
  150. </div>
  151. <hr class="my-2">
  152. </div>
  153.  
  154. <div class="col-md-6 mb-1">
  155. <div class="d-flex justify-content-between">
  156. <span class="text-muted text-uppercase" style="letter-spacing:1px;">value</span>
  157. <span>$$$</span>
  158. </div>
  159. <hr class="my-2">
  160. </div>
  161. </div>
  162. <br></br>
  163. <!------ quote here ------------------>
  164. <p class="text-center mb-4" style="letter-spacing:2px;"><i>
  165. <i class="fas fa-quote-left"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <i class="fas fa-quote-right"></i>
  166. </i></p>
  167. </div>
  168. <!--------------------------- SECTION TWO -- DETAILS ------------------------------------>
  169. <div class="tab-pane card-block pb-0" style="height:530px; overflow:auto;" id="TWO">
  170.  
  171.  
  172. <div class="row">
  173. <!---------------------- LIKES & DISLIKES ------------------------------------------------->
  174. <div class="col-sm-6">
  175. <p class="text-muted text-uppercase" style="letter-spacing:1px;">Likes</p>
  176. <ul class="mb-0">
  177. <li class="mb-2">content</li>
  178. <li class="mb-2">content</li>
  179. <li class="mb-2">content</li>
  180. <li class="mb-2">content</li>
  181. </ul>
  182. </div>
  183.  
  184. <div class="col-sm-6">
  185. <p class="text-muted text-uppercase" style="letter-spacing:1px;">Dislikes</p>
  186. <ul class="mb-0">
  187. <li class="mb-2">content</li>
  188. <li class="mb-2">content</li>
  189. <li class="mb-2">content</li>
  190. <li class="mb-2">content</li>
  191. </ul>
  192. </div>
  193. </div>
  194. </div>
  195. <!--------------------------- SECTION THREE -- STORY ------------------------------------>
  196. <div class="tab-pane card-block pb-1" style="height:530px; overflow:auto;" id="THREE">
  197. <h3 style="font-weight: 300; letter-spacing:1px;"><i class="far fa-bookmark"></i> Subheader</h3>
  198. <hr class="mt-0 ">
  199. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis ex quis enim condimentum, vulputate elementum lacus viverra. Donec non dui id augue pellentesque aliquam et eget felis. Aliquam erat volutpat. Nulla nulla augue, vehicula id volutpat nec, auctor et ipsum. Phasellus pretium non libero eu ultricies. Proin et est vitae metus interdum ullamcorper vel sit amet augue. Integer et diam eu massa faucibus molestie non vitae metus. Donec cursus lectus eros, in vestibulum sapien porta et. Aliquam ac est lorem. Etiam pulvinar laoreet augue, et faucibus ligula ornare quis. Pellentesque sed leo tincidunt, consectetur dui in, tincidunt nunc.</p>
  200. <h3 style="font-weight: 300; letter-spacing:1px;"><i class="far fa-bookmark"></i> Subheader</h3>
  201. <hr class="mt-0 ">
  202. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis ex quis enim condimentum, vulputate elementum lacus viverra. Donec non dui id augue pellentesque aliquam et eget felis. Aliquam erat volutpat. Nulla nulla augue, vehicula id volutpat nec, auctor et ipsum. Phasellus pretium non libero eu ultricies. Proin et est vitae metus interdum ullamcorper vel sit amet augue. Integer et diam eu massa faucibus molestie non vitae metus. Donec cursus lectus eros, in vestibulum sapien porta et. Aliquam ac est lorem. Etiam pulvinar laoreet augue, et faucibus ligula ornare quis. Pellentesque sed leo tincidunt, consectetur dui in, tincidunt nunc.</p>
  203. <h3 style="font-weight: 300; letter-spacing:1px;"><i class="far fa-bookmark"></i> Subheader</h3>
  204. <hr class="mt-0 ">
  205. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis ex quis enim condimentum, vulputate elementum lacus viverra. Donec non dui id augue pellentesque aliquam et eget felis. Aliquam erat volutpat. Nulla nulla augue, vehicula id volutpat nec, auctor et ipsum. Phasellus pretium non libero eu ultricies. Proin et est vitae metus interdum ullamcorper vel sit amet augue. Integer et diam eu massa faucibus molestie non vitae metus. Donec cursus lectus eros, in vestibulum sapien porta et. Aliquam ac est lorem. Etiam pulvinar laoreet augue, et faucibus ligula ornare quis. Pellentesque sed leo tincidunt, consectetur dui in, tincidunt nunc.</p>
  206. </div>
  207. <!--------------------------- SECTION FOUR -- LINKS ------------------------------------>
  208. <div class="tab-pane card-block pb-1" style="height:530px; overflow:auto;" id="FOUR">
  209. <div class="row">
  210. <!--------------------------- CHARACTER LINK -------------------------------------->
  211. <div class="col-12 mb-2">
  212. <img src="IMG URL" style="max-height:150px;" class="rounded float-sm-right ml-sm-2 d-block mx-auto" />
  213. <h2 class="my-2 text-sm-left text-center" style="font-weight: 300;"><a href="#LINK">Character</a></h2>
  214. <p>[ <i>relationship</i> ] 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. </p>
  215. </div>
  216. <!--------------------------- CHARACTER LINK -------------------------------------->
  217. <div class="col-12 mb-2">
  218. <img src="IMG URL" style="max-height:150px;" class="rounded float-sm-right ml-sm-2 d-block mx-auto" />
  219. <h2 class="my-2 text-sm-left text-center" style="font-weight: 300;"><a href="#LINK">Character</a></h2>
  220. <p>[ <i>relationship</i> ] 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. </p>
  221. </div>
  222. <!--------------------------- CHARACTER LINK -------------------------------------->
  223. <div class="col-12 mb-2">
  224. <img src="IMG URL" style="max-height:150px;" class="rounded float-sm-right ml-sm-2 d-block mx-auto" />
  225. <h2 class="my-2 text-sm-left text-center" style="font-weight: 300;"><a href="#LINK">Character</a></h2>
  226. <p>[ <i>relationship</i> ] 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. </p>
  227. </div>
  228. </div>
  229. </div>
  230. </div>
  231. </div>
  232. </div>
  233. </div>
  234. <p class="text-right small">HTML by @lowkeywicked</p>
  235. </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!