- Created
- 2 years, 9 months ago
- Creator
- Donut-Toast
- Favorites
- 2
Profile
<!---------------- TALKIES ------------------->
<!-----------
- This code was scraped together and since it's my first code it's......... very wobbly. not mobile friendly at all... but it looks pretty on desktop fksldjfsdka
- Thread with caution
- the ??? at the start mark instructions
- the +++ mark notes for those who want to delve into the code further.. Once again, thread with caution.
-------->
<!---------- BACKGROUND STUFF ----------->
<!---------------------------------------- ??? replace the link below with another image link to change the background image ----->
<div class="mx-auto" style="max-width:1500px;">
<div class="text-center row no-gutters mb-1 mx-auto" style="background-size:cover; background-image:url('https://cdn.discordapp.com/attachments/490935624812199939/872596310270824488/Viva-pinata_2.jpg');">
<!-------------------------------- RANDOM BARRIER --------------------------------->
<div class="mx-auto card text-justify border-0" style="margin-top: 40px; margin-bottom: 40px; max-width:850px; max-height:850px; background: rgba( 0, 0, 0, 0);">
<div class="row no-gutters">
<!-------------------------------- LEFT STUFF --------------------------------->
<div class="col-lg-5 p-1">
<div class="card border-0 h-100" style="margin-bottom: 40px; max-width:850px; max-height:850px; background: rgba( 0, 0, 0, 0); background-size:cover; background-position: center; background-image:url('https://f2.toyhou.se/file/f2-toyhou-se/images/38104756_Cp3rSmIPcE8Foho.png');">
<!-------------------------------- TOP LEFT GOODIES --------------------------------->
<div class="mx-auto row no-gutters">
<div class="mx-auto mt-2 ml-2">
<div class="card my-1 p-3" style="background:#71ba23; border:3px solid #156117;"><a class="btn btn-outline-dark btn-block border-0 h-100" style="color:#FFFFFF; font-size:large;"><span style="font-family: comic sans ms,sans-serif;">Insert Name</span></a></div>
<div class="card my-1 p-2" style="background:#e83636; border:3px solid #9b1a19;"><a class="btn btn-outline-dark btn-block border-0 h-100" style="color:#FFFFFF; font-size:large;"><span style="font-family: comic sans ms,sans-serif;">Insert Species</span></a></div>
</div>
<!--------------------------- ??? replace the link below with another image link to change the profile picture ----->
<div class="mx-auto p-1"><img class="row fr-fir fr-dib" src="https://f2.toyhou.se/file/f2-toyhou-se/images/38173884_iADsLGC480ARTVj.png" width="145" height="145"></div>
</div>
<!-------------------------------- BOTTOM LEFT GOODIES --------------------------------->
<div class="mx-auto row no-gutters">
<div class="col-lg-3 p-1 row " style="margin-left: 0px;"><img class="row fr-dib" src="https://f2.toyhou.se/file/f2-toyhou-se/images/38165239_ZPAdV4PmOUhLexK.png" width="66" height="66" style="margin-bottom: 1px;">
<img class="row fr-dib" src="https://f2.toyhou.se/file/f2-toyhou-se/images/38164720_f0vY7WX4FzcsrKH.png" width="66" height="66" style="margin-bottom: 1px;">
<img class="row fr-dib" src="https://f2.toyhou.se/file/f2-toyhou-se/images/38165275_cUpp3siDMNCCPBS.png" width="66" height="66" style="margin-bottom: 1px;"></div>
<div class="col-lg-9 p-1">
<ul class="nav row no-gutters text-center mt-md-2 p-1">
<li class="nav-item col-sm-12 mr-1 rounded p-2 mb-1" style="background:#1580be; border:4px solid #a1d9e8;"><a class="btn btn-outline-dark btn-block border-0 h-100 show active" data-toggle="tab" href="#status" style="color:#FFFFFF; font-size:large;"><span style="font-family: comic sans ms;">Condition Status</span></a></li>
<li class="nav-item col-sm-12 mr-1 rounded p-2 mb-1" style="background:#1580be; border:4px solid #a1d9e8;"><a class="btn btn-outline-dark btn-block border-0 h-100 show" data-toggle="tab" href="#info" style="color:#FFFFFF; font-size:large;"><span style="font-family: comic sans ms;">Basic Info</span></a></li>
<li class="nav-item col-sm-12 mr-1 rounded p-2 mb-1" style="background:#1580be; border:4px solid #a1d9e8;"><a class="btn btn-outline-dark btn-block border-0 h-100 show" data-toggle="tab" href="#tag" style="color:#FFFFFF; font-size:large;"><span style="font-family: comic sans ms;">Tag</span></a></li>
</ul>
</div>
</div>
<!----- LEFT GOODIES END ----->
</div>
</div>
<!-------------------------------- LEFT END --------------------------------->
<!-------------------------------- RIGHT --------------------------------->
<div class="col-lg-7 p-1">
<div class="card border-0 h-100" style="margin-bottom: 40px; max-width:850px; max-height:850px; background: rgba( 0, 0, 0, 0); background-size:cover; background-position: center; background-image:url('https://f2.toyhou.se/file/f2-toyhou-se/images/38105804_sh01Vb4ITLOysqm.png');">
<!-------------------------------- TAB STUFF --------------------------------->
<div class="tab-content">
<!-------------------------------- STATUS --------------------------------->
<div class="tab-pane show active" id="status">
<div class="mx-auto row no-gutters">
<div class="mx-auto mt-4 ">
<div class="card my-1 p-3" style="background: rgba( 0, 0, 0, 0); border:3px rgba( 0, 0, 0, 0);margin-left: 30px;"><a class="btn btn-outline-dark btn-block border-0 h-100" style="color: rgba( 0, 0, 0, 0); font-size:large;"><span style="font-family: comic sans ms,sans-serif;">Current Residents: 1</span></a></div>
<div class="card my-1" style="background:#e87fe7; border:3px solid #be22ac; margin-left: 30px;"><a class="btn btn-outline-dark btn-block border-0 h-100" style="color:#FFFFFF; font-size:large;"><span style="font-family: comic sans ms,sans-serif;">Romance Requirements:</span></a><a class="btn btn-outline-dark btn-block border-0 h-100" style="color:#FFFFFF; font-size:large; margin-top: -13px;"><span style="font-family: comic sans ms,sans-serif;">1/2</span></a></div>
</div>
<div class="mx-auto"><img class="row fr-fir fr-dib" src="https://f2.toyhou.se/file/f2-toyhou-se/images/38173558_OrVPdpuqafPFVeq.png" width="170" height="177" style="margin-left: 13px; margin-right: -1px;"></div>
</div>
<div class="mx-auto row no-gutters">
<div class="col-lg-3 p-3 row " style="margin-left: 0px;"><img class="row fr-dib" src="https://f2.toyhou.se/file/f2-toyhou-se/images/38166064_IZGF7NyhmiRh46m.png" width="66" height="66" style="margin-bottom: 1px;">
<img class="row fr-dib" src="https://f2.toyhou.se/file/f2-toyhou-se/images/38166018_TVfCHUQQxXpPbiy.png" width="66" height="66" style="margin-bottom: 1px;"></div>
<!------------------------------- RANDOM SEPARATION ---------------------------------->
<!--------------------------- +++ I'm gonna be honest with you.. I have no idea how to add more images and bars. Or at least, I don't know how to explain it. I figured this out on accident too. ----->
<div class="col-lg-7 p-1">
<div class="mx-auto mt-2 ">
<div class="card my-1" style="background:#1580be; border:4px solid #a1d9e8; margin-left: -10px;"><a class="btn btn-outline-dark btn-block border-0 h-100" style="color:#FFFFFF; font-size:large;"><span style="font-family: comic sans ms,sans-serif;">Have 10 square pinometer</span></a><a class="btn btn-outline-dark btn-block border-0 h-100" style="color:#FFFFFF; font-size:large; margin-top: -13px;"><span style="font-family: comic sans ms,sans-serif;">of soil or grass (1%).</span></a></div>
<div class="card my-1" style="background:#1580be; border:4px solid #a1d9e8; margin-left: -10px;"><a class="btn btn-outline-dark btn-block border-0 h-100" style="color:#FFFFFF; font-size:large;"><span style="font-family: comic sans ms,sans-serif;">There is a Whirlm house</span></a><a class="btn btn-outline-dark btn-block border-0 h-100" style="color:#FFFFFF; font-size:large; margin-top: -13px;"><span style="font-family: comic sans ms,sans-serif;">in the garden.</span></a></div>
</div>
</div>
<div class="col-lg-2 p-2 row no-gutters"><img class="row fr-dib" src="https://f2.toyhou.se/file/f2-toyhou-se/images/38166026_piAadK3MkiS1tLn.png" width="66" height="66" style="margin-bottom: 1px; margin-left: -5px; min-width:66px; max-height:66px;">
<img class="row fr-dib" src="https://f2.toyhou.se/file/f2-toyhou-se/images/38166039_xwlABRmyjwrsZ8K.png" style="margin-bottom: 1px; margin-left: -5px;min-width:66px; max-height:66px;" width="66" height="66"></div>
</div>
</div>
<!-------------------------------- STATUS END --------------------------------->
<!-------------------------------- INFO --------------------------------->
<div class="tab-pane show" id="info">
<div class="mx-auto row no-gutters">
<div class="mx-auto mt-4 ">
<div class="card my-1 p-3" style="background:#1f74e8; border:3px solid #211ce1;margin-left: 30px;"><a class="btn btn-outline-dark btn-block border-0 h-100" style="color:#FFFFFF; font-size:large;"><span style="font-family: comic sans ms,sans-serif;">Current Residents: 1</span></a></div>
<div class="card my-1" style="background:#e83636; border:3px solid #9b1a19; margin-left: 30px;"><a class="btn btn-outline-dark btn-block border-0 h-100" style="color:#FFFFFF; font-size:large;"><span style="font-family: comic sans ms,sans-serif;">Total Residents Ever:</span></a><a class="btn btn-outline-dark btn-block border-0 h-100" style="color:#FFFFFF; font-size:large; margin-top: -13px;"><span style="font-family: comic sans ms,sans-serif;">1</span></a></div>
</div>
<div class="mx-auto"><img class="row fr-fir fr-dib" src="https://f2.toyhou.se/file/f2-toyhou-se/images/38173558_OrVPdpuqafPFVeq.png" width="170" height="177" style="margin-left: 10px;"></div>
</div>
<div class="mx-auto mt-4 ">
<div class="card my-3 p-2" style="background:#1f74e8; border:3px solid #211ce1;margin-left: 50px; margin-right: 50px;"><a class="btn btn-outline-dark btn-block border-0 h-100" style="color:#FFFFFF; font-size:large;"><span style="font-family: comic sans ms,sans-serif;">Age: 0 days</span></a></div>
<div class="card my-3 p-2" style="background:#71ba23; border:3px solid #1e5d1c; margin-left: 50px; margin-right: 50px;"><a class="btn btn-outline-dark btn-block border-0 h-100" style="color:#FFFFFF; font-size:large;"><span style="font-family: comic sans ms,sans-serif;">Traveled: 00.0 pinometers</span></a></div>
</div>
</div>
<!-------------------------------- INFO END --------------------------------->
<!-------------------------------- TAG --------------------------------->
<div class="tab-pane show" id="tag">
<div class="mx-auto row no-gutters">
<div class="mx-auto mt-4 ">
<div class="card my-1 p-3" style="background: rgba( 0, 0, 0, 0); border:3px rgba( 0, 0, 0, 0);margin-left: 30px;"><a class="btn btn-outline-dark btn-block border-0 h-100" style="color: rgba( 0, 0, 0, 0); font-size:large;"><span style="font-family: comic sans ms,sans-serif;">Current Residents: 1</span></a></div>
<div class="card my-1" style="background: rgba( 0, 0, 0, 0); border:3px rgba( 0, 0, 0, 0);margin-left: 30px;"><a class="btn btn-outline-dark btn-block border-0 h-100" style="color: rgba( 0, 0, 0, 0); font-size:large;"><span style="font-family: comic sans ms,sans-serif;">Romance Requirements:</span></a><a class="btn btn-outline-dark btn-block border-0 h-100" style="color: rgba( 0, 0, 0, 0); font-size:large; margin-top: -13px;"><span style="font-family: comic sans ms,sans-serif;">1/2</span></a></div>
</div>
<div class="mx-auto"><img class="row fr-fir fr-dib" src="https://f2.toyhou.se/file/f2-toyhou-se/images/38173558_OrVPdpuqafPFVeq.png" width="170" height="177" style="margin-left: 13px; margin-right: -1px;"></div>
</div>
<div class="container p-3" style="background:#1580be; border:4px solid #a1d9e8; margin-left: 35px; margin-right: 25px; max-width:420px; max-height: 200px; overflow:auto;">
<p style="text-align: center; font-family: comic sans ms; color:#FFFFFF; font-size:large;">Dump info here... UPDATE this box will now expand to 200px and then it will gain a lil scroll bar!</p>
</div>
</div>
<!-------------------------------- TAG END --------------------------------->
<!-------------------------------- TAB STUFF END --------------------------------->
</div>
</div>
<!------------------- RIGHT END --------------------->
</div>
</div>
</div>
</div>
<div class="text-right mx-1" style="font-size:10px;"><a href="https://toyhou.se/12162681.viva-pi-ata-code-f2u-><i class="far fa-code tooltipster" title="Code by Donut-Toast"></i></a></div>
</div>
Recent Images
No images.