API tools faq
paste
lowkeywicked

Freebie - Dreamy

lowkeywicked
May 22nd, 2020 (edited)
2,365
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.71 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: 950px;">
  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 class="text-right">content
  19. </div></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 class="text-right">content
  24. </div></div>
  25. <hr class="my-2">
  26. <div class="justify-content-between">
  27. <div class="pr-1 text-muted" style="letter-spacing: 1px;">Height</div>
  28. <div class="text-right">content
  29. </div></div>
  30. <hr class="my-2">
  31. <div class="justify-content-between">
  32. <!---- species credit -------->
  33. <div class="pr-1 text-muted" style="letter-spacing: 1px;">Species</div>
  34. <div class="text-right">
  35. <a href="https://toyhou.se/~bulletins/99066.dreamy-info-updated-aug-7-2019" class="text-muted" target="_BLANK">
  36. dreamy</a></div>
  37. </div>
  38. <hr class="my-2">
  39. <div class="justify-content-between">
  40. <div class="pr-1 text-muted" style="letter-spacing: 1px;">Ears</div>
  41. <div class="text-right">type of ears
  42. </div></div>
  43. <hr class="my-2">
  44. <div class="justify-content-between">
  45. <div class="pr-1 text-muted" style="letter-spacing: 1px;">Fins</div>
  46. <div class="text-right">
  47. extra fin 1
  48. <br>extra fin 2
  49. </div></div>
  50. <hr class="my-2">
  51. <div class="justify-content-between">
  52. <div class="pr-1 text-muted" style="letter-spacing: 1px;">Tail</div>
  53. <div class="text-right"># of puffs
  54. </div></div>
  55. <hr class="my-2">
  56. <div class="justify-content-between">
  57. <div class="pr-1 text-muted" style="letter-spacing: 1px;">Fur</div>
  58. <div class="text-right">smooth or fluffy
  59. </div></div>
  60. <hr class="my-2">
  61. <div class="justify-content-between">
  62. <div class="pr-1 text-muted" style="letter-spacing: 1px;">3rd Eye</div>
  63. <div class="text-right">third eye details
  64. </div></div>
  65. <hr class="my-2">
  66. <div class="justify-content-between">
  67. <!--- special traits like horns, wings, gem growths, etc ---
  68. ---- for special ears/tails you can put those in the ear/tail section and mark with (Sp) ---->
  69. <div class="pr-1 text-muted" style="letter-spacing: 1px;">Special</div>
  70. <div class="text-right">Special traits
  71. </div></div>
  72. <hr class="my-2">
  73. <div class="justify-content-between">
  74. <div class="pr-1 text-muted" style="letter-spacing: 1px;">Value</div>
  75. <div class="text-right">$$$
  76. </div></div>
  77. </div>
  78. </div>
  79. <div class="col-md-8 pr-md-4 pull-md-4">
  80. <div class="row no-gutters">
  81. <div class="col-12 mb-4">
  82. <div class="card d-flex p-3 border-0" style="border-radius: 1em; height: 315px; overflow: auto;">
  83. <!------- write general content here ---------->
  84. <div class="w-100 my-auto text-justify">
  85. <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>
  86. </div>
  87. </div>
  88. </div>
  89. <div class="col-md-6 pr-md-2 mb-4">
  90. <div class="card pt-3 px-3 pb-1 border-0 d-block h-100" style="border-radius: 1em; min-height: 145px;">
  91. <p class="text-muted mb-1" style="letter-spacing:1px;"><i class="fal fa-user fa-fw" /> Traits</p>
  92. <!------- list some personality traits ---------->
  93. <ul class="mb-0 list-unstyled pl-2" style="font-size: .9em;">
  94. <li class="mb-1"><i class="fal fa-plus fa-fw text-muted" /> one</li>
  95. <li class="mb-1"><i class="fal fa-plus fa-fw text-muted" /> two</li>
  96. <li class="mb-1"><i class="fal fa-plus fa-fw text-muted" /> three</li>
  97. <li class="mb-1"><i class="fal fa-plus fa-fw text-muted" /> four</li>
  98. </ul>
  99. </div>
  100. </div>
  101. <div class="col-md-6 pl-md-2 mb-4">
  102. <div class="card pt-3 px-3 pb-1 border-0 d-block h-100" style="border-radius: 1em; min-height: 145px;">
  103. <p class="text-muted mb-1" style="letter-spacing:1px;"><i class="fal fa-heartbeat fa-fw" /> Likes</p>
  104. <!------- list some things they like ---------->
  105. <ul class="mb-0 list-unstyled pl-2" style="font-size: .9em;">
  106. <li class="mb-1"><i class="fal fa-plus fa-fw text-muted" /> one</li>
  107. <li class="mb-1"><i class="fal fa-plus fa-fw text-muted" /> two</li>
  108. <li class="mb-1"><i class="fal fa-plus fa-fw text-muted" /> three</li>
  109. <li class="mb-1"><i class="fal fa-plus fa-fw text-muted" /> four</li>
  110. </ul>
  111. </div>
  112. </div>
  113. </div>
  114.  
  115. <div class="card border-0 d-block p-3 mb-md-0 mb-1" style="border-radius: 1em;">
  116. <!---- swatches -- change hex codes to match your character's palette -->
  117. <div class="row no-gutters modal-open" style="height:40px; border-radius: .5em;">
  118. <div style="background-color: #000;" class="col h-100"></div>
  119. <div style="background-color: #222;" class="col h-100"></div>
  120. <div style="background-color: #444;" class="col h-100"></div>
  121. <div style="background-color: #666;" class="col h-100"></div>
  122. <div style="background-color: #888;" class="col h-100"></div>
  123. <div style="background-color: #999;" class="col h-100"></div>
  124. </div>
  125. </div>
  126. </div>
  127. </div>
  128. </div>
  129. </div>
  130. <p class="mt-2 small text-right">HTML by @Pinky</p>
  131. </div>
  132. </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!