API tools faq
paste
lowkeywicked

Freebie Window

lowkeywicked
Feb 7th, 2020 (edited)
9,157
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 24.03 KB | None | 0 0
raw download clone embed print report
  1. <!----------- content container -- sets border color ------------------------->
  2. <div style="background-color: #303030; padding:8px; max-width:850px; box-shadow: 0px 0px 10px rgba(0,0,0,.3);" class="mx-auto">
  3. <div class="row no-gutters">
  4.  
  5. <!---------- FOCAL IMAGE -- will scale with screen -- focus in top center of image ------------------------------------>
  6. <div class="col-md-5">
  7. <div style="background-image: url(IMG_URL);
  8. background-color: #fff;
  9. background-size: cover; background-position:top center; min-height: 350px;"
  10. class="card-block border-0 d-block h-100">
  11. </div>
  12. </div>
  13.  
  14. <!------------- CONTENT COLUMN -------------------------------->
  15. <div class="col-md-7">
  16.  
  17. <ul class="nav row no-gutters text-center py-1">
  18. <!----------------- NAVIGATION BUTTONS -----uses font awesome icons ---------------------------------------------------->
  19. <li class="nav-item col">
  20. <a class="nav-link active text-white" data-toggle="tab" href="#ONE">
  21. <i class="far fa-info-circle fa-2x" /></a>
  22. </li>
  23.  
  24. <li class="nav-item col">
  25. <a class="nav-link text-white" data-toggle="tab" href="#TWO">
  26. <i class="far fa-heartbeat fa-2x" /></a>
  27. </li>
  28.  
  29. <li class="nav-item col">
  30. <a class="nav-link text-white" data-toggle="tab" href="#THREE">
  31. <i class="far fa-book fa-2x" /></a>
  32. </li>
  33.  
  34. <li class="nav-item col">
  35. <a class="nav-link text-white" data-toggle="tab" href="#FOUR">
  36. <i class="far fa-users fa-2x" /></a>
  37. </li>
  38. </ul>
  39.  
  40. <div style="background:#fff; color: #222; border:none;">
  41. <div class="tab-content">
  42.  
  43. <!----------------- SECTION ONE - ABOUT --------------------------------------------------------------------->
  44. <div class="tab-pane fade in active show" id="ONE">
  45. <div class="pt-4 px-4" style="background:none; height: 530px; overflow:auto; padding-bottom:8px;">
  46.  
  47. <div class="row no-gutters mb-3">
  48. <div class="col-auto">
  49. <b style="letter-spacing: 1px;">Name</b></div>
  50. <div class="col px-1 pb-1">
  51. <div class="h-100" style="border-bottom:1px dotted #D9D9D9;"></div>
  52. </div>
  53. <div class="col-auto">
  54. content</div>
  55. </div>
  56.  
  57. <div class="row no-gutters mb-3">
  58. <div class="col-auto">
  59. <b style="letter-spacing: 1px;">Age</b></div>
  60. <div class="col px-1 pb-1">
  61. <div class="h-100" style="border-bottom:1px dotted #D9D9D9;"></div>
  62. </div>
  63. <div class="col-auto">
  64. content</div>
  65. </div>
  66.  
  67. <div class="row no-gutters mb-3">
  68. <div class="col-auto">
  69. <b style="letter-spacing: 1px;">Gender</b></div>
  70. <div class="col px-1 pb-1">
  71. <div class="h-100" style="border-bottom:1px dotted #D9D9D9;"></div>
  72. </div>
  73. <div class="col-auto">
  74. content</div>
  75. </div>
  76.  
  77. <div class="row no-gutters mb-3">
  78. <div class="col-auto">
  79. <b style="letter-spacing: 1px;">Pronouns</b></div>
  80. <div class="col px-1 pb-1">
  81. <div class="h-100" style="border-bottom:1px dotted #D9D9D9;"></div>
  82. </div>
  83. <div class="col-auto">
  84. content</div>
  85. </div>
  86.  
  87. <div class="row no-gutters mb-3">
  88. <div class="col-auto">
  89. <b style="letter-spacing: 1px;">Height</b></div>
  90. <div class="col px-1 pb-1">
  91. <div class="h-100" style="border-bottom:1px dotted #D9D9D9;"></div>
  92. </div>
  93. <div class="col-auto">
  94. content</div>
  95. </div>
  96.  
  97. <div class="row no-gutters mb-3">
  98. <div class="col-auto">
  99. <b style="letter-spacing: 1px;">Race</b></div>
  100. <div class="col px-1 pb-1">
  101. <div class="h-100" style="border-bottom:1px dotted #D9D9D9;"></div>
  102. </div>
  103. <div class="col-auto">
  104. content</div>
  105. </div>
  106.  
  107. <div class="row no-gutters mb-3">
  108. <div class="col-auto">
  109. <b style="letter-spacing: 1px;">Role</b></div>
  110. <div class="col px-1 pb-1">
  111. <div class="h-100" style="border-bottom:1px dotted #D9D9D9;"></div>
  112. </div>
  113. <div class="col-auto">
  114. content</div>
  115. </div>
  116.  
  117. <div class="row no-gutters mb-3">
  118. <div class="col-auto">
  119. <b style="letter-spacing: 1px;">MBTI</b></div>
  120. <div class="col px-1 pb-1">
  121. <div class="h-100" style="border-bottom:1px dotted #D9D9D9;"></div>
  122. </div>
  123. <div class="col-auto">
  124. content</div>
  125. </div>
  126.  
  127. <div class="row no-gutters mb-3">
  128. <div class="col-auto">
  129. <b style="letter-spacing: 1px;">Theme</b></div>
  130. <div class="col px-1 pb-1">
  131. <div class="h-100" style="border-bottom:1px dotted #D9D9D9;"></div>
  132. </div>
  133. <div class="col-auto">
  134. <a href="#SONG LINK" target="_BLANK"><i class="fas fa-music-alt" /> <i class="fas fa-music" /> <i class="fas fa-music-alt" /></a></div>
  135. </div>
  136.  
  137. <div class="row">
  138. <div class="col-sm-6">
  139. <b style="letter-spacing: 1px;">Likes</b>
  140. <ul class="mb-0">
  141. <li class="mb-2">content</li>
  142. <li class="mb-2">content</li>
  143. <li class="mb-2">content</li>
  144. <li class="mb-2">content</li>
  145. </ul>
  146. </div>
  147. <div class="col-sm-6">
  148. <b style="letter-spacing: 1px;">Dislikes</b>
  149. <ul class="mb-0">
  150. <li class="mb-2">content</li>
  151. <li class="mb-2">content</li>
  152. <li class="mb-2">content</li>
  153. <li class="mb-2">content</li>
  154. </ul>
  155. </div>
  156. </div>
  157. </div>
  158. </div>
  159.  
  160.  
  161. <!----------------- SECTION TWO - PERSONALITY --------------------------------------------------------------------->
  162. <div class="tab-pane fade" id="TWO">
  163. <div class="pt-4 px-4" style="background:none; height: 530px; overflow:auto; padding-bottom:8px;">
  164.  
  165. <div class="row no-gutters mb-3">
  166. <div class="col-auto">
  167. <b style="letter-spacing: 1px;">Kindness</b></div>
  168. <div class="col px-1 pb-1">
  169. <div class="h-100" style="border-bottom:1px dotted #D9D9D9;"></div>
  170. </div>
  171. <div class="col-auto">
  172. <i class="fas fa-star fa-fw" />
  173. <i class="fas fa-star fa-fw" />
  174. <i class="fas fa-star fa-fw" />
  175. <i class="far fa-star fa-fw" />
  176. <i class="far fa-star fa-fw" />
  177. </div>
  178. </div>
  179.  
  180. <div class="row no-gutters mb-3">
  181. <div class="col-auto">
  182. <b style="letter-spacing: 1px;">Patience</b></div>
  183. <div class="col px-1 pb-1">
  184. <div class="h-100" style="border-bottom:1px dotted #D9D9D9;"></div>
  185. </div>
  186. <div class="col-auto">
  187. <i class="fas fa-star fa-fw" />
  188. <i class="fas fa-star fa-fw" />
  189. <i class="fas fa-star fa-fw" />
  190. <i class="far fa-star fa-fw" />
  191. <i class="far fa-star fa-fw" />
  192. </div>
  193. </div>
  194.  
  195. <div class="row no-gutters mb-3">
  196. <div class="col-auto">
  197. <b style="letter-spacing: 1px;">Courage</b></div>
  198. <div class="col px-1 pb-1">
  199. <div class="h-100" style="border-bottom:1px dotted #D9D9D9;"></div>
  200. </div>
  201. <div class="col-auto">
  202. <i class="fas fa-star fa-fw" />
  203. <i class="fas fa-star fa-fw" />
  204. <i class="fas fa-star fa-fw" />
  205. <i class="far fa-star fa-fw" />
  206. <i class="far fa-star fa-fw" />
  207. </div>
  208. </div>
  209.  
  210. <div class="row no-gutters mb-3">
  211. <div class="col-auto">
  212. <b style="letter-spacing: 1px;">Integrity</b></div>
  213. <div class="col px-1 pb-1">
  214. <div class="h-100" style="border-bottom:1px dotted #D9D9D9;"></div>
  215. </div>
  216. <div class="col-auto">
  217. <i class="fas fa-star fa-fw" />
  218. <i class="fas fa-star fa-fw" />
  219. <i class="fas fa-star fa-fw" />
  220. <i class="far fa-star fa-fw" />
  221. <i class="far fa-star fa-fw" />
  222. </div>
  223. </div>
  224.  
  225. <div class="row no-gutters mb-3">
  226. <div class="col-auto">
  227. <b style="letter-spacing: 1px;">Intellect</b></div>
  228. <div class="col px-1 pb-1">
  229. <div class="h-100" style="border-bottom:1px dotted #D9D9D9;"></div>
  230. </div>
  231. <div class="col-auto">
  232. <i class="fas fa-star fa-fw" />
  233. <i class="fas fa-star fa-fw" />
  234. <i class="fas fa-star fa-fw" />
  235. <i class="far fa-star fa-fw" />
  236. <i class="far fa-star fa-fw" />
  237. </div>
  238. </div>
  239.  
  240. <div class="row no-gutters mb-3">
  241. <div class="col-auto">
  242. <b style="letter-spacing: 1px;">Charisma</b></div>
  243. <div class="col px-1 pb-1">
  244. <div class="h-100" style="border-bottom:1px dotted #D9D9D9;"></div>
  245. </div>
  246. <div class="col-auto">
  247. <i class="fas fa-star fa-fw" />
  248. <i class="fas fa-star fa-fw" />
  249. <i class="fas fa-star fa-fw" />
  250. <i class="far fa-star fa-fw" />
  251. <i class="far fa-star fa-fw" />
  252. </div>
  253. </div>
  254.  
  255. <div class="row no-gutters mb-3">
  256. <div class="col-auto">
  257. <b style="letter-spacing: 1px;">Confidence</b></div>
  258. <div class="col px-1 pb-1">
  259. <div class="h-100" style="border-bottom:1px dotted #D9D9D9;"></div>
  260. </div>
  261. <div class="col-auto">
  262. <i class="fas fa-star fa-fw" />
  263. <i class="fas fa-star fa-fw" />
  264. <i class="fas fa-star fa-fw" />
  265. <i class="far fa-star fa-fw" />
  266. <i class="far fa-star fa-fw" />
  267. </div>
  268. </div>
  269.  
  270. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas risus erat, malesuada vel scelerisque eu, convallis at sem. Phasellus ut ipsum at lorem viverra tincidunt vel et tellus. Ut sit amet diam ac tortor congue cursus. Aliquam vulputate lacinia felis sit amet suscipit. Mauris massa odio, suscipit id rutrum at, rutrum dignissim lacus. Quisque pulvinar, ipsum vitae rutrum molestie, lectus neque pulvinar lorem, nec commodo leo velit nec ligula. Donec aliquam id justo quis condimentum. Mauris enim massa, ullamcorper ac mi eu, ornare gravida ipsum. Aenean malesuada at risus a consectetur. Aenean erat lectus, laoreet eget blandit non, bibendum eu lacus.</p>
  271.  
  272. </div>
  273. </div>
  274.  
  275. <!----------------- SECTION THREE - SUMMARY --------------------------------------------------------------------->
  276. <div class="tab-pane fade" id="THREE">
  277. <div class="pt-4 px-4" style="background:none; height: 530px; overflow:auto; padding-bottom:8px;">
  278. <h4 style="letter-spacing:1.5px;">Subheader</h4>
  279. <hr class="mt-0" style="border-style:dotted; border-color: #bdbdbd;">
  280. <p>Write about their background/story here. 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>
  281. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas risus erat, malesuada vel scelerisque eu, convallis at sem. Phasellus ut ipsum at lorem viverra tincidunt vel et tellus. Ut sit amet diam ac tortor congue cursus. Aliquam vulputate lacinia felis sit amet suscipit. Mauris massa odio, suscipit id rutrum at, rutrum dignissim lacus. Quisque pulvinar, ipsum vitae rutrum molestie, lectus neque pulvinar lorem, nec commodo leo velit nec ligula. Donec aliquam id justo quis condimentum. Mauris enim massa, ullamcorper ac mi eu, ornare gravida ipsum. Aenean malesuada at risus a consectetur. Aenean erat lectus, laoreet eget blandit non, bibendum eu lacus.</p>
  282.  
  283. <h4 style="letter-spacing:1.5px;">Subheader</h4>
  284. <hr class="mt-0" style="border-style:dotted; border-color: #bdbdbd;">
  285.  
  286. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas risus erat, malesuada vel scelerisque eu, convallis at sem. Phasellus ut ipsum at lorem viverra tincidunt vel et tellus. Ut sit amet diam ac tortor congue cursus. Aliquam vulputate lacinia felis sit amet suscipit. Mauris massa odio, suscipit id rutrum at, rutrum dignissim lacus. Quisque pulvinar, ipsum vitae rutrum molestie, lectus neque pulvinar lorem, nec commodo leo velit nec ligula. Donec aliquam id justo quis condimentum. Mauris enim massa, ullamcorper ac mi eu, ornare gravida ipsum. Aenean malesuada at risus a consectetur. Aenean erat lectus, laoreet eget blandit non, bibendum eu lacus.</p>
  287.  
  288. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas risus erat, malesuada vel scelerisque eu, convallis at sem. Phasellus ut ipsum at lorem viverra tincidunt vel et tellus. Ut sit amet diam ac tortor congue cursus. Aliquam vulputate lacinia felis sit amet suscipit. Mauris massa odio, suscipit id rutrum at, rutrum dignissim lacus. Quisque pulvinar, ipsum vitae rutrum molestie, lectus neque pulvinar lorem, nec commodo leo velit nec ligula. Donec aliquam id justo quis condimentum. Mauris enim massa, ullamcorper ac mi eu, ornare gravida ipsum. Aenean malesuada at risus a consectetur. Aenean erat lectus, laoreet eget blandit non, bibendum eu lacus.</p>
  289.  
  290. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas risus erat, malesuada vel scelerisque eu, convallis at sem. Phasellus ut ipsum at lorem viverra tincidunt vel et tellus. Ut sit amet diam ac tortor congue cursus. Aliquam vulputate lacinia felis sit amet suscipit. Mauris massa odio, suscipit id rutrum at, rutrum dignissim lacus. Quisque pulvinar, ipsum vitae rutrum molestie, lectus neque pulvinar lorem, nec commodo leo velit nec ligula. Donec aliquam id justo quis condimentum. Mauris enim massa, ullamcorper ac mi eu, ornare gravida ipsum. Aenean malesuada at risus a consectetur. Aenean erat lectus, laoreet eget blandit non, bibendum eu lacus.</p>
  291. </div>
  292. </div>
  293.  
  294. <!----------------- SECTION FOUR - RELATIONSHIPS -------------------------------------------------->
  295. <div class="tab-pane fade" id="FOUR">
  296. <div class="pt-4 px-4" style="background:none; height: 530px; overflow:auto; padding-bottom:8px;">
  297. <div class="row">
  298. <!---------- CHARACTER --------------------------------->
  299. <div class="col-12 text-md-left text-center mb-3">
  300. <img src="IMG_URL" class="rounded float-md-right ml-md-2 mb-2 d-block mx-auto" style="max-height: 100px;">
  301. <div class="d-flex justify-content-between mb-1">
  302. <b style="letter-spacing: 1px;">Name</b>
  303. <span>
  304. <i class="fas fa-heart fa-fw" />
  305. <i class="fas fa-heart fa-fw" />
  306. <i class="fas fa-heart fa-fw" />
  307. <i class="fas fa-heart fa-fw" />
  308. <i class="fas fa-heart fa-fw" />
  309. </span></div>
  310.  
  311. <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>
  312. </div>
  313.  
  314. <!---------- CHARACTER --------------------------------->
  315. <div class="col-12 text-md-left text-center mb-3">
  316. <img src="IMG_URL" class="rounded float-md-right ml-md-2 mb-2 d-block mx-auto" style="max-height: 100px;">
  317.  
  318. <div class="d-flex justify-content-between mb-1">
  319. <b style="letter-spacing: 1px;">Name</b>
  320. <span>
  321. <i class="fas fa-heart fa-fw" />
  322. <i class="fas fa-heart fa-fw" />
  323. <i class="fas fa-heart fa-fw" />
  324. <i class="far fa-heart fa-fw" />
  325. <i class="far fa-heart fa-fw" />
  326. </span></div>
  327.  
  328. <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>
  329. </div>
  330.  
  331. <!---------- CHARACTER --------------------------------->
  332. <div class="col-12 text-md-left text-center mb-3">
  333. <img src="IMG_URL" class="rounded float-md-right ml-md-2 mb-2 d-block mx-auto" style="max-height: 100px;">
  334. <div class="d-flex justify-content-between mb-1">
  335. <b style="letter-spacing: 1px;">Name</b>
  336. <span>
  337. <i class="fas fa-heart fa-fw" />
  338. <i class="fas fa-heart fa-fw" />
  339. <i class="far fa-heart fa-fw" />
  340. <i class="far fa-heart fa-fw" />
  341. <i class="far fa-heart fa-fw" />
  342. </span></div>
  343.  
  344. <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>
  345. </div>
  346. </div>
  347. </div>
  348. </div>
  349. </div>
  350. </div>
  351. </div>
  352.  
  353. </div>
  354. </div>
  355.  
  356. <div class="container-fluid mt-2" style="max-width: 850px;">
  357. <!-------------------------- PLEASE LEAVE CREDIT ----------------------------------------->
  358. <p class="text-right small">HTML by @Pinky</p>
  359. </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!