API tools faq
paste
Advertisement
Cromagna

toyhou.se profile code compilation

Cromagna
Jun 17th, 2020
168
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.31 KB | None | 0 0
raw download clone embed print report
  1. <!-------- container ---------------------------------->
  2. <div class="container-fluid px-0" style="max-width: 1100px;">
  3. <!---------- content box --------------------------->
  4. <div class="card rounded-0 bg-faded p-md-2 p-1 shadow">
  5. <div class="row no-gutters">
  6.  
  7. <!---------- left column ------------------------->
  8. <div class="col-md-3">
  9. <!------ focal images -- focus will be in the center of image -- will scale and crop with screen size -->
  10. <div class="row no-gutters">
  11. <div class="col-md-12 mb-md-2 pr-md-0 pr-1 col-4">
  12. <div style="background: url(IMAGEURL); background-position: center; background-size: cover; height: 200px;"></div>
  13. </div>
  14.  
  15. <div class="col-md-12 mb-md-2 col-4">
  16. <div style="background: url(IMAGEURL); background-position: center; background-size: cover; height: 200px;"></div>
  17. </div>
  18.  
  19. <div class="col-md-12 mb-md-2 col-4">
  20. <div style="background: url(IMAGEURL); background-position: center; background-size: cover; height: 200px;"></div>
  21. </div>
  22.  
  23. <div class="col-md-12 pl-md-0 pl-1 col-4">
  24. <div style="background: url(IMAGEURL); background-position: center; background-size: cover; height: 200px;"></div>
  25. </div>
  26.  
  27. </div>
  28. </div>
  29.  
  30. <!-------- center column ----------------------->
  31. <div class="col-md-6 px-lg-2 px-md-1 mb-md-0 mb-4">
  32.  
  33. <!----- top title ------>
  34. <div class="card pt-2 px-3 rounded-0 border-0 text-center" style="height: 50px; overflow:auto; margin-bottom: 10px;">
  35. <h1 style="font-weight: 300; letter-spacing: 1px; margin-top:5px;">
  36. TOP TITLE HERE</h1>
  37. </div>
  38.  
  39. <!----- character bust ----->
  40. <div class="col-md-13">
  41. <div style="background: url(IMAGEURL); background-position: center; background-size: cover; height: 250px; margin-bottom: 10px;"></div>
  42. </div>
  43.  
  44. <div class="card pt-2 px-3 pb-0 rounded-0 border-0" style="height: 155px; overflow:auto; margin-bottom: 10px;">
  45.  
  46. <!------- basic stats ---------------------->
  47. <div class="row no-gutters">
  48. <div class="col-12">
  49. <span class="text-muted" style="letter-spacing:1px;">NAME</span>
  50. <span class="pull-right">Content</span>
  51. <hr class="my-2">
  52. </div>
  53.  
  54. <div class="col-12">
  55. <span class="text-muted" style="letter-spacing:1px;">AGE</span>
  56. <span class="pull-right">Content</span>
  57. <hr class="my-2">
  58. </div>
  59.  
  60. <div class="col-12">
  61. <span class="text-muted" style="letter-spacing:1px;">GENDER</span>
  62. <span class="pull-right">Content</span>
  63. <hr class="my-2">
  64. </div>
  65.  
  66. <div class="col-12">
  67. <span class="text-muted" style="letter-spacing:1px;">SPECIES</span>
  68. <span class="pull-right">Content</span>
  69. </div>
  70. </div>
  71. </div>
  72.  
  73. <!----- personality ------>
  74. <div class="card d-block py-3 px-3 pb-1 rounded-0 border-0" style="height: 70px; overflow:auto; margin-bottom:10px;">
  75. <h4 class="text-muted text-center text-uppercase pb-1" style="font-weight:200; letter-spacing:1px;">TRAIT • TRAIT • TRAIT • TRAIT <br />
  76. TRAIT • TRAIT • TRAIT • TRAIT</h4>
  77. </div>
  78.  
  79. <!----------------- NAVIGATION BUTTONS ----- YOU CAN CHANGE THE TEXT ---- DO NOT ADD MORE ------------------------------------->
  80. <div class="col-lg-12 col-md-7 pl-md-2">
  81. <ul class="nav nav-pills row no-gutters text-center text-uppercase" style="letter-spacing: 1px;">
  82. <li class="nav-item col mr-1 mb-2"><a class="btn btn-default border-0 nav-link active" data-toggle="tab" href="#ONE">
  83. TAB1</a></li>
  84.  
  85. <li class="nav-item col mx-1 mb-2"><a class="btn btn-default border-0 nav-link" data-toggle="tab" href="#TWO">
  86. TAB2</a></li>
  87.  
  88. <li class="nav-item col ml-1 mb-2"><a class="btn btn-default border-0 nav-link" data-toggle="tab" href="#THREE">
  89. TAB3</a></li>
  90. </ul>
  91. </div>
  92.  
  93. <div class="rounded bg-faded tab-content">
  94.  
  95. <!------------------------------------ FIRST TAB ------------------------------------------------------------->
  96. <div class="tab-pane fade in active show" data-toggle="tab" id="ONE">
  97. <!----------------------- information ----------------------->
  98. <div class="card pt-2 px-3 pb-1 rounded-0 border-0" style="height: 220px; overflow:auto; margin-bottom:10px;">
  99. <div class="row">
  100. <div class="col-md-6 mb-1">
  101. <div class="d-flex justify-content-between">
  102. <span class="text-muted text-uppercase" style="letter-spacing:1px;">height</span>
  103. <span>5'3</span>
  104. </div>
  105. <hr class="my-2">
  106. </div>
  107.  
  108. <div class="col-md-6 mb-1">
  109. <div class="d-flex justify-content-between">
  110. <span class="text-muted text-uppercase" style="letter-spacing:1px;">build</span>
  111. <span>135 lbs</span>
  112. </div>
  113. <hr class="my-2">
  114. </div>
  115.  
  116. <div class="col-md-6 mb-1">
  117. <div class="d-flex justify-content-between">
  118. <span class="text-muted text-uppercase" style="letter-spacing:1px;">pronouns</span>
  119. <span>he/him/his</span>
  120. </div>
  121. <hr class="my-2">
  122. </div>
  123.  
  124. <div class="col-md-6 mb-1">
  125. <div class="d-flex justify-content-between">
  126. <span class="text-muted text-uppercase" style="letter-spacing:1px;">orientation</span>
  127. <span>bisexual</span>
  128. </div>
  129. <hr class="my-2">
  130. </div>
  131.  
  132. <div class="col-md-6 mb-1">
  133. <div class="d-flex justify-content-between">
  134. <span class="text-muted text-uppercase" style="letter-spacing:1px;">birthday</span>
  135. <span>March 28th</span>
  136. </div>
  137. <hr class="my-2">
  138. </div>
  139.  
  140. <div class="col-md-6 mb-1">
  141. <div class="d-flex justify-content-between">
  142. <span class="text-muted text-uppercase" style="letter-spacing:1px;">mbti</span>
  143. <span>INFP</span>
  144. </div>
  145. <hr class="my-2">
  146. </div>
  147.  
  148. <div class="col-md-6 mb-1">
  149. <div class="d-flex justify-content-between">
  150. <span class="text-muted text-uppercase" style="letter-spacing:1px;">home state</span>
  151. <span>Alabama</span>
  152. </div>
  153. <hr class="my-2">
  154. </div>
  155.  
  156. <div class="col-md-6 mb-1">
  157. <div class="d-flex justify-content-between">
  158. <span class="text-muted text-uppercase" style="letter-spacing:1px;">sign</span>
  159. <span>Aries</span>
  160. </div>
  161. <hr class="my-2">
  162. </div>
  163.  
  164. <div class="col-md-6 mb-1">
  165. <div class="d-flex justify-content-between">
  166. <span class="text-muted text-uppercase" style="letter-spacing:1px;">occupation</span>
  167. <span>wildlife ranger</span>
  168. </div>
  169. </div>
  170.  
  171. <div class="col-md-6 mb-1">
  172. <div class="d-flex justify-content-between">
  173. <span class="text-muted text-uppercase" style="letter-spacing:1px;">partner</span>
  174. <span><a href="https://toyhou.se/3360438.gohn"><i class="fas fa-heart"></i></a></span>
  175. </div>
  176. </div>
  177. </div>
  178. </div>
  179. </div>
  180.  
  181.  
  182. <!------------------------------------ SECOND TAB ------------------------------------------------------------->
  183. <div class="tab-pane fade" data-toggle="tab" id="TWO">
  184. <!----------------------- design notes ----------------------->
  185. <div class="card pt-2 px-3 pb-1 rounded-0 border-0" style="height: 220px; overflow:auto; margin-bottom:10px;">
  186. <div class="row no-gutters">
  187. <div class="col-12">
  188. <ul class="mb-0" style="font-size: .9em;">
  189. <p>Content here</p>
  190. </ul>
  191. </div>
  192. </div>
  193. </div>
  194. </div>
  195.  
  196.  
  197. <!------------------------------------ THIRD TAB ------------------------------------------------------------->
  198. <div class="tab-pane fade" data-toggle="tab" id="THREE">
  199. <!----------------------- likes & dislikes ----------------------->
  200. <div class="card pt-2 px-3 pb-1 rounded-0 border-0" style="height: 220px; overflow:auto; margin-bottom:10px;">
  201. <div class="row no-gutters">
  202. <div class="col-6 pr-1">
  203. <p class="text-muted" style="letter-spacing:1px;">LIST 1</p>
  204. <ul class="mb-0" style="font-size: .9em;">
  205. <li class="mb-2">item</li>
  206. <li class="mb-2">item</li>
  207. <li class="mb-2">item</li>
  208. <li class="mb-2">item</li>
  209. <li class="mb-2">item</li>
  210. <li class="mb-2">item</li>
  211. </ul>
  212. </div>
  213. <div class="col-6 pl-1">
  214. <p class="text-muted" style="letter-spacing:1px;">LIST 2</p>
  215. <ul class="mb-0" style="font-size: .9em;">
  216. <li class="mb-2">item</li>
  217. <li class="mb-2">item</li>
  218. <li class="mb-2">item</li>
  219. <li class="mb-2">item</li>
  220. <li class="mb-2">item</li>
  221. <li class="mb-2">item</li>
  222. </ul>
  223. </div>
  224. </div>
  225. </div>
  226. </div>
  227. </div></div>
  228.  
  229. <!------- right column --------------------------->
  230. <div class="col-md-3">
  231. <!------ focal images -- focus will be in the center of image -- will scale and crop with screen size -->
  232. <div class="row no-gutters">
  233. <div class="col-md-12 mb-md-2 pr-md-0 pr-1 col-4">
  234. <div style="background: url(IMAGEURL); background-position: center; background-size: cover; height: 200px;"></div>
  235. </div>
  236.  
  237. <div class="col-md-12 mb-md-2 col-4">
  238. <div style="background: url(IMAGEURL); background-position: center; background-size: cover; height: 200px;"></div>
  239. </div>
  240.  
  241. <div class="col-md-12 mb-md-2 col-4">
  242. <div style="background: url(IMAGEURL); background-position: center; background-size: cover; height: 200px;"></div>
  243. </div>
  244.  
  245. <div class="col-md-12 pl-md-0 pl-1 col-4">
  246. <div style="background: url(IMAGEURL); background-position: center; background-size: cover; height: 200px;"></div>
  247. </div>
  248.  
  249. </div>
  250. </div>
  251. </div>
  252. </div>
  253. <p class="mt-2 text-right small">HTML codes by @Eggy</p>
  254. </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!