[CHARA] Placeholder profile
created by:FlowerlyRat
BootstrapHTMLCharacter
Copy
<!--
November 2023 Coders' Quarters || Special challenge: remaking an existing code / Second entry
Placeholder profile remastered: code by FlowerlyRat || Remake of the "Simple placeholder" code
Accent color: #f5335a
Icon outlines: #fff
to replace everything at once, highlight the part you want to change, then do ctrl+F and replace it with the desired color
-->
<!--/////////// CODE ///////////-->
<div class="container p-0">
<div class="card bg-faded rounded-0 p-4 mb-3" style="border-style: dotted solid; border-width: 3px 4px; border-color: #f5335a">
<h1 class="text-center" style="font-variant: small-caps; color: #f5335a"><b>Placeholder profile</b></h1>
</div>
<!--/////////// name + icon ///////////-->
<div class="card bg-faded rounded-0 p-4" style="border-width: 3px">
<h1 class="text-center text-capitalize" style="font-weight: bold">
<i class="fad fa-icons"></i>
name
</h1>
</div>
<!--/////////// name + icon end ///////////-->
<div class="mt-3" style="border-width: 3px 0 0 0; border-style: dashed; color: #f5335a; opacity: 1"></div>
<div class="row no-gutters">
<!--/////////// basic info///////////-->
<div class="col-lg-3 card rounded-0 bg-faded p-3 mt-3" style="border-width: 3px">
<div class="sticky-top">
<h3 class="text-center mt-2">Basic information</h3>
<div class="my-4 mx-n3" style="border-width: 3px 0 0 0; height: 10px; border-style: solid; color: #f5335a; opacity: 0.5"></div>
<!--Meta info-->
<ul class="list-unstyled m-0">
<li><b>Designer:</b> @ user</li>
<li><b>Part of:</b> <a target="_blank" href="#" style="color: #f5335a">Name world/folder</a></li>
</ul>
<div class="mt-3 mb-1" style="border-width: 1px 0 0 0; height: 10px; border-style: dashed; color: #f5335a; opacity: 0.5"></div>
<!--Character info-->
<ul class="list-unstyled m-0">
<li><b>Pronouns:</b> pro/oun</li>
<li><b>Age:</b> undetermined</li>
<li><b>Gender:</b> content</li>
<li><b>Orientation:</b> content</li>
<li><b>Species:</b> content</li>
</ul>
<div class="mt-3 mb-1" style="border-width: 1px 0 0 0; height: 10px; border-style: dashed; color: #f5335a; opacity: 0.5"></div>
<!--VA + theme song-->
<ul class="list-unstyled m-0">
<!--VA-->
<li><b>Voice claim:</b> <span style="color: #f5335a">
Name <em> - Source
</em><span><iframe class="flex-fill" style="position: absolute; margin-top: 1.5px; width: 20px; height: 20px; opacity:0;" frameborder="0" src="
https://www.youtube.com/embed/VIDEOIDHERE
"></iframe><i class="fas fa-play" style="margin-left: 5px"></i></span></span></li>
<!--VA end-->
<!--Theme-->
<li><b>Theme song:</b> <span style="color: #f5335a">
Name <em> - Artist
</em><span><iframe class="flex-fill" style="position: absolute; margin-top: 1.5px; width: 20px; height: 20px; opacity:0;" frameborder="0" src="
https://www.youtube.com/embed/VIDEOIDHERE
"></iframe><i class="fas fa-play" style="margin-left: 5px"></i></span></span></li>
<!--Theme end-->
<div class="mt-3 mb-1" style="border-width: 1px 0 0 0; height: 10px; border-style: dashed; color: #f5335a; opacity: 0.5"></div>
<!--CREDITS DO NOT DELETE-->
<a class="justify-content-center mt-3" target="_blank" href="https://toyhou.se/FlowerlyRat/characters/folder:4673560" style="color: #f5335a" data-toggle="tooltip" title="Code by FlowerlyRat"><i class="fas fa-eye"></i></a>
</ul>
</div>
</div>
<!--/////////// basic info end///////////-->
<div class="mx-3" style="border-width: 0 3px 0 0; border-style: dashed; color: #f5335a; opacity: 1"></div>
<div class="col-lg">
<!--/////////// description ///////////-->
<div class="card rounded-0 bg-faded p-3 mt-3" style="border-width: 3px">
<h3 class="text-center mt-2">Quick description</h3>
<div class="my-3 mx-n3" style="border-width: 3px 0 0 0; height: 10px; border-style: solid; color: #f5335a; opacity: 0.5"></div>
<p class="text-justify">The box grows as you type!</p>
<p class="text-justify">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<!--/////////// description end ///////////-->
<div class="ml-n3 mt-3 hidden-sm-down" style="border-width: 3px 0 0 0; border-style: dashed; color: #f5335a; opacity: 1"></div>
<!--/////////// Quick links ///////////-->
<div class="card rounded-0 bg-faded p-3 mt-3" style="border-width: 3px">
<h3 class="text-center mt-2">Quick links</h3>
<div class="my-3 mx-n3" style="border-width: 3px 0 0 0; height: 10px; border-style: solid; color: #f5335a; opacity: 0.5"></div>
<!--Key symbols-->
<p class="text-justify"><b>Key symbols:</b></p>
<div class="row no-gutters">
<div class="col-lg-6">
<ul class="list-unstyled ml-3">
<li><i class="fas fa-heart"></i> Romantic</li>
<li><i class="fas fa-trillium" style="font-size: 18px"></i> Platonic</li>
</ul>
</div>
<div class="col-lg-6">
<ul class="list-unstyled ml-3">
<li><i class="fas fa-users"></i> Familial
<li><i class="fas fa-skull"></i> Hateful/negative</li>
</ul>
</div>
</div>
<!--Key symbols end-->
<div class="my-2" style="border-width: 1px 0 0 0; height: 10px; border-style: dashed; color: #f5335a; opacity: 0.5"></div>
<div class="row no-gutters">
<!--Character 1-->
<div class="col-4">
<div class=" m-2 card bg-transparent border-0 rounded-0 align-items-center">
<p class="text-truncate text-center col-12">
<a style="font-weight: bold; color: #f5335a"
href="PROFILE LINK HERE">
<!--Profile link above-->
<!--Name-->
Name</a></p>
<!--Image below-->
<img class="mt-2" src="
https://f2.toyhou.se/file/f2-toyhou-se/images/70704855_HyNZgIECVke9qBG.png
" width="100px">
<!--Relationship icon-->
<i class="fas fa-heart"
style="position: relative; bottom: 16px; left: -39px; color: #f5335a; text-shadow: 1px 0 0 #fff, -1px 0 0 #fff, 0 1px 0 #fff, 0 -1px 0 #fff"></i>
</div>
</div>
<!--Character 1-->
<!--Character 2-->
<div class="col-4">
<div class=" m-2 card bg-transparent border-0 rounded-0 align-items-center">
<p class="text-truncate text-center col-12">
<a style="font-weight: bold; color: #f5335a"
href="PROFILE LINK HERE">
<!--Profile link above-->
<!--Name-->
Name</a></p>
<!--Image below-->
<img class="mt-2" src="
https://f2.toyhou.se/file/f2-toyhou-se/images/70704855_HyNZgIECVke9qBG.png
" width="100px">
<!--Relationship icon-->
<i class="fas fa-trillium"
style="position: relative; bottom: 16px; left: -39px; font-size: 15px; color: #f5335a; text-shadow: 1px 0 0 #fff, -1px 0 0 #fff, 0 1px 0 #fff, 0 -1px 0 #fff"></i>
</div>
</div>
<!--Character 2-->
<!--Character 3-->
<div class="col-4">
<div class=" m-2 card bg-transparent border-0 rounded-0 align-items-center">
<p class="text-truncate text-center col-12">
<a style="font-weight: bold; color: #f5335a"
href="PROFILE LINK HERE">
<!--Profile link above-->
<!--Name-->
Name</a></p>
<!--Image below-->
<img class="mt-2" src="
https://f2.toyhou.se/file/f2-toyhou-se/images/70704855_HyNZgIECVke9qBG.png
" width="100px">
<!--Relationship icon-->
<i class="fas fa-trillium"
style="position: relative; bottom: 16px; left: -39px; font-size: 15px; color: #f5335a; text-shadow: 1px 0 0 #fff, -1px 0 0 #fff, 0 1px 0 #fff, 0 -1px 0 #fff"></i>
</div>
</div>
<!--Character 3-->
<!--Character 4-->
<div class="col-4">
<div class=" m-2 card bg-transparent border-0 rounded-0 align-items-center">
<p class="text-truncate text-center col-12">
<a style="font-weight: bold; color: #f5335a"
href="PROFILE LINK HERE">
<!--Profile link above-->
<!--Name-->
Name</a></p>
<!--Image below-->
<img class="mt-2" src="
https://f2.toyhou.se/file/f2-toyhou-se/images/70704855_HyNZgIECVke9qBG.png
" width="100px">
<!--Relationship icon-->
<i class="fas fa-users"
style="position: relative; bottom: 16px; left: -39px; color: #f5335a; text-shadow: 1px 0 0 #fff, -1px 0 0 #fff, 0 1px 0 #fff, 0 -1px 0 #fff"></i>
</div>
</div>
<!--Character 4-->
<!--Character 5-->
<div class="col-4">
<div class=" m-2 card bg-transparent border-0 rounded-0 align-items-center">
<p class="text-truncate text-center col-12">
<a style="font-weight: bold; color: #f5335a"
href="PROFILE LINK HERE">
<!--Profile link above-->
<!--Name-->
Name</a></p>
<!--Image below-->
<img class="mt-2" src="
https://f2.toyhou.se/file/f2-toyhou-se/images/70704855_HyNZgIECVke9qBG.png
" width="100px">
<!--Relationship icon-->
<i class="fas fa-users"
style="position: relative; bottom: 16px; left: -39px; color: #f5335a; text-shadow: 1px 0 0 #fff, -1px 0 0 #fff, 0 1px 0 #fff, 0 -1px 0 #fff"></i>
</div>
</div>
<!--Character 5-->
<!--Character 6-->
<div class="col-4">
<div class=" m-2 card bg-transparent border-0 rounded-0 align-items-center">
<p class="text-truncate text-center col-12">
<a style="font-weight: bold; color: #f5335a"
href="PROFILE LINK HERE">
<!--Profile link above-->
<!--Name-->
Name</a></p>
<!--Image below-->
<img class="mt-2" src="
https://f2.toyhou.se/file/f2-toyhou-se/images/70704855_HyNZgIECVke9qBG.png
" width="100px">
<!--Relationship icon-->
<i class="fas fa-skull"
style="position: relative; bottom: 16px; left: -39px; color: #f5335a; text-shadow: 1px 0 0 #fff, -1px 0 0 #fff, 0 1px 0 #fff, 0 -1px 0 #fff"></i>
</div>
</div>
<!--Character 6-->
</div>
</div>
<!--/////////// Quick links end ///////////-->
</div>
</div>
</div>
<!--/////////// CODE end ///////////-->Copy
<!--
November 2023 Coders' Quarters || Special challenge: remaking an existing code / Second entry
Placeholder profile remastered: code by FlowerlyRat || Remake of the "Simple placeholder" code
to replace everything at once, highlight the part you want to change, then do ctrl+F and replace it with the desired color
-->
{{%Color Palette%
<!--/////////// CODE ///////////-->
<div class="container p-0">
<div class="card bg-faded rounded-0 p-4 mb-3" style="border-style: dotted solid; border-width: 3px 4px; border-color: {{c%Accent color%}}">
<h1 class="text-center" style="font-variant: small-caps; color: {{c%Accent color%}}"><b>Placeholder profile</b></h1>
</div>
<!--/////////// name + icon ///////////-->
<div class="card bg-faded rounded-0 p-4" style="border-width: 3px">
<h1 class="text-center text-capitalize" style="font-weight: bold">
{{%FontAwesome icon snippet%}}
{{%Name%}}
</h1>
</div>
<!--/////////// name + icon end ///////////-->
<div class="mt-3" style="border-width: 3px 0 0 0; border-style: dashed; color: {{c%Accent color%}}; opacity: 1"></div>
<div class="row no-gutters">
<!--/////////// basic info///////////-->
<div class="col-lg-3 card rounded-0 bg-faded p-3 mt-3" style="border-width: 3px">
<div class="sticky-top">
<h3 class="text-center mt-2">Basic information</h3>
<div class="my-4 mx-n3" style="border-width: 3px 0 0 0; height: 10px; border-style: solid; color: {{c%Accent color%}}; opacity: 0.5"></div>
<!--Meta info-->
<ul class="list-unstyled m-0">
<li><b>Designer:</b> {{%Designer%}}</li>
<li><b>Part of:</b> <a target="_blank" href="{{u!Link to project or folder!}}" style="color: {{c%Accent color%}}">{{%Name or folder%}}</a></li>
</ul>
<div class="mt-3 mb-1" style="border-width: 1px 0 0 0; height: 10px; border-style: dashed; color: {{c%Accent color%}}; opacity: 0.5"></div>
<!--Character info-->
<ul class="list-unstyled m-0">
<li><b>Pronouns:</b> {{%Pronouns%}}</li>
<li><b>Age:</b> {{%Age%}}</li>
<li><b>Gender:</b> {{%Gender%}}</li>
<li><b>Orientation:</b> {{%Orientation%}}</li>
<li><b>Species:</b> {{%Species%}}</li>
</ul>
<div class="mt-3 mb-1" style="border-width: 1px 0 0 0; height: 10px; border-style: dashed; color: {{c%Accent color%}}; opacity: 0.5"></div>
<!--VA + theme song-->
<ul class="list-unstyled m-0">
<!--VA-->
<li><b>Voice claim:</b> <span style="color: {{c%Accent color%}}">
{{%Voice's name%}} <em> - {{%Voice's source%}}
</em><span><iframe class="flex-fill" style="position: absolute; margin-top: 1.5px; width: 20px; height: 20px; opacity: 0.05;" frameborder="0" src="
https://www.youtube.com/embed/{{%Voice's youtube ID%}}
"></iframe><i class="fas fa-play" style="margin-left: 5px"></i></span></span></li>
<!--VA end-->
<!--Theme-->
<li><b>Theme song:</b> <span style="color: {{c%Accent color%}}">
{{%Theme's title%}} <em> - {{%Artist%}}
</em><span><iframe class="flex-fill" style="position: absolute; margin-top: 1.5px; width: 20px; height: 20px; opacity: 0.05;" frameborder="0" src="
https://www.youtube.com/embed/{{%Theme's youtube ID%}}
"></iframe><i class="fas fa-play" style="margin-left: 5px"></i></span></span></li>
<!--Theme end-->
<div class="mt-3 mb-1" style="border-width: 1px 0 0 0; height: 10px; border-style: dashed; color: {{c%Accent color%}}; opacity: 0.5"></div>
<!--CREDITS DO NOT DELETE-->
<a class="justify-content-center mt-3" target="_blank" href="https://toyhou.se/FlowerlyRat/characters/folder:4673560" style="color: {{c%Accent color%}}" data-toggle="tooltip" title="Code by FlowerlyRat"><i class="fas fa-eye"></i></a>
</ul>
</div>
</div>
<!--/////////// basic info end///////////-->
<div class="mx-3" style="border-width: 0 3px 0 0; border-style: dashed; color: {{c%Accent color%}}; opacity: 1"></div>
<div class="col-lg">
<!--/////////// description ///////////-->
<div class="card rounded-0 bg-faded p-3 mt-3" style="border-width: 3px">
<h3 class="text-center mt-2">Quick description</h3>
<div class="my-3 mx-n3" style="border-width: 3px 0 0 0; height: 10px; border-style: solid; color: {{c%Accent color%}}; opacity: 0.5"></div>
{{%Description%
<p class="text-justify">{{l%Quick paragraph%}}</p>
%end%}}
</div>
<!--/////////// description end ///////////-->
<div class="ml-n3 mt-3 hidden-sm-down" style="border-width: 3px 0 0 0; border-style: dashed; color: {{c%Accent color%}}; opacity: 1"></div>
<!--/////////// Quick links ///////////-->
<div class="card rounded-0 bg-faded p-3 mt-3" style="border-width: 3px">
<h3 class="text-center mt-2">Quick links</h3>
<div class="my-3 mx-n3" style="border-width: 3px 0 0 0; height: 10px; border-style: solid; color: {{c%Accent color%}}; opacity: 0.5"></div>
<!--Key symbols-->
<p class="text-justify"><b>Key symbols:</b></p>
<div class="row no-gutters">
<div class="col-lg-6">
<ul class="list-unstyled ml-3">
<li><i class="fas fa-heart"></i> Romantic</li>
<li><i class="fas fa-trillium" style="font-size: 18px"></i> Platonic</li>
</ul>
</div>
<div class="col-lg-6">
<ul class="list-unstyled ml-3">
<li><i class="fas fa-users"></i> Familial
<li><i class="fas fa-skull"></i> Hateful/negative</li>
</ul>
</div>
</div>
<!--Key symbols end-->
<div class="my-2" style="border-width: 1px 0 0 0; height: 10px; border-style: dashed; color: {{c%Accent color%}}; opacity: 0.5"></div>
<div class="row no-gutters">
{{%Quick link characters%
<!--Character 1-->
<div class="col-4">
<div class=" m-2 card bg-transparent border-0 rounded-0 align-items-center">
<p class="text-truncate text-center col-12">
<a style="font-weight: bold; color: {{c%Accent color%}}"
href="{{u%Profile link%}}">
<!--Profile link above-->
<!--Name-->
{{%Character name%}}</a></p>
<!--Image below-->
<img class="mt-2" src="
{{u%Link of the image%}}
" width="100px">
<!--Relationship icon-->
<i class="fas fa-{{%FA icon (heart, trillium, users, or skull%}}"
style="position: relative; bottom: 16px; left: -39px; color: {{c%Accent color%}}; text-shadow: 1px 0 0 #fff, -1px 0 0 #fff, 0 1px 0 #fff, 0 -1px 0 #fff"></i>
</div>
</div>
<!--Character 1-->
%end%}}
</div>
</div>
<!--/////////// Quick links end ///////////-->
</div>
</div>
</div>
<!--/////////// CODE end ///////////-->
%end%}}