<!-- CODE BY KAT11 -->

                                                  <!-- Background image link  ↓ -->
<div style="position: absolute; top: 0; bottom: 0; left: 0; background: url(https://toyhouse.fixordi11.fr/sv/sv-bg.jpg) fixed center; background-size: cover; width:100%; z-index: -1;"></div> 
<div style="color: black; font-family: Courier New, monospace;">
  <br>
  <div id="accordion">
    
    
  <!---------------------- FIRST MENU ---------------------->
  
  <div class="collapse show" id="info" data-parent="#accordion">
    
    
  <!-- MENU -->
    
  <div class="accordion container" style="z-index: 1;">
    <div class="row no-gutters">
      <div class="col-md-1 col-1"></div>
      <div class="col-md-10 col-12">
        <a data-toggle="collapse"><img style="transform: translate(-0px, 8px);" src="https://toyhouse.fixordi11.fr/sv/sv-menu-info.png"></a>
        <a href="#skills" data-toggle="collapse"><img style="transform: translate(-9px, 0px);" src="https://toyhouse.fixordi11.fr/sv/sv-menu-skills.png"></a>
        <a href="#relationship" data-toggle="collapse"><img style="transform: translate(-18px, 0px);" src="https://toyhouse.fixordi11.fr/sv/sv-menu-relationship.png"></a>
        <a href="#map" data-toggle="collapse"><img style="transform: translate(-27px, 0px);" src="https://toyhouse.fixordi11.fr/sv/sv-menu-map.png"></a>
      </div>
    </div>
	</div>
	
    
    <!-- BORDERS -->
    
  <div class="row no-gutters">
  <div class="col-md-1 col-1"></div>
  <div class="col-md-10 col-12" style="border-style: solid; border-width: 4px; border-color: #5b2b2a; border-radius: 10px;">
  <div class="row no-gutters">
  <div class="col-md-12 col-12" style="border-style: ridge; border-left-style: groove; border-right-style: groove; border-width: 8px; border-color: #fa9305; border-radius: 5px; text-align: center; background: linear-gradient(#ffcb7b, #eba867);">
  <div class="row no-gutters">
  <div class="col-md-12 col-12" style="border-style: solid; border-width: 4px; border-color: #853605;">

      
    
    <div class="row no-gutters" style="margin-top: 10px;">
      
      
      <!---------- LEFT COLUMN ---------->
      
      <div class="col-md-1 col-3">
        <div style="background-image: url('https://toyhouse.fixordi11.fr/sv/sv-case.png'); background-repeat: no-repeat; background-position: center right; height: 64px;">
          <div style="width: 48px; height: 48px; float:right; overflow: hidden; transform: translate(-8px, 8px);">
            <img style="min-width: 48px; max-width: 48px;" src="https://toyhouse.fixordi11.fr/sv/sv-grass.png">
          </div>                                    <!-- Item link ↑ -->
        </div>
        <div style="background-image: url('https://toyhouse.fixordi11.fr/sv/sv-case.png'); background-repeat: no-repeat; background-position: center right; height: 64px;">
          <div style="width: 48px; height: 48px; float:right; overflow: hidden; transform: translate(-8px, 8px);">
            <img style="min-width: 48px; max-width: 48px;" src="https://toyhouse.fixordi11.fr/sv/sv-grass.png">
          </div>                                    <!-- Item link ↑ -->
        </div>
        <div style="background-image: url('https://toyhouse.fixordi11.fr/sv/sv-case.png'); background-repeat: no-repeat; background-position: center right; height: 64px;">
          <div style="width: 48px; height: 48px; float:right; overflow: hidden; transform: translate(-8px, 8px);">
            <img style="min-width: 48px; max-width: 48px;" src="https://toyhouse.fixordi11.fr/sv/sv-grass.png">
          </div>                                    <!-- Item link ↑ -->
        </div>
        <div style="height: 64px;"></div>
      </div>
      
      
      <!---------- CHARACTER ---------->
      
      <div class="col-md-2 col-6">
        <div class="row no-gutters">
          <div class="col-md-1 col-1"></div>                                              <!-- Choose day or night ↓ -->
          <div class="col-md-10 col-10" style="background-image: url('https://toyhouse.fixordi11.fr/sv/sv-bg-char-day.png'); background-repeat: no-repeat; background-size: cover; background-position: center; border-style: ridge; border-width: 10px; border-color: #fa9305; border-radius: 5px; text-align: center; height: 192px; width: 100%;">
            <div style="width: auto; height: 192px; overflow: hidden;">
              <img style="min-height: 128px; max-height: 128px; transform: translate(0px, 24px);" src="https://toyhouse.fixordi11.fr/sv/sv-leah.png">
            </div>                                                              <!-- Character image link ↑ -->
            <h1 style="font-weight: bold; text-shadow: #dd9454 -2px 2px;">Name<br>Surname</h1>
          </div>                                          <!-- Change name ↑ -->
          <div class="col-md-1 col-1"></div>
        </div>
      </div>
      
      
      <!---------- RIGHT COLUMN ---------->
      
      <div class="col-md-1 col-3">
        <div style="background-image: url('https://toyhouse.fixordi11.fr/sv/sv-case.png'); background-repeat: no-repeat; background-position: center left; height: 64px;">
          <div style="width: 48px; height: 48px; float: left; overflow: hidden; transform: translate(8px, 8px);">
            <img style="min-width: 48px; max-width: 48px;" src="https://toyhouse.fixordi11.fr/sv/sv-grass.png">
          </div>                                    <!-- Item link ↑ -->
        </div>
        <div style="background-image: url('https://toyhouse.fixordi11.fr/sv/sv-case.png'); background-repeat: no-repeat; background-position: center left; height: 64px;">
          <div style="width: 48px; height: 48px; float: left ; overflow: hidden; transform: translate(8px, 8px);">
            <img style="min-width: 48px; max-width: 48px;" src="https://toyhouse.fixordi11.fr/sv/sv-grass.png">
          </div>                                    <!-- Item link ↑ -->
        </div>
        <div style="background-image: url('https://toyhouse.fixordi11.fr/sv/sv-case.png'); background-repeat: no-repeat; background-position: center left; height: 64px;">
          <div style="width: 48px; height: 48px; float: left; overflow: hidden; transform: translate(8px, 8px);">
            <img style="min-width: 48px; max-width: 48px;" src="https://toyhouse.fixordi11.fr/sv/sv-grass.png">
          </div>                                    <!-- Item link ↑ -->
        </div>
      </div>
      
      
      <!---------- TEXT ---------->
      
      <div class="col-md-8 col-12" style="height: 100%">
        <h1 style="font-weight: bold; text-shadow: #dd9454 -2px 2px;"><br>Farm name<br><br>BLABLA</h1>
      </div>                                <!-- Change farm name and text ↑ -->
    
    
    </div>
      
    
  </div></div></div></div></div>
  <div class="col-md-1 col-1"></div>
  </div> 
  </div>
  
  <!-- end of first menu -->
  
  <!---------------------- SECOND MENU ---------------------->
  
  <div class="collapse" id="skills" data-parent="#accordion">
    
    
  <!-- MENU -->
    
  <div class="accordion container" style="z-index: 1;">
    <div class="row no-gutters">
      <div class="col-md-1 col-1"></div>
      <div class="col-md-10 col-12">
        <a href="#info" data-toggle="collapse"><img style="transform: translate(-0px, 0px);" src="https://toyhouse.fixordi11.fr/sv/sv-menu-info.png"></a>
        <a data-toggle="collapse"><img style="transform: translate(-9px, 8px);" src="https://toyhouse.fixordi11.fr/sv/sv-menu-skills.png"></a>
        <a href="#relationship" data-toggle="collapse"><img style="transform: translate(-18px, 0px);" src="https://toyhouse.fixordi11.fr/sv/sv-menu-relationship.png"></a>
        <a href="#map" data-toggle="collapse"><img style="transform: translate(-27px, 0px);" src="https://toyhouse.fixordi11.fr/sv/sv-menu-map.png"></a>
      </div>
    </div>
	</div>
	
	
	<!-- BORDERS -->
	
  <div class="row no-gutters">
  <div class="col-md-1 col-1"></div>
  <div class="col-md-10 col-12" style="border-style: solid; border-width: 4px; border-color: #5b2b2a; border-radius: 10px;">
  <div class="row no-gutters">
  <div class="col-md-12 col-12" style="border-style: ridge; border-left-style: groove; border-right-style: groove; border-width: 8px; border-color: #fa9305; border-radius: 5px; text-align: center; background: linear-gradient(#ffcb7b, #eba867);">
  <div class="row no-gutters">
  <div class="col-md-12 col-12" style="border-style: solid; border-width: 4px; border-color: #853605;">
      
    
      
    <div class="row no-gutters" style="margin-top: 10px;">
      <div class="col-md-2 col-1"></div>
      <div class="col-md-8 col-12">
        
        
        <!---------- FARMING ---------->
        
        <div class="row no-gutters" style="display: flex; justify-content: left; align-items: center;">
          <div class="col-md-2 col-6">
            <h3 style="text-align: right; ">Farming</h3>
          </div>
          <div class="col-md-1 col-3">
            <img style="margin-left: 30%; " src="https://toyhouse.fixordi11.fr/sv/sv-farming.png">
          </div>                                                <!-- Skill icon link ↑ -->
          <div class="col-md-8 col-12" >
            <img style="margin-top: 4px; max-width: 95%" src="https://toyhouse.fixordi11.fr/sv/sv-skill-7.png">
          </div>                                                                      <!-- Change level ↑ -->
        </div>
        <br>
        
        
        <!---------- MINING ---------->
        
        <div class="row no-gutters" style="display: flex; justify-content: left; align-items: center;">
          <div class="col-md-2 col-6">
            <h3 style="text-align: right; ">Mining</h3>
          </div>
          <div class="col-md-1 col-3">
            <img style="margin-left: 30%; " src="https://toyhouse.fixordi11.fr/sv/sv-mining.png">
          </div>                                                <!-- Skill icon link ↑ -->
          <div class="col-md-8 col-12" >
            <img style="margin-top: 4px; max-width: 95%" src="https://toyhouse.fixordi11.fr/sv/sv-skill-7.png">
          </div>                                                                      <!-- Change level ↑ -->
        </div>
        <br>
        
        
        <!---------- FORAGING ---------->
        
        <div class="row no-gutters" style="display: flex; justify-content: left; align-items: center;">
          <div class="col-md-2 col-6">
            <h3 style="text-align: right; ">Foraging</h3>
          </div>
          <div class="col-md-1 col-3">
            <img style="margin-left: 30%; " src="https://toyhouse.fixordi11.fr/sv/sv-foraging.png">
          </div>                                                <!-- Skill icon link ↑ -->
          <div class="col-md-8 col-12" >
            <img style="margin-top: 4px; max-width: 95%" src="https://toyhouse.fixordi11.fr/sv/sv-skill-7.png">
          </div>                                                                      <!-- Change level ↑ -->
        </div>
        <br>
        
        
        <!---------- FISHING ---------->
        
        <div class="row no-gutters" style="display: flex; justify-content: left; align-items: center;">
          <div class="col-md-2 col-6">
            <h3 style="text-align: right; ">Fishing</h3>
          </div>
          <div class="col-md-1 col-3">
            <img style="margin-left: 30%; " src="https://toyhouse.fixordi11.fr/sv/sv-fishing.png">
          </div>                                                <!-- Skill icon link ↑ -->
          <div class="col-md-8 col-12" >
            <img style="margin-top: 4px; max-width: 95%" src="https://toyhouse.fixordi11.fr/sv/sv-skill-7.png">
          </div>                                                                      <!-- Change level ↑ -->
        </div>
        <br>
        
        
        <!---------- COMBAT ---------->
        
        <div class="row no-gutters" style="display: flex; justify-content: left; align-items: center;">
          <div class="col-md-2 col-6">
            <h3 style="text-align: right; ">Combat</h3>
          </div>
          <div class="col-md-1 col-3">
            <img style="margin-left: 30%; " src="https://toyhouse.fixordi11.fr/sv/sv-combat.png">
          </div>                                                <!-- Skill icon link ↑ -->
          <div class="col-md-8 col-12" >
            <img style="margin-top: 4px; max-width: 95%" src="https://toyhouse.fixordi11.fr/sv/sv-skill-7.png">
          </div>                                                                      <!-- Change level ↑ -->
        </div>
        <br>
        
        
      </div>
    <div class="col-md-2 col-1"></div>
      
      
  </div></div></div></div></div></div>
  <div class="col-md-1 col-1"></div>
  </div></div>
  
  <!-- end of second menu -->

  <!---------------------- THIRD MENU ---------------------->
    
  <div class="collapse" id="relationship" data-parent="#accordion">
    
    
  <!-- MENU -->
    
  <div class="accordion container" style="z-index: 1;">
    <div class="row no-gutters">
      <div class="col-md-1 col-1"></div>
      <div class="col-md-10 col-12">
        <a href="#info" data-toggle="collapse"><img style="transform: translate(-0px, 0px);" src="https://toyhouse.fixordi11.fr/sv/sv-menu-info.png"></a>
        <a href="#skills" data-toggle="collapse"><img style="transform: translate(-9px, 0px);" src="https://toyhouse.fixordi11.fr/sv/sv-menu-skills.png"></a>
        <a data-toggle="collapse"><img style="transform: translate(-18px, 8px);" src="https://toyhouse.fixordi11.fr/sv/sv-menu-relationship.png"></a>
        <a href="#map" data-toggle="collapse"><img style="transform: translate(-27px, 0px);" src="https://toyhouse.fixordi11.fr/sv/sv-menu-map.png"></a>
      </div>
    </div>
	</div>
	
	
	<!-- BORDERS -->
    
  <div class="row no-gutters">
  <div class="col-md-1 col-1"></div>
  <div class="col-md-10 col-12" style="border-style: solid; border-width: 4px; border-color: #5b2b2a; border-radius: 10px;">
  <div class="row no-gutters">
  <div class="col-md-12 col-12" style="border-style: ridge; border-left-style: groove; border-right-style: groove; border-width: 8px; border-color: #fa9305; border-radius: 5px; text-align: center; background: linear-gradient(#ffcb7b, #eba867);">
  <div class="row no-gutters">
  <div class="col-md-12 col-12" style="border-style: solid; border-width: 4px; border-color: #853605;">
      
    
    <!---------- 1st relationship ---------->
      
    <div class="row no-gutters">
      <div class="col-md-1 col-3" style="border: 5px ridge; border-right: none; border-color: #c47a48; align-content: flex-end;">
          <img style="min-width: 100%; max-width: 100%; padding-left: 20%; padding-top: 10%;" src="https://toyhouse.fixordi11.fr/sv/sv-shane.png">
      </div>                                                                     <!-- Character image ↑ -->
      <div class="col-md-3 col-9" style="border: 5px ridge; border-left: none; border-color: #c47a48; align-content: center;">
        <h1 style="font-size: 2em;">Shane</h1>
      </div>                <!-- Name ↑ -->
      <div class="col-md-5 col-12" style="border: 5px ridge; border-color: #c47a48; align-content: center;">
        <img style="padding: 8px;" src="https://toyhouse.fixordi11.fr/sv/sv-relationship-9.png">
      </div>                                                           <!-- Change level ↑ -->
      <div class="col-md-2 col-6" style="border: 5px ridge; border-color: #c47a48;">
        <img style="padding-top: 4px; padding-bottom: 4px;" src="https://toyhouse.fixordi11.fr/sv/sv-gift.png"><br>
        <img style="padding-bottom: 8px; transform: translate(4px, 0px);" src="https://toyhouse.fixordi11.fr/sv/sv-case-check-yes.png">
        <img style="padding-bottom: 8px;" src="https://toyhouse.fixordi11.fr/sv/sv-case-check-no.png">   <!-- Check yes or no ↑ -->
      </div>                                                             <!-- Check yes or no ↑ -->
      <div class="col-md-1 col-6" style="border: 5px ridge; border-color: #c47a48;">
        <img style="padding-top: 4px; padding-bottom: 4px;" src="https://toyhouse.fixordi11.fr/sv/sv-speech-bubble.png"><br>
        <img style="padding-bottom: 8px;" src="https://toyhouse.fixordi11.fr/sv/sv-case-check-no.png">
      </div>                                                             <!-- Check yes or no ↑ -->
    </div>
    
    
    <!---------- 2nd relationship ---------->
    
    <div class="row no-gutters">
      <div class="col-md-1 col-3" style="border: 5px ridge; border-right: none; border-color: #c47a48; align-content: flex-end;">
          <img style="min-width: 100%; max-width: 100%; padding-left: 20%; padding-top: 10%;" src="https://toyhouse.fixordi11.fr/sv/sv-shane.png">
      </div>                                                                     <!-- Character image ↑ -->
      <div class="col-md-3 col-9" style="border: 5px ridge; border-left: none; border-color: #c47a48; align-content: center;">
        <h1 style="font-size: 2em;">Shane</h1>
      </div>                <!-- Name ↑ -->
      <div class="col-md-5 col-12" style="border: 5px ridge; border-color: #c47a48; align-content: center;">
        <img style="padding: 8px;" src="https://toyhouse.fixordi11.fr/sv/sv-relationship-9.png">
      </div>                                                           <!-- Change level ↑ -->
      <div class="col-md-2 col-6" style="border: 5px ridge; border-color: #c47a48;">
        <img style="padding-top: 4px; padding-bottom: 4px;" src="https://toyhouse.fixordi11.fr/sv/sv-gift.png"><br>
        <img style="padding-bottom: 8px; transform: translate(4px, 0px);" src="https://toyhouse.fixordi11.fr/sv/sv-case-check-yes.png">
        <img style="padding-bottom: 8px;" src="https://toyhouse.fixordi11.fr/sv/sv-case-check-no.png">   <!-- Check yes or no ↑ -->
      </div>                                                             <!-- Check yes or no ↑ -->
      <div class="col-md-1 col-6" style="border: 5px ridge; border-color: #c47a48;">
        <img style="padding-top: 4px; padding-bottom: 4px;" src="https://toyhouse.fixordi11.fr/sv/sv-speech-bubble.png"><br>
        <img style="padding-bottom: 8px;" src="https://toyhouse.fixordi11.fr/sv/sv-case-check-no.png">
      </div>                                                             <!-- Check yes or no ↑ -->
    </div>
    
    
    <!---------- 3rd relationship ---------->
      
    <div class="row no-gutters">
      <div class="col-md-1 col-3" style="border: 5px ridge; border-right: none; border-color: #c47a48; align-content: flex-end;">
          <img style="min-width: 100%; max-width: 100%; padding-left: 20%; padding-top: 10%;" src="https://toyhouse.fixordi11.fr/sv/sv-shane.png">
      </div>                                                                     <!-- Character image ↑ -->
      <div class="col-md-3 col-9" style="border: 5px ridge; border-left: none; border-color: #c47a48; align-content: center;">
        <h1 style="font-size: 2em;">Shane</h1>
      </div>                <!-- Name ↑ -->
      <div class="col-md-5 col-12" style="border: 5px ridge; border-color: #c47a48; align-content: center;">
        <img style="padding: 8px;" src="https://toyhouse.fixordi11.fr/sv/sv-relationship-9.png">
      </div>                                                           <!-- Change level ↑ -->
      <div class="col-md-2 col-6" style="border: 5px ridge; border-color: #c47a48;">
        <img style="padding-top: 4px; padding-bottom: 4px;" src="https://toyhouse.fixordi11.fr/sv/sv-gift.png"><br>
        <img style="padding-bottom: 8px; transform: translate(4px, 0px);" src="https://toyhouse.fixordi11.fr/sv/sv-case-check-yes.png">
        <img style="padding-bottom: 8px;" src="https://toyhouse.fixordi11.fr/sv/sv-case-check-no.png">   <!-- Check yes or no ↑ -->
      </div>                                                             <!-- Check yes or no ↑ -->
      <div class="col-md-1 col-6" style="border: 5px ridge; border-color: #c47a48;">
        <img style="padding-top: 4px; padding-bottom: 4px;" src="https://toyhouse.fixordi11.fr/sv/sv-speech-bubble.png"><br>
        <img style="padding-bottom: 8px;" src="https://toyhouse.fixordi11.fr/sv/sv-case-check-no.png">
      </div>                                                             <!-- Check yes or no ↑ -->
    </div>
    
    
      
  </div></div></div></div></div>
  <div class="col-md-1 col-1"></div>
  </div></div>
  
  <!-- end of third menu -->
  
  <!---------------------- FOURTH MENU ---------------------->
    
  <div class="collapse" id="map" data-parent="#accordion">
    
    
  <!-- MENU -->
    
  <div class="accordion container" style="z-index: 1;">
    <div class="row no-gutters">
      <div class="col-md-1 col-1"></div>
      <div class="col-md-10 col-12">
        <a href="#info" data-toggle="collapse"><img style="transform: translate(-0px, 0px);" src="https://toyhouse.fixordi11.fr/sv/sv-menu-info.png"></a>
        <a href="#skills" data-toggle="collapse"><img style="transform: translate(-9px, 0px);" src="https://toyhouse.fixordi11.fr/sv/sv-menu-skills.png"></a>
        <a href="#relationship" data-toggle="collapse"><img style="transform: translate(-18px, 0px);" src="https://toyhouse.fixordi11.fr/sv/sv-menu-relationship.png"></a>
        <a data-toggle="collapse"><img style="transform: translate(-27px, 8px);" src="https://toyhouse.fixordi11.fr/sv/sv-menu-map.png"></a>
      </div>
    </div>
	</div>
	
	
	<!-- BORDERS -->
    
  <div class="row no-gutters">
  <div class="col-md-1 col-1"></div>
  <div class="col-md-10 col-12" style="border-style: solid; border-width: 4px; border-color: #5b2b2a; border-radius: 10px;">
  <div class="row no-gutters">
  <div class="col-md-12 col-12" style="border-style: ridge; border-left-style: groove; border-right-style: groove; border-width: 8px; border-color: #fa9305; border-radius: 5px; text-align: center; background: linear-gradient(#ffcb7b, #eba867);">
  <div class="row no-gutters">
  <div class="col-md-12 col-12" style="border-style: solid; border-width: 4px; border-color: #853605;">
      
    
    <!-- MAP -->    
    
    <img src="https://toyhouse.fixordi11.fr/sv/sv-map.png">
        <!-- Map link ↑ -->
    
    
  </div></div></div></div></div>
  <div class="col-md-1 col-1"></div>
  </div></div>
  
  <!-- end of fourth menu -->
  
  
  <div style="text-align: right; padding-right: 10%; font-size: 15px;"><a href="https://toyhou.se/Kat11"><i class="fa-solid fa-code" style="color:#c97b3a;"></i></a></div>
  
</div>