Our House V.1

<!--
Code by LivvyAh, this time I did it by me self.
Don't remove my credit! You can put it somewhere else on the page if you want but it's gotta be on the page.
Comment when you use this code! I love seeing it used!

  USE NOTES
+ Haven't tried editing in WYSIWYG, try at your own risk.
- Feel free to add or remove housemates, some notes on that before that section.
+ Ctrl+F Replace All is your friend!
- Images resize!

  COLORS
- Main Font Color: #000000
+ Striped Walls: #444B95
- Other Walls/About Box: #7C81B5
+ Icons/Line/Links: #ffffff
-->

<div class="container-fluid"
Style="color: #000000;">
  <div class="row">

<!-- roof -->
<div class="col-12 p-2">
<div class="p-3 text-uppercase"
style="background:#444B95;
  height:200px;
  background-image: url(https://f2.toyhou.se/file/f2-toyhou-se/images/16240658_HVIcxp032F6o2cN.png);
  background-size: tile;
  background-position: center;
  background-attachment: fixed;
  clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);">
</div></div>
</div>

  <div class="row">

<!-- wall with bird -->
<div class="col-lg-1 col-xs-2 col-md-2 col-2 p-2">
<div class="p-3"
style="background:#444B95;
 height:235px;
 background-image: url(https://file.toyhou.se/images/11617956_HgaJ1JZrrxffWxv.png);">
  <br><br><br><br><br><br><br><br><br>
  <i class="fas fa-crow" style="color:#ffffff;font-size: 25px;"></i>
</div></div>

<!-- window 1 -->
<div class="col-lg-2 col-xs-8 col-md-8 col-8 p-2">
<div class="p-3"
style="background:#444B95;
  height:235px;
  background: url(https://f2.toyhou.se/file/f2-toyhou-se/images/16240658_HVIcxp032F6o2cN.png);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;">
</div></div>

<!-- wall -->
<div class="col-xs-2 col-md-2 col-2 p-2 hidden-lg-up">
<div class="p-3
 table-responsive"
style="background:#444B95;
 height:235px;
 text-align: center;
 font-size: 20px;
 background-image: url(https://file.toyhou.se/images/11617956_HgaJ1JZrrxffWxv.png);">
</div></div>

<!-- About.-->
<div class="col-lg-9 col-xs-12 col-md-12 col-12 p-2">
<div class="p-3"
 style="background:#7C81B5;">
<div class="text-uppercase d-flex justify-content-between"
 style="border-bottom: 1px solid #ffffff;
 font-size:20px;">
  The Name Household<i style="color: #ffffff;" class="fas fa-home"></i></div>
<div class="table-responsive p-1" style="height:172px;">
<br>
<p>Just a fun code for all those kids who share a place.
<br>Is there a demand for this? IDK.</p>
<p>Mobile friendly EXCEPT the fun hovers, sorry guys.</p>
<p><a href="https://toyhou.se/2978476.free-use-backgrounds" style="color:#ffffff;">Free backgrounds</a></p>
</div></div></div>

<!-- Housemates
Add or remove as desired.

If you only have 4 housemates: change col-lg-2 to col-lg-3
If you only have 3 housemates: change col-lg-2 to col-lg-4
If you only have 2 housemates: change col-lg-2 to col-lg-6

You can also change the max-height to your liking.-->
<div class="col-lg-12 col-xs-12 col-md-12 col-12 p-2">
<div class="p-4
 table-responsive"
 style="background:#444B95;
 background-image: url(https://file.toyhou.se/images/11617956_HgaJ1JZrrxffWxv.png);">
<div class="row">

<!-- person 1-->
<div class="col-lg-2 col-xs-6 col-md-6 col-6 text-center mb-2">
<a href="#"
title="Full Name"
data-toggle="popover"
data-trigger="hover"
data-content="A short description of this person"
style="color:#ffffff;">
  <img src="IMG HERE"
  class="d-block mx-auto mb-2 rounded-circle"
  style="max-height:125px;">
  <p class="text-uppercase">
    Character Name</p></a>
</div>
<!-- end 1-->

<!-- person 2-->
<div class="col-lg-2 col-xs-6 col-md-6 col-6 text-center mb-2">
<a href="#"
title="Full Name"
data-toggle="popover"
data-trigger="hover"
data-content="A short description of this person"
style="color:#ffffff;">
  <img src="IMG HERE"
  class="d-block mx-auto mb-2 rounded-circle"
  style="max-height:125px;">
  <p class="text-uppercase">
    Character Name</p></a>
</div>
<!-- end 2-->

<!-- person 3-->
<div class="col-lg-2 col-xs-6 col-md-6 col-6 text-center mb-2">
<a href="#"
title="Full Name"
data-toggle="popover"
data-trigger="hover"
data-content="A short description of this person"
style="color:#ffffff;">
  <img src="IMG HERE"
  class="d-block mx-auto mb-2 rounded-circle"
  style="max-height:125px;">
  <p class="text-uppercase">
    Character Name</p></a>
</div>
<!-- end 3-->

<!-- person 4-->
<div class="col-lg-2 col-xs-6 col-md-6 col-6 text-center mb-2">
<a href="#"
title="Full Name"
data-toggle="popover"
data-trigger="hover"
data-content="A short description of this person"
style="color:#ffffff;">
  <img src="IMG HERE"
  class="d-block mx-auto mb-2 rounded-circle"
  style="max-height:125px;">
  <p class="text-uppercase">
    Character Name</p></a>
</div>
<!-- end 4-->

<!-- person 5-->
<div class="col-lg-2 col-xs-6 col-md-6 col-6 text-center mb-2">
<a href="#"
title="Full Name"
data-toggle="popover"
data-trigger="hover"
data-content="A short description of this person"
style="color:#ffffff;">
  <img src="IMG HERE"
  class="d-block mx-auto mb-2 rounded-circle"
  style="max-height:125px;">
  <p class="text-uppercase">
    Character Name</p></a>
</div>
<!-- end 5-->

<!-- person 6-->
<div class="col-lg-2 col-xs-6 col-md-6 col-6 text-center mb-2">
<a href="#"
title="Full Name"
data-toggle="popover"
data-trigger="hover"
data-content="A short description of this person"
style="color:#ffffff;">
  <img src="IMG HERE"
  class="d-block mx-auto mb-2 rounded-circle"
  style="max-height:125px;">
  <p class="text-uppercase">
    Character Name</p></a>
</div>
<!-- end 6-->

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

<div class="row">

<!-- wall with cat -->
<div class="col-lg-3 col-xs-3 col-md-3 col-3 p-2">
<div class="p-3"
style="background:#444B95;
 height:235px;
 background-image: url(https://file.toyhou.se/images/11617956_HgaJ1JZrrxffWxv.png);
 text-align:right;">
  <br><br><br><br><br><br><br><br><br>
  <i class="fas fa-cat" style="color:#ffffff;font-size: 25px;"></i>
</div></div>

<!-- window 2 -->
<div class="col-lg-5 col-xs-9 col-md-9 col-9 p-2">
<div class="p-3"
style="height:235px;
  background:#444B95;
  background: url(https://f2.toyhou.se/file/f2-toyhou-se/images/16240658_HVIcxp032F6o2cN.png);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;">
</div></div>

<!-- wall with light and doorbell-->
<div class="col-lg-1 col-xs-2 col-md-2 col-2 p-2">
<div class="p-3  text-center"
style="background:#7C81B5;
 height:235px;">
  <i class="fas fa-lightbulb" style="color:#ffffff;font-size: 25px;"></i>
  <br><Br>
 &nbsp;&nbsp;<i class="fas fa-music" style="color:#ffffff;font-size: 12px;"></i>
 <br>
 <i class="fas fa-music" style="color:#ffffff;font-size: 10px;"></i>&nbsp;&nbsp;&nbsp;
 <br>
 <i class="far fa-dot-circle" style="color:#ffffff;font-size: 15px;"></i>
</div></div>

<!-- door -->
<div class="col-lg-2 col-xs-5 col-md-5 col-5 p-2">
<div class="p-3"
style="background:#444B95;
  height:235px;
  background: url(https://f2.toyhou.se/file/f2-toyhou-se/images/16240658_HVIcxp032F6o2cN.png);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 100% 100%, 50% 100%, 15% 100%, 0 100%, 0% 35%, 20% 10%);">
</div></div>

<!-- wall with mailbox and plant-->
<div class="col-lg-1 col-xs-5 col-md-5 col-5 p-2">
<div class="p-3 text-center"
style="background:#7C81B5;
 height:235px;"><br><br><br><br>
  <i class="fas fa-envelope-square" style="color:#ffffff;font-size: 30px;"></i>
 <br><br><br><br>
<!-- Credit! Moving OK! Removing not! -->
 <a href="https://toyhou.se/CivilEngideer" style="color: #ffffff;">
 <i class="fas fa-seedling" style="color:#ffffff;font-size: 25px;" data-placement="left" title="coding by civ"></i></a>
</div></div>

</div></div>