API tools faq
paste
Advertisement
SparklyLightus

Pillar

SparklyLightus
Nov 14th, 2020
659
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.46 KB | None | 0 0
raw download clone embed print report
  1. <!-- BASICS -->
  2. <div class="card m-2 p-1 col-lg-6 mx-auto" style="border-radius: 15px; border-width: 2px;">
  3. <div class="mx-auto m-0 text-center text-monospace">
  4. <!-- IMAGE -->
  5. <img src="//via.placeholder.com/200x200" class="rounded-circle img-thumbnail" style="padding: 3px; height: 150px; width: 150px;">
  6. <!-- INFO -->
  7. <div class="mt-2">
  8. <h3 class="text-primary m-0">NAME</h3>
  9. <p class="text-secondary m-0">age . gender . mbti</p>
  10. <hr class="m-1"> <!-- DIVIDER -->
  11. <p class="ml-3 mr-3" style="font-size: 13px;">This box will expand with content. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  12. </div>
  13. </div>
  14. </div>
  15. <!-- THEME -->
  16. <div class="m-2 p-0 col-lg-6 mx-auto" style="border-radius: 15px;">
  17. <!-- THEME -->
  18. <a href="SONGLINK" class="btn btn-outline-primary m-0 w-100" style="border-radius: 15px; border-width: 2px;" target="_blank">♫ SONGNAME ♫</a>
  19. </div>
  20. <!-- INFO -->
  21. <div class="card m-2 p-1 col-lg-6 mx-auto" style="border-radius: 15px; border-width: 2px;">
  22. <div class="mx-auto m-0 text-justify text-monospace" style="font-size: 13px; height: 250px; overflow: auto;">
  23. <!-- ABOUT -->
  24. <div class="m-2">
  25. <h3 class="text-primary m-0 mt-2">About</h3>
  26. <p class="text-secondary m-0">adjective . adjective . adjective</p>
  27. <p>This box will scroll, put whatever you need here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor, dui sed lacinia suscipit, orci nisi cursus tellus, id semper orci elit eget libero. Mauris lobortis ex nisl, a gravida erat condimentum sit amet.</p>
  28. <p>Integer sed porta tortor. Pellentesque imperdiet nec ipsum sit amet volutpat. Praesent ac tempus mauris. Nulla placerat diam vel ornare feugiat. Aenean suscipit euismod arcu, nec bibendum enim vestibulum et. Nullam in molestie risus. Nunc nec accumsan magna. </p>
  29. </div>
  30. <!-- PREFERENCES -->
  31. <div class="m-2">
  32. <h3 class="text-primary m-0 mt-2">Preferences</h3>
  33. <p class="m-0"><span class="text-secondary">LIKES:</span> thing . thing . thing . thing </p>
  34. <p class="m-0"><span class="text-secondary">DISLIKES:</span> thing . thing . thing . thing </p>
  35. </div>
  36. <!-- TRIVIA -->
  37. <div class="m-2">
  38. <h3 class="text-primary m-0 mt-2">Trivia</h3>
  39. <ul class="m-0" style="list-style-type: square;">
  40. <li>Some trivia here.</li>
  41. <li>Maybe something quirky here.</li>
  42. <li>Go wild idk.</li>
  43. </ul>
  44. </div>
  45. <!-- END BOX -->
  46. </div>
  47. </div>
  48. <!-- LINKS -->
  49. <div class="card m-2 p-1 col-lg-6 mx-auto" style="border-radius: 15px; border-width: 2px;">
  50. <div class="mx-auto m-0 p-2 w-100 text-justify text-monospace" style="font-size: 13px; height: 300px; overflow: auto;">
  51. <h3 class="text-primary mt-0 mb-2 ml-2">Links</h3>
  52. <div class="row m-0 justify-content-center">
  53. <!-- you can add as many people as you want, rows will adjust according to your resolution -->
  54. <!-- PERSON 1 -->
  55. <div class="m-1">
  56. <!-- IMAGE -->
  57. <img src="//via.placeholder.com/200x200" class="rounded-circle img-thumbnail" style="padding: 3px; height: 120px; width: 120px;">
  58. <!-- NAME -->
  59. <p class="text-secondary mt-2">
  60. <a class="badge badge-primary" href="LINK" style="font-size: 15px;">Name</a><br>
  61. RELATIONSHIP
  62. </p>
  63. </div>
  64. <!-- PERSON 3 -->
  65. <div class="m-1">
  66. <!-- IMAGE -->
  67. <img src="//via.placeholder.com/200x200" class="rounded-circle img-thumbnail" style="padding: 3px; height: 120px; width: 120px;">
  68. <!-- NAME -->
  69. <p class="text-secondary mt-2">
  70. <a class="badge badge-primary" href="LINK" style="font-size: 15px;">Name</a><br>
  71. RELATIONSHIP
  72. </p>
  73. </div>
  74. <!-- PERSON 3 -->
  75. <div class="m-1">
  76. <!-- IMAGE -->
  77. <img src="//via.placeholder.com/200x200" class="rounded-circle img-thumbnail" style="padding: 3px; height: 120px; width: 120px;">
  78. <!-- NAME -->
  79. <p class="text-secondary mt-2">
  80. <a class="badge badge-primary" href="LINK" style="font-size: 15px;">Name</a><br>
  81. RELATIONSHIP
  82. </p>
  83. </div>
  84. <!-- PERSON 4 -->
  85. <div class="m-1">
  86. <!-- IMAGE -->
  87. <img src="//via.placeholder.com/200x200" class="rounded-circle img-thumbnail" style="padding: 3px; height: 120px; width: 120px;">
  88. <!-- NAME -->
  89. <p class="text-secondary mt-2">
  90. <a class="badge badge-primary" href="LINK" style="font-size: 15px;">Name</a><br>
  91. RELATIONSHIP
  92. </p>
  93. </div>
  94. <!-- PERSON 5 -->
  95. <div class="m-1">
  96. <!-- IMAGE -->
  97. <img src="//via.placeholder.com/200x200" class="rounded-circle img-thumbnail" style="padding: 3px; height: 120px; width: 120px;">
  98. <!-- NAME -->
  99. <p class="text-secondary mt-2">
  100. <a class="badge badge-primary" href="LINK" style="font-size: 15px;">Name</a><br>
  101. RELATIONSHIP
  102. </p>
  103. </div>
  104. <!-- PERSON 6 -->
  105. <div class="m-1">
  106. <!-- IMAGE -->
  107. <img src="//via.placeholder.com/200x200" class="rounded-circle img-thumbnail" style="padding: 3px; height: 120px; width: 120px;">
  108. <!-- NAME -->
  109. <p class="text-secondary mt-2">
  110. <a class="badge badge-primary" href="LINK" style="font-size: 15px;">Name</a><br>
  111. RELATIONSHIP
  112. </p>
  113. </div>
  114. <!-- ADD MORE PEOPLE ABOVE HERE -->
  115. </div>
  116. </div>
  117. </div>
  118. <!-- CREDIT, DON'T MOVE -->
  119. <div class="text-center">
  120. <a data-toggle="tooltip" title="SparklyCodes" href="/SparklyCodes"><i class="far fa-code"></i></a>
  121. </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!