binded
created by:peachiibon
HTMLMixed ColorsCharacter
Copy
<!--
[ 27 | BINDED ]
turn OFF WYSIWYG
turn ON code editor
do NOT remove credit
RESOURCES :
- free live code editor : https://th.circlejourney.net/
- coding help forum : https://toyhou.se/~forums/16.htmlcss-graphics/48845.-help-thread-ask-your-questions-here-
- how to edit icons : https://toyhou.se/3536712.
- coding resources : https://toyhou.se/Elithian/characters/folder:881832
COLORS :
- accent : #555
use ctrl+f to quickly change colors
-->
<div class="mx-auto" style="max-width: 500px; font-family: 'Georgia';">
<div class="row no-gutters">
<div class="col-12 text-center">
<!-- icon -->
<i class="fa-light fa-snowflake fa-fw fa-3x mb-2" style="color: #555;"></i>
</div>
<!-- connecting // dont touch -->
<div class="col-12">
<div class="w-50" style="border-right: 3px solid #555; height: 50px;"></div>
</div>
<!-- image -->
<div class="col-12 text-center">
<!-- replace url with your own -->
<img src="
IMG_URL_HERE
" style="height: 200px; width: 200px; object-fit: cover; padding: 10px; border: 3px solid #555;">
</div>
<!-- connecting // dont touch -->
<div class="col-12">
<div class="w-50" style="border: 3px solid #555; border-width: 0px 3px 3px 0px; height: 50px;"></div>
</div>
<!-- name -->
<div class="col-12 p-4" style="border: 3px solid #555; border-width: 0px 0px 3px 3px;">
<h2 class="m-0 font-weight-bold font-italic" style="font-size: 1.6rem; letter-spacing: 5px; font-variant: small-caps;">
<span style="color: #555;">N</span>ame
<span style="color: #555;">S</span>urname
</h2>
</div>
<!-- quote -->
<div class="col-12 p-3 text-center" style="border: 3px solid #555; border-width: 0px 3px 3px 0px;">
<h2 class="m-0" style="font-size: 1.2rem; letter-spacing: 1px; font-variant: small-caps;">
<i class="fa-light fa-quote-left fa-xs mr-2"></i>
<span style="color: #555;">L</span>orem ipsum dolor sit amet.
<i class="fa-light fa-quote-right fa-xs ml-2"></i>
</h2>
</div>
<!-- basic info -->
<div class="col-12 p-3" style="border: 3px solid #555; border-width: 0px 0px 3px 3px;">
<div class="row no-gutters">
<!-- item -->
<div class="col-4 p-2">
<p>
Content
<br>
<span class="text-uppercase font-weight-bold" style="color: #555;"> Nickname </span>
</p>
</div>
<!-- end item -->
<!-- item -->
<div class="col-4 p-2">
<p>
Content
<br>
<span class="text-uppercase font-weight-bold" style="color: #555;"> Age </span>
</p>
</div>
<!-- end item -->
<!-- item -->
<div class="col-4 p-2">
<p>
Content
<br>
<span class="text-uppercase font-weight-bold" style="color: #555;"> Birthday </span>
</p>
</div>
<!-- end item -->
<!-- item -->
<div class="col-4 p-2">
<p>
Content
<br>
<span class="text-uppercase font-weight-bold" style="color: #555;"> Gender </span>
</p>
</div>
<!-- end item -->
<!-- item -->
<div class="col-4 p-2">
<p>
Content
<br>
<span class="text-uppercase font-weight-bold" style="color: #555;"> Pronouns </span>
</p>
</div>
<!-- end item -->
<!-- item -->
<div class="col-4 p-2">
<p>
Content
<br>
<span class="text-uppercase font-weight-bold" style="color: #555;"> Sexuality </span>
</p>
</div>
<!-- end item -->
<!-- item -->
<div class="col-4 p-2">
<p>
Content
<br>
<span class="text-uppercase font-weight-bold" style="color: #555;"> Occupation </span>
</p>
</div>
<!-- end item -->
<!-- item -->
<div class="col-4 p-2">
<p>
Content
<br>
<span class="text-uppercase font-weight-bold" style="color: #555;"> Home </span>
</p>
</div>
<!-- end item -->
<!-- item -->
<div class="col-4 p-2">
<p>
Content
<br>
<span class="text-uppercase font-weight-bold" style="color: #555;"> Status </span>
</p>
</div>
<!-- end item -->
</div>
</div>
<!-- about -->
<div class="col-12 p-4" style="border: 3px solid #555; border-width: 0px 3px 3px 0px;">
<!-- header -->
<h2 class="m-0 font-weight-bold font-italic" style="font-size: 1.1rem; letter-spacing: 5px; font-variant: small-caps;">
<span style="color: #555;">A</span>bout
</h2>
<!-- divider -->
<hr class="my-2">
<!-- content -->
<div class="text-justify">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pretium lectus quam id leo in vitae turpis massa. Vitae justo eget magna fermentum iaculis. Sapien et ligula ullamcorper malesuada proin libero nunc consequat interdum. Risus nec feugiat in fermentum. Id diam maecenas ultricies mi. Lacinia quis vel eros donec ac. Donec et odio pellentesque diam volutpat commodo sed egestas egestas.
</p>
<!-- add more above here -->
</div>
</div>
<!-- moodboard + song -->
<div class="col-12 p-3" style="border: 3px solid #555; border-width: 0px 0px 3px 3px;">
<div class="row no-gutters">
<!-- image -->
<div class="col-md-4 p-2">
<!-- replace url with your own -->
<img src="
IMG_URL_HERE
" style="height: 150px; object-fit: cover;" class="w-100">
</div>
<!-- end image -->
<!-- song title -->
<div class="col-md-4 p-2 tooltipster" title="
Song - Artist
">
<div class="p-2" style="height: 150px; background: #555;">
<div class="h-100 w-100 align-items-center justify-content-center" style="border: 1px solid #fff;">
<!-- song button // replace 'vNMNGwbXajE' with the last numbers of your youtube link. KEEP the /embed/ or it won't work -->
<iframe
allowfullscreen
class="m-auto"
frameborder="0"
style="height: 132px; width: 122px; opacity: 0.0001; position:absolute; z-index: 1"
src="
https://www.youtube.com/embed/vNMNGwbXajE
"
>
</iframe>
<!-- icon -->
<i class="fa-thin fa-play-circle fa-fw fa-2x"></i>
</div>
</div>
</div>
<!-- end image -->
<!-- image -->
<div class="col-md-4 p-2">
<!-- replace url with your own -->
<img src="
IMG_URL_HERE
" style="height: 150px; object-fit: cover;" class="w-100">
</div>
<!-- end image -->
</div>
</div>
<!-- personality -->
<div class="col-12 p-3" style="border: 3px solid #555; border-width: 0px 3px 3px 0px;">
<div class="row no-gutters">
<!-- likes -->
<div class="col-md-4 p-2">
<!-- header -->
<h2 class="m-0 font-weight-bold font-italic" style="font-size: 1.1rem; letter-spacing: 5px; font-variant: small-caps;">
<span style="color: #555;">L</span>ikes
</h2>
<!-- divider -->
<hr class="my-2">
<!-- items -->
<p class="m-0">
<i class="fa-light fa-angle-right mr-1" style="color: #555;"></i>
One
</p>
<p class="m-0">
<i class="fa-light fa-angle-right mr-1" style="color: #555;"></i>
Two
</p>
<p class="m-0">
<i class="fa-light fa-angle-right mr-1" style="color: #555;"></i>
Three
</p>
<p class="m-0">
<i class="fa-light fa-angle-right mr-1" style="color: #555;"></i>
Four
</p>
<!-- add more above here -->
</div>
<!-- end likes -->
<!-- dislikes -->
<div class="col-md-4 p-2">
<!-- header -->
<h2 class="m-0 font-weight-bold font-italic" style="font-size: 1.1rem; letter-spacing: 5px; font-variant: small-caps;">
<span style="color: #555;">D</span>islikes
</h2>
<!-- divider -->
<hr class="my-2">
<!-- items -->
<p class="m-0">
<i class="fa-light fa-angle-right mr-1" style="color: #555;"></i>
One
</p>
<p class="m-0">
<i class="fa-light fa-angle-right mr-1" style="color: #555;"></i>
Two
</p>
<p class="m-0">
<i class="fa-light fa-angle-right mr-1" style="color: #555;"></i>
Three
</p>
<p class="m-0">
<i class="fa-light fa-angle-right mr-1" style="color: #555;"></i>
Four
</p>
<!-- add more above here -->
</div>
<!-- end dislikes -->
<!-- hobbies -->
<div class="col-md-4 p-2">
<!-- header -->
<h2 class="m-0 font-weight-bold font-italic" style="font-size: 1.1rem; letter-spacing: 5px; font-variant: small-caps;">
<span style="color: #555;">H</span>obbies
</h2>
<!-- divider -->
<hr class="my-2">
<!-- items -->
<p class="m-0">
<i class="fa-light fa-angle-right mr-1" style="color: #555;"></i>
One
</p>
<p class="m-0">
<i class="fa-light fa-angle-right mr-1" style="color: #555;"></i>
Two
</p>
<p class="m-0">
<i class="fa-light fa-angle-right mr-1" style="color: #555;"></i>
Three
</p>
<p class="m-0">
<i class="fa-light fa-angle-right mr-1" style="color: #555;"></i>
Four
</p>
<!-- add more above here -->
</div>
<!-- end likes -->
<!-- personality -->
<div class="col-12 p-2">
<!-- header -->
<h2 class="m-0 font-weight-bold font-italic" style="font-size: 1.1rem; letter-spacing: 5px; font-variant: small-caps;">
<span style="color: #555;">P</span>ersonality
</h2>
<!-- divider -->
<hr class="my-2">
<!-- content -->
<div class="text-justify">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pretium lectus quam id leo in vitae turpis massa. Vitae justo eget magna fermentum iaculis. Sapien et ligula ullamcorper malesuada proin libero nunc consequat interdum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pretium lectus quam id leo in vitae turpis massa. Vitae justo eget magna fermentum iaculis. Sapien et ligula ullamcorper malesuada proin libero nunc consequat interdum.
</p>
<!-- add more above here -->
</div>
</div>
<!-- end personality -->
</div>
</div>
<!-- background -->
<div class="col-12 p-4" style="border: 3px solid #555; border-width: 0px 0px 3px 3px;">
<!-- header -->
<h2 class="m-0 font-weight-bold font-italic" style="font-size: 1.1rem; letter-spacing: 5px; font-variant: small-caps;">
<span style="color: #555;">B</span>ackground
</h2>
<!-- divider -->
<hr class="my-2">
<!-- content -->
<div class="text-justify">
<p>
<span class="align-items-center justify-content-center mr-2 mb-2" style="height: 50px; width: 50px; background: #555; font-size: 1.5rem; float: left;">
L
</span>
orem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pretium lectus quam id leo in vitae turpis massa. Vitae justo eget magna fermentum iaculis. Sapien et ligula ullamcorper malesuada proin libero nunc consequat interdum. Risus nec feugiat in fermentum. Id diam maecenas ultricies mi. Lacinia quis vel eros donec ac. Donec et odio pellentesque diam volutpat commodo sed egestas egestas.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pretium lectus quam id leo in vitae turpis massa. Vitae justo eget magna fermentum iaculis. Sapien et ligula ullamcorper malesuada proin libero nunc consequat interdum. Risus nec feugiat in fermentum. Id diam maecenas ultricies mi. Lacinia quis vel eros donec ac. Donec et odio pellentesque diam volutpat commodo sed egestas egestas.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pretium lectus quam id leo in vitae turpis massa. Vitae justo eget magna fermentum iaculis. Sapien et ligula ullamcorper malesuada proin libero nunc consequat interdum.
</p>
<!-- add more above here -->
</div>
</div>
<!-- connections -->
<div class="col-12 p-3" style="border: 3px solid #555; border-width: 0px 3px 0px 0px;">
<div class="row no-gutters">
<!-- character 1 -->
<div class="col-4 p-2 text-center">
<!-- image // replace url with your own -->
<img src="
IMG_URL_HERE
" style="height: 130px; object-fit: cover;" class="mb-2 w-100">
<!-- char link -->
<a href="CHAR_LINK" class="text-body font-italic">
<span style="color: #555;">N</span>ame
<span style="color: #555;">S</span>urname
</a>
<!-- relationship -->
<small class="faded">
relationship
</small>
<!-- divider -->
<hr class="my-2">
<!-- content -->
<div class="text-justify" style="font-size: 0.75rem; height: 150px; overflow: auto; scrollbar-width: none;">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</p>
</div>
</div>
<!-- end character 1 -->
<!-- character 2 -->
<div class="col-4 p-2 text-center">
<!-- image // replace url with your own -->
<img src="
IMG_URL_HERE
" style="height: 130px; object-fit: cover;" class="mb-2 w-100">
<!-- char link -->
<a href="CHAR_LINK" class="text-body font-italic">
<span style="color: #555;">N</span>ame
<span style="color: #555;">S</span>urname
</a>
<!-- relationship -->
<small class="faded">
relationship
</small>
<!-- divider -->
<hr class="my-2">
<!-- content -->
<div class="text-justify" style="font-size: 0.75rem; height: 150px; overflow: auto; scrollbar-width: none;">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</p>
</div>
</div>
<!-- end character 2 -->
<!-- character 3 -->
<div class="col-4 p-2 text-center">
<!-- image // replace url with your own -->
<img src="
IMG_URL_HERE
" style="height: 130px; object-fit: cover;" class="mb-2 w-100">
<!-- char link -->
<a href="CHAR_LINK" class="text-body font-italic">
<span style="color: #555;">N</span>ame
<span style="color: #555;">S</span>urname
</a>
<!-- relationship -->
<small class="faded">
relationship
</small>
<!-- divider -->
<hr class="my-2">
<!-- content -->
<div class="text-justify" style="font-size: 0.75rem; height: 150px; overflow: auto; scrollbar-width: none;">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</p>
</div>
</div>
<!-- end character 3 -->
<!-- add more above here -->
</div>
</div>
<!-- connecting // dont touch -->
<div class="col-12">
<div class="w-50 pull-right" style="border: 3px solid #555; border-width: 3px 0px 0px 3px; height: 50px;"></div>
</div>
<!-- credit // DO NOT REMOVE -->
<div class="col-12 text-center pl-1">
<a href="/19858154." class="tooltipster" title="code by venus" style="color: #555;">
<i class="fa-regular fa-heart fa-fw mt-2"></i>
</a>
</div>
</div>
</div>