Profile
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.
Catchphrase
"???"
Personality
Normal
type A
Hobby
Music
Favourite colours
Colour 1
Colour 2
Favourite song
K.K. Technopop
Favourite styles
Style 1
Style 2
Favourite saying is...
"Lorem ipsum dolor sit amet."
click to copy the whole code at once
<!-- color key: main color #02aedf, lighter #80d6ef, darker #065da1 -->
<div class="container p-0" style="color: white; max-width: 790px;">
<div class="row no-gutters">
<!-- card side -->
<div class="col-lg" style="overflow: hidden; height: 530px; max-width: 375px; min-width: 375px; border-radius: 15px; margin-right: 10px; margin-bottom: 10px;">
<div style="overflow: hidden; background-color: #80d6ef; border: 15px solid #80d6ef; min-height: 500px;">
<div style="background: #02aedf url(https://f2.toyhou.se/file/f2-toyhou-se/images/79231255_cC6bXii8k1d9EfT.png?1710623692); background-size: 418px; min-height: 500px;">
<div style="position: absolute; left: 17px; top: 17px; background-color: white; padding: 10px; border-radius: 10px; border: 3px solid #80d6ef; width: 70px; height: 70px;">
<!-- species icon -->
<i class="fa-solid fa-cat fa-3x" style="color: #02aedf"></i></div>
<div style="background: linear-gradient(180deg, #065da1 3%, #02aedf 13%);
height: 800px; width: 850px; border-radius: 500px; position: absolute; left:-240px; top: 407px; overflow: hidden;">
<div style="background: url(https://f2.toyhou.se/file/f2-toyhou-se/images/79231285_afIqqzyyIAwfKCo.png); mix-blend-mode: overlay; background-size: 14px; width: 800px; height: 400px;"></div>
</div>
<!-- character image -->
<div style="background:transparent url(https://f2.toyhou.se/file/f2-toyhou-se/images/79231305_E7hNc2QVZADSZuJ.png) no-repeat center; background-size: 200px; height: 450px; width: 346px; position: absolute;">
<div style=" margin-top: 440px; width: 345px; height: 70px;" align="center">
<div style="border-bottom: 2px dashed; margin-bottom: 3px;">
<!-- character name -->
<span style="font-weight: bold; font-size: 20px;">Villager</span></div>
<!-- birthday -->
<span style="font-size: 20px;"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/18540224?1666640214" style="height: 27px; background-color: #80d6ef; border: 1px solid #80d6ef; border-radius: 100px; margin-bottom: 3px;"> 7/1</span>
<!-- subtle code credit, please don't remove :'] -->
<a href="https://toyhou.se/synthbun"><span><i class="fa-solid fa-code" style="color: #80d6ef; position: absolute; right: 0px; bottom: -51px;"></i></span></a>
</div>
</div>
</div>
</div>
</div>
<!-- info side -->
<div class="container p-0 m-0" style="max-width: 375px; min-width: 375px;">
<div style="border-radius: 15px; background-color: white; border-radius: 10px; color: #02aedf; padding: 10px; font-style: italic; font-size: 13px; min-width: 375px; margin-bottom: 3px; border: 3px solid #80d6ef;" align="justify">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.</div>
<div class="row" style="border-radius: 10px; background: #02aedf; background-size: 14px; margin: 0px; margin-top: 10px;">
<!-- catchphrase -->
<div class="col-5 p-2 m-1" style="background: #065da1 url(https://f2.toyhou.se/file/f2-toyhou-se/images/79231285_afIqqzyyIAwfKCo.png); background-blend-mode: overlay; background-size: 14px; border-radius: 10px; height: 40px;" align="center">
<span style="font-style: italic; font-weight: bold; text-shadow: 1px 1px #02aedf;">Catchphrase</span>
<i class="fa-solid fa-comment-dots" style="font-size: 30px; color: #80d6ef; position: absolute; top: -5px; right: -2px; transform: rotate(10deg)"></i></div>
<div class="col p-2 m-1" style="background-color: white; border-radius: 10px; height: 40px; color: #80d6ef; font-weight: bold;" align="center">"???"</div>
<!-- personality -->
<div class="col-5 p-2 m-1" style="background: #065da1 url(https://f2.toyhou.se/file/f2-toyhou-se/images/79231285_afIqqzyyIAwfKCo.png); background-blend-mode: overlay; background-size: 14px; border-radius: 10px; height: 40px;" align="center">
<i class="fa-solid fa-user" style="font-size: 25px; color: #80d6ef; position: absolute; top: -2px; left: -1px; transform: rotate(-10deg);"></i>
<span style="font-style: italic; font-weight: bold; text-shadow: 1px 1px #02aedf;">Personality</span>
</div>
<div class="col p-2 m-1" style="background-color: white; border-radius: 10px; height: 40px; color: #80d6ef; font-weight: bold;" align="center">Normal</div>
<div class="col-2 p-2 m-1" style="background-color: #80d6ef; border-radius: 10px; height: 40px; font-weight: bold;" align="center">type A</div>
<!-- hobby -->
<div class="col-5 p-2 m-1" style="background: #065da1 url(https://f2.toyhou.se/file/f2-toyhou-se/images/79231285_afIqqzyyIAwfKCo.png); background-blend-mode: overlay; background-size: 14px; border-radius: 10px; height: 40px;" align="center">
<span style="font-style: italic; font-weight: bold; text-shadow: 1px 1px #02aedf;">Hobby</span>
<i class="fa-solid fa-icons" style="font-size: 30px; color: #80d6ef; position: absolute; top: -3px; right: -2px; transform: rotate(10deg)"></i></div>
<div class="col p-2 m-1" style="background-color: white; border-radius: 10px; height: 40px; color: #80d6ef; font-weight: bold;" align="center">Music</div>
</div>
<div class="row" style="border-radius: 10px; background: #065da1 url(https://f2.toyhou.se/file/f2-toyhou-se/images/79231285_afIqqzyyIAwfKCo.png); background-blend-mode: overlay; background-size: 14px; margin: 0px; margin-top: 10px;">
<!-- favourite colours -->
<div class="col-5 p-2 m-1" style="background: white; border-radius: 10px; height: 40px;" align="center"><i class="fa-solid fa-paint-roller" style="font-size: 25px; color: #80d6ef; position: absolute; top: -4px; left: -3px; transform: rotate(-10deg);"></i>
<span style="font-style: italic; font-weight: bold; color: #02aedf;">Favourite colours</span></div>
<div class="col p-2 m-1" style="background-color: #02aedf; border-radius: 10px; height: 40px; font-weight: bold;" align="center">Colour 1</div>
<div class="col p-2 m-1" style="background-color: #02aedf; border-radius: 10px; height: 40px; font-weight: bold;" align="center">Colour 2</div>
<!-- favourite song -->
<div class="col-5 p-2 m-1" style="background: white; border-radius: 10px; height: 40px;" align="center"><i class="fa-solid fa-radio" style="font-size: 25px; color: #80d6ef; position: absolute; top: -4px; right: -3px; transform: rotate(10deg);"></i>
<span style="font-style: italic; font-weight: bold; color: #02aedf;">Favourite song</span></div>
<div class="col p-2 m-1" style="background-color: #02aedf; border-radius: 10px; height: 40px; font-weight: bold;" align="center">K.K. Technopop</div>
<!-- favourite styles -->
<div class="col-5 p-2 m-1" style="background: white; border-radius: 10px; height: 40px;" align="center"><i class="fa-solid fa-umbrella" style="font-size: 25px; color: #80d6ef; position: absolute; top: -3px; left: -5px; transform: rotate(-10deg);"></i>
<span style="font-style: italic; font-weight: bold; color: #02aedf;">Favourite styles</span></div>
<div class="col p-2 m-1" style="background-color: #02aedf; border-radius: 10px; height: 40px; font-weight: bold;" align="center">Style 1</div>
<div class="col p-2 m-1" style="background-color: #02aedf; border-radius: 10px; height: 40px; font-weight: bold;" align="center">Style 2</div>
</div>
<!-- favourite saying, as in the quote that is on their photo -->
<div class="row" style="border-radius: 10px; background: #02aedf url(https://f2.toyhou.se/file/f2-toyhou-se/images/79231285_afIqqzyyIAwfKCo.png); background-blend-mode: overlay; background-size: 14px; background-size: 14px; margin: 0px; margin-top: 10px;">
<div class="col-5 p-2 m-1" style="background-color: #80d6ef; border-radius: 10px; height: 40px; font-weight: bold;" align="center">Favourite saying is...</div>
<div class="col p-2 m-1" style="background-color: white; border-radius: 10px; font-style: italic; color: #02aedf;" align="center">"Lorem ipsum dolor sit amet."</div>
</div>
</div>
</div>
</div>
