API tools faq
paste
sluggycodes

TH Theme, F2U, Relationships card

sluggycodes
Nov 6th, 2020
225
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.36 KB | None | 0 0
raw download clone embed print report
  1.  
  2. <!--- Main container / Cool background --->
  3. <div class="container-fluid px-2 py-2 " style="max-width: 990px; border-radius:2em">
  4.  
  5. <div class="card py-4 px-5 m-5 bg-faded" style="border-radius:2em">
  6. <h1 class="text-primary font-weight-bold pull-right p-2" style="font-size:27px;"><i class="far fa-star " ></i> Relationships</h1><hr>
  7.  
  8. <!--- Character Panels start, copy and paste this whole thing to create more rows! --->
  9. <div class="row">
  10.  
  11. <div class="col-sm">
  12. <img src="https://via.placeholder.com/150" class="floatml-sm-2 d-block mx-auto mb-2 center" style="height:150px;border-radius:7em;" alt="1aa">
  13. <h1 class="text-center text-primary ">Character Name</h1>
  14. <p class="text-center small font-weight-bold text-muted ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet felis interdum nibh efficitur feugiat. Praesent vel libero nec neque fermentum dapibus. Donec eget rhoncus dolor.</p>
  15.  
  16. <span style="float: left; line-height: 10px;"><i class="fas fa-heart px-2 text-primary"></i></span> </span>
  17. <div class="progress " style="height: 12px; position: relative;">
  18. <div class="progress-bar bg-primary " role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
  19. </div>
  20.  
  21. </p>
  22.  
  23.  
  24.  
  25.  
  26. </div>
  27.  
  28.  
  29. <div class="col-sm">
  30. <img src="https://via.placeholder.com/150" class="floatml-sm-2 d-block mx-auto mb-2 center" style="height:150px;border-radius:7em;" alt="1aa">
  31. <h1 class="text-center text-primary">Character Name</h1>
  32. <p class="text-center small font-weight-bold text-muted ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet felis interdum nibh efficitur feugiat. Praesent vel libero nec neque fermentum dapibus. Donec eget rhoncus dolor.</p>
  33. <span style="float: left; line-height: 10px;"><i class="fas fa-heart px-2 text-primary"></i></span> </span>
  34. <div class="progress " style="height: 12px; position: relative;">
  35. <div class="progress-bar bg-primary " role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
  36. </div>
  37.  
  38. </p>
  39.  
  40. </div>
  41.  
  42. <div class="col-sm">
  43. <img src="https://via.placeholder.com/150" class="floatml-sm-2 d-block mx-auto mb-2 center" style="height:150px;border-radius:7em;" alt="1aa">
  44. <h1 class="text-center text-primary">Character Name</h1>
  45. <p class="text-center small font-weight-bold text-muted ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet felis interdum nibh efficitur feugiat. Praesent vel libero nec neque fermentum dapibus. Donec eget rhoncus dolor.</p>
  46. <span style="float: left; line-height: 10px;"><i class="fas fa-heart px-2 text-primary"></i></span> </span>
  47. <div class="progress " style="height: 12px; position: relative;">
  48. <div class="progress-bar bg-primary " role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
  49. </div>
  50.  
  51. </p>
  52.  
  53.  
  54.  
  55. </div>
  56.  
  57. </div>
  58.  
  59. <hr>
  60.  
  61. <!--- END --->
  62.  
  63.  
  64. <!--- Character Panels start, copy and paste this whole thing to create more rows! --->
  65. <div class="row">
  66.  
  67. <div class="col-sm">
  68. <img src="https://via.placeholder.com/150" class="floatml-sm-2 d-block mx-auto mb-2 center" style="height:150px;border-radius:7em;" alt="1aa">
  69. <h1 class="text-center text-primary ">Character Name</h1>
  70. <p class="text-center small font-weight-bold text-muted ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet felis interdum nibh efficitur feugiat. Praesent vel libero nec neque fermentum dapibus. Donec eget rhoncus dolor.</p>
  71.  
  72. <span style="float: left; line-height: 10px;"><i class="fas fa-heart px-2 text-primary"></i></span> </span>
  73. <div class="progress " style="height: 12px; position: relative;">
  74. <div class="progress-bar bg-primary " role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
  75. </div>
  76.  
  77. </p>
  78.  
  79.  
  80.  
  81.  
  82. </div>
  83.  
  84.  
  85. <div class="col-sm">
  86. <img src="https://via.placeholder.com/150" class="floatml-sm-2 d-block mx-auto mb-2 center" style="height:150px;border-radius:7em;" alt="1aa">
  87. <h1 class="text-center text-primary">Character Name</h1>
  88. <p class="text-center small font-weight-bold text-muted ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet felis interdum nibh efficitur feugiat. Praesent vel libero nec neque fermentum dapibus. Donec eget rhoncus dolor.</p>
  89. <span style="float: left; line-height: 10px;"><i class="fas fa-heart px-2 text-primary"></i></span> </span>
  90. <div class="progress " style="height: 12px; position: relative;">
  91. <div class="progress-bar bg-primary " role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
  92. </div>
  93.  
  94. </p>
  95.  
  96. </div>
  97.  
  98. <div class="col-sm">
  99. <img src="https://via.placeholder.com/150" class="floatml-sm-2 d-block mx-auto mb-2 center" style="height:150px;border-radius:7em;" alt="1aa">
  100. <h1 class="text-center text-primary">Character Name</h1>
  101. <p class="text-center small font-weight-bold text-muted ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet felis interdum nibh efficitur feugiat. Praesent vel libero nec neque fermentum dapibus. Donec eget rhoncus dolor.</p>
  102. <span style="float: left; line-height: 10px;"><i class="fas fa-heart px-2 text-primary"></i></span> </span>
  103. <div class="progress " style="height: 12px; position: relative;">
  104. <div class="progress-bar bg-primary " role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
  105. </div>
  106.  
  107. </p>
  108.  
  109.  
  110.  
  111. </div>
  112.  
  113. </div>
  114.  
  115. <hr>
  116.  
  117. <!--- END --->
  118.  
  119.  
  120. <!--- Character Panels start, copy and paste this whole thing to create more rows! --->
  121. <div class="row">
  122.  
  123. <div class="col-sm">
  124. <img src="https://via.placeholder.com/150" class="floatml-sm-2 d-block mx-auto mb-2 center" style="height:150px;border-radius:7em;" alt="1aa">
  125. <h1 class="text-center text-primary ">Character Name</h1>
  126. <p class="text-center small font-weight-bold text-muted ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet felis interdum nibh efficitur feugiat. Praesent vel libero nec neque fermentum dapibus. Donec eget rhoncus dolor.</p>
  127.  
  128. <span style="float: left; line-height: 10px;"><i class="fas fa-heart px-2 text-primary"></i></span> </span>
  129. <div class="progress " style="height: 12px; position: relative;">
  130. <div class="progress-bar bg-primary " role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
  131. </div>
  132.  
  133. </p>
  134.  
  135.  
  136.  
  137.  
  138. </div>
  139.  
  140.  
  141. <div class="col-sm">
  142. <img src="https://via.placeholder.com/150" class="floatml-sm-2 d-block mx-auto mb-2 center" style="height:150px;border-radius:7em;" alt="1aa">
  143. <h1 class="text-center text-primary">Character Name</h1>
  144. <p class="text-center small font-weight-bold text-muted ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet felis interdum nibh efficitur feugiat. Praesent vel libero nec neque fermentum dapibus. Donec eget rhoncus dolor.</p>
  145. <span style="float: left; line-height: 10px;"><i class="fas fa-heart px-2 text-primary"></i></span> </span>
  146. <div class="progress " style="height: 12px; position: relative;">
  147. <div class="progress-bar bg-primary " role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
  148. </div>
  149.  
  150. </p>
  151.  
  152. </div>
  153.  
  154. <div class="col-sm">
  155. <img src="https://via.placeholder.com/150" class="floatml-sm-2 d-block mx-auto mb-2 center" style="height:150px;border-radius:7em;" alt="1aa">
  156. <h1 class="text-center text-primary">Character Name</h1>
  157. <p class="text-center small font-weight-bold text-muted ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet felis interdum nibh efficitur feugiat. Praesent vel libero nec neque fermentum dapibus. Donec eget rhoncus dolor.</p>
  158. <span style="float: left; line-height: 10px;"><i class="fas fa-heart px-2 text-primary"></i></span> </span>
  159. <div class="progress " style="height: 12px; position: relative;">
  160. <div class="progress-bar bg-primary " role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
  161. </div>
  162.  
  163. </p>
  164.  
  165.  
  166.  
  167. </div>
  168.  
  169. </div>
  170.  
  171. <hr>
  172.  
  173. <!--- END --->
  174.  
  175.  
  176.  
  177.  
  178.  
  179.  
  180.  
  181. </div>
  182.  
  183. <!--- Code credit, please don't remove D: --->
  184. <center><span class="px-0 m-2"><a href="https://toyhou.se/sluggycodes"> <i class="fas fa-feather-alt fa-3x"></i> </a> </span> </center>
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!