TH | Willow | F2U profile code

<!------------------------------------

Code by WindWaken! Inspired by Zillow

You may do whatever you like with this tbh, I don't care
as long as the credit remains go nuts with it!
Sorry if it's a little messy or does some things awkwardly, I haven't specifically studied html so it's not perfect.
Could be converted into a character profile too, just would take some adjustments. Feel free to!

---------------------------------------->


<div class="container" style="max-width:88vw; height:100vh; color:#000000">
   <div class="row">
     <div class="col-7 p-0">


     <!---------------------- IMAGE COLUMN ---------------------->

       <div class="card rounded-0" style="Border: none; background-color:#ffffff; height: 100vh; overflow-x: hidden">

          <!---BIG IMAGE --->

         <div class="card rounded-0"

         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;">

    </div>

          <!--- end big image-->

         <div class="row no-gutters">

          <!--- Image 1 -->
          <div class="col-6 pt-1 pr-1 pb-1">
           <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;">

           </div>
          </div>
          <!--- end Image 1 -->

          <!--- Image 2 -->
          <div class="col-6 pt-1 pb-1">
           <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;">

           </div>
          </div>
          <!--- end Image 2 -->

          <!--- Image 3 -->
          <div class="col-6 pr-1 pb-1">
           <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;">

           </div>
          </div>
          <!--- end Image 3 -->

          <!--- Image 4 -->
          <div class="col-6 pb-1">
           <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;">

           </div>
          </div>
          <!--- end Image 4 -->

          <!--- Image 5 -->
          <div class="col-6 pr-1 pb-1">
           <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;">

           </div>
          </div>
          <!--- end Image 5 -->

          <!--- Image 6 -->
          <div class="col-6 pb-1">
           <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;">

           </div>
          </div>
          <!--- end Image 6 -->

          <!--- Image 7 -->
          <div class="col-6 pr-1 pb-1">
           <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;">

           </div>
          </div>
          <!--- end Image 7 -->

          <!--- Image 8 -->
          <div class="col-6 pb-1">
           <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;">

           </div>
          </div>
          <!--- end Image 8 -->

          <!--- Image 9 -->
          <div class="col-6 pr-1">
           <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;">

           </div>
          </div>
          <!--- end Image 9 -->

          <!--- Image 10 -->
          <div class="col-6">
           <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;">

           </div>
          </div>
          <!--- end Image 10 -->


          <!-- add more as needed above this, best to copy and paste in sets of two to keep spacing intact-->
          </div>
       </div>
</div>


     <div class="col-5 p-0">
     <!---------------------- INFO COLUMN ---------------------->
       <div class="card rounded-0 p-0" style="Border: none; background-color:#00ffff; height: 100vh;">

        <!--Top panel-->
        <div class="container rounded-0 p-3" style="Border: none; background-color:#ffffff; width: 100%;">


           <!--Header-->

           <div class="justify-content-between">
           <div style="font-size:26px; color: #f5822a">

           <i class="fa fa-home" aria-hidden="true"></i><b>Willow</b></div>

           <span><div style="font-size:18px; color: #f5822a">

           <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>

           </div></span></div>

           <!--- End Header ---->

           <hr style="border-color:#d4d4d4; margin-left:0; margin-right:0;">

           <!-- Info -->
           <p class="text-left"><div style="font-size:26px; display:inline;">

           <b>Name of place</b>

           </div>

           <div style="font-size:16px; display:inline">&nbsp;

           <b>x</b> bd | <b>x</b> ba | <b>x</b> sqft

           </div></p><br>

           <p class="text-left"><div style="font-size:17px;">

           <b>1234 Generic St, Town, State, 00000</b>

           </div></b></p><br>

           <!-- End Info -->

           <div class="row">

           <!-- Buttons -->
           <div class="col-6 pl-2"><p class="text-center">

           <a href="yourlinkhere" class="btn btn-outline-warning btn-block" style="">idk what to put</a></p></div>

           <div class="col-6 pr-2">
           <a href="yourlinkhere" class="btn btn-warning btn-block">Do what you want</a></div>

           </p></div>

           <!-- End Buttons -->

           </div>
        <!-- End top panel -->

        <!--Bottom Panel -->
        <div class="container rounded-0 p-3" style="Border: none; background-color:#ffffff; height: 100%; width: 100%; overflow-x: hidden;">

          <!-- Overview -->

          <p class="text-left"><div style="font-size:20px;"><b>Overview</b></div></p>

          <hr style="border-color:#d4d4d4; margin-left:0; margin-right:0;">

           <table class="table" style="Border: none;">
            <tbody>
             <tr>
              <td class="text-center" style="width: 33.3333%; height:-2; padding:0px; margin:0px;">Function</td>
              <td class="text-center" style=" padding:0px; margin:0px;">Owner</td>
              <td class="text-center" style=" padding:0px; margin:0px;">Occupants/Staff</td>
            </tr>
            <tr>
             <td class="text-center" style=" padding:0px; margin:0px;"><b>Thing</b></td>
             <td class="text-center" style=" padding:0px; margin:0px;"><b>Person</b></td>
             <td class="text-center" style=" padding:0px; margin:0px;"><b>123</b></td>
            </tr>
           </tbody>
          </table>

          <hr style="border-color:#d4d4d4; margin-left:0; margin-right:0;">

          <p class="text-left">

           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>

           <p class="text-left"><div style="font-size:16px;">
           <a href="#topcollapse" data-toggle="collapse"><b>Read More</b></a></div>
           <div id="topcollapse" class="collapse">
           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.
           </div></p><br>

           <!-- Overview end -->

           <!-- About the Owner -->
           <p class="text-left"><div style="font-size:16px;"><b>About the owner</b></div>

           <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>

           Write about how the owner aquired the property, history the owner has with it, how its been used since being aquired, ect. </p>

           <!--End about the owner-->
           <br><br>
           <!--- residents or staff---->
           <p class="text-left"><div style="font-size:20px;"><b>Residents/Staff</b></div></p>
           <hr style="border-color:#d4d4d4; margin-left:0; margin-right:0;">

           <div class="container rounded-0 p-3" style="Border: none;">
             <div class="row no-gutters">

               <!--- resident / staff card -->
               <div class="col-md-4 col-6 p-0">
                <div class="container rounded-0 p-0" style="Border: none; text-align: center">

                 <a href="Link to owner profile"><img class="rounded-circle " src="https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png" style="max-width: 60px"><br>
                 Name
                 </a><br>
                 Role


                 </div>
               </div>
               <!--- end resident / staff card -->

               <!--- resident / staff card -->
               <div class="col-md-4 col-6 p-0">
                <div class="container rounded-0 p-0" style="Border: none; text-align: center">

                 <a href="Link to owner profile"><img class="rounded-circle " src="https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png" style="max-width: 60px"><br>
                 Name
                 </a><br>
                 Role


                 </div>
               </div>
               <!--- end resident / staff card -->

               <!--- resident / staff card -->
               <div class="col-md-4 col-6 p-0">
                <div class="container rounded-0 p-0" style="Border: none; text-align: center">

                 <a href="Link to owner profile"><img class="rounded-circle " src="https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png" style="max-width: 60px"><br>
                 Name
                 </a><br>
                 Role


                 </div>
               </div>
               <!--- end resident / staff card -->

               <!--- resident / staff card -->
               <div class="col-md-4 col-6 p-0">
                <div class="container rounded-0 p-0" style="Border: none; text-align: center">

                 <a href="Link to owner profile"><img class="rounded-circle " src="https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png" style="max-width: 60px"><br>
                 Name
                 </a><br>
                 Role


                 </div>
               </div>
               <!--- end resident / staff card -->

               <!--- resident / staff card -->
               <div class="col-md-4 col-6 p-0">
                <div class="container rounded-0 p-0" style="Border: none; text-align: center">

                 <a href="Link to owner profile"><img class="rounded-circle " src="https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png" style="max-width: 60px"><br>
                 Name
                 </a><br>
                 Role


                 </div>
               </div>
               <!--- end resident / staff card -->

               <!--- resident / staff card -->
               <div class="col-md-4 col-6 p-0">
                <div class="container rounded-0 p-0" style="Border: none; text-align: center">

                 <a href="Link to owner profile"><img class="rounded-circle " src="https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png" style="max-width: 60px"><br>
                 Name
                 </a><br>
                 Role


                 </div>
               </div>
               <!--- end resident / staff card -->


               <!-- Add more above here if needed -->
              </div>
              </div>

            <!--- End residents or staff---->

            <!--trivia-->

            <p class="text-left"><div style="font-size:20px;"><b>Trivia</b></div></p>
            <hr style="border-color:#d4d4d4; margin-left:0; margin-right:0;">

            <p class="text-left">

              <ul class="m-0">
               <li>Thing 1</li>

               <li>Thing 2</li>

               <li>Thing 3</li>
              </ul></p>

             <!--end trivia-->

      </div>
      </div>
      </div>