API tools faq
paste
Advertisement
Guest User

Saturneli TH Layout Code

a guest
Jul 16th, 2018
114
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.98 KB | None | 0 0
raw download clone embed print report
  1. <div class="container-fluid p-0">
  2. <!-- ------------
  3.  
  4. HEADER
  5.  
  6. -------------- -->
  7. <div class="bg-faded p-xl-3 p-2 row no-gutters">
  8. <!-- IMAGE -->
  9. <div class="col-lg-4 p-2"><img src="https://file.toyhou.se/images/7875809_4eoclbs11YLyLJ1.png" class="fr-rounded fr-fic fr-dii" width="350" height="349"></div>
  10. <!-- HEADINGS -->
  11. <div class="col-lg-8 p-2 row no-gutters">
  12. <div class="col-12 p-4 my-auto">
  13. <div class="display-1 text-uppercase text-lg-left text-center" style="font-size:2.5rem;letter-spacing:3px;">Character Name</div>
  14. <hr class="mt-3 mb-1">
  15. <div class="text-lg-right text-center text-muted" style="font-size:2rem;font-weight:200;letter-spacing:2px;">tortor &bull; facilisis &bull; gravida</div>
  16. </div>
  17. </div>
  18. </div>
  19. <div class="row">
  20. <div class="col-sm-3 text-center mb-4"><img src="https://file.toyhou.se/images/8606370_rMBUYzUSzNK9zMp.jpg" class="rounded-circle fr-fic fr-dii" width="257" height="257"></div>
  21. <div class="col-sm-3 text-center mb-4"><img src="https://file.toyhou.se/images/8606372_qAEYGR9PDEpDCaU.jpg" class="rounded-circle fr-fic fr-dii" width="257" height="257"></div>
  22. <div class="col-sm-3 text-center mb-4"><img src="https://file.toyhou.se/images/8606375_ZbH0YxtEookNIUv.jpg" class="rounded-circle fr-fic fr-dii" width="257" height="257"></div>
  23. <div class="col-sm-3 text-center mb-4"><img src="https://file.toyhou.se/images/8606378_qFAHTlQHCWM5Byt.jpg" class="rounded-circle fr-fic fr-dii" width="257" height="257"></div>
  24. </div>
  25. <!-- ------------
  26.  
  27. MAIN CONTENT
  28.  
  29. -------------- -->
  30. <div class="row no-gutters p-xl-3 p-2">
  31. <!-- ------------
  32.  
  33. PROFILE
  34.  
  35. -------------- -->
  36. <div class="col-lg-4 p-xl-3 p-2">
  37. <div class="display-1 mb-2" style="font-size:2rem;font-weight:200;letter-spacing:1px;">Profile</div>
  38. <div class="row no-gutters p-2">
  39. <div class="col-lg-12 col-sm-6 p-2 d-flex justify-content-between" style="font-size:1rem;"><span class="text-muted text-uppercase" style="letter-spacing:1px;">Name</span>
  40. <span>[info]</span></div>
  41. <div class="col-lg-12 col-sm-6 p-2 d-flex justify-content-between" style="font-size:1rem;"><span class="text-muted text-uppercase" style="letter-spacing:1px;">Age</span>
  42. <span>[info]</span></div>
  43. <div class="col-lg-12 col-sm-6 p-2 d-flex justify-content-between" style="font-size:1rem;"><span class="text-muted text-uppercase" style="letter-spacing:1px;">Height</span>
  44. <span>[info]</span></div>
  45. <div class="col-lg-12 col-sm-6 p-2 d-flex justify-content-between" style="font-size:1rem;"><span class="text-muted text-uppercase" style="letter-spacing:1px;">Gender</span>
  46. <span>[info]</span></div>
  47. <div class="col-lg-12 col-sm-6 p-2 d-flex justify-content-between" style="font-size:1rem;"><span class="text-muted text-uppercase" style="letter-spacing:1px;">Pronouns</span>
  48. <span>[info]</span></div>
  49. <div class="col-lg-12 col-sm-6 p-2 d-flex justify-content-between" style="font-size:1rem;"><span class="text-muted text-uppercase" style="letter-spacing:1px;">Species</span>
  50. <span>[info]</span></div>
  51. <div class="col-lg-12 col-sm-6 p-2 d-flex justify-content-between" style="font-size:1rem;"><span class="text-muted text-uppercase" style="letter-spacing:1px;">Orient.</span>
  52. <span>[info]</span></div>
  53. <div class="col-lg-12 col-sm-6 p-2 d-flex justify-content-between" style="font-size:1rem;"><span class="text-muted text-uppercase" style="letter-spacing:1px;">Taken?</span>
  54. <span>[y/n]</span></div>
  55. <div class="col-lg-12 col-sm-6 p-2 d-flex justify-content-between" style="font-size:1rem;"><span class="text-muted text-uppercase" style="letter-spacing:1px;">Home</span>
  56. <span>[info]</span></div>
  57. <div class="col-lg-12 col-sm-6 p-2 d-flex justify-content-between" style="font-size:1rem;"><span class="text-muted text-uppercase" style="letter-spacing:1px;">World</span>
  58. <span>[info]</span></div>
  59. <div class="col-lg-12 col-sm-6 p-2 d-flex justify-content-between" style="font-size:1rem;"><span class="text-muted text-uppercase" style="letter-spacing:1px;">Job</span>
  60. <span>[info]</span></div>
  61. <div class="col-lg-12 col-sm-6 p-2 d-flex justify-content-between" style="font-size:1rem;"><span class="text-muted text-uppercase" style="letter-spacing:1px;">Creator</span>
  62. <span>[info]</span></div>
  63. <div class="col-lg-12 col-sm-6 p-2 d-flex justify-content-between" style="font-size:1rem;"><span class="text-muted text-uppercase" style="letter-spacing:1px;">Status</span>
  64. <span>[info]</span></div>
  65. <div class="col-lg-12 col-sm-6 p-2 d-flex justify-content-between" style="font-size:1rem;"><span class="text-muted text-uppercase" style="letter-spacing:1px;">Theme</span>
  66. <a href="#">[song]</a></div>
  67. </div>
  68. </div>
  69. <!-- ------------
  70.  
  71. MAIN
  72.  
  73. -------------- -->
  74. <div class="col-lg-8 row no-gutters">
  75. <!-- HIDDEN DIVIDER -->
  76. <div class="col-12 d-lg-none d-block">
  77. <hr>
  78. </div>
  79. <!-- APPEARANCE -->
  80. <div class="col-12 p-xl-3 p-2">
  81. <div class="display-1 mb-2" style="font-size:2rem;font-weight:200;letter-spacing:1px;">Appearance</div>
  82. <div class="text-muted p-2">
  83.  
  84. <p>Sed a euismod purus, in interdum dolor. Duis in rhoncus nunc. Fusce vel rhoncus ex. Ut volutpat justo vestibulum porttitor sodales. Suspendisse dapibus metus eget dignissim suscipit. Nulla sit amet dui vitae felis venenatis viverra a eu enim. Quisque ut porttitor lacus, et auctor sapien. Nam sed venenatis velit. Proin aliquam diam eu dui lacinia vehicula.</p>
  85.  
  86. <ul class="m-0">
  87. <li>Morbi tincidunt leo eget ipsum semper, consectetur dictum velit tempor.</li>
  88. <li>Maecenas condimentum ipsum ut risus tempor, eu pharetra mauris tristique.</li>
  89. <li>Mauris tincidunt dui et libero tempus, eu vehicula odio sagittis.</li>
  90. <li>Morbi tincidunt leo eget ipsum semper, consectetur dictum velit tempor.</li>
  91. <li>Maecenas condimentum ipsum ut risus tempor, eu pharetra mauris tristique.</li>
  92. <li>Mauris tincidunt dui et libero tempus, eu vehicula odio sagittis.</li>
  93. </ul>
  94. </div>
  95. </div>
  96. <!-- /APPEARANCE -->
  97. <!-- DIVIDER -->
  98. <div class="col-12">
  99. <hr>
  100. </div>
  101. <!-- HISTORY & TRIVIA -->
  102. <div class="col-12 row no-gutters">
  103. <!-- HISTORY -->
  104. <div class="col-xl-7 p-xl-3 p-2">
  105. <div class="display-1 mb-2" style="font-size:2rem;font-weight:200;letter-spacing:1px;">History</div>
  106. <div class="text-muted p-2">
  107.  
  108. <p>Sed condimentum mauris non imperdiet lacinia. Donec venenatis risus eros, eget viverra lacus fringilla commodo. Praesent dapibus est vel risus tempor ultrices. Nullam vulputate congue libero at suscipit. Etiam nisl metus, tempor egestas metus eu, ultricies iaculis diam. Sed facilisis ac leo a auctor. Quisque aliquet nec ante eu vestibulum. Curabitur sapien dolor, volutpat eu sollicitudin nec, consequat a eros.</p>
  109.  
  110. <p>Vivamus accumsan tristique arcu. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent convallis justo orci, vitae facilisis massa semper sit amet. Nunc placerat accumsan orci, eget vehicula arcu accumsan ac. Suspendisse dignissim nisl nec imperdiet scelerisque. Morbi nec laoreet arcu. Cras condimentum lobortis ligula, sit amet gravida purus elementum ut.</p>
  111. </div>
  112. </div>
  113. <!-- /HISTORY -->
  114. <!-- TRIVIA -->
  115. <div class="col-xl-5 p-xl-3 p-2">
  116. <div class="display-1 mb-2" style="font-size:2rem;font-weight:200;letter-spacing:1px;">Trivia</div>
  117. <div class="text-muted p-2">
  118.  
  119. <ul class="m-0">
  120. <li>Morbi tincidunt leo eget ipsum semper, consectetur dictum velit tempor.</li>
  121. <li>Maecenas condimentum ipsum ut risus tempor, eu pharetra mauris tristique.</li>
  122. <li>Mauris tincidunt dui et libero tempus, eu vehicula odio sagittis.</li>
  123. <li>Morbi tincidunt leo eget ipsum semper, consectetur dictum velit tempor.</li>
  124. </ul>
  125. </div>
  126. </div>
  127. <!-- /TRIVIA -->
  128. </div>
  129. <!-- /HISTORY & TRIVIA -->
  130.  
  131. <table class="w-100 mb-2">
  132. <tbody>
  133. <tr>
  134. <td class="text-right" style="width:10%;">Title</td>
  135. <td style="width:40%;">
  136. <div class="progress d-block">
  137. <div class="progress-bar" style="width:75%;">
  138. <br>
  139. </div>
  140. </div>
  141. </td>
  142. <td class="text-right" style="width:10%;">Title</td>
  143. <td style="width:40%;">
  144. <div class="progress d-block">
  145. <div class="progress-bar" style="width:75%;">
  146. <br>
  147. </div>
  148. </div>
  149. </td>
  150. </tr>
  151. <tr>
  152. <td class="text-right">Title</td>
  153. <td>
  154. <div class="progress d-block">
  155. <div class="progress-bar" style="width:75%;">
  156. <br>
  157. </div>
  158. </div>
  159. </td>
  160. <td class="text-right">Title</td>
  161. <td>
  162. <div class="progress d-block">
  163. <div class="progress-bar" style="width:75%;">
  164. <br>
  165. </div>
  166. </div>
  167. </td>
  168. </tr>
  169. <tr>
  170. <td class="text-right">Title</td>
  171. <td>
  172. <div class="progress d-block">
  173. <div class="progress-bar" style="width:75%;">
  174. <br>
  175. </div>
  176. </div>
  177. </td>
  178. <td class="text-right">Title</td>
  179. <td>
  180. <div class="progress d-block">
  181. <div class="progress-bar" style="width:75%;">
  182. <br>
  183. </div>
  184. </div>
  185. </td>
  186. </tr>
  187. </tbody>
  188. </table>
  189. </div>
  190. <!-- DIVIDER -->
  191. <div class="col-12">
  192. <hr>
  193. </div>
  194. <!-- LIKES -->
  195. <div class="col-lg-4 push-lg-4 p-2">
  196. <div class="display-1 mb-2" style="font-size:2rem;font-weight:200;letter-spacing:1px;">Likes</div>
  197. <div class="text-muted p-2">
  198.  
  199. <ul class="m-0">
  200. <li>Morbi tincidunt leo eget ipsum semper, consectetur dictum velit tempor.</li>
  201. <li>Maecenas condimentum ipsum ut risus tempor, eu pharetra mauris tristique.</li>
  202. <li>Mauris tincidunt dui et libero tempus, eu vehicula odio sagittis.</li>
  203. <li>Morbi tincidunt leo eget ipsum semper, consectetur dictum velit tempor.</li>
  204. </ul>
  205. </div>
  206. </div>
  207. <!-- /LIKES -->
  208. <!-- DISLIKES -->
  209. <div class="col-lg-4 push-lg-4 p-2">
  210. <div class="display-1 mb-2" style="font-size:2rem;font-weight:200;letter-spacing:1px;">Dislikes</div>
  211. <div class="text-muted p-2">
  212.  
  213. <ul class="m-0">
  214. <li>Morbi tincidunt leo eget ipsum semper, consectetur dictum velit tempor.</li>
  215. <li>Maecenas condimentum ipsum ut risus tempor, eu pharetra mauris tristique.</li>
  216. <li>Mauris tincidunt dui et libero tempus, eu vehicula odio sagittis.</li>
  217. <li>Morbi tincidunt leo eget ipsum semper, consectetur dictum velit tempor.</li>
  218. </ul>
  219. </div>
  220. </div>
  221. <!-- /DISLIKES -->
  222. <!-- HIDDEN DIVIDER -->
  223. <div class="col-12 d-lg-none d-block">
  224. <hr>
  225. </div>
  226. <!-- RELATIONS -->
  227. <div class="col-lg-4 pull-lg-8 p-2">
  228. <div class="display-1 mb-2" style="font-size:2rem;font-weight:200;letter-spacing:1px;">Relations</div>
  229. <div class="row no-gutters p-2">
  230. <div class="col-lg-12 col-sm-6 p-2 d-flex justify-content-between" style="font-size:1rem;"><a class="text-uppercase" href="#" style="letter-spacing:1px;">Name</a>
  231. <span>relationship</span></div>
  232. <div class="col-lg-12 col-sm-6 p-2 d-flex justify-content-between" style="font-size:1rem;"><a class="text-uppercase" href="#" style="letter-spacing:1px;">Name</a>
  233. <span>relationship</span></div>
  234. <div class="col-lg-12 col-sm-6 p-2 d-flex justify-content-between" style="font-size:1rem;"><a class="text-uppercase" href="#" style="letter-spacing:1px;">Name</a>
  235. <span>relationship</span></div>
  236. <div class="col-lg-12 col-sm-6 p-2 d-flex justify-content-between" style="font-size:1rem;"><a class="text-uppercase" href="#" style="letter-spacing:1px;">Name</a>
  237. <span>relationship</span></div>
  238. </div>
  239. </div>
  240. <!-- /RELATIONS -->
  241. </div>
  242. <div class="bg-faded p-2">
  243. <!-- CREDIT -->
  244. <div class="m-1 text-right text-muted" style="font-size:.8rem;"><a href="https://toyhou.se/Saturneli"><i class="fa fa-code"></i></a></div>
  245. </div>
  246. </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!