API tools faq
paste
lowkeywicked

Freebie - Toggle V2

lowkeywicked
May 18th, 2022 (edited)
24,095
4
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 20.71 KB | None | 4 0
raw download clone embed print report
  1. <div class="container-fluid d-block card border-0 px-0 py-5" style="margin-top: -58px;">
  2. <div class="container text-justify px-0" style="letter-spacing: .25px; font-size: 10pt;">
  3. <div class="row">
  4. <div class="col-md-4 order-md-2 mb-md-0 mb-3">
  5. <!--------- SIDE STATS -------------------------------------------------------->
  6. <div class="card d-block modal-open h-100">
  7. <div class="card-header bg-faded">
  8. <!-------------- CHARACTER NAME ----------------------------------------->
  9. <h1 class="text-center text-uppercase mb-0" style="font-weight:300; letter-spacing:1px;">
  10. Name</h1>
  11. </div>
  12. <div class="card-block">
  13. <!---------------- FOCAL IMAGE -- WILL SCALE ACROSS SCREEN SIZES ---------->
  14. <div style="background-image:url(IMG_URL);
  15. background-size:cover;background-position:center 0;background-repeat:no-repeat;min-height:300px;" class="rounded mb-3">
  16. </div>
  17.  
  18. <div class="justify-content-between">
  19. <span class="text-uppercase text-muted" style="font-weight: 300; letter-spacing: .5px;">
  20. Called</span>
  21. <span>content</span>
  22. </div>
  23. <hr class="my-2 faded">
  24.  
  25. <div class="justify-content-between">
  26. <span class="text-uppercase text-muted" style="font-weight: 300; letter-spacing: .5px;">
  27. Gender</span>
  28. <span>Content</span>
  29. </div>
  30. <hr class="my-2 faded">
  31.  
  32. <div class="justify-content-between">
  33. <span class="text-uppercase text-muted" style="font-weight: 300; letter-spacing: .5px;">
  34. Age</span>
  35. <span>Content</span>
  36. </div>
  37. <hr class="my-2 faded">
  38.  
  39. <div class="justify-content-between">
  40. <span class="text-uppercase text-muted" style="font-weight: 300; letter-spacing: .5px;">
  41. Role</span>
  42. <span>(what they do)</span>
  43. </div>
  44. <hr class="my-2 faded">
  45.  
  46. <div class="justify-content-between">
  47. <span class="text-uppercase text-muted" style="font-weight: 300; letter-spacing: .5px;">HTML</span>
  48. <!-- CODING CREDIT -- LEAVE THIS -------------->
  49. <span>@Pinky</span>
  50. </div>
  51. <hr class="my-2 faded hidden-sm-down">
  52.  
  53. <div class="row no-gutters align-items-center hidden-sm-down">
  54. <div class="col-auto text-uppercase text-muted" style="font-weight: 300; letter-spacing: .5px;">Theme
  55. </div><div class="col px-2"></div>
  56. <div class="col-auto text-primary pr-1">Song Name</div>
  57. <div class="col-auto"><div class="text-primary d-flex justify-content-center align-items-center h-100" style="position: relative;">
  58. <i class="fas fa-play fa-fw"></i><div style="position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: .0001; overflow: hidden;">
  59. <!---- MUSIC PLAYER ---- replace "ID_HERE" with a YT song ID
  60. ------ the ID is the numbers/symbols at the end of the url (ex: EbB4PP4HknU) ------->
  61. <iframe src="https://www.youtube.com/embed/uAYG46w1SCA?controls=0" frameborder="0" style="position: absolute; top: -100px; left: -300px;" width="700" height="500"></iframe></div>
  62. </div>
  63. </div>
  64. </div>
  65.  
  66. <!------------ SIDEBLOCK NAV BUTTONS --------------------------------------->
  67. <div>
  68.  
  69. </div></div>
  70. </div>
  71. </div>
  72. <!------------ CONTENT BLOCK --------------------------------------->
  73. <div class="col-md-8 order-md-1">
  74. <div class="card modal-open">
  75. <div class="card-header bg-faded">
  76. <!--------------------------- NAVIGATION BUTTONS -------------------------------------->
  77. <ul class="nav nav-tabs card-header-tabs nav-justified text-uppercase" style="letter-spacing:1px;">
  78. <li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#ONE">About</a></li>
  79.  
  80. <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#TWO">Details</a></li>
  81.  
  82. <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#THREE">Story</a></li>
  83.  
  84. <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#FOUR">Links</a></li>
  85. </ul>
  86. </div>
  87. <div class="tab-content">
  88. <!--------------------------- SECTION ONE --- ABOUT ----------------------------------->
  89. <div class="tab-pane active show px-4 pt-4 pb-md-1 pb-4" style="height: 565px; overflow:auto;" id="ONE">
  90. <!--------------- TOP ADJECTIVES ------------------------------->
  91. <h4 class="text-center text-uppercase mb-3" style="font-weight:300; letter-spacing:1px;">
  92. Adjective • Adjective • Adjective</h4>
  93.  
  94. <div class="card d-block rounded-0 p-2 mb-3 border-right-0 border-left-0">
  95. <p class="text-center text-muted mb-0"><i>"Write a quote or tagline here" </i></p>
  96. </div>
  97.  
  98. <!-- optional page doll -- just erase if you dont wanna use the image -- you can adjust the height -->
  99. <img src="IMG_URL"
  100. class="float-md-right pl-md-2 mb-md-0 mb-3 d-block mx-auto card border-0" style="max-height: 400px; z-index: 10;">
  101.  
  102. <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>
  103.  
  104. <p class="text-uppercase text-muted" style="font-weight: 300; letter-spacing: .5px; font-size: 11pt;">
  105. <i class="fal fa-list-alt fa-fw" /> Notes</p>
  106. <ul class="mb-0">
  107. <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  108. <li>Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit.</li>
  109. <li>Integer interdum urna ac dui sollicitudin sollicitudin.</li>
  110. <li>In feugiat posuere nulla, eget lobortis ante. Aliquam magna libero, dictum sit amet scelerisque ac, scelerisque tincidunt magna.</li>
  111. </ul>
  112. </div>
  113. <!--------------------------- SECTION TWO -- DETAILS ------------------------------------>
  114. <div class="tab-pane px-4 pt-4 pb-md-0 pb-4" style="height:565px; overflow:auto;" id="TWO">
  115. <p class="text-uppercase text-muted mb-1" style="font-weight: 300; letter-spacing: .5px; font-size: 11pt;">
  116. <i class="fal fa-sliders fa-fw" /> Character</p>
  117. <!-- slider stats -- change width % to move the bar -- the HIGHER the % the more RIGHT the bar will go -->
  118. <div class="row">
  119. <div class="col-lg-6 mb-3">
  120. <div class="justify-content-between">
  121. <span class="text-lowercase" style="letter-spacing: .5px;">Friendly</span>
  122. <span class="text-lowercase" style="letter-spacing: .5px;">Reserved</span>
  123. </div>
  124. <div class="progress rounded-0">
  125. <div class="progress-bar" style="height: 7px; background: transparent; width: 50%;"></div>
  126. <div class="bg-primary rounded p-1 ml-n1"></div>
  127. </div>
  128. </div>
  129.  
  130. <div class="col-lg-6 mb-3">
  131. <div class="justify-content-between">
  132. <span class="text-lowercase" style="letter-spacing: .5px;">Polite</span>
  133. <span class="text-lowercase" style="letter-spacing: .5px;">Blunt</span>
  134. </div>
  135. <div class="progress rounded-0">
  136. <div class="progress-bar" style="height: 7px; background: transparent; width: 50%;"></div>
  137. <div class="bg-primary rounded p-1 ml-n1"></div>
  138. </div>
  139. </div>
  140.  
  141. <div class="col-lg-6 mb-3">
  142. <div class="justify-content-between">
  143. <span class="text-lowercase" style="letter-spacing: .5px;">Clever</span>
  144. <span class="text-lowercase" style="letter-spacing: .5px;">Foolish</span>
  145. </div>
  146. <div class="progress rounded-0">
  147. <div class="progress-bar" style="height: 7px; background: transparent; width: 50%;"></div>
  148. <div class="bg-primary rounded p-1 ml-n1"></div>
  149. </div>
  150. </div>
  151.  
  152. <div class="col-lg-6 mb-3">
  153. <div class="justify-content-between">
  154. <span class="text-lowercase" style="letter-spacing: .5px;">Sensitive</span>
  155. <span class="text-lowercase" style="letter-spacing: .5px;">Tough</span>
  156. </div>
  157. <div class="progress rounded-0">
  158. <div class="progress-bar" style="height: 7px; background: transparent; width: 50%;"></div>
  159. <div class="bg-primary rounded p-1 ml-n1"></div>
  160. </div>
  161. </div>
  162.  
  163. <div class="col-lg-6 mb-3">
  164. <div class="justify-content-between">
  165. <span class="text-lowercase" style="letter-spacing: .5px;">Brave</span>
  166. <span class="text-lowercase" style="letter-spacing: .5px;">Timid</span>
  167. </div>
  168. <div class="progress rounded-0">
  169. <div class="progress-bar" style="height: 7px; background: transparent; width: 50%;"></div>
  170. <div class="bg-primary rounded p-1 ml-n1"></div>
  171. </div>
  172. </div>
  173.  
  174. <div class="col-lg-6 mb-3">
  175. <div class="justify-content-between">
  176. <span class="text-lowercase" style="letter-spacing: .5px;">Sincere</span>
  177. <span class="text-lowercase" style="letter-spacing: .5px;">Deceptive</span>
  178. </div>
  179. <div class="progress rounded-0">
  180. <div class="progress-bar" style="height: 7px; background: transparent; width: 50%;"></div>
  181. <div class="bg-primary rounded p-1 ml-n1"></div>
  182. </div>
  183. </div>
  184.  
  185. <div class="col-lg-6 mb-3">
  186. <div class="justify-content-between">
  187. <span class="text-lowercase" style="letter-spacing: .5px;">Diligent</span>
  188. <span class="text-lowercase" style="letter-spacing: .5px;">Lazy</span>
  189. </div>
  190. <div class="progress rounded-0">
  191. <div class="progress-bar" style="height: 7px; background: transparent; width: 50%;"></div>
  192. <div class="bg-primary rounded p-1 ml-n1"></div>
  193. </div>
  194. </div>
  195.  
  196. <div class="col-lg-6 mb-3">
  197. <div class="justify-content-between">
  198. <span class="text-lowercase" style="letter-spacing: .5px;">Humorous</span>
  199. <span class="text-lowercase" style="letter-spacing: .5px;">Serious</span>
  200. </div>
  201. <div class="progress rounded-0">
  202. <div class="progress-bar" style="height: 7px; background: transparent; width: 50%;"></div>
  203. <div class="bg-primary rounded p-1 ml-n1"></div>
  204. </div>
  205. </div>
  206.  
  207. </div>
  208.  
  209. <div class="row">
  210. <div class="col-md-6 mb-2">
  211. <p class="text-uppercase text-muted" style="font-weight: 300; letter-spacing: .5px; font-size: 11pt;">
  212. <i class="fal fa-heartbeat fa-fw" /> Likes</p>
  213. <ul class="mb-0">
  214. <li>One.</li>
  215. <li>Two.</li>
  216. <li>Three.</li>
  217. <li>Four.</li>
  218. </ul>
  219. </div>
  220. <div class="col-md-6 mb-2">
  221. <p class="text-uppercase text-muted" style="font-weight: 300; letter-spacing: .5px; font-size: 11pt;">
  222. <i class="fal fa-ban fa-fw" /> Dislikes</p>
  223. <ul class="mb-0">
  224. <li>One.</li>
  225. <li>Two.</li>
  226. <li>Three.</li>
  227. <li>Four.</li>
  228. </ul>
  229. </div>
  230. </div>
  231.  
  232. <p class="text-uppercase text-muted mb-1" style="font-weight: 300; letter-spacing: .5px; font-size: 11pt;">
  233. <i class="fal fa-images fa-fw" /> Moodboard</p>
  234. <div class="row no-gutters mx-n2">
  235. <div class="col-md-3 col-6 px-2 mb-3">
  236. <div style="background-image: url('https://f2.toyhou.se/file/f2-toyhou-se/images/35367489_0xdbJo1S1BBQZIy.png');
  237. background-size:cover; background-position:center; min-height: 175px;" class="rounded"></div>
  238. </div>
  239. <div class="col-md-3 col-6 px-2 mb-3">
  240. <div style="background-image: url('https://f2.toyhou.se/file/f2-toyhou-se/images/35367489_0xdbJo1S1BBQZIy.png');
  241. background-size:cover; background-position:center; min-height: 175px;" class="rounded"></div>
  242. </div>
  243. <div class="col-md-3 col-6 px-2 mb-3">
  244. <div style="background-image: url('https://f2.toyhou.se/file/f2-toyhou-se/images/35367489_0xdbJo1S1BBQZIy.png');
  245. background-size:cover; background-position:center; min-height: 175px;" class="rounded"></div>
  246. </div>
  247. <div class="col-md-3 col-6 px-2 mb-3">
  248. <div style="background-image: url('https://f2.toyhou.se/file/f2-toyhou-se/images/35367489_0xdbJo1S1BBQZIy.png');
  249. background-size:cover; background-position:center; min-height: 175px;" class="rounded"></div>
  250. </div>
  251. </div>
  252.  
  253. </div>
  254. <!--------------------------- SECTION THREE -- STORY ------------------------------------>
  255. <div class="tab-pane p-4" style="height:565px; overflow:auto;" id="THREE">
  256. <!-- optional page doll -- just erase if you dont wanna use the image -- you can adjust the height -->
  257. <img src="IMG_URL"
  258. class="float-md-right ml-md-2 mb-md-0 mb-3 rounded d-block mx-auto" style="max-height: 450px;">
  259.  
  260. <p class="text-uppercase text-muted mb-1" style="font-weight: 300; letter-spacing: .5px; font-size: 11pt;">
  261. <i class="fal fa-bookmark fa-fw" /> Subheader</p>
  262. <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>
  263.  
  264. <p class="text-uppercase text-muted mb-1" style="font-weight: 300; letter-spacing: .5px; font-size: 11pt;">
  265. <i class="fal fa-bookmark fa-fw" /> Subheader</p>
  266. <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>
  267.  
  268. <p class="text-uppercase text-muted mb-1" style="font-weight: 300; letter-spacing: .5px; font-size: 11pt;">
  269. <i class="fal fa-bookmark fa-fw" /> Subheader</p>
  270. <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>
  271. </div>
  272. <!--------------------------- SECTION FOUR -- LINKS ------------------------------------>
  273. <div class="tab-pane card-block pb-1" style="height:565px; overflow:auto;" id="FOUR">
  274. <div class="row">
  275.  
  276. <!--------------------------- CHARACTER LINK -------------------------------------->
  277. <div class="col-12 mb-3">
  278. <img src="IMG_URL"
  279. style="max-height:150px;" class="rounded float-sm-left mr-sm-2 d-block mx-auto" />
  280.  
  281. <div class="justify-content-between align-items-center">
  282. <h4 class="my-2 text-sm-left text-center text-uppercase" style="font-weight:300; letter-spacing:.5px">
  283. <!-- character name -- link to character here --->
  284. <a href="LINK_HERE" class="text-muted">
  285. Character Name
  286. </a></h4>
  287. <span>
  288. <!-- relationship strenght -- add class 'faded' to dull the heart -->
  289. <i class="fas fa-heart fa-fw" />
  290. <i class="fas fa-heart fa-fw" />
  291. <i class="fas fa-heart fa-fw" />
  292. <i class="fas fa-heart fa-fw" />
  293. <i class="fas fa-heart fa-fw" />
  294. </span>
  295. </div><hr class="mt-0 mb-2 hidden-md-up">
  296.  
  297. <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>
  298. </div>
  299.  
  300. <!--------------------------- CHARACTER LINK -------------------------------------->
  301. <div class="col-12 mb-3">
  302. <img src="IMG_URL"
  303. style="max-height:150px;" class="rounded float-sm-left mr-sm-2 d-block mx-auto" />
  304.  
  305. <div class="justify-content-between align-items-center">
  306. <h4 class="my-2 text-sm-left text-center text-uppercase" style="font-weight:300; letter-spacing:.5px">
  307. <!-- character name -- link to character here --->
  308. <a href="LINK_HERE" class="text-muted">
  309. Character Name
  310. </a></h4>
  311. <span>
  312. <!-- relationship strenght -- add class 'faded' to dull the heart -->
  313. <i class="fas fa-heart fa-fw" />
  314. <i class="fas fa-heart fa-fw" />
  315. <i class="fas fa-heart fa-fw" />
  316. <i class="fas fa-heart fa-fw faded" />
  317. <i class="fas fa-heart fa-fw faded" />
  318. </span>
  319. </div><hr class="mt-0 mb-2 hidden-md-up">
  320.  
  321. <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>
  322. </div>
  323.  
  324. <!--------------------------- CHARACTER LINK -------------------------------------->
  325. <div class="col-12 mb-3">
  326. <img src="IMG_URL"
  327. style="max-height:150px;" class="rounded float-sm-left mr-sm-2 d-block mx-auto" />
  328.  
  329. <div class="justify-content-between align-items-center">
  330. <h4 class="my-2 text-sm-left text-center text-uppercase" style="font-weight:300; letter-spacing:.5px">
  331. <!-- character name -- link to character here --->
  332. <a href="LINK_HERE" class="text-muted">
  333. Character Name
  334. </a></h4>
  335. <span>
  336. <!-- relationship strenght -- add class 'faded' to dull the heart -->
  337. <i class="fas fa-heart fa-fw" />
  338. <i class="fas fa-heart fa-fw" />
  339. <i class="fas fa-heart fa-fw faded" />
  340. <i class="fas fa-heart fa-fw faded" />
  341. <i class="fas fa-heart fa-fw faded" />
  342. </span>
  343. </div><hr class="mt-0 mb-2 hidden-md-up">
  344.  
  345. <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>
  346. </div>
  347.  
  348. </div>
  349. </div>
  350. </div>
  351. </div>
  352. </div>
  353. </div>
  354. </div>
  355. </div>
Advertisement
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!