API tools faq
paste
lowkeywicked

Freebie - Also

lowkeywicked
May 26th, 2022
3,356
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.15 KB | None | 0 0
raw download clone embed print report
  1. <!-- WRAPPER CONTAINER -- hides the default profile title -- if you are going to combine this with CSS, remove the wrapper -->
  2. <div class="container-fluid card border-0 py-5" style="margin-top: -58px;">
  3.  
  4. <div class="container p-0" style="max-width: 1000px; font-size: 10pt; letter-spacing: .2px;">
  5. <div class="card p-2 bg-faded"><div class="row no-gutters">
  6. <div class="col-md-5 pr-md-2 mb-md-0 mb-3">
  7. <!-- focal image -- will scale/crop with screen ---------------------------------->
  8. <div style="background-image: url('IMG_URL');
  9. background-size: cover; background-position: center; background-repeat: no-repeat; min-height: 550px;"
  10. class="card border-0 h-100">
  11. </div>
  12. </div>
  13. <div class="col-md-7">
  14. <div class="card border-0">
  15. <div class="pt-3 px-3">
  16. <h1 class="text-primary text-uppercase text-center" style="letter-spacing: 1.5px;">
  17. <!-- title here ----------------------------------------->
  18. Title here
  19. </h1>
  20. <hr class="my-0">
  21. </div>
  22. <!-- content box -- will scroll when filled ----------------->
  23. <div class="px-3 pt-2 pb-md-1 pb-3" style="height: 600px; overflow:auto;"><div class="text-justify">
  24. <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. </p>
  25. </div><hr class="my-2">
  26.  
  27. <p class="text-uppercase text-muted mb-1" style="letter-spacing: .5px; font-size: 11pt;">
  28. <i class="fal fa-sliders fa-fw" /> Character</p>
  29. <!-- slider stats -- change width % to move the bar -- the HIGHER the % the more RIGHT the bar will go -->
  30. <div class="row">
  31. <div class="col-lg-6 mb-3">
  32. <div class="justify-content-between">
  33. <span class="text-lowercase" style="letter-spacing: .5px;">Friendly</span>
  34. <span class="text-lowercase" style="letter-spacing: .5px;">Reserved</span>
  35. </div>
  36. <div class="progress rounded-0">
  37. <div class="progress-bar" style="height: 7px; background: transparent; width: 50%;"></div>
  38. <div class="bg-primary rounded p-1 ml-n1"></div>
  39. </div>
  40. </div>
  41.  
  42. <div class="col-lg-6 mb-3">
  43. <div class="justify-content-between">
  44. <span class="text-lowercase" style="letter-spacing: .5px;">Polite</span>
  45. <span class="text-lowercase" style="letter-spacing: .5px;">Blunt</span>
  46. </div>
  47. <div class="progress rounded-0">
  48. <div class="progress-bar" style="height: 7px; background: transparent; width: 50%;"></div>
  49. <div class="bg-primary rounded p-1 ml-n1"></div>
  50. </div>
  51. </div>
  52.  
  53. <div class="col-lg-6 mb-3">
  54. <div class="justify-content-between">
  55. <span class="text-lowercase" style="letter-spacing: .5px;">Clever</span>
  56. <span class="text-lowercase" style="letter-spacing: .5px;">Foolish</span>
  57. </div>
  58. <div class="progress rounded-0">
  59. <div class="progress-bar" style="height: 7px; background: transparent; width: 50%;"></div>
  60. <div class="bg-primary rounded p-1 ml-n1"></div>
  61. </div>
  62. </div>
  63.  
  64. <div class="col-lg-6 mb-3">
  65. <div class="justify-content-between">
  66. <span class="text-lowercase" style="letter-spacing: .5px;">Brave</span>
  67. <span class="text-lowercase" style="letter-spacing: .5px;">Timid</span>
  68. </div>
  69. <div class="progress rounded-0">
  70. <div class="progress-bar" style="height: 7px; background: transparent; width: 50%;"></div>
  71. <div class="bg-primary rounded p-1 ml-n1"></div>
  72. </div>
  73. </div>
  74.  
  75. <div class="col-lg-6 mb-3">
  76. <div class="justify-content-between">
  77. <span class="text-lowercase" style="letter-spacing: .5px;">Sincere</span>
  78. <span class="text-lowercase" style="letter-spacing: .5px;">Deceptive</span>
  79. </div>
  80. <div class="progress rounded-0">
  81. <div class="progress-bar" style="height: 7px; background: transparent; width: 50%;"></div>
  82. <div class="bg-primary rounded p-1 ml-n1"></div>
  83. </div>
  84. </div>
  85.  
  86. <div class="col-lg-6 mb-3">
  87. <div class="justify-content-between">
  88. <span class="text-lowercase" style="letter-spacing: .5px;">Humorous</span>
  89. <span class="text-lowercase" style="letter-spacing: .5px;">Serious</span>
  90. </div>
  91. <div class="progress rounded-0">
  92. <div class="progress-bar" style="height: 7px; background: transparent; width: 50%;"></div>
  93. <div class="bg-primary rounded p-1 ml-n1"></div>
  94. </div>
  95. </div>
  96.  
  97. </div>
  98.  
  99. <div class="row">
  100. <div class="col-md-6 mb-2">
  101. <p class="text-uppercase text-muted" style="letter-spacing: .5px; font-size: 11pt;">
  102. <i class="fal fa-heartbeat fa-fw" /> Likes</p>
  103. <ul class="mb-0">
  104. <li>One.</li>
  105. <li>Two.</li>
  106. <li>Three.</li>
  107. </ul>
  108. </div>
  109. <div class="col-md-6 mb-2">
  110. <p class="text-uppercase text-muted" style="letter-spacing: .5px; font-size: 11pt;">
  111. <i class="fal fa-ban fa-fw" /> Dislikes</p>
  112. <ul class="mb-0">
  113. <li>One.</li>
  114. <li>Two.</li>
  115. <li>Three.</li>
  116. </ul>
  117. </div>
  118. </div>
  119. <hr class="my-2">
  120.  
  121. <p class="text-uppercase text-muted" style="letter-spacing: .5px; font-size: 11pt;">
  122. <i class="fal fa-list-alt fa-fw" /> Notes</p>
  123. <ul class="mb-0">
  124. <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  125. <li>Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit.</li>
  126. <li>Integer interdum urna ac dui sollicitudin sollicitudin.</li>
  127. <li>In feugiat posuere nulla, eget lobortis ante. Aliquam magna libero, dictum sit amet scelerisque ac, scelerisque tincidunt magna.</li>
  128. </ul>
  129.  
  130. </div>
  131. </div>
  132. </div>
  133. </div></div>
  134. <p class="text-right small mt-2">HTML by @Pinky</p>
  135. </div>
  136.  
  137. </div><!-- wrapper closing 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!