API tools faq
paste
lowkeywicked

Freebie - Aside

lowkeywicked
Apr 9th, 2020 (edited)
7,971
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 18.53 KB | None | 0 0
raw download clone embed print report
  1. <div class="cotainer-fluid card border-0 px-0 pt-5 pb-4" style="margin-top: -62px;">
  2. <div class="container" style="max-width: 1000px;">
  3. <div class="row no-gutters">
  4. <div class="col-md-4 push-md-8">
  5. <!----- AVATAR IMAGE --- use a square image --- max size is 300px, will auto resize bigger images --->
  6. <img src="IMG_URL" class="d-block mx-auto mt-md-4 mb-4 img-thumbnail rounded-circle" style="max-height: 300px;">
  7. <ul class="nav nav-justified row no-gutters mb-1" style="letter-spacing: 1px; font-weight: 300; font-variant:small-caps;">
  8. <!----------------- NAVIGATION BUTTONS ----- YOU CAN CHANGE THE TEXT ---------------------------------------------------->
  9. <li class="nav-item col-6 mb-3 pr-2">
  10. <a class="nav-link active btn btn-outline-secondary" data-toggle="tab" href="#ONE">
  11. Basics</a></li>
  12.  
  13. <li class="nav-item col-6 mb-3 pl-2">
  14. <a class="nav-link btn btn-outline-secondary" data-toggle="tab" href="#TWO">
  15. About</a></li>
  16.  
  17. <li class="nav-item col-6 mb-3 pr-2">
  18. <a class="nav-link btn btn-outline-secondary" data-toggle="tab" href="#THREE">
  19. Mood</a></li>
  20.  
  21. <li class="nav-item col-6 mb-3 pl-2">
  22. <a class="nav-link btn btn-outline-secondary" data-toggle="tab" href="#FOUR">
  23. Links</a></li>
  24.  
  25. </ul>
  26. </div>
  27. <div class="col-md-8 pr-md-4 pull-md-4">
  28. <div class="tab-content">
  29. <!------------------------------- SECTION ONE -- BASICS --------------------------------->
  30. <div class="tab-pane fade in active show" id="ONE">
  31. <h1 class="display-4 text-muted" style="letter-spacing: 1px; font-variant:small-caps;">
  32. Title Here</h1>
  33. <div class="card bg-faded pl-2 pr-md-0 pr-2 pt-3 pb-1" style="height: 450px; overflow-x:auto;">
  34.  
  35. <div class="row no-gutters my-auto">
  36. <div class="col-sm-2 col-5 text-right text-muted pr-2" style="letter-spacing:1px; font-variant:small-caps;">
  37. Name
  38. </div><div class="col-sm-4 col-7 pr-md-2 mb-3">
  39. content
  40. </div>
  41.  
  42. <div class="col-sm-2 col-5 text-right text-muted pr-2" style="letter-spacing:1px; font-variant:small-caps;">
  43. Alias
  44. </div><div class="col-sm-4 col-7 pr-md-2 mb-3">
  45. content
  46. </div>
  47.  
  48. <div class="col-sm-2 col-5 text-right text-muted pr-2" style="letter-spacing:1px; font-variant:small-caps;">
  49. Age
  50. </div><div class="col-sm-4 col-7 pr-md-2 mb-3">
  51. content
  52. </div>
  53. <div class="col-sm-2 col-5 text-right text-muted pr-2" style="letter-spacing:1px; font-variant:small-caps;">
  54. DoB
  55. </div><div class="col-sm-4 col-7 pr-md-2 mb-3">
  56. content
  57. </div>
  58.  
  59. <div class="col-sm-2 col-5 text-right text-muted pr-2" style="letter-spacing:1px; font-variant:small-caps;">
  60. Gender
  61. </div><div class="col-sm-4 col-7 pr-md-2 mb-3">
  62. content
  63. </div>
  64.  
  65. <div class="col-sm-2 col-5 text-right text-muted pr-2" style="letter-spacing:1px; font-variant:small-caps;">
  66. Race
  67. </div><div class="col-sm-4 col-7 pr-md-2 mb-3">
  68. or species
  69. </div>
  70.  
  71. <div class="col-sm-2 col-5 text-right text-muted pr-2" style="letter-spacing:1px; font-variant:small-caps;">
  72. Role
  73. </div><div class="col-sm-4 col-7 pr-md-2 mb-3">
  74. what they do
  75. </div>
  76.  
  77. <div class="col-sm-2 col-5 text-right text-muted pr-2" style="letter-spacing:1px; font-variant:small-caps;">
  78. MBTI
  79. </div><div class="col-sm-4 col-7 pr-md-2 mb-3">
  80. content
  81. </div>
  82.  
  83. <div class="col-sm-2 col-5 text-right text-muted pr-2" style="letter-spacing:1px; font-variant:small-caps;">
  84. Theme
  85. </div><div class="col-sm-4 col-7 pr-md-2 mb-3">
  86. <!-------- link a song here ------------->
  87. <a href="SONG LINK" target="_BLANK">
  88. <i class="fas fa-music-alt fa-fw" /><i class="fas fa-music fa-fw" /><i class="fas fa-music-alt fa-fw" />
  89. </a>
  90. </div>
  91.  
  92. <div class="col-sm-2 col-5 text-right text-muted pr-2" style="letter-spacing:1px; font-variant:small-caps;">
  93. HTML
  94. </div><div class="col-sm-4 col-7 pr-md-2 mb-3">
  95. <!------ credit ------ leave this alone pls ---------------->
  96. @Pinky
  97. </div>
  98.  
  99. <!--------------- PERSONALITY STATS -- USE FAS TO FILL IN -- FAR TO OPEN -------------------------->
  100. <div class="col-sm-2 col-5 text-right text-muted pr-2" style="letter-spacing:1px; font-variant:small-caps;">
  101. Empathy
  102. </div><div class="col-sm-4 col-7 pr-md-2 mb-3">
  103. <i class="fas fa-circle fa-fw" />
  104. <i class="far fa-circle fa-fw" />
  105. <i class="far fa-circle fa-fw" />
  106. <i class="far fa-circle fa-fw" />
  107. <i class="far fa-circle fa-fw" />
  108. </div>
  109.  
  110. <div class="col-sm-2 col-5 text-right text-muted pr-2" style="letter-spacing:1px; font-variant:small-caps;">
  111. Charisma
  112. </div><div class="col-sm-4 col-7 pr-md-2 mb-3">
  113. <i class="fas fa-circle fa-fw" />
  114. <i class="far fa-circle fa-fw" />
  115. <i class="far fa-circle fa-fw" />
  116. <i class="far fa-circle fa-fw" />
  117. <i class="far fa-circle fa-fw" />
  118. </div>
  119.  
  120. <div class="col-sm-2 col-5 text-right text-muted pr-2" style="letter-spacing:1px; font-variant:small-caps;">
  121. Courage
  122. </div><div class="col-sm-4 col-7 pr-md-2 mb-3">
  123. <i class="fas fa-circle fa-fw" />
  124. <i class="far fa-circle fa-fw" />
  125. <i class="far fa-circle fa-fw" />
  126. <i class="far fa-circle fa-fw" />
  127. <i class="far fa-circle fa-fw" />
  128. </div>
  129.  
  130. <div class="col-sm-2 col-5 text-right text-muted pr-2" style="letter-spacing:1px; font-variant:small-caps;">
  131. Integrity
  132. </div><div class="col-sm-4 col-7 pr-md-2 mb-3">
  133. <i class="fas fa-circle fa-fw" />
  134. <i class="far fa-circle fa-fw" />
  135. <i class="far fa-circle fa-fw" />
  136. <i class="far fa-circle fa-fw" />
  137. <i class="far fa-circle fa-fw" />
  138. </div>
  139.  
  140. <div class="col-sm-2 col-5 text-right text-muted pr-2" style="letter-spacing:1px; font-variant:small-caps;">
  141. Intellect
  142. </div><div class="col-sm-4 col-7 pr-md-2 mb-3">
  143. <i class="fas fa-circle fa-fw" />
  144. <i class="far fa-circle fa-fw" />
  145. <i class="far fa-circle fa-fw" />
  146. <i class="far fa-circle fa-fw" />
  147. <i class="far fa-circle fa-fw" />
  148. </div>
  149.  
  150. <div class="col-sm-2 col-5 text-right text-muted pr-2" style="letter-spacing:1px; font-variant:small-caps;">
  151. Luck
  152. </div><div class="col-sm-4 col-7 pr-md-2 mb-3">
  153. <i class="fas fa-circle fa-fw" />
  154. <i class="far fa-circle fa-fw" />
  155. <i class="far fa-circle fa-fw" />
  156. <i class="far fa-circle fa-fw" />
  157. <i class="far fa-circle fa-fw" />
  158. </div>
  159.  
  160. <div class="col-sm-2 col-5 text-right text-muted pr-2" style="letter-spacing:1px; font-variant:small-caps;">
  161. Likes
  162. </div><div class="col-sm-4 col-7 pr-md-2 mb-3">
  163. one
  164. <br>two
  165. <br>three
  166. </div>
  167.  
  168. <div class="col-sm-2 col-5 text-right text-muted pr-2" style="letter-spacing:1px; font-variant:small-caps;">
  169. Dislikes
  170. </div><div class="col-sm-4 col-7 pr-md-2 mb-3">
  171. one
  172. <br>two
  173. <br>three
  174. </div>
  175. </div>
  176. </div>
  177. </div>
  178.  
  179. <!------------------------------- SECTION TWO -- ABOUT --------------------------------->
  180. <div class="tab-pane fade" id="TWO">
  181. <h1 class="display-4 text-muted" style="letter-spacing: 1px; font-variant:small-caps;">
  182. About</h1>
  183. <div class="card bg-faded px-3 pt-3 pb-2" style="height: 450px; overflow:auto;">
  184.  
  185. <p>Write a description of your character here. This box will scroll when filled with content.</p>
  186. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris porta condimentum luctus. Curabitur eu tortor et augue ullamcorper imperdiet et vel quam. In finibus ipsum eget consequat placerat. Suspendisse dignissim euismod sem at iaculis. Vivamus porta accumsan justo pulvinar ultricies. Praesent quis suscipit nisl. Integer enim ex, accumsan iaculis condimentum id, finibus a est.</p>
  187.  
  188. <p class="text-muted mb-1" style="letter-spacing:1px; font-variant:small-caps; font-size: 1.25em;">
  189. <i class="fas fa-bookmark fa-fw"/> Subheader
  190. </p>
  191. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris porta condimentum luctus. Curabitur eu tortor et augue ullamcorper imperdiet et vel quam. In finibus ipsum eget consequat placerat. Suspendisse dignissim euismod sem at iaculis. Vivamus porta accumsan justo pulvinar ultricies. Praesent quis suscipit nisl. Integer enim ex, accumsan iaculis condimentum id, finibus a est.</p>
  192. <p>Nulla eu blandit nisl. Quisque nec nulla eu lorem aliquet commodo. Vestibulum maximus laoreet lacus a sollicitudin. Nam vitae libero tempor, aliquet libero congue, tincidunt libero. Etiam elit neque, vehicula et interdum vitae, sodales et libero. Aliquam pulvinar vulputate sapien, id lacinia orci cursus eget. Aliquam erat volutpat. Duis vel quam at ante blandit lacinia. Pellentesque eget arcu lacus.</p>
  193.  
  194. <p class="text-muted mb-1" style="letter-spacing:1px; font-variant:small-caps; font-size: 1.25em;">
  195. <i class="fas fa-bookmark fa-fw"/> Subheader
  196. </p>
  197. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris porta condimentum luctus. Curabitur eu tortor et augue ullamcorper imperdiet et vel quam. In finibus ipsum eget consequat placerat. Suspendisse dignissim euismod sem at iaculis. Vivamus porta accumsan justo pulvinar ultricies. Praesent quis suscipit nisl. Integer enim ex, accumsan iaculis condimentum id, finibus a est.</p>
  198. <p>Nulla eu blandit nisl. Quisque nec nulla eu lorem aliquet commodo. Vestibulum maximus laoreet lacus a sollicitudin. Nam vitae libero tempor, aliquet libero congue, tincidunt libero. Etiam elit neque, vehicula et interdum vitae, sodales et libero. Aliquam pulvinar vulputate sapien, id lacinia orci cursus eget. Aliquam erat volutpat. Duis vel quam at ante blandit lacinia. Pellentesque eget arcu lacus.</p>
  199. </div>
  200. </div>
  201.  
  202. <!------------------------------- SECTION THREE -- MOODBOARD --------------------------------->
  203. <div class="tab-pane fade" id="THREE">
  204. <h1 class="display-4 text-muted" style="letter-spacing: 1px; font-variant:small-caps;">
  205. Moodboard</h1>
  206. <div class="card bg-faded px-3 pt-3 pb-1" style="height: 450px; overflow:auto;">
  207. <!----- images will scale with the screen size ---------------------------->
  208. <div class="row no-gutters my-auto">
  209. <div class="col-md-4 col-6 text-center px-1 mb-2">
  210. <img src="IMG_URL" class="rounded">
  211. </div>
  212.  
  213. <div class="col-md-4 col-6 text-center px-1 mb-2">
  214. <img src="IMG_URL" class="rounded">
  215. </div>
  216.  
  217. <div class="col-md-4 col-6 text-center px-1 mb-2">
  218. <img src="IMG_URL" class="rounded">
  219. </div>
  220.  
  221. <div class="col-md-4 col-6 text-center px-1 mb-2">
  222. <img src="IMG_URL" class="rounded">
  223. </div>
  224.  
  225. <div class="col-md-4 col-6 text-center px-1 mb-2">
  226. <img src="IMG_URL" class="rounded">
  227. </div>
  228.  
  229. <div class="col-md-4 col-6 text-center px-1 mb-2">
  230. <img src="IMG_URL" class="rounded">
  231. </div>
  232. </div>
  233. </div>
  234. </div>
  235.  
  236. <!------------------------------- SECTION FOUR -- LINKS --------------------------------->
  237. <div class="tab-pane fade" id="FOUR">
  238. <h1 class="display-4 text-muted" style="letter-spacing: 1px; font-variant:small-caps;">
  239. Relation<span class="hidden-sm-down">ship</span>s</h1>
  240. <div class="card bg-faded px-3 pt-3" style="height: 450px; overflow:auto;">
  241. <!----- RELATIONSHIPS --- number of hearts represents relationship strength --->
  242. <div class="row">
  243. <!---------------------- CHARACTER ROW ------------------------------------------>
  244. <div class="col-12 mb-2">
  245. <img src="IMG_URL"
  246. class="float-sm-left mr-sm-2 d-block mx-auto mb-1 rounded" style="height: 140px;">
  247.  
  248. <div class="justify-content-between mb-3">
  249. <a href="CHARACTER_LINK" style="letter-spacing:1px; font-variant: small-caps;">
  250. Name
  251. </a><span>
  252. <i class="fas fa-heart fa-fw" />
  253. <i class="fas fa-heart fa-fw" />
  254. <i class="fas fa-heart fa-fw" />
  255. <i class="fas fa-heart fa-fw" />
  256. <i class="fas fa-heart fa-fw" />
  257. </span>
  258. </div>
  259.  
  260. <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.</p>
  261. </div>
  262.  
  263. <!---------------------- CHARACTER ROW ------------------------------------------>
  264. <div class="col-12 mb-2">
  265. <img src="IMG_URL"
  266. class="float-sm-left mr-sm-2 d-block mx-auto mb-1 rounded" style="height: 140px;">
  267.  
  268. <div class="justify-content-between mb-3">
  269. <a href="CHARACTER_LINK" style="letter-spacing:1px; font-variant: small-caps;">
  270. Name
  271. </a><span>
  272. <i class="fas fa-heart fa-fw" />
  273. <i class="fas fa-heart fa-fw" />
  274. <i class="fas fa-heart fa-fw" />
  275. <i class="fas fa-heart fa-fw" />
  276. </span>
  277. </div>
  278.  
  279. <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.</p>
  280. </div>
  281.  
  282. <!---------------------- CHARACTER ROW ------------------------------------------>
  283. <div class="col-12 mb-2">
  284. <img src="IMG_URL"
  285. class="float-sm-left mr-sm-2 d-block mx-auto mb-1 rounded" style="height: 140px;">
  286.  
  287. <div class="justify-content-between mb-3">
  288. <a href="CHARACTER_LINK" style="letter-spacing:1px; font-variant: small-caps;">
  289. Name
  290. </a><span>
  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>
  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.</p>
  298. </div>
  299.  
  300. </div>
  301. </div>
  302.  
  303. </div>
  304. </div>
  305. </div>
  306. </div>
  307. </div>
  308. </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!