Advertisement
Guest User

TH | Willow | F2U profile code

a guest
Oct 22nd, 2019
715
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.48 KB | None | 0 0
  1. <!------------------------------------
  2.  
  3. Code by WindWaken! Inspired by Zillow
  4.  
  5. You may do whatever you like with this tbh, I don't care
  6. as long as the credit remains go nuts with it!
  7. Sorry if it's a little messy or does some things awkwardly, I haven't specifically studied html so it's not perfect.
  8. Could be converted into a character profile too, just would take some adjustments. Feel free to!
  9.  
  10. ---------------------------------------->
  11.  
  12.  
  13. <div class="container" style="max-width:88vw; height:100vh; color:#000000">
  14. <div class="row">
  15. <div class="col-7 p-0">
  16.  
  17.  
  18. <!---------------------- IMAGE COLUMN ---------------------->
  19.  
  20. <div class="card rounded-0" style="Border: none; background-color:#ffffff; height: 100vh; overflow-x: hidden">
  21.  
  22. <!---BIG IMAGE --->
  23.  
  24. <div class="card rounded-0"
  25.  
  26. style="Border: none; background: url(https://images.unsplash.com/photo-1571252441497-4c2ddf95f052?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80) center;background-size:cover;min-height:75vh;">
  27.  
  28. </div>
  29.  
  30. <!--- end big image-->
  31.  
  32. <div class="row no-gutters">
  33.  
  34. <!--- Image 1 -->
  35. <div class="col-6 pt-1 pr-1 pb-1">
  36. <div class="card rounded-0" style="Border: none; background: url(https://images.unsplash.com/photo-1550824730-05ededc35e7a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=890&q=80) center;background-size:cover;min-height:260px;">
  37.  
  38. </div>
  39. </div>
  40. <!--- end Image 1 -->
  41.  
  42. <!--- Image 2 -->
  43. <div class="col-6 pt-1 pb-1">
  44. <div class="card rounded-0" style="Border: none; background: url(https://images.unsplash.com/photo-1543837173-6c26bc89937b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=401&q=80) center;background-size:cover;min-height:260px;">
  45.  
  46. </div>
  47. </div>
  48. <!--- end Image 2 -->
  49.  
  50. <!--- Image 3 -->
  51. <div class="col-6 pr-1 pb-1">
  52. <div class="card rounded-0" style="Border: none; background: url(https://images.unsplash.com/photo-1516700675895-b2e35cae333c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80) center;background-size:cover;min-height:260px;">
  53.  
  54. </div>
  55. </div>
  56. <!--- end Image 3 -->
  57.  
  58. <!--- Image 4 -->
  59. <div class="col-6 pb-1">
  60. <div class="card rounded-0" style="Border: none; background: url(https://images.unsplash.com/photo-1541356666084-907d25d6ec67?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80) center;background-size:cover;min-height:260px;">
  61.  
  62. </div>
  63. </div>
  64. <!--- end Image 4 -->
  65.  
  66. <!--- Image 5 -->
  67. <div class="col-6 pr-1 pb-1">
  68. <div class="card rounded-0" style="Border: none; background: url(https://images.unsplash.com/photo-1536085317-8e0c3f1aa791?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80) center;background-size:cover;min-height:260px;">
  69.  
  70. </div>
  71. </div>
  72. <!--- end Image 5 -->
  73.  
  74. <!--- Image 6 -->
  75. <div class="col-6 pb-1">
  76. <div class="card rounded-0" style="Border: none; background: url(https://images.unsplash.com/photo-1571257363474-8db46af079a4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60) center;background-size:cover;min-height:260px;">
  77.  
  78. </div>
  79. </div>
  80. <!--- end Image 6 -->
  81.  
  82. <!--- Image 7 -->
  83. <div class="col-6 pr-1 pb-1">
  84. <div class="card rounded-0" style="Border: none; background: url(https://images.unsplash.com/photo-1508996369280-b9165f545b08?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80) center;background-size:cover;min-height:260px;">
  85.  
  86. </div>
  87. </div>
  88. <!--- end Image 7 -->
  89.  
  90. <!--- Image 8 -->
  91. <div class="col-6 pb-1">
  92. <div class="card rounded-0" style="Border: none; background: url(https://images.unsplash.com/photo-1534330433945-320418d45201?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=761&q=80) center;background-size:cover;min-height:260px;">
  93.  
  94. </div>
  95. </div>
  96. <!--- end Image 8 -->
  97.  
  98. <!--- Image 9 -->
  99. <div class="col-6 pr-1">
  100. <div class="card rounded-0" style="Border: none; background: url(https://images.unsplash.com/photo-1474716934413-9f9613f0edb2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80) center;background-size:cover;min-height:260px;">
  101.  
  102. </div>
  103. </div>
  104. <!--- end Image 9 -->
  105.  
  106. <!--- Image 10 -->
  107. <div class="col-6">
  108. <div class="card rounded-0" style="Border: none; background: url(https://images.unsplash.com/photo-1508200376627-96bbedad2bc0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80) center;background-size:cover;min-height:260px;">
  109.  
  110. </div>
  111. </div>
  112. <!--- end Image 10 -->
  113.  
  114.  
  115. <!-- add more as needed above this, best to copy and paste in sets of two to keep spacing intact-->
  116. </div>
  117. </div>
  118. </div>
  119.  
  120.  
  121. <div class="col-5 p-0">
  122. <!---------------------- INFO COLUMN ---------------------->
  123. <div class="card rounded-0 p-0" style="Border: none; background-color:#00ffff; height: 100vh;">
  124.  
  125. <!--Top panel-->
  126. <div class="container rounded-0 p-3" style="Border: none; background-color:#ffffff; width: 100%;">
  127.  
  128.  
  129. <!--Header-->
  130.  
  131. <div class="justify-content-between">
  132. <div style="font-size:26px; color: #f5822a">
  133.  
  134. <i class="fa fa-home" aria-hidden="true"></i><b>Willow</b></div>
  135.  
  136. <span><div style="font-size:18px; color: #f5822a">
  137.  
  138. <i class="far fa-heart"></i>Save &nbsp;<i class="far fa-share">Share &nbsp; <a href="https://toyhou.se/WindWaken"><i class="far fa-code"></i>Code</i></a>
  139.  
  140. </div></span></div>
  141.  
  142. <!--- End Header ---->
  143.  
  144. <hr style="border-color:#d4d4d4; margin-left:0; margin-right:0;">
  145.  
  146. <!-- Info -->
  147. <p class="text-left"><div style="font-size:26px; display:inline;">
  148.  
  149. <b>Name of place</b>
  150.  
  151. </div>
  152.  
  153. <div style="font-size:16px; display:inline">&nbsp;
  154.  
  155. <b>x</b> bd | <b>x</b> ba | <b>x</b> sqft
  156.  
  157. </div></p><br>
  158.  
  159. <p class="text-left"><div style="font-size:17px;">
  160.  
  161. <b>1234 Generic St, Town, State, 00000</b>
  162.  
  163. </div></b></p><br>
  164.  
  165. <!-- End Info -->
  166.  
  167. <div class="row">
  168.  
  169. <!-- Buttons -->
  170. <div class="col-6 pl-2"><p class="text-center">
  171.  
  172. <a href="yourlinkhere" class="btn btn-outline-warning btn-block" style="">idk what to put</a></p></div>
  173.  
  174. <div class="col-6 pr-2">
  175. <a href="yourlinkhere" class="btn btn-warning btn-block">Do what you want</a></div>
  176.  
  177. </p></div>
  178.  
  179. <!-- End Buttons -->
  180.  
  181. </div>
  182. <!-- End top panel -->
  183.  
  184. <!--Bottom Panel -->
  185. <div class="container rounded-0 p-3" style="Border: none; background-color:#ffffff; height: 100%; width: 100%; overflow-x: hidden;">
  186.  
  187. <!-- Overview -->
  188.  
  189. <p class="text-left"><div style="font-size:20px;"><b>Overview</b></div></p>
  190.  
  191. <hr style="border-color:#d4d4d4; margin-left:0; margin-right:0;">
  192.  
  193. <table class="table" style="Border: none;">
  194. <tbody>
  195. <tr>
  196. <td class="text-center" style="width: 33.3333%; height:-2; padding:0px; margin:0px;">Function</td>
  197. <td class="text-center" style=" padding:0px; margin:0px;">Owner</td>
  198. <td class="text-center" style=" padding:0px; margin:0px;">Occupants/Staff</td>
  199. </tr>
  200. <tr>
  201. <td class="text-center" style=" padding:0px; margin:0px;"><b>Thing</b></td>
  202. <td class="text-center" style=" padding:0px; margin:0px;"><b>Person</b></td>
  203. <td class="text-center" style=" padding:0px; margin:0px;"><b>123</b></td>
  204. </tr>
  205. </tbody>
  206. </table>
  207.  
  208. <hr style="border-color:#d4d4d4; margin-left:0; margin-right:0;">
  209.  
  210. <p class="text-left">
  211.  
  212. Write a little blurb here about this building/buisness/home! Could include history, description, ect. 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
  213.  
  214. <p class="text-left"><div style="font-size:16px;">
  215. <a href="#topcollapse" data-toggle="collapse"><b>Read More</b></a></div>
  216. <div id="topcollapse" class="collapse">
  217. Write even more here if you want! 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  218. </div></p><br>
  219.  
  220. <!-- Overview end -->
  221.  
  222. <!-- About the Owner -->
  223. <p class="text-left"><div style="font-size:16px;"><b>About the owner</b></div>
  224.  
  225. <a href="Link to owner profile"><img class="rounded-circle my-4" src="https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png" style="max-width: 60px"><div style="display:inline;"> Firstname Lastname </div></a><br>
  226.  
  227. Write about how the owner aquired the property, history the owner has with it, how its been used since being aquired, ect. </p>
  228.  
  229. <!--End about the owner-->
  230. <br><br>
  231. <!--- residents or staff---->
  232. <p class="text-left"><div style="font-size:20px;"><b>Residents/Staff</b></div></p>
  233. <hr style="border-color:#d4d4d4; margin-left:0; margin-right:0;">
  234.  
  235. <div class="container rounded-0 p-3" style="Border: none;">
  236. <div class="row no-gutters">
  237.  
  238. <!--- resident / staff card -->
  239. <div class="col-md-4 col-6 p-0">
  240. <div class="container rounded-0 p-0" style="Border: none; text-align: center">
  241.  
  242. <a href="Link to owner profile"><img class="rounded-circle " src="https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png" style="max-width: 60px"><br>
  243. Name
  244. </a><br>
  245. Role
  246.  
  247.  
  248. </div>
  249. </div>
  250. <!--- end resident / staff card -->
  251.  
  252. <!--- resident / staff card -->
  253. <div class="col-md-4 col-6 p-0">
  254. <div class="container rounded-0 p-0" style="Border: none; text-align: center">
  255.  
  256. <a href="Link to owner profile"><img class="rounded-circle " src="https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png" style="max-width: 60px"><br>
  257. Name
  258. </a><br>
  259. Role
  260.  
  261.  
  262. </div>
  263. </div>
  264. <!--- end resident / staff card -->
  265.  
  266. <!--- resident / staff card -->
  267. <div class="col-md-4 col-6 p-0">
  268. <div class="container rounded-0 p-0" style="Border: none; text-align: center">
  269.  
  270. <a href="Link to owner profile"><img class="rounded-circle " src="https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png" style="max-width: 60px"><br>
  271. Name
  272. </a><br>
  273. Role
  274.  
  275.  
  276. </div>
  277. </div>
  278. <!--- end resident / staff card -->
  279.  
  280. <!--- resident / staff card -->
  281. <div class="col-md-4 col-6 p-0">
  282. <div class="container rounded-0 p-0" style="Border: none; text-align: center">
  283.  
  284. <a href="Link to owner profile"><img class="rounded-circle " src="https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png" style="max-width: 60px"><br>
  285. Name
  286. </a><br>
  287. Role
  288.  
  289.  
  290. </div>
  291. </div>
  292. <!--- end resident / staff card -->
  293.  
  294. <!--- resident / staff card -->
  295. <div class="col-md-4 col-6 p-0">
  296. <div class="container rounded-0 p-0" style="Border: none; text-align: center">
  297.  
  298. <a href="Link to owner profile"><img class="rounded-circle " src="https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png" style="max-width: 60px"><br>
  299. Name
  300. </a><br>
  301. Role
  302.  
  303.  
  304. </div>
  305. </div>
  306. <!--- end resident / staff card -->
  307.  
  308. <!--- resident / staff card -->
  309. <div class="col-md-4 col-6 p-0">
  310. <div class="container rounded-0 p-0" style="Border: none; text-align: center">
  311.  
  312. <a href="Link to owner profile"><img class="rounded-circle " src="https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png" style="max-width: 60px"><br>
  313. Name
  314. </a><br>
  315. Role
  316.  
  317.  
  318. </div>
  319. </div>
  320. <!--- end resident / staff card -->
  321.  
  322.  
  323. <!-- Add more above here if needed -->
  324. </div>
  325. </div>
  326.  
  327. <!--- End residents or staff---->
  328.  
  329. <!--trivia-->
  330.  
  331. <p class="text-left"><div style="font-size:20px;"><b>Trivia</b></div></p>
  332. <hr style="border-color:#d4d4d4; margin-left:0; margin-right:0;">
  333.  
  334. <p class="text-left">
  335.  
  336. <ul class="m-0">
  337. <li>Thing 1</li>
  338.  
  339. <li>Thing 2</li>
  340.  
  341. <li>Thing 3</li>
  342. </ul></p>
  343.  
  344. <!--end trivia-->
  345.  
  346. </div>
  347. </div>
  348. </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement