API tools faq
paste
lowkeywicked

Freebie - Toggle Accent

lowkeywicked
Feb 13th, 2022 (edited)
1,331
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.27 KB | None | 0 0
raw download clone embed print report
  1. <div class="container-fluid px-0 pt-4" style="max-width: 1000px;">
  2. <div class="row no-gutters justify-content-center">
  3. <div class="col-md mb-md-2 mb-4" style="max-width: 300px;">
  4. <!--------- SIDE STATS -------------------------------------------------------->
  5. <div class="card d-block border-0 bg-faded h-100">
  6. <div class="card-header border-0" style="padding: 12px; background-color: #999999;">
  7. <!-------------- CHARACTER NAME ----------------------------------------->
  8. <h1 class="text-center text-white mb-0">Name</h1>
  9. </div>
  10. <!---------------- FOCAL IMAGE -- WILL SCALE ACROSS SCREEN SIZES ---------->
  11. <div style="background-image:url(IMG_URL);
  12. background-size:cover;background-position:center 0;background-repeat:no-repeat; min-height:300px;" class="mb-2">
  13. </div>
  14. <div class="justify-content-between px-3 py-2">
  15. <span class="text-uppercase text-muted" style="letter-spacing:1px;">age</span>
  16. <span>content</span>
  17. </div>
  18. <hr class="my-0">
  19. <div class="justify-content-between px-3 py-2">
  20. <span class="text-uppercase text-muted" style="letter-spacing:1px;">gender</span>
  21. <span>content</span>
  22. </div>
  23. <hr class="my-0">
  24. <div class="justify-content-between px-3 py-2">
  25. <span class="text-uppercase text-muted" style="letter-spacing:1px;">race</span>
  26. <span>content</span>
  27. </div>
  28. <hr class="my-0">
  29. <div class="justify-content-between px-3 py-2">
  30. <span class="text-uppercase text-muted" style="letter-spacing:1px;">role</span>
  31. <span>content</span>
  32. </div>
  33. <hr class="my-0">
  34. <div class="justify-content-between px-3 py-2">
  35. <span class="text-uppercase text-muted" style="letter-spacing:1px;">theme</span>
  36. <span><a href="YOUTUBE_URL" target="_BLANK" style="color: #999999;">
  37. <i class="fas fa-music-alt" /> <i class="fas fa-music" /> <i class="fas fa-music-alt" /></a>
  38. </span>
  39. </div>
  40. </div>
  41.  
  42. </div>
  43. <div class="col-md pl-md-4 mb-2">
  44. <div class="card border-0 bg-faded">
  45. <div class="card-header border-0" style="padding: 8px 12px 6px 12px; background-color: #999999;">
  46. <!--------------------------- NAVIGATION BUTTONS -------------------------------------->
  47. <ul class="nav nav-justified text-uppercase font-weight-bold" style="letter-spacing:1px;">
  48. <li class="nav-item"><a class="text-white px-1 nav-link active" data-toggle="tab" href="#ONE">About</a></li>
  49. <li class="nav-item"><a class="text-white px-1 nav-link" data-toggle="tab" href="#TWO">Details</a></li>
  50. <li class="nav-item"><a class="text-white px-1 nav-link" data-toggle="tab" href="#THREE">Story</a></li>
  51. <li class="nav-item"><a class="text-white px-1 nav-link" data-toggle="tab" href="#FOUR">Links</a></li>
  52. </ul>
  53. </div>
  54. <div class="tab-content">
  55. <!--------------------------- SECTION ONE --- ABOUT ----------------------------------->
  56. <div class="tab-pane active show card-block pb-1" style="height: 510px; overflow:auto;" id="ONE">
  57. <h4 class="text-center text-uppercase mb-4" style="font-weight:300; letter-spacing:1px;">
  58. Adjective • Adjective • Adjective</h4>
  59. <!-- FOCAL PAGE DOLL -------------------------->
  60. <img src="IMG_URL"
  61. style="max-height:400px; max-width: 250px;"
  62. class="rounded float-lg-right ml-lg-2 d-block mx-auto mb-2 hidden-sm-down">
  63. <p>Use this box to write your character description. This box will scroll when filled with content.</p>
  64. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. Integer interdum urna ac dui sollicitudin sollicitudin. In feugiat posuere nulla, eget lobortis ante. Aliquam magna libero, dictum sit amet scelerisque ac, scelerisque tincidunt magna. Nulla et consectetur diam. Aliquam ipsum mi, tristique sed vestibulum ac, aliquet eget magna. Aliquam quis fringilla erat. Morbi sollicitudin id lorem eu efficitur. Mauris varius id magna vitae ullamcorper. In gravida libero consectetur, lobortis nisl sit amet, pellentesque ligula. Suspendisse tincidunt feugiat posuere. Duis dui erat, accumsan a aliquam eu, efficitur a tortor. Nunc molestie, leo in commodo aliquam, tellus augue tempor velit, non placerat ex sem non nisi.</p>
  65. </div>
  66. <!--------------------------- SECTION TWO -- DETAILS ------------------------------------>
  67. <div class="tab-pane card-block pb-0" style="height: 510px; overflow:auto;" id="TWO">
  68.  
  69. <!------ quote here ------------------>
  70. <p class="text-center mb-4" style="letter-spacing:2px;"><i>
  71. "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
  72. </i></p>
  73.  
  74. <!------ trivia facs here ---------------------->
  75. <div class="row">
  76. <div class="col-md-6 mb-1">
  77. <div class="d-flex justify-content-between">
  78. <span class="text-muted text-uppercase" style="letter-spacing:1px;">height</span>
  79. <span>content</span>
  80. </div>
  81. <hr class="my-2">
  82. </div>
  83.  
  84. <div class="col-md-6 mb-1">
  85. <div class="d-flex justify-content-between">
  86. <span class="text-muted text-uppercase" style="letter-spacing:1px;">build</span>
  87. <span>content</span>
  88. </div>
  89. <hr class="my-2">
  90. </div>
  91.  
  92. <div class="col-md-6 mb-1">
  93. <div class="d-flex justify-content-between">
  94. <span class="text-muted text-uppercase" style="letter-spacing:1px;">pronouns</span>
  95. <span>content</span>
  96. </div>
  97. <hr class="my-2">
  98. </div>
  99.  
  100. <div class="col-md-6 mb-1">
  101. <div class="d-flex justify-content-between">
  102. <span class="text-muted text-uppercase" style="letter-spacing:1px;">s.o.</span>
  103. <span>(sexual orientation)</span>
  104. </div>
  105. <hr class="my-2">
  106. </div>
  107.  
  108. <div class="col-md-6 mb-1">
  109. <div class="d-flex justify-content-between">
  110. <span class="text-muted text-uppercase" style="letter-spacing:1px;">dob</span>
  111. <span>content</span>
  112. </div>
  113. <hr class="my-2">
  114. </div>
  115.  
  116. <div class="col-md-6 mb-1">
  117. <div class="d-flex justify-content-between">
  118. <span class="text-muted text-uppercase" style="letter-spacing:1px;">sign</span>
  119. <span>content</span>
  120. </div>
  121. <hr class="my-2">
  122. </div>
  123.  
  124. <div class="col-md-6 mb-1">
  125. <div class="d-flex justify-content-between">
  126. <span class="text-muted text-uppercase" style="letter-spacing:1px;">origin</span>
  127. <span>content</span>
  128. </div>
  129. <hr class="my-2">
  130. </div>
  131.  
  132. <div class="col-md-6 mb-1">
  133. <div class="d-flex justify-content-between">
  134. <span class="text-muted text-uppercase" style="letter-spacing:1px;">occupation</span>
  135. <span>content</span>
  136. </div>
  137. <hr class="my-2">
  138. </div>
  139.  
  140. <div class="col-md-6 mb-1">
  141. <div class="d-flex justify-content-between">
  142. <span class="text-muted text-uppercase" style="letter-spacing:1px;">tarot</span>
  143. <span>content</span>
  144. </div>
  145. <hr class="my-2">
  146. </div>
  147.  
  148. <div class="col-md-6 mb-1">
  149. <div class="d-flex justify-content-between">
  150. <span class="text-muted text-uppercase" style="letter-spacing:1px;">element</span>
  151. <span>content</span>
  152. </div>
  153. <hr class="my-2">
  154. </div>
  155.  
  156. <div class="col-md-6 mb-1">
  157. <div class="d-flex justify-content-between">
  158. <span class="text-muted text-uppercase" style="letter-spacing:1px;">obtained</span>
  159. <span>content</span>
  160. </div>
  161. <hr class="my-2">
  162. </div>
  163.  
  164. <div class="col-md-6 mb-1">
  165. <div class="d-flex justify-content-between">
  166. <span class="text-muted text-uppercase" style="letter-spacing:1px;">value</span>
  167. <span>$$$</span>
  168. </div>
  169. <hr class="my-2">
  170. </div>
  171. </div>
  172.  
  173. <div class="row">
  174. <!---------------------- LIKES & DISLIKES ------------------------------------------------->
  175. <div class="col-sm-6">
  176. <p class="text-muted text-uppercase" style="letter-spacing:1px;">Likes</p>
  177. <ul class="mb-0">
  178. <li class="mb-2">content</li>
  179. <li class="mb-2">content</li>
  180. <li class="mb-2">content</li>
  181. <li class="mb-2">content</li>
  182. </ul>
  183. </div>
  184.  
  185. <div class="col-sm-6">
  186. <p class="text-muted text-uppercase" style="letter-spacing:1px;">Dislikes</p>
  187. <ul class="mb-0">
  188. <li class="mb-2">content</li>
  189. <li class="mb-2">content</li>
  190. <li class="mb-2">content</li>
  191. <li class="mb-2">content</li>
  192. </ul>
  193. </div>
  194. </div>
  195. </div>
  196. <!--------------------------- SECTION THREE -- STORY ------------------------------------>
  197. <div class="tab-pane card-block pb-1" style="height: 510px; overflow:auto;" id="THREE">
  198. <h2 style="font-weight: 300; letter-spacing:1px;">Subheader</h2>
  199. <hr class="mt-0 ">
  200. <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>
  201. <h2 style="font-weight: 300; letter-spacing:1px;">Subheader</h2>
  202. <hr class="mt-0 ">
  203. <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>
  204. <h2 style="font-weight: 300; letter-spacing:1px;">Subheader</h2>
  205. <hr class="mt-0 ">
  206. <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>
  207. </div>
  208. <!--------------------------- SECTION FOUR -- LINKS ------------------------------------>
  209. <div class="tab-pane card-block pb-1" style="height: 510px; overflow:auto;" id="FOUR">
  210. <div class="row">
  211. <!--------------------------- CHARACTER LINK -------------------------------------->
  212. <div class="col-12 mb-2">
  213. <img src="IMG_URL"
  214. style="height:150px;" class="rounded float-sm-right ml-sm-2 d-block mx-auto" />
  215. <h2 class="my-2 text-sm-left text-center"><a href="LINK_HERE" style="color: #999999;">
  216. Character</a></h2>
  217. <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>
  218. </div>
  219. <!--------------------------- CHARACTER LINK -------------------------------------->
  220. <div class="col-12 mb-2">
  221. <img src="IMG_URL"
  222. style="height:150px;" class="rounded float-sm-right ml-sm-2 d-block mx-auto" />
  223. <h2 class="my-2 text-sm-left text-center"><a href="LINK_HERE" style="color: #999999;">
  224. Character</a></h2>
  225. <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>
  226. </div>
  227. <!--------------------------- CHARACTER LINK -------------------------------------->
  228. <div class="col-12 mb-2">
  229. <img src="IMG_URL"
  230. style="height:150px;" class="rounded float-sm-right ml-sm-2 d-block mx-auto" />
  231. <h2 class="my-2 text-sm-left text-center"><a href="LINK_HERE" style="color: #999999;">
  232. Character</a></h2>
  233. <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>
  234. </div>
  235. </div>
  236. </div>
  237. </div>
  238. </div>
  239. </div>
  240. </div>
  241. <p class="text-right small">HTML by @Pinky</p>
  242. </div>
Add Comment
Please, Sign In to add comment
Public Pastes
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!