API tools faq
paste
lowkeywicked

Freebie - Sleepy Soft

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