- Created
- 10 months, 21 days ago
- Creator
- LostInTrades
- Favorites
- 2
Profile
<!--
Bacground - #FFF2C3
Text - #FF6208 rgb(255,98,8)
Accent - #6F3904
Opposite Accent - #FFF2C3 rgb(3,22,28)
!-->
<!-- MAIN CONTAINER =======================-->
<div class="mx-auto my-5 p-5" style="max-width: 1000px; background-color: #FF6208;background-image: url(https://images.unsplash.com/photo-1475727946784-2890c8fdb9c8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=884&q=80);background-size:cover;background-position: center; border-radius: 15px;">
<!-- first row -->
<div class="row">
<!-- pagedoll -->
<div class="col-md-4" style="background-image:url(https://f2.toyhou.se/file/f2-toyhou-se/images/65247004_ptd8JAJBi0PCDUe.png?1689780019);background-size:cover;background-position:center;">
</div>
<!-- middle card -->
<div class="col-md-3 d-block d-lg-flex flex-column">
<div class="card mb-4 p-3 border-3 border-left-0 border-right-0 border-bottom-0" style="flex: 1 1 0; max-width: 232px; min-height: 232px; border-radius: 100px 15px 15px 15px; box-shadow: 0 0 10px rgb(3,22,28);background-color: #FFF2C3; color: #FF6208;">
<img class="bg-success rounded-circle" src="https://f2.toyhou.se/file/f2-toyhou-se/images/68265298_VN1RcVeWe2E3tNP.png" style="width:200px;">
<p class="col-12mt-3 mb-0 text-center" style="font-size: 22px; letter-spacing: 1px; font-variant: small-caps;">name surname</p>
<!--====================================-->
<div class="row no-gutters align-items-center">
<div class="col">Nickname</div>
<div class="col text-right" style="color:#6F3904"> Content</div>
<div class="col-12 p-0 faded"><hr class="mb-0" style="border-top-width:3px;border-color:#FF6208;margin-top: -5px;"></div>
</div>
<!--====================================-->
<div class="row no-gutters align-items-center">
<div class="col">Pronouns</div>
<div class="col text-right" style="color:#6F3904"> Con/tent</div>
<div class="col-12 p-0 faded"><hr class="mb-0" style="border-top-width:3px;border-color:#FF6208;margin-top: -5px;"></div>
</div>
<!--====================================-->
<div class="row no-gutters align-items-center">
<div class="col">Gender</div>
<div class="col text-right" style="color:#6F3904"> Content</div>
<div class="col-12 p-0 faded"><hr class="mb-0" style="border-top-width:3px;border-color:#FF6208;margin-top: -5px;"></div>
</div>
<!--====================================-->
<div class="row no-gutters align-items-center">
<div class="col">Sexuality</div>
<div class="col text-right" style="color:#6F3904"> Content</div>
<div class="col-12 p-0 faded"><hr class="mb-0" style="border-top-width:3px;border-color:#FF6208;margin-top: -5px;"></div>
</div>
<!--====================================-->
</div>
</div>
<!-- right card -->
<div class="col-lg d-block d-lg-flex flex-column">
<div class="card mb-4 p-3 text-monospace border-0" style="font-size: 18px; font-variant: small-caps; border-radius: 15px 50px 15px 15px; box-shadow: 0 0 10px rgb(255,98,8); background-color: #FFF2C3; color:#6F3904;overflow:auto;">
<div class="row">
<div class="col-12 col-lg-4 align-items-center justify-content-center flex-column py-3 px-1 mb-2">
<i class="fas fa-pan-food fa-4x mt-n1 fa-fw" style="position:absolute;opacity:.2; color:#FF6208"></i>
<h3 class="mb-n2" style="z-index:2;">Content</h3>
<span>Food</span>
</div>
<div class="col-12 col-lg-4 align-items-center justify-content-center flex-column py-3 px-1 mb-2">
<i class="fas fa-cup-togo fa-4x mt-n1 fa-fw" style="position:absolute;opacity:.2;color:#FF6208"></i>
<h3 class="mb-n2" style="z-index:2;">Content</h3>
<span>Drink</span>
</div>
<div class="col-12 col-lg-4 align-items-center justify-content-center flex-column py-3 px-1 mb-2">
<i class="fas fa-spray-can-sparkles fa-4x mt-n1 fa-fw" style="position:absolute;opacity:.2;color:#FF6208"></i>
<h3 class="mb-n2" style="z-index:2;">Content</h3><span>Scent</span>
</div>
<div class="col-12 col-lg-4 align-items-center justify-content-center flex-column py-3 px-1 mb-2">
<i class="fas fa-palette fa-4x mt-n1 fa-fw" style="position:absolute;opacity:.2;color:#FF6208"></i>
<h3 class="mb-n2" style="z-index:2;">Content</h3>
<span>Colour</span>
</div>
<div class="col-12 col-lg-4 align-items-center justify-content-center flex-column py-3 px-1 mb-2">
<i class="fas fa-flower fa-4x mt-n1 fa-fw" style="position:absolute;opacity:.2;color:#FF6208"></i>
<h3 class="mb-n2" style="z-index:2;">Content</h3>
<span>Flower</span>
</div>
<div class="col-12 col-lg-4 align-items-center justify-content-center flex-column py-3 px-1 mb-2">
<i class="fas fa-water fa-4x mt-n1 fa-fw" style="position:absolute;opacity:.2;color:#FF6208"></i>
<h3 class="mb-n2" style="z-index:2;">Content</h3>
<span>Element</span>
</div>
<div class="col-12 col-lg-4 align-items-center justify-content-center flex-column py-3 px-1 mb-2">
<i class="fas fa-snowflake fa-4x mt-n1 fa-fw" style="position:absolute;opacity:.2;color:#FF6208"></i>
<h3 class="mb-n2" style="z-index:2;">Content</h3>
<span>Season</span>
</div>
<div class="col-12 col-lg-4 align-items-center justify-content-center flex-column py-3 px-1 mb-2">
<i class="fas fa-watch fa-4x mt-n1 fa-fw" style="position:absolute;opacity:.2;color:#FF6208"></i>
<h3 class="mb-n2" style="z-index:2;">Content</h3>
<span>Time Of Day</span>
</div>
<div class="col-12 col-lg-4 align-items-center justify-content-center flex-column py-3 px-1 mb-2">
<i class="fas fa-scarf fa-4x mt-n1 fa-fw" style="position:absolute;opacity:.2;color:#FF6208"></i>
<h3 class="mb-n2" style="z-index:2;">Content</h3>
<span>Clothing</span>
</div>
<div class="col-12 col-lg-4 align-items-center justify-content-center flex-column py-3 px-1 mb-2">
<i class="fas fa-film fa-4x mt-n1 fa-fw" style="position:absolute;opacity:.2;color:#FF6208"></i>
<h3 class="mb-n2" style="z-index:2;">Content</h3>
<span>Genre</span>
</div>
<div class="col-12 col-lg-4 align-items-center justify-content-center flex-column py-3 px-1 mb-2">
<i class="fas fa-music fa-4x mt-n1 fa-fw" style="position:absolute;opacity:.2;color:#FF6208"></i>
<h3 class="mb-n2" style="z-index:2;">Content</h3>
<span>Music</span>
</div>
<div class="col-12 col-lg-4 align-items-center justify-content-center flex-column py-3 px-1 mb-2">
<i class="fas fa-piano-keyboard fa-4x mt-n1 fa-fw" style="position:absolute;opacity:.2;color:#FF6208"></i>
<h3 class="mb-n2" style="z-index:2;">Content</h3>
<span>Instrument</span>
</div>
</div>
</div>
</div>
</div>
<div class="card d-block d-lg-flex p-3 border-0 mb-4 mt-4" style="flex:1 1 0;border-radius:15px;box-shadow:0 0 10px rgb(255,98,8); background-color: #FFF2C3; color:#FF6208;">
<i class="fa-duotone fa-quote-left fa-2x" style="position:absolute;top:10px;left:10px;color:#6F3904;"></i>
<h4 class="text-center text-uppercase faded" style="color:#6F3904;font-family:Monospace;">There cannot be light without darkness, nor darkness without light. You must have the contrast for both to exist.</h4>
<i class="fa-duotone fa-quote-right fa-2x" style="position:absolute;bottom:10px;right:10px;color:#6F3904;"></i>
</div>
<div class="row justify-content-center">
<!-- Left card -->
<div class="col-lg d-block d-lg-flex flex-column">
<div class="card mt-lg-5 mb-4 p-3 text-monospace border-0" style="flex: 1 1 0; color: #FF6208; border-radius: 60px 15px 15px 15px; box-shadow: 0 0 10px rgb(255,98,8);background-color: #FFF2C3">
<!-- Extroverted/Introverted -->
<div class="row no-gutters justify-content-between">
<span style="color:#FF6208;">Extroverted</span>
<span style="color:#FF6208">Introverted</span>
</div>
<div class="progress mt-1" style="border-radius:0;height:10px;background-color:#6F3904;">
<div class="progress-bar justify-content-end" style="width:50%;background-color:#6F3904;"><div class="h-100" style="width:4px;background:#FFF2C3;margin-right:-2px;"></div></div>
</div>
<!-- Instinctive/Calculated -->
<div class="row no-gutters justify-content-between">
<span style="color:#FF6208">Instinctive</span>
<span style="color:#FF6208">Calculated</span>
</div>
<div class="progress mt-1" style="border-radius:0;height:10px;background-color:#6F3904;">
<div class="progress-bar justify-content-end" style="width:50%;background-color:#6F3904;"><div class="h-100" style="width:4px;background:#FFF2C3;margin-right:-2px;"></div></div>
</div>
<!-- Deceptive/Sincere -->
<div class="row no-gutters justify-content-between">
<span style="color:#FF6208">Deceptive</span>
<span style="color:#FF6208">Sincere</span>
</div>
<div class="progress mt-1" style="border-radius:0;height:10px;background-color:#6F3904;">
<div class="progress-bar justify-content-end" style="width:50%;background-color:#6F3904;"><div class="h-100" style="width:4px;background:#FFF2C3;margin-right:-2px;"></div></div>
</div>
<!-- Indifferent/Emotional -->
<div class="row no-gutters justify-content-between">
<span style="color:#FF6208">Indifferent</span>
<span style="color:#FF6208">Emotional</span>
</div>
<div class="progress mt-1" style="border-radius:0;height:10px;background-color:#6F3904;">
<div class="progress-bar justify-content-end" style="width:50%;background-color:#6F3904;"><div class="h-100" style="width:4px;background:#FFF2C3;margin-right:-2px;"></div></div>
</div>
<!-- Reserved/Affectionate -->
<div class="row no-gutters justify-content-between">
<span style="color:#FF6208">Reserved</span>
<span style="color:#FF6208">Affectionate</span>
</div>
<div class="progress mt-1" style="border-radius:0;height:10px;background-color:#6F3904;">
<div class="progress-bar justify-content-end" style="width:50%;background-color:#6F3904;"><div class="h-100" style="width:4px;background:#FFF2C3;margin-right:-2px;"></div></div>
</div>
<!-- cooperative/Lone Wolf -->
<div class="row no-gutters justify-content-between">
<span style="color:#FF6208">Cooperative</span>
<span style="color:#FF6208">"Lone Wolf"</span>
</div>
<div class="progress mt-1" style="border-radius:0;height:10px;background-color:#6F3904;">
<div class="progress-bar justify-content-end" style="width:50%;background-color:#6F3904;"><div class="h-100" style="width:4px;background:#FFF2C3;margin-right:-2px;"></div></div>
</div>
<!-- Pessimistic/Optimistic -->
<div class="row no-gutters justify-content-between">
<span style="color:#FF6208">Pessimistic</span>
<span style="color:#FF6208">Optimistic</span>
</div>
<div class="progress mt-1" style="border-radius:0;height:10px;background-color:#6F3904;">
<div class="progress-bar justify-content-end" style="width:50%;background-color:#6F3904;"><div class="h-100" style="width:4px;background:#FFF2C3;margin-right:-2px;"></div></div>
</div>
<!-- Calm/Tempermental -->
<div class="row no-gutters justify-content-between">
<span style="color:#FF6208">Calm</span>
<span style="color:#FF6208">Tempermental</span>
</div>
<div class="progress mt-1" style="border-radius:0;height:10px;background-color:#6F3904;">
<div class="progress-bar justify-content-end" style="width:50%;background-color:#6F3904;"><div class="h-100" style="width:4px;background:#FFF2C3;margin-right:-2px;"></div></div>
</div>
<!-- Awkward/Charismatic -->
<div class="row no-gutters justify-content-between">
<span style="color:#FF6208">Awkward</span>
<span style="color:#FF6208">Charismatic</span>
</div>
<div class="progress mt-1" style="border-radius:0;height:10px;background-color:#6F3904;">
<div class="progress-bar justify-content-end" style="width:50%;background-color:#6F3904;"><div class="h-100" style="width:4px;background:#FFF2C3;margin-right:-2px;"></div></div>
</div>
<!-- Nervous/Confident -->
<div class="row no-gutters justify-content-between">
<span style="color:#FF6208">Nervous</span>
<span style="color:#FF6208">Confident</span>
</div>
<div class="progress mt-1" style="border-radius:0;height:10px;background-color:#6F3904;">
<div class="progress-bar justify-content-end" style="width:50%;background-color:#6F3904;"><div class="h-100" style="width:4px;background:#FFF2C3;margin-right:-2px;"></div></div>
</div>
<!-- Judgemental/Forgiving -->
<div class="row no-gutters justify-content-between">
<span style="color:#FF6208">Judgemental</span>
<span style="color:#FF6208">Forgiving</span>
</div>
<div class="progress mt-1" style="border-radius:0;height:10px;background-color:#6F3904;">
<div class="progress-bar justify-content-end" style="width:50%;background-color:#6F3904;"><div class="h-100" style="width:4px;background:#FFF2C3;margin-right:-2px;"></div></div>
</div>
<!-- Serious/humorous -->
<div class="row no-gutters justify-content-between">
<span style="color:#FF6208">Sirius</span>
<span style="color:#FF6208">Humorous</span>
</div>
<div class="progress mt-1" style="border-radius:0;height:10px;background-color:#6F3904;">
<div class="progress-bar justify-content-end" style="width:50%;background-color:#6F3904;"><div class="h-100" style="width:4px;background:#FFF2C3;margin-right:-2px;"></div></div>
</div>
<!-- -->
</div>
</div>
<!-- Right card -->
<div class="col-lg d-block d-lg-flex flex-column">
<div class="card mt-lg-5 mb-4 p-3 text-monospace border-0" style="flex: 1 1 0; color: #FF6208; border-radius: 15px 60px 15px 15px; box-shadow: 0 0 10px rgb(255,98,8);background-color: #FFF2C3;height: 700px;overflow-y:auto">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mattis ligula in ligula tincidunt lacinia. Cras molestie purus tellus, at malesuada arcu luctus vel. Morbi consectetur pharetra condimentum. Duis ultrices, erat ut placerat dictum, quam arcu mattis massa, iaculis tristique felis nunc sed eros. Nullam tincidunt sapien eget leo elementum malesuada. Curabitur magna risus, malesuada at ligula et, vulputate elementum enim. Curabitur posuere faucibus arcu, sed faucibus ligula malesuada in. Suspendisse quis dolor velit. Ut pulvinar elementum justo ut congue.</p>
<p>Fusce sit amet velit eget lacus aliquet tempus eu et augue. Donec efficitur ante mauris, vel laoreet sem vehicula eget. Fusce nec nulla egestas, sollicitudin ante et, consequat nibh. Suspendisse faucibus sapien in risus facilisis, vel bibendum libero maximus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi dui erat, dictum sit amet laoreet nec, rhoncus id augue. Suspendisse gravida accumsan nisi, eget auctor lectus eleifend id. Curabitur in est mattis, ullamcorper orci vel, facilisis augue. Aliquam erat volutpat. Mauris congue, velit sit amet suscipit rhoncus, velit urna consectetur eros, ac aliquet lacus tortor in lacus.</p>
<p>Fusce id nunc nec libero venenatis venenatis quis ut dui. Vestibulum nunc est, lobortis a tortor id, elementum elementum diam. Nunc et urna lacus. Nunc euismod dui a quam volutpat consectetur. Donec elementum lorem non tortor luctus posuere. Nulla facilisi. Suspendisse nec pharetra erat, vitae egestas ante. Vivamus blandit id sem sed dictum. Fusce pellentesque purus eu quam congue, in porttitor nibh eleifend. Cras id erat neque.</p>
<p>Aenean sit amet arcu ut lorem maximus mattis. Aenean venenatis, nisi eu malesuada convallis, ex diam vehicula diam, a egestas augue augue ultrices augue. Sed ac purus vel massa ornare elementum in id lectus. Proin arcu dui, ultrices non accumsan at, facilisis in dui. Fusce elit neque, auctor sit amet justo non, fringilla feugiat nibh. Praesent vel dui fermentum, tempor elit sed, interdum odio. Suspendisse rhoncus, lorem at dictum euismod, sem lorem elementum justo, a faucibus odio lectus et quam. Quisque sapien nibh, lacinia at maximus quis, interdum vitae diam. Suspendisse vitae pulvinar magna. Vivamus lacinia molestie purus ut porttitor. Vestibulum in dignissim nisl. Aliquam ultricies lobortis dolor lacinia maximus. Phasellus laoreet sit amet nunc a ultrices. Duis placerat justo vitae ligula auctor, a tempor lorem laoreet. Cras luctus sed nisi quis euismod.</p>
<p>Donec bibendum quam id efficitur ullamcorper. Donec iaculis ex sed neque bibendum, bibendum bibendum ante lobortis. In hac habitasse platea dictumst. Sed turpis velit, faucibus at magna non, placerat elementum dui. Integer consequat magna vitae porttitor aliquam. Phasellus finibus mauris ac egestas eleifend. In sed laoreet elit, quis dignissim odio. Proin pretium orci leo, quis imperdiet mi ornare ut. Nunc a laoreet velit. Proin dignissim mauris mi, ut suscipit lorem iaculis et.</p>
</div>
</div>
</div>
<a class="fas fa-image tooltipster pull-right" title="Pagedoll by Miniifroggii" href="https://toyhou.se/miniifroggii" style="color:#6F3904;"></a>
<a class="fas fa-image tooltipster pull-right" title="Avatar by KitteyPwince" href="https://toyhou.se/KitteyPwince" style="color:#6F3904;"></a>
<a class="fas fa-image tooltipster pull-right" title="Background from unsplash" href="https://unsplash.com/photos/fHXP17AxOEk" style="color:#6F3904;"></a>
<a class="fas fa-code tooltipster pull-right" title="Code by LostInProgres" href="https://toyhou.se/LostInTrades/characters/folder:3594050" style="color:#6F3904;"></a>
</div>
Recent Images
No images.