API tools faq
paste
lowkeywicked

Freebie - Blocky

lowkeywicked
Oct 14th, 2022
3,028
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 37.36 KB | None | 0 0
raw download clone embed print report
  1. <!---
  2. ----- default focal color is #f2819f
  3. ----- use find & replace to quickly change color
  4. ----->
  5.  
  6. <!-- WRAPPER CONTAINER -- hides the default profile title -- remove this wrapper if using this HTML with CSS -->
  7. <div class="container-fluid card border-0 px-0 pt-lg-4 pt-5 pb-5" style="margin-top: -58px">
  8.  
  9. <!-- MAIN CONTAINER ------------------------------------------->
  10. <div style="max-width: 1250px;"
  11. class="container-fluid" >
  12. <div class="row justify-content-center">
  13. <div class="col-lg-4 order-lg-2">
  14. <div class="pt-lg-4 sticky-top" style="position: sticky;">
  15. <!-- RIGHT STICKY COLUMN -------------------------------------->
  16. <div class="card rounded-0 p-3"><div class="p-3 d-block bg-faded">
  17. <!-- AVATAR -- SHOULD BE AT LEAST 200 X 200 -- USE A SQUARE IMAGE --------->
  18. <img src="IMG_URL"
  19. class="d-block mx-auto rounded-circle p-1 img-thumbnail mb-3" style="max-height: 208px;">
  20.  
  21. <div class="justify-content-between">
  22. <span class="text-uppercase" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">
  23. Name</span>
  24. <span>content</span>
  25. </div>
  26. <hr class="my-2">
  27.  
  28. <div class="justify-content-between">
  29. <span class="text-uppercase" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">
  30. Called</span>
  31. <span>content</span>
  32. </div>
  33. <hr class="my-2">
  34.  
  35. <div class="justify-content-between">
  36. <span class="text-uppercase" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">
  37. Gender</span>
  38. <span>Content</span>
  39. </div>
  40. <hr class="my-2">
  41.  
  42. <div class="justify-content-between">
  43. <span class="text-uppercase" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">
  44. Pronouns</span>
  45. <span>Content</span>
  46. </div>
  47. <hr class="my-2">
  48.  
  49. <div class="justify-content-between">
  50. <span class="text-uppercase" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">
  51. Age</span>
  52. <span>Content</span>
  53. </div>
  54. <hr class="my-2">
  55.  
  56. <div class="justify-content-between">
  57. <span class="text-uppercase" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">
  58. Race</span>
  59. <span>or species</span>
  60. </div>
  61. <hr class="my-2">
  62.  
  63. <div class="justify-content-between">
  64. <span class="text-uppercase" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">
  65. Role</span>
  66. <span>what they do</span>
  67. </div>
  68. <hr class="my-2">
  69.  
  70. <div class="justify-content-between">
  71. <span class="text-uppercase" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">Theme
  72. </span>
  73. <!-- THEME SONG -- link to a youtube vid --->
  74. <span>Song Name <a href="SONG_LINK" target="_BLANK" style="color: #f2819f;"><i class="fas fa-play-circle fa-fw" /></a></span>
  75. </div>
  76. <hr class="my-2">
  77.  
  78. <div class="justify-content-between">
  79. <span class="text-uppercase" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">HTML</span>
  80. <!-- CODING CREDIT -- LEAVE THIS -------------->
  81. <span><b><a href="/pinky" style="color: #f2819f; letter-spacing: .5px;"><i class="fas fa-heart fa-fw" />Pinky</a></b></span>
  82. </div>
  83.  
  84. </div></div>
  85. </div></div>
  86. <!-- MAIN CONTENT COLUMN -- ------------------------------>
  87. <div style="line-height: 1.4;" class="col-lg-8 pt-lg-4 order-lg-1" >
  88.  
  89. <!-- INTRO ABOUT SECTION --------------------------------->
  90. <div class="card rounded-0 p-3 mb-5">
  91. <div class="row no-gutters align-items-center mb-1">
  92. <div class="col-auto pr-3"><h1 class="text-uppercase mb-0" style="letter-spacing: 2px; font-size: 2em;">
  93.  
  94. <i class="fas fa-stars fa-fw" /> About
  95.  
  96. </h1></div><div class="col"><hr></div>
  97. </div>
  98. <div class="row no-gutters">
  99. <div class="col-md-5 pr-md-2 mb-3">
  100. <!-- FOCAL IMAGE -- will scale and crop with screen -- change background-size to 'contain' if you want to use a pagedoll -->
  101. <div style="background-image: url('IMG_URL');
  102. background-size:cover; background-position: top center; background-repeat: no-repeat; min-height: 350px;" class="h-100"></div>
  103. </div>
  104. <div class="col-md-7 pl-md-2 mb-3">
  105. <!-- INTO CONTENT -- BOX WILL SCROLL WHEN FILLED ------------------------->
  106. <div class="bg-faded p-3 text-justify" style="height: 350px; overflow: auto;">
  107. <p>Write a little intro paragraph or two here. This box will scroll. 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>
  108. <p>Donec ut nulla fringilla mi sodales mattis. Morbi sit amet congue justo, quis pretium ante. Aliquam nec pretium massa. Suspendisse erat eros, congue non malesuada in, sagittis volutpat erat. Quisque cursus pretium ligula, efficitur sodales velit malesuada at. Vestibulum et turpis ut odio sagittis efficitur. Morbi congue urna odio. Proin maximus, elit eget tincidunt iaculis, neque urna interdum diam, eget pharetra tellus dui vitae nisl.</p>
  109. </div>
  110. </div>
  111. <div class="col-12">
  112. <div class="bg-faded p-3">
  113. <h4 class="text-uppercase text-center mb-3" style="letter-spacing: 1.5px;">
  114.  
  115. <i class="far fa-sliders fa-fw" /> Character
  116.  
  117. </h4>
  118. <!-- CHARACTER STATS SLIDER -- change width % to move the bar -- the HIGHER the % the more RIGHT the bar will go -->
  119. <div class="row mb-n3">
  120. <div class="col-lg-6 mb-3">
  121. <div class="justify-content-between">
  122. <span class="text-uppercase" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">Friendly</span>
  123. <span class="text-uppercase" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">Reserved</span>
  124. </div>
  125. <div class="progress rounded-0">
  126. <div class="progress-bar" style="height: 12px; background: transparent; width: 50%;"></div>
  127. <div class="p-1 ml-n1" style="background: #f2819f;"></div>
  128. </div>
  129. </div>
  130.  
  131. <div class="col-lg-6 mb-3">
  132. <div class="justify-content-between">
  133. <span class="text-uppercase" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">Polite</span>
  134. <span class="text-uppercase" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">Blunt</span>
  135. </div>
  136. <div class="progress rounded-0">
  137. <div class="progress-bar" style="height: 12px; background: transparent; width: 50%;"></div>
  138. <div class="p-1 ml-n1" style="background: #f2819f;"></div>
  139. </div>
  140. </div>
  141.  
  142. <div class="col-lg-6 mb-3">
  143. <div class="justify-content-between">
  144. <span class="text-uppercase" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">Clever</span>
  145. <span class="text-uppercase" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">Foolish</span>
  146. </div>
  147. <div class="progress rounded-0">
  148. <div class="progress-bar" style="height: 12px; background: transparent; width: 50%;"></div>
  149. <div class="p-1 ml-n1" style="background: #f2819f;"></div>
  150. </div>
  151. </div>
  152.  
  153. <div class="col-lg-6 mb-3">
  154. <div class="justify-content-between">
  155. <span class="text-uppercase" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">Brave</span>
  156. <span class="text-uppercase" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">Timid</span>
  157. </div>
  158. <div class="progress rounded-0">
  159. <div class="progress-bar" style="height: 12px; background: transparent; width: 50%;"></div>
  160. <div class="p-1 ml-n1" style="background: #f2819f;"></div>
  161. </div>
  162. </div>
  163.  
  164. <div class="col-lg-6 mb-3">
  165. <div class="justify-content-between">
  166. <span class="text-uppercase" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">Careful</span>
  167. <span class="text-uppercase" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">Reckless</span>
  168. </div>
  169. <div class="progress rounded-0">
  170. <div class="progress-bar" style="height: 12px; background: transparent; width: 50%;"></div>
  171. <div class="p-1 ml-n1" style="background: #f2819f;"></div>
  172. </div>
  173. </div>
  174.  
  175. <div class="col-lg-6 mb-3">
  176. <div class="justify-content-between">
  177. <span class="text-uppercase" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">Sincere</span>
  178. <span class="text-uppercase" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">Deceptive</span>
  179. </div>
  180. <div class="progress rounded-0">
  181. <div class="progress-bar" style="height: 12px; background: transparent; width: 50%;"></div>
  182. <div class="p-1 ml-n1" style="background: #f2819f;"></div>
  183. </div>
  184. </div>
  185.  
  186. <div class="col-lg-6 mb-3">
  187. <div class="justify-content-between">
  188. <span class="text-uppercase" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">Optimistic</span>
  189. <span class="text-uppercase" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">Pessimistic</span>
  190. </div>
  191. <div class="progress rounded-0">
  192. <div class="progress-bar" style="height: 12px; background: transparent; width: 50%;"></div>
  193. <div class="p-1 ml-n1" style="background: #f2819f;"></div>
  194. </div>
  195. </div>
  196.  
  197. <div class="col-lg-6 mb-3">
  198. <div class="justify-content-between">
  199. <span class="text-uppercase" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">Diligent</span>
  200. <span class="text-uppercase" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">Lazy</span>
  201. </div>
  202. <div class="progress rounded-0">
  203. <div class="progress-bar" style="height: 12px; background: transparent; width: 50%;"></div>
  204. <div class="p-1 ml-n1" style="background: #f2819f;"></div>
  205. </div>
  206. </div>
  207.  
  208. <div class="col-lg-6 mb-3">
  209. <div class="justify-content-between">
  210. <span class="text-uppercase" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">Calm</span>
  211. <span class="text-uppercase" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">Irritable</span>
  212. </div>
  213. <div class="progress rounded-0">
  214. <div class="progress-bar" style="height: 12px; background: transparent; width: 50%;"></div>
  215. <div class="p-1 ml-n1" style="background: #f2819f;"></div>
  216. </div>
  217. </div>
  218.  
  219. <div class="col-lg-6 mb-3">
  220. <div class="justify-content-between">
  221. <span class="text-uppercase" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">Humorous</span>
  222. <span class="text-uppercase" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">Serious</span>
  223. </div>
  224. <div class="progress rounded-0">
  225. <div class="progress-bar" style="height: 12px; background: transparent; width: 50%;"></div>
  226. <div class="p-1 ml-n1" style="background: #f2819f;"></div>
  227. </div>
  228. </div>
  229.  
  230. </div>
  231. </div>
  232. </div>
  233. </div>
  234. </div>
  235.  
  236. <!-- TRIVIA SECTION --------------------------------->
  237. <div class="card rounded-0 p-3 mb-5">
  238. <div class="row no-gutters align-items-center mb-1">
  239. <div class="col-auto pr-3"><h1 class="text-uppercase mb-0" style="letter-spacing: 2px; font-size: 2em;">
  240.  
  241. <i class="fas fa-list fa-fw" /> Trivia
  242.  
  243. </h1></div><div class="col"><hr></div>
  244. </div>
  245.  
  246. <!-- LIKES AND DISLIKES ROW --------------------->
  247. <div class="row no-gutters"><div class="col-md-6 pr-md-2 mb-3">
  248. <div class="p-3 bg-faded h-100">
  249. <h4 class="text-uppercase text-center mb-3" style="letter-spacing: 1.5px;">
  250. <i class="far fa-heart fa-fw" /> Likes
  251. </h4>
  252.  
  253. <p><span class="text-uppercase" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">
  254. Like 1 <i class="fas fa-angle-right fa-fw faded" /></span>
  255. List something they like then give a small description about it/why they like it.</p>
  256.  
  257. <p><span class="text-uppercase" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">
  258. Like 2 <i class="fas fa-angle-right fa-fw faded" /></span>
  259. List something they like then give a small description about it/why they like it.</p>
  260.  
  261. <p><span class="text-uppercase" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">
  262. Like 3 <i class="fas fa-angle-right fa-fw faded" /></span>
  263. List something they like then give a small description about it/why they like it.</p>
  264.  
  265. <p><span class="text-uppercase" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">
  266. Like 4 <i class="fas fa-angle-right fa-fw faded" /></span>
  267. List something they like then give a small description about it/why they like it.</p>
  268.  
  269. </div></div>
  270.  
  271. <div class="col-md-6 pl-md-2 mb-3">
  272. <div class="p-3 bg-faded h-100">
  273. <h4 class="text-uppercase text-center mb-3" style="letter-spacing: 1.5px;">
  274. <i class="far fa-ban fa-fw" /> Dislikes
  275. </h4>
  276.  
  277. <p><span class="text-uppercase" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">
  278. Dislikes 1 <i class="fas fa-angle-right fa-fw faded" /></span>
  279. List something they don't like then give a small description about it.</p>
  280.  
  281. <p><span class="text-uppercase" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">
  282. Dislikes 2 <i class="fas fa-angle-right fa-fw faded" /></span>
  283. List something they don't like then give a small description about it.</p>
  284.  
  285. <p><span class="text-uppercase" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">
  286. Dislikes 3 <i class="fas fa-angle-right fa-fw faded" /></span>
  287. List something they don't like then give a small description about it.</p>
  288.  
  289. <p><span class="text-uppercase" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">
  290. Dislikes 4 <i class="fas fa-angle-right fa-fw faded" /></span>
  291. List something they don't like then give a small description about it.</p>
  292.  
  293. </div></div>
  294. </div>
  295.  
  296. <div class="d-flex p-3 bg-faded"><div class="w-100">
  297. <!-- OPTIONAL FOCAL IMAGE -- erase if you dont wanna use ------------>
  298. <img src="IMG_URL"
  299. class="float-md-right d-block mx-auto ml-md-3 mb-md-0 mb-3"
  300. style="max-height: 350px;">
  301.  
  302. <ul class="mb-0 modal-open">
  303. <li class="mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  304. <li class="mb-2">Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. </li>
  305. <li class="mb-2">Integer interdum urna ac dui sollicitudin sollicitudin.</li>
  306. <li class="mb-2">In feugiat posuere nulla, eget lobortis ante. </li>
  307. </ul>
  308. </div></div>
  309. </div>
  310.  
  311. <!-- BATTLE STATS SECTION --------------------------------->
  312. <div class="card rounded-0 p-3 mb-5">
  313. <div class="row no-gutters align-items-center mb-1">
  314. <div class="col-auto pr-3"><h1 class="text-uppercase mb-0" style="letter-spacing: 2px; font-size: 2em;">
  315.  
  316. <i class="fas fa-sword fa-fw" /> Stats
  317.  
  318. </h1></div><div class="col"><hr></div>
  319. </div>
  320. <!-- BATTLE STATS SLIDER -- you will set the % twice for each stat -- once in the span for display & one in the div to control bar width
  321. ------>
  322. <div class="p-3 bg-faded mb-3">
  323. <div class="row mb-n3">
  324. <div class="col-lg-6 mb-3">
  325. <div class="justify-content-between">
  326. <span class="text-uppercase" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">Attack</span>
  327. <span class="faded">50%</span> <!-- display percentage -->
  328. </div>
  329. <div class="progress rounded-0">
  330. <!-- bar percentage & background color ------------------>
  331. <div style="width: 50%; background-color: #f2819f; height: 12px;" class="progress-bar"></div>
  332. </div>
  333. </div>
  334. <div class="col-lg-6 mb-3">
  335. <div class="justify-content-between">
  336. <span class="text-uppercase" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">Defense</span>
  337. <span class="faded">50%</span> <!-- display percentage -->
  338. </div>
  339. <div class="progress rounded-0">
  340. <!-- bar percentage & background color ------------------>
  341. <div style="width: 50%; background-color: #f2819f; height: 12px;" class="progress-bar"></div>
  342. </div>
  343. </div>
  344. <div class="col-lg-6 mb-3">
  345. <div class="justify-content-between">
  346. <span class="text-uppercase" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">Magic</span>
  347. <span class="faded">50%</span> <!-- display percentage -->
  348. </div>
  349. <div class="progress rounded-0">
  350. <!-- bar percentage & background color ------------------>
  351. <div style="width: 50%; background-color: #f2819f; height: 12px;" class="progress-bar"></div>
  352. </div>
  353. </div>
  354. <div class="col-lg-6 mb-3">
  355. <div class="justify-content-between">
  356. <span class="text-uppercase" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">Resistance</span>
  357. <span class="faded">50%</span> <!-- display percentage -->
  358. </div>
  359. <div class="progress rounded-0">
  360. <!-- bar percentage & background color ------------------>
  361. <div style="width: 50%; background-color: #f2819f; height: 12px;" class="progress-bar"></div>
  362. </div>
  363. </div>
  364. <div class="col-lg-6 mb-3">
  365. <div class="justify-content-between">
  366. <span class="text-uppercase" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">Agility</span>
  367. <span class="faded">50%</span> <!-- display percentage -->
  368. </div>
  369. <div class="progress rounded-0">
  370. <!-- bar percentage & background color ------------------>
  371. <div style="width: 50%; background-color: #f2819f; height: 12px;" class="progress-bar"></div>
  372. </div>
  373. </div>
  374. <div class="col-lg-6 mb-3">
  375. <div class="justify-content-between">
  376. <span class="text-uppercase" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">Stamina</span>
  377. <span class="faded">50%</span> <!-- display percentage -->
  378. </div>
  379. <div class="progress rounded-0">
  380. <!-- bar percentage & background color ------------------>
  381. <div style="width: 50%; background-color: #f2819f; height: 12px;" class="progress-bar"></div>
  382. </div>
  383. </div>
  384. <div class="col-lg-6 mb-3">
  385. <div class="justify-content-between">
  386. <span class="text-uppercase" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">Strategy</span>
  387. <span class="faded">50%</span> <!-- display percentage -->
  388. </div>
  389. <div class="progress rounded-0">
  390. <!-- bar percentage & background color ------------------>
  391. <div style="width: 50%; background-color: #f2819f; height: 12px;" class="progress-bar"></div>
  392. </div>
  393. </div>
  394. <div class="col-lg-6 mb-3">
  395. <div class="justify-content-between">
  396. <span class="text-uppercase" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">Luck</span>
  397. <span class="faded">50%</span> <!-- display percentage -->
  398. </div>
  399. <div class="progress rounded-0">
  400. <!-- bar percentage & background color ------------------>
  401. <div style="width: 50%; background-color: #f2819f; height: 12px;" class="progress-bar"></div>
  402. </div>
  403. </div>
  404. </div>
  405. </div>
  406.  
  407. <!-- STRENGTHS AND WEAKNESSES ROW --------------------->
  408. <div class="row no-gutters mb-n3"><div class="col-md-6 pr-md-2 mb-3">
  409. <div class="p-3 bg-faded h-100">
  410. <h4 class="text-uppercase text-center mb-3" style="letter-spacing: 1.5px;">
  411. <i class="far fa-plus-circle fa-fw" /> Strengths
  412. </h4>
  413.  
  414. <p><span class="text-uppercase" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">
  415. Thing <i class="fas fa-angle-right fa-fw faded" /></span>
  416. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  417.  
  418. <p><span class="text-uppercase" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">
  419. Thing <i class="fas fa-angle-right fa-fw faded" /></span>
  420. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  421.  
  422. <p><span class="text-uppercase" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">
  423. Thing <i class="fas fa-angle-right fa-fw faded" /></span>
  424. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  425.  
  426. <p><span class="text-uppercase" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">
  427. Thing <i class="fas fa-angle-right fa-fw faded" /></span>
  428. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  429.  
  430. </div></div>
  431.  
  432. <div class="col-md-6 pl-md-2 mb-3">
  433. <div class="p-3 bg-faded h-100">
  434. <h4 class="text-uppercase text-center mb-3" style="letter-spacing: 1.5px;">
  435. <i class="far fa-minus-circle fa-fw" /> Flaws
  436. </h4>
  437.  
  438. <p><span class="text-uppercase" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">
  439. Thing <i class="fas fa-angle-right fa-fw faded" /></span>
  440. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  441.  
  442. <p><span class="text-uppercase" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">
  443. Thing <i class="fas fa-angle-right fa-fw faded" /></span>
  444. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  445.  
  446. <p><span class="text-uppercase" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">
  447. Thing <i class="fas fa-angle-right fa-fw faded" /></span>
  448. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  449.  
  450. <p><span class="text-uppercase" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">
  451. Thing <i class="fas fa-angle-right fa-fw faded" /></span>
  452. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  453.  
  454. </div></div>
  455. </div>
  456.  
  457. </div>
  458.  
  459. <!-- DESIGN SECTION --------------------------------->
  460. <div class="card rounded-0 p-3 mb-5">
  461. <div class="row no-gutters align-items-center mb-1">
  462. <div class="col-auto pr-3"><h1 class="text-uppercase mb-0" style="letter-spacing: 2px; font-size: 2em;">
  463.  
  464. <i class="fas fa-palette fa-fw" /> Design
  465.  
  466. </h1></div><div class="col"><hr></div>
  467. </div>
  468. <div class="p-3 bg-faded mb-3">
  469. <div class="row">
  470. <div class="col-lg-5 mb-lg-0 mb-4">
  471. <!-- DESIGN FOCAL IMAGE -- will center itself in the space -->
  472. <div style="background-image: url('IMG_URL');
  473. background-size: contain; background-position:center; background-repeat: no-repeat; min-height: 600px;" class="h-100"></div>
  474. </div>
  475. <div class="col-lg-7">
  476.  
  477. <!-- DESIGN STATS -- feel free to modify the titles to make them other things -->
  478. <div class="justify-content-between">
  479. <span class="text-uppercase" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">Height</span>
  480. <span>Content</span>
  481. </div>
  482. <hr class="my-2 faded" style="border-color: rgba(0,0,0,.125);">
  483.  
  484. <div class="justify-content-between">
  485. <span class="text-uppercase" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">Build</span>
  486. <span>Content</span>
  487. </div>
  488. <hr class="my-2 faded" style="border-color: rgba(0,0,0,.125);">
  489.  
  490. <div class="justify-content-between">
  491. <span class="text-uppercase" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">Eyes</span>
  492. <span>Content</span>
  493. </div>
  494. <hr class="my-2 faded" style="border-color: rgba(0,0,0,.125);">
  495.  
  496. <div class="justify-content-between">
  497. <span class="text-uppercase" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">Skin Tone</span>
  498. <span>Content</span>
  499. </div>
  500. <hr class="my-2 faded" style="border-color: rgba(0,0,0,.125);">
  501.  
  502. <div class="justify-content-between">
  503. <span class="text-uppercase" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">Hair Color</span>
  504. <span>Content</span>
  505. </div>
  506. <hr class="my-2 faded" style="border-color: rgba(0,0,0,.125);">
  507.  
  508. <div class="justify-content-between">
  509. <span class="text-uppercase" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">Hair Style</span>
  510. <span>Content</span>
  511. </div>
  512. <hr class="my-2 faded" style="border-color: rgba(0,0,0,.125);">
  513.  
  514. <div class="justify-content-between">
  515. <span class="text-uppercase" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">Demeanor</span>
  516. <span>Content</span>
  517. </div>
  518. <hr class="my-2 faded" style="border-color: rgba(0,0,0,.125);">
  519.  
  520. <p class="text-uppercase mt-3 mb-1" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">Notes</p>
  521. <ul class="mb-0 pl-4">
  522. <li class="mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  523. <li class="mb-2">Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. </li>
  524. <li class="mb-2">Integer interdum urna ac dui sollicitudin sollicitudin.</li>
  525. <li class="mb-2">In feugiat posuere nulla, eget lobortis ante. </li>
  526. </ul>
  527. </div>
  528. </div>
  529. </div>
  530.  
  531. <div class="p-3 bg-faded">
  532. <h4 class="text-uppercase text-center mb-3" style="letter-spacing: 1.5px;">
  533. <i class="far fa-image fa-fw" /> Moodboard
  534. </h4>
  535.  
  536. <!------------ images will resize/scale with screen -- focus will be in the CENTER of the image ---->
  537. <div class="row no-gutters" style="overflow:hidden;">
  538. <div class="col-md-3 col-6">
  539. <div style="background-image:url('IMG_URL');
  540. background-size: cover; background-position: center; background-repeat: no-repeat; min-height: 200px;"></div>
  541. </div><div class="col-md-3 col-6">
  542. <div style="background-image:url('IMG_URL');
  543. background-size: cover; background-position: center; background-repeat: no-repeat; min-height: 200px;"></div>
  544. </div>
  545. <div class="col-md-3 col-6">
  546. <div style="background-image:url('IMG_URL');
  547. background-size: cover; background-position: center; background-repeat: no-repeat; min-height: 200px;"></div>
  548. </div>
  549. <div class="col-md-3 col-6">
  550. <div style="background-image:url('IMG_URL');
  551. background-size: cover; background-position: center; background-repeat: no-repeat; min-height: 200px;"></div>
  552. </div>
  553. </div>
  554. <div class="row no-gutters" style="height:40px; overflow:hidden;">
  555. <!-- PALETTE BLOCKS -- change hex codes in the background-color -->
  556. <div style="background-color: #000;" class="col h-100">
  557. </div>
  558. <div style="background-color: #2a2a2a;" class="col h-100">
  559. </div>
  560. <div style="background-color: #444;" class="col h-100">
  561. </div>
  562. <div style="background-color: #666;" class="col h-100">
  563. </div>
  564. <div style="background-color: #888;" class="col h-100">
  565. </div>
  566. <div style="background-color: #999;" class="col h-100">
  567. </div>
  568. </div>
  569. </div>
  570. </div>
  571.  
  572. <!-- SUMMARY SECTION --------------------------------->
  573. <div class="card rounded-0 p-3 mb-5">
  574. <div class="row no-gutters align-items-center mb-1">
  575. <div class="col-auto pr-3"><h1 class="text-uppercase mb-0" style="letter-spacing: 2px; font-size: 2em;">
  576.  
  577. <i class="fas fa-books fa-fw" /> Summary
  578.  
  579. </h1></div><div class="col"><hr></div>
  580. </div><div class="mb-n3">
  581.  
  582. <!-- SUMMARY BLOCK ---------------------------------------------------------------->
  583. <div class="d-flex p-3 bg-faded mb-3"><div>
  584. <h4 class="text-uppercase text-center mb-3" style="letter-spacing: 1.5px;">
  585. <i class="far fa-bookmark fa-fw" /> Subheader
  586. </h4>
  587. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam blandit vel nibh feugiat pellentesque. Vivamus posuere blandit lobortis. In vitae lectus quam. Sed aliquam dolor a imperdiet finibus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas in porta velit. Nunc faucibus mi ac nisi iaculis ultricies. Morbi sit amet ultricies tellus. Nunc accumsan neque metus, vitae porttitor risus iaculis ut. Vivamus commodo consequat magna vel volutpat. Fusce aliquam quam neque, eu maximus quam convallis et.</p>
  588. <p>Nulla a mollis orci. Nulla sed odio suscipit, pulvinar dui ac, porttitor nibh. Aliquam tincidunt, justo quis feugiat vulputate, nunc justo lobortis eros, vitae mattis turpis lacus quis arcu. Morbi fermentum, eros a viverra imperdiet, mi leo rutrum nisi, in eleifend sem metus eu odio. Duis congue, tortor eget sodales mattis, dui velit dignissim lorem, quis commodo est purus sit amet urna. Fusce ac interdum libero. Vivamus imperdiet ullamcorper nisi eu porttitor. Praesent consequat, turpis sit amet lobortis rhoncus, mi magna feugiat velit, a tincidunt nisl diam sit amet sapien. Donec nisi lacus, sodales vitae diam quis, vehicula pellentesque ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer feugiat mauris risus, in luctus metus bibendum sed.</p>
  589. </div></div>
  590.  
  591. <!-- SUMMARY BLOCK ---------------------------------------------------------------->
  592. <div class="d-flex p-3 bg-faded mb-3"><div>
  593. <h4 class="text-uppercase text-center mb-3" style="letter-spacing: 1.5px;">
  594. <i class="far fa-bookmark fa-fw" /> Subheader
  595. </h4>
  596. <!-- OPTIONAL FOCAL IMAGE -- erase if you dont wanna use ------------>
  597. <img src="IMG_URL"
  598. class="float-right pl-2 hidden-sm-down"
  599. style="border-radius: 16px; max-height: 400px;">
  600.  
  601. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam blandit vel nibh feugiat pellentesque. Vivamus posuere blandit lobortis. In vitae lectus quam. Sed aliquam dolor a imperdiet finibus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas in porta velit. Nunc faucibus mi ac nisi iaculis ultricies. Morbi sit amet ultricies tellus. Nunc accumsan neque metus, vitae porttitor risus iaculis ut. Vivamus commodo consequat magna vel volutpat. Fusce aliquam quam neque, eu maximus quam convallis et.</p>
  602. <p>Quisque quis posuere arcu. Aliquam erat volutpat. Nullam in sem non sem efficitur aliquet. Donec ac convallis lorem, eu mattis metus. Etiam bibendum justo vel turpis malesuada, et malesuada purus condimentum. Proin suscipit ac arcu a vestibulum. Vivamus lacinia urna eget eleifend suscipit. In vestibulum feugiat auctor. Phasellus ac ornare nibh. Integer condimentum placerat velit, id mollis massa gravida nec. Ut at turpis ut nisl sollicitudin aliquet. Phasellus pretium feugiat eros, vitae aliquam nibh ullamcorper nec.</p>
  603.  
  604. </div></div>
  605.  
  606. <!-- SUMMARY BLOCK ---------------------------------------------------------------->
  607. <div class="d-flex p-3 bg-faded mb-3"><div>
  608. <h4 class="text-uppercase text-center mb-3" style="letter-spacing: 1.5px;">
  609. <i class="far fa-bookmark fa-fw" /> Subheader
  610. </h4>
  611.  
  612. <p>Donec ut nulla fringilla mi sodales mattis. Morbi sit amet congue justo, quis pretium ante. Aliquam nec pretium massa. Suspendisse erat eros, congue non malesuada in, sagittis volutpat erat. Quisque cursus pretium ligula, efficitur sodales velit malesuada at. Vestibulum et turpis ut odio sagittis efficitur. Morbi congue urna odio. Proin maximus, elit eget tincidunt iaculis, neque urna interdum diam, eget pharetra tellus dui vitae nisl.</p>
  613. <p>Nulla a mollis orci. Nulla sed odio suscipit, pulvinar dui ac, porttitor nibh. Aliquam tincidunt, justo quis feugiat vulputate, nunc justo lobortis eros, vitae mattis turpis lacus quis arcu. Morbi fermentum, eros a viverra imperdiet, mi leo rutrum nisi, in eleifend sem metus eu odio. Duis congue, tortor eget sodales mattis, dui velit dignissim lorem, quis commodo est purus sit amet urna. Fusce ac interdum libero. Vivamus imperdiet ullamcorper nisi eu porttitor. Praesent consequat, turpis sit amet lobortis rhoncus, mi magna feugiat velit, a tincidunt nisl diam sit amet sapien. Donec nisi lacus, sodales vitae diam quis, vehicula pellentesque ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer feugiat mauris risus, in luctus metus bibendum sed.</p>
  614. </div></div>
  615.  
  616. </div></div>
  617.  
  618. <!-- RELATIONSHIPS SECTION --------------------------------->
  619. <div class="card rounded-0 p-3">
  620. <div class="row no-gutters align-items-center mb-1">
  621. <div class="col-auto pr-3"><h1 class="text-uppercase mb-0" style="letter-spacing: 2px; font-size: 2em;">
  622.  
  623. <i class="fas fa-users fa-fw" /> Related
  624.  
  625. </h1></div><div class="col"><hr></div>
  626. </div>
  627. <div class="row mb-n3">
  628.  
  629. <!-- CHARACTER BLOCK ---------------------------------------------------------------->
  630. <div class="col-12 mb-3"><div class="d-flex p-3 bg-faded"><div>
  631. <!-- avatar image --------------->
  632. <img src="IMG_URL"
  633. style="max-height:150px;" class="rounded-circle float-sm-left mr-sm-2 mb-sm-0 mb-3 d-block mx-auto" />
  634.  
  635. <h4 class="text-sm-left text-center">
  636. <!-- character link --------------->
  637. <a href="CHAR_LINK" class="text-uppercase" style="letter-spacing: 1px; color: #f2819f;">
  638. Character
  639. </a></h4>
  640. <div class="justify-content-between align-items-center mb-2" style="line-height: 1;">
  641. <!-- relationship -- hearts represent affection -- use fas for fill in, fal for open --------------->
  642. <span class="text-uppercase" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">
  643. relationship</span><span>
  644. <i class="fas fa-heart fa-fw" />
  645. <i class="fas fa-heart fa-fw" />
  646. <i class="fas fa-heart fa-fw" />
  647. <i class="fas fa-heart fa-fw faded" />
  648. <i class="fas fa-heart fa-fw faded" /></span>
  649. </div>
  650. <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>
  651. </div></div></div>
  652.  
  653. <!-- CHARACTER BLOCK ---------------------------------------------------------------->
  654. <div class="col-12 mb-3"><div class="d-flex p-3 bg-faded"><div>
  655. <!-- avatar image --------------->
  656. <img src="IMG_URL"
  657. style="max-height:150px;" class="rounded-circle float-sm-left mr-sm-2 mb-sm-0 mb-3 d-block mx-auto" />
  658.  
  659. <h4 class="text-sm-left text-center">
  660. <!-- character link --------------->
  661. <a href="CHAR_LINK" class="text-uppercase" style="letter-spacing: 1px; color: #f2819f;">
  662. Character
  663. </a></h4>
  664. <div class="justify-content-between align-items-center mb-2" style="line-height: 1;">
  665. <!-- relationship -- hearts represent affection -- use fas for fill in, fal for open --------------->
  666. <span class="text-uppercase" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">
  667. relationship</span><span>
  668. <i class="fas fa-heart fa-fw" />
  669. <i class="fas fa-heart fa-fw" />
  670. <i class="fas fa-heart fa-fw" />
  671. <i class="fas fa-heart fa-fw faded" />
  672. <i class="fas fa-heart fa-fw faded" /></span>
  673. </div>
  674. <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>
  675. </div></div></div>
  676.  
  677. <!-- CHARACTER BLOCK ---------------------------------------------------------------->
  678. <div class="col-12 mb-3"><div class="d-flex p-3 bg-faded"><div>
  679. <!-- avatar image --------------->
  680. <img src="IMG_URL"
  681. style="max-height:150px;" class="rounded-circle float-sm-left mr-sm-2 mb-sm-0 mb-3 d-block mx-auto" />
  682.  
  683. <h4 class="text-sm-left text-center">
  684. <!-- character link --------------->
  685. <a href="CHAR_LINK" class="text-uppercase" style="letter-spacing: 1px; color: #f2819f;">
  686. Character
  687. </a></h4>
  688. <div class="justify-content-between align-items-center mb-2" style="line-height: 1;">
  689. <!-- relationship -- hearts represent affection -- use fas for fill in, fal for open --------------->
  690. <span class="text-uppercase" style="font-style:italic; font-weight: 500; letter-spacing: .5px;">
  691. relationship</span><span>
  692. <i class="fas fa-heart fa-fw" />
  693. <i class="fas fa-heart fa-fw" />
  694. <i class="fas fa-heart fa-fw" />
  695. <i class="fas fa-heart fa-fw faded" />
  696. <i class="fas fa-heart fa-fw faded" /></span>
  697. </div>
  698. <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>
  699. </div></div></div>
  700.  
  701. </div>
  702. </div>
  703. </div></div></div>
  704.  
  705. </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!