API tools faq
paste
Advertisement
lowkeywicked

Freebie - Review

lowkeywicked
Dec 8th, 2021 (edited)
16,835
2
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.19 KB | None | 2 0
raw download clone embed print report
  1. <!--------------------------
  2. --
  3. -- Default custom accent color is #999999
  4. -- use find & replace in a word processor to quickly change all hex codes
  5. --
  6. --------------------------->
  7. <div class="container-fluid px-0 pt-5 pb-4 card border-0" style="margin-top: -60px;">
  8. <div class="container px-0" style="max-width: 1050px; font-size: 10.5pt;">
  9. <div class="d-flex justify-content-md-between justify-content-center px-4 py-3 rounded text-uppercase mb-2" style="line-height: 1; background: #999999; color: #fff;">
  10. <div style="font-size: 2em; font-weight: 600; letter-spacing: 1px; ">Character Name</div>
  11. <i class="fas fa-star fa-fw fa-2x hidden-sm-down" />
  12. </div>
  13. <div class="row no-gutters">
  14. <div class="col-lg-4 col-md-5 order-md-1 order-3 mb-2">
  15. <!-------- FOCAL IMAGE -- WILL SCALE & CROP WITH SCREEN -- FOCUS IN CENTER ------------------>
  16. <div style="background-image:url(IMG_URL);
  17. background-size: cover; repeat:no-repeat; background-position: center; min-height: 450px;" class="rounded card-block bg-faded h-100"></div>
  18. </div>
  19. <div class="col-lg-8 col-md-7 pl-md-2 order-2 mb-2">
  20. <div class="rounded bg-faded tab-content">
  21. <!------------------------------------ FIRST TAB ------------------------------------------------------------->
  22. <div class="tab-pane fade in active show" data-toggle="tab" id="ONE">
  23. <div class="px-4 pt-3 d-flex justify-content-between" style="color: #999999; font-weight: 600; line-height: 1;">
  24. <h1 style="font-size: 1.5em; letter-spacing:1px;" class="text-uppercase">Basics</h1>
  25. <i class="far fa-info-circle fa-fw" style="font-size: 1.5em;" />
  26. </div><div class="px-4 pt-2 pb-1" style="height: 425px; overflow: auto;">
  27. <div class="row">
  28. <div class="col-sm-6">
  29. <span class="text-uppercase text-muted">Name</span>
  30. <span class="pull-right">content</span>
  31. <hr class="my-2">
  32. </div>
  33.  
  34. <div class="col-sm-6">
  35. <span class="text-uppercase text-muted">Called</span>
  36. <span class="pull-right">content</span>
  37. <hr class="my-2">
  38. </div>
  39.  
  40. <div class="col-sm-6">
  41. <span class="text-uppercase text-muted">Age</span>
  42. <span class="pull-right">content</span>
  43. <hr class="my-2">
  44. </div>
  45.  
  46. <div class="col-sm-6">
  47. <span class="text-uppercase text-muted">Gender</span>
  48. <span class="pull-right">content</span>
  49. <hr class="my-2">
  50. </div>
  51.  
  52. <div class="col-sm-6">
  53. <span class="text-uppercase text-muted">Race</span>
  54. <span class="pull-right">content</span>
  55. <hr class="my-2">
  56. </div>
  57.  
  58. <div class="col-sm-6">
  59. <span class="text-uppercase text-muted">Role</span>
  60. <span class="pull-right">content</span>
  61. <hr class="my-2">
  62. </div>
  63.  
  64. <div class="col-sm-6">
  65. <span class="text-uppercase text-muted">Alignment</span>
  66. <span class="pull-right">content</span>
  67. <hr class="my-2">
  68. </div>
  69.  
  70. <div class="col-sm-6">
  71. <span class="text-uppercase text-muted">Theme</span>
  72. <span class="pull-right"> <a href="SONG LINK" style="color: #999999; font-weight: 600;" target="_BLANK">Song link</a></span>
  73. <hr class="my-2">
  74. </div>
  75.  
  76. <div class="col-sm-6">
  77. <p class="text-uppercase text-muted">Traits</p>
  78. <ul class="mb-0">
  79. <li class="mb-1">content</li>
  80. <li class="mb-1">content</li>
  81. <li class="mb-1">content</li>
  82. </ul>
  83. <hr class="my-2 hidden-md-up">
  84. </div>
  85.  
  86. <div class="col-sm-6">
  87. <p class="text-uppercase text-muted">Likes</p>
  88. <ul class="mb-0">
  89. <li class="mb-1">content</li>
  90. <li class="mb-1">content</li>
  91. <li class="mb-1">content</li>
  92. </ul>
  93. </div>
  94. </div>
  95. <div>
  96. <hr class="mt-2 mb-3">
  97. <p class="text-center mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi varius libero non sem dapibus, eget viverra nisl sagittis. Ut interdum mi non sagittis euismod. Suspendisse id venenatis massa. Aliquam ornare, nibh sit amet interdum elementum, leo sem laoreet nibh, at sollicitudin diam ipsum eu risus. Aenean gravida eu nibh id tincidunt. Pellentesque lorem mauris, cursus sed ligula eget, cursus posuere risus. Phasellus vel enim volutpat, sagittis augue at, condimentum ex. </p>
  98. </div>
  99. </div>
  100. </div>
  101. <!------------------------------------ SECOND TAB ------------------------------------------------------------->
  102. <div class="tab-pane fade" data-toggle="tab" id="TWO">
  103. <div class="px-4 pt-3 d-flex justify-content-between" style="color: #999999; font-weight: 600; line-height: 1;">
  104. <h1 style="font-size: 1.5em; letter-spacing:1px;" class="text-uppercase">About</h1>
  105. <i class="far fa-books fa-fw" style="font-size: 1.5em;" />
  106. </div><div class="px-4 pt-2 pb-1" style="height: 425px; overflow: auto;">
  107. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi varius libero non sem dapibus, eget viverra nisl sagittis. Ut interdum mi non sagittis euismod. Suspendisse id venenatis massa. Aliquam ornare, nibh sit amet interdum elementum, leo sem laoreet nibh, at sollicitudin diam ipsum eu risus. Aenean gravida eu nibh id tincidunt. Pellentesque lorem mauris, cursus sed ligula eget, cursus posuere risus. Phasellus vel enim volutpat, sagittis augue at, condimentum ex. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent consectetur semper ligula, nec pretium tellus iaculis at. Nulla facilisi. Phasellus gravida pellentesque dui. Vestibulum vel dui sed odio vehicula finibus sit amet non mauris. Donec ut posuere dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam et nibh lorem.</p>
  108. <p class="text-uppercase text-muted mb-0"><i class="fal fa-bookmark fa-fw" /> Subheader</p>
  109. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi varius libero non sem dapibus, eget viverra nisl sagittis. Ut interdum mi non sagittis euismod. Suspendisse id venenatis massa. Aliquam ornare, nibh sit amet interdum elementum, leo sem laoreet nibh, at sollicitudin diam ipsum eu risus. Aenean gravida eu nibh id tincidunt. Pellentesque lorem mauris, cursus sed ligula eget, cursus posuere risus. Phasellus vel enim volutpat, sagittis augue at, condimentum ex. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent consectetur semper ligula, nec pretium tellus iaculis at. Nulla facilisi. Phasellus gravida pellentesque dui. Vestibulum vel dui sed odio vehicula finibus sit amet non mauris. Donec ut posuere dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam et nibh lorem.</p>
  110.  
  111. <p class="text-uppercase text-muted mb-0"><i class="fal fa-bookmark fa-fw" /> Subheader</p>
  112. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi varius libero non sem dapibus, eget viverra nisl sagittis. Ut interdum mi non sagittis euismod. Suspendisse id venenatis massa. Aliquam ornare, nibh sit amet interdum elementum, leo sem laoreet nibh, at sollicitudin diam ipsum eu risus. Aenean gravida eu nibh id tincidunt. Pellentesque lorem mauris, cursus sed ligula eget, cursus posuere risus. Phasellus vel enim volutpat, sagittis augue at, condimentum ex. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent consectetur semper ligula, nec pretium tellus iaculis at. Nulla facilisi. Phasellus gravida pellentesque dui. Vestibulum vel dui sed odio vehicula finibus sit amet non mauris. Donec ut posuere dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam et nibh lorem.</p>
  113. </div>
  114. </div>
  115. <!------------------------------------ THIRD TAB ------------------------------------------------------------->
  116. <div class="tab-pane fade" data-toggle="tab" id="THREE">
  117. <div class="px-4 pt-3 d-flex justify-content-between" style="color: #999999; font-weight: 600; line-height: 1;">
  118. <h1 style="font-size: 1.5em; letter-spacing:1px;" class="text-uppercase">Trivia</h1>
  119. <i class="far fa-question-circle fa-fw" style="font-size: 1.5em;" />
  120. </div><div class="px-4 pt-2 pb-1" style="height: 425px; overflow: auto;">
  121. <!-- OPTIONAL FOCAL IMAGE -- you can adjust the height -- just remove if you dont wanna use it ----->
  122. <img src="IMG_URL" class="float-right ml-2 rounded hidden-sm-down"
  123. style="max-height: 350px;">
  124.  
  125. <ul class="mb-0 pl-4">
  126. <li class="mb-2">
  127. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  128. </li>
  129. <li class="mb-2">
  130. Morbi varius libero non sem dapibus, eget viverra nisl sagittis.
  131. </li>
  132. <li class="mb-2">
  133. Ut interdum mi non sagittis euismod. Suspendisse id venenatis massa.
  134. </li>
  135. <li class="mb-2">
  136. Aliquam ornare, nibh sit amet interdum elementum, leo sem laoreet nibh, at sollicitudin diam ipsum eu risus.
  137. </li>
  138. <li class="mb-2">
  139. Aenean gravida eu nibh id tincidunt. Pellentesque lorem mauris, cursus sed ligula eget, cursus posuere risus.
  140. </li>
  141. </ul>
  142. </div>
  143. </div>
  144. <!------------------------------------ FOURTH TAB ------------------------------------------------------------->
  145. <div class="tab-pane fade" data-toggle="tab" id="FOUR">
  146. <div class="px-4 pt-3 d-flex justify-content-between" style="color: #999999; font-weight: 600; line-height: 1;">
  147. <h1 style="font-size: 1.5em; letter-spacing:1px;" class="text-uppercase">Related</h1>
  148. <i class="far fa-users fa-fw" style="font-size: 1.5em;" />
  149. </div><div class="px-4 pt-2 pb-1" style="height: 425px; overflow: auto;">
  150. <div class="row">
  151. <!--------------------------- CHARACTER LINK -------------------------------------->
  152. <div class="col-12 mb-3">
  153. <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/17779357_tl5XW5yylUuVyKP.png" class="rounded float-sm-right ml-sm-2 d-block mx-auto"
  154. style="max-height:100px;" />
  155.  
  156. <p class="my-2" style="letter-spacing:1px; font-size: 14pt; font-weight:600;">
  157. <a href="LINK_HERE" style="color: #999999;">
  158. Character</a>
  159.  
  160. <span class="text-muted pull-right small mt-1" style="letter-spacing:1px;">
  161. [ relationship ]</span></p>
  162.  
  163. <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. </p>
  164. </div>
  165.  
  166. <!--------------------------- CHARACTER LINK -------------------------------------->
  167. <div class="col-12 mb-3">
  168. <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/17779357_tl5XW5yylUuVyKP.png" class="rounded float-sm-right ml-sm-2 d-block mx-auto"
  169. style="max-height:100px;" />
  170.  
  171. <p class="my-2" style="letter-spacing:1px; font-size: 14pt; font-weight:600;">
  172. <a href="LINK_HERE" style="color: #999999;">
  173. Character</a>
  174.  
  175. <span class="text-muted pull-right small mt-1" style="letter-spacing:1px;">
  176. [ relationship ]</span></p>
  177.  
  178. <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. </p>
  179. </div>
  180.  
  181. <!--------------------------- CHARACTER LINK -------------------------------------->
  182. <div class="col-12 mb-3">
  183. <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/17779357_tl5XW5yylUuVyKP.png" class="rounded float-sm-right ml-sm-2 d-block mx-auto"
  184. style="max-height:100px;" />
  185.  
  186. <p class="my-2" style="letter-spacing:1px; font-size: 14pt; font-weight:600;">
  187. <a href="LINK_HERE" style="color: #999999;">
  188. Character</a>
  189.  
  190. <span class="text-muted pull-right small mt-1" style="letter-spacing:1px;">
  191. [ relationship ]</span></p>
  192.  
  193. <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. </p>
  194. </div>
  195. </div>
  196. </div>
  197. </div>
  198. </div>
  199. </div>
  200. <div class="col-12 order-md-3 order-1">
  201. <ul class="nav nav-pills row no-gutters text-center text-uppercase" style="letter-spacing: 1px;">
  202. <!----------------- NAVIGATION BUTTONS ----- YOU CAN CHANGE THE TEXT ---- DO NOT ADD MORE ------------------------------------->
  203. <li class="nav-item col mr-1 mb-2"><a class="btn px-1 border-0 nav-link active" style="background: #999999; color: #fff; font-weight: 600; box-shadow:none;" data-toggle="tab" href="#ONE">
  204. Intro</a></li>
  205.  
  206. <li class="nav-item col mx-1 mb-2"><a class="btn px-1 border-0 nav-link" style="background: #999999; color: #fff; font-weight: 600; box-shadow:none;" data-toggle="tab" href="#TWO">
  207. About</a></li>
  208.  
  209. <li class="nav-item col mx-1 mb-2"><a class="btn px-1 border-0 nav-link" style="background: #999999; color: #fff; font-weight: 600; box-shadow:none;" data-toggle="tab" href="#THREE">
  210. Trivia</a></li>
  211.  
  212. <li class="nav-item col mx-1 mb-2"><a class="btn px-1 border-0 nav-link" style="background: #999999; color: #fff; font-weight: 600; box-shadow:none;" data-toggle="tab" href="#FOUR">
  213. Links</a></li>
  214.  
  215. <li class="nav-item col-auto ml-1 mb-2"><a class="btn px-2 border-0 nav-link" style="background: #999999; color: #fff; font-weight: 600; box-shadow:none;" target="_BLANK" href="/Pinky">
  216. <i class="fas fa-code fa-fw" /></a></li>
  217. </ul>
  218. </div>
  219. </div>
  220. </div></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!