API tools faq
paste
lowkeywicked

Freebie Relationships 1

lowkeywicked
Oct 10th, 2019 (edited)
2,352
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.31 KB | None | 0 0
raw download clone embed print report
  1. <div class="card card-block bg-faded pb-0 mb-2">
  2. <h1 class="display-4" style="letter-spacing:2px;"><i class="fas fa-users fa-fw" /> Relationships </h1>
  3. <div class="row">
  4. <div class="col-sm-12 mb-1">
  5. <div class="row">
  6. <!------------------- CHARACTER ---------------------------------------->
  7. <div class="col-md-6 mb-4">
  8. <div class="card">
  9. <div class="card-block pb-0">
  10. <!---- relationship type + hearts to indicate strength ---->
  11. <p class="text-uppercase mb-1" style="letter-spacing:1px;"><b>
  12. Relationship</b>
  13.  
  14. <span class="pull-right">
  15. <i class="fas fa-heart fa-fw" />
  16. <i class="fas fa-heart fa-fw" />
  17. <i class="fas fa-heart fa-fw" />
  18. <i class="fas fa-heart fa-fw" />
  19. <i class="fas fa-heart fa-fw" />
  20. </span>
  21. </p>
  22. <hr class="my-0">
  23. </div>
  24. <div class="card-block pt-2 pb-1" style="height: 230px; overflow: auto;">
  25. <!---- character image ----------->
  26. <img src="https://file.toyhou.se/characters/2943854?1546816222"
  27. style="max-height: 200px;"
  28. class="float-lg-left mr-lg-2 d-block mx-auto img-thumbnail rounded-circle mb-2">
  29.  
  30. <!----- link to character ------->
  31. <h2 class="text-md-left text-center"><a href="#LINK">
  32. Character Name</a></h2>
  33. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a felis molestie, porttitor est eget, euismod mauris. Integer fermentum est vitae dui pretium fermentum.
  34. </p>
  35. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a felis molestie, porttitor est eget, euismod mauris. Integer fermentum est vitae dui pretium fermentum.
  36. </p>
  37. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a felis molestie, porttitor est eget, euismod mauris. Integer fermentum est vitae dui pretium fermentum.
  38. </p>
  39.  
  40. </div>
  41. </div>
  42. </div>
  43.  
  44. <!------------------- CHARACTER ---------------------------------------->
  45. <div class="col-md-6 mb-4">
  46. <div class="card">
  47. <div class="card-block pb-0">
  48. <!---- relationship type + hearts to indicate strength ---->
  49. <p class="text-uppercase mb-1" style="letter-spacing:1px;"><b>
  50. Relationship</b>
  51.  
  52. <span class="pull-right">
  53. <i class="fas fa-heart fa-fw" />
  54. <i class="fas fa-heart fa-fw" />
  55. <i class="fas fa-heart fa-fw" />
  56. <i class="far fa-heart fa-fw" />
  57. <i class="far fa-heart fa-fw" />
  58. </span>
  59. </p>
  60. <hr class="my-0">
  61. </div>
  62. <div class="card-block pt-2 pb-1" style="height: 230px; overflow: auto;">
  63. <!---- character image ----------->
  64. <img src="https://file.toyhou.se/characters/2943854?1546816222"
  65. style="max-height: 200px;"
  66. class="float-lg-left mr-lg-2 d-block mx-auto img-thumbnail rounded-circle mb-2">
  67.  
  68. <!----- link to character ------->
  69. <h2 class="text-md-left text-center"><a href="#LINK">
  70. Character Name</a></h2>
  71. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a felis molestie, porttitor est eget, euismod mauris. Integer fermentum est vitae dui pretium fermentum.
  72. </p>
  73.  
  74. </div>
  75. </div>
  76. </div>
  77.  
  78. <!------------------- CHARACTER ---------------------------------------->
  79. <div class="col-md-6 mb-4">
  80. <div class="card">
  81. <div class="card-block pb-0">
  82. <!---- relationship type + hearts to indicate strength ---->
  83. <p class="text-uppercase mb-1" style="letter-spacing:1px;"><b>
  84. Relationship</b>
  85.  
  86. <span class="pull-right">
  87. <i class="fas fa-heart fa-fw" />
  88. <i class="far fa-heart fa-fw" />
  89. <i class="far fa-heart fa-fw" />
  90. <i class="far fa-heart fa-fw" />
  91. <i class="far fa-heart fa-fw" />
  92. </span>
  93. </p>
  94. <hr class="my-0">
  95. </div>
  96. <div class="card-block pt-2 pb-1" style="height: 230px; overflow: auto;">
  97. <!---- character image ----------->
  98. <img src="https://file.toyhou.se/characters/2943854?1546816222"
  99. style="max-height: 200px;"
  100. class="float-lg-left mr-lg-2 d-block mx-auto img-thumbnail rounded-circle mb-2">
  101.  
  102. <!----- link to character ------->
  103. <h2 class="text-md-left text-center"><a href="#LINK">
  104. Character Name</a></h2>
  105. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a felis molestie, porttitor est eget, euismod mauris. Integer fermentum est vitae dui pretium fermentum.
  106. </p>
  107.  
  108. </div>
  109. </div>
  110. </div>
  111.  
  112. <!------------------- CHARACTER ---------------------------------------->
  113. <div class="col-md-6 mb-4">
  114. <div class="card">
  115. <div class="card-block pb-0">
  116. <!---- relationship type + hearts to indicate strength ---->
  117. <p class="text-uppercase mb-1" style="letter-spacing:1px;"><b>
  118. Relationship</b>
  119.  
  120. <span class="pull-right">
  121. <i class="fas fa-heart fa-fw" />
  122. <i class="fas fa-heart fa-fw" />
  123. <i class="fas fa-heart fa-fw" />
  124. <i class="fas fa-heart fa-fw" />
  125. <i class="far fa-heart fa-fw" />
  126. </span>
  127. </p>
  128. <hr class="my-0">
  129. </div>
  130. <div class="card-block pt-2 pb-1" style="height: 230px; overflow: auto;">
  131. <!---- character image ----------->
  132. <img src="https://file.toyhou.se/characters/2943854?1546816222"
  133. style="max-height: 200px;"
  134. class="float-lg-left mr-lg-2 d-block mx-auto img-thumbnail rounded-circle mb-2">
  135.  
  136. <!----- link to character ------->
  137. <h2 class="text-md-left text-center"><a href="#LINK">
  138. Character Name</a></h2>
  139. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a felis molestie, porttitor est eget, euismod mauris. Integer fermentum est vitae dui pretium fermentum.
  140. </p>
  141.  
  142. </div>
  143. </div>
  144. </div>
  145.  
  146. </div>
  147. </div>
  148. </div>
  149. </div>
  150. <p class="text-right small">HTML by @Pinky</p>
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!