API tools faq
paste
lowkeywicked

Freebie - Sleepy Sharp

lowkeywicked
May 22nd, 2020 (edited)
6,590
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.27 KB | None | 0 0
raw download clone embed print report
  1. <div class="p-0 py-5 card border-0" style="margin-top: -58px;">
  2. <div class="container px-0" style="letter-spacing: .45px; max-width: 1070px; font-size: 10pt;">
  3.  
  4. <!----------- SET TOP PATTERN HERE ---------------------------------------------------------->
  5. <div style="background: url(https://file.toyhou.se/images/14915499_aAyKnJL60ZD2PeD.jpg);
  6. background-attachment:fixed; height:170px;"></div>
  7. <div class="row no-gutters mt-3">
  8. <div class="col-md-3 push-md-9 mb-md-0 mb-4">
  9.  
  10. <div class="bg-faded card-block h-100">
  11. <!---------------- USE A 200 x 200 AVATAR IMAGE ----------------------------------------->
  12. <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/17779027_qaJdpe83omi4DAv.png"
  13. style="max-height: 210px; margin-top: -110px;" class="d-block mx-auto rounded-circle p-2 bg-faded">
  14.  
  15. <div class="justify-content-between">
  16. <div class="pr-1 text-muted" style="letter-spacing: 1px;">Age</div>
  17. <div>content</div>
  18. </div>
  19. <hr class="my-2">
  20. <div class="justify-content-between">
  21. <div class="pr-1 text-muted" style="letter-spacing: 1px;">Gender</div>
  22. <div>content</div>
  23. </div>
  24. <hr class="my-2">
  25. <div class="justify-content-between">
  26. <div class="pr-1 text-muted" style="letter-spacing: 1px;">Race</div>
  27. <div>(or species)</div>
  28. </div>
  29. <hr class="my-2">
  30. <div class="justify-content-between">
  31. <div class="pr-1 text-muted" style="letter-spacing: 1px;">Height</div>
  32. <div>content</div>
  33. </div>
  34. <hr class="my-2">
  35. <div class="justify-content-between">
  36. <div class="pr-1 text-muted" style="letter-spacing: 1px;">Role</div>
  37. <div>what they do</div>
  38. </div>
  39. <hr class="my-2">
  40. <div class="justify-content-between">
  41. <div class="pr-1 text-muted" style="letter-spacing: 1px;">Theme</div>
  42. <div><a href="#SONG LINK" class="text-muted" target="_BLANK">
  43. <i class="fas fa-music-alt" /> <i class="fas fa-music" /> <i class="fas fa-music-alt" /></a></div>
  44. </div>
  45. <!-------- stats section --- use fas for solid -- fal for open ------->
  46. <hr class="my-2">
  47. <div class="justify-content-between">
  48. <div class="pr-1 text-muted" style="letter-spacing: 1px;">Charisma</div>
  49. <div>
  50. <i class="fas fa-square" />
  51. <i class="fas fa-square" />
  52. <i class="fas fa-square" />
  53. <i class="fal fa-square" />
  54. <i class="fal fa-square" />
  55. </div>
  56. </div>
  57. <hr class="my-2">
  58. <div class="justify-content-between">
  59. <div class="pr-1 text-muted" style="letter-spacing: 1px;">Integrity</div>
  60. <div>
  61. <i class="fas fa-square" />
  62. <i class="fas fa-square" />
  63. <i class="fas fa-square" />
  64. <i class="fal fa-square" />
  65. <i class="fal fa-square" />
  66. </div>
  67. </div>
  68. <hr class="my-2">
  69. <div class="justify-content-between">
  70. <div class="pr-1 text-muted" style="letter-spacing: 1px;">Empathy</div>
  71. <div>
  72. <i class="fas fa-square" />
  73. <i class="fas fa-square" />
  74. <i class="fas fa-square" />
  75. <i class="fal fa-square" />
  76. <i class="fal fa-square" />
  77. </div>
  78. </div>
  79. <hr class="my-2">
  80. <div class="justify-content-between">
  81. <div class="pr-1 text-muted" style="letter-spacing: 1px;">Intellect</div>
  82. <div>
  83. <i class="fas fa-square" />
  84. <i class="fas fa-square" />
  85. <i class="fas fa-square" />
  86. <i class="fal fa-square" />
  87. <i class="fal fa-square" />
  88. </div>
  89. </div>
  90. </div>
  91. </div>
  92. <div class="col-md-6 px-md-3 mb-md-0 mb-4">
  93. <div class="row no-gutters">
  94. <div class="col-12 mb-3">
  95. <div class="bg-faded d-flex p-3" style="height: 330px; overflow: auto;">
  96. <!------- write general content here ---------->
  97. <div class="w-100 my-auto text-justify">
  98. <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>
  99. </div>
  100. </div>
  101. </div>
  102. <div class="col-md-6 pr-md-2 mb-md-0 mb-4">
  103. <div class="bg-faded pt-3 px-3 pb-2 h-100">
  104. <p class="text-muted mb-1" style="letter-spacing:1px;"><i class="fal fa-user" /> Traits</p>
  105. <!------- list some personality traits ---------->
  106. <ul class="mb-0 list-unstyled pl-2">
  107. <li class="mb-1"><i class="fal fa-plus text-muted" /> one</li>
  108. <li class="mb-1"><i class="fal fa-plus text-muted" /> two</li>
  109. <li class="mb-1"><i class="fal fa-plus text-muted" /> three</li>
  110. <li class="mb-1"><i class="fal fa-plus text-muted" /> four</li>
  111. </ul>
  112. </div>
  113. </div>
  114. <div class="col-md-6 pl-md-2">
  115. <div class="bg-faded pt-3 px-3 pb-2 h-100">
  116. <p class="text-muted mb-1" style="letter-spacing:1px;"><i class="fal fa-heartbeat" /> Likes</p>
  117. <!------- list some things they like ---------->
  118. <ul class="mb-0 list-unstyled pl-2">
  119. <li class="mb-1"><i class="fal fa-plus text-muted" /> one</li>
  120. <li class="mb-1"><i class="fal fa-plus text-muted" /> two</li>
  121. <li class="mb-1"><i class="fal fa-plus text-muted" /> three</li>
  122. <li class="mb-1"><i class="fal fa-plus text-muted" /> four</li>
  123. </ul>
  124. </div>
  125. </div>
  126. </div>
  127.  
  128. </div>
  129. <div class="col-md-3 pull-md-9">
  130. <!-------- FOCAL IMAGE -- WILL SCALE & CROP WITH SCREEN -- FOCUS IN TOP CENTER ------------------>
  131. <div style="background-image:url(https://f2.toyhou.se/file/f2-toyhou-se/images/17779040_1mqRAoVA3xhoiKM.png);
  132. background-size: cover; repeat:no-repeat; background-position: top center; min-height: 400px;"
  133. class="bg-faded h-100"></div>
  134. </div></div>
  135.  
  136. <p class="mt-2 small text-right">HTML by @Pinky</p>
  137. </div>
  138. </div>
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!