@pinkieglitterheart's post on Artfol
seeing how to get this for toyhouse to work. just putting a th code in the comments and just copy pasteing it on my profile and seeing what wprks. currently don't know how links or image changing workMar 6, 2022
Comments
<!--------------------------
--
-- Default custom accent color is #cc828a
-- use find & replace in a word processor to quickly change all hex codes
--
--------------------------->
<div class="container px-0">
<div class="row no-gutters mb-2">
<div class="col-lg-4 col-md-5 pr-md-2 mb-md-0 mb-2">
<!-------- FOCAL IMAGE -- WILL SCALE & CROP WITH SCREEN -- FOCUS IN TOP CENTER ------------------>
<div style="background-image:url(IMG URL);
background-size: cover; repeat:no-repeat; background-position: top center; min-height: 400px;" class="rounded card-block bg-faded h-100"></div>
</div>
<div class="col-lg-8 col-md-7">
<ul class="nav nav-pills row no-gutters text-center text-uppercase" style="letter-spacing: 1px;">
<!----------------- NAVIGATION BUTTONS ----- YOU CAN CHANGE THE TEXT ---- DO NOT ADD MORE ------------------------------------->
<li class="nav-item col mr-1 mb-2"><a class="btn btn-default border-0 nav-link active" data-toggle="tab" href="#ONE">
Intro</a></li>
<li class="nav-item col mx-1 mb-2"><a class="btn btn-default border-0 nav-link" data-toggle="tab" href="#TWO">
About</a></li>
<li class="nav-item col ml-1 mb-2"><a class="btn btn-default border-0 nav-link" data-toggle="tab" href="#THREE">
Links</a></li>
</ul>
<div class="rounded bg-faded tab-content">
<!------------------------------------ FIRST TAB ------------------------------------------------------------->
<div class="tab-pane fade in active show" data-toggle="tab" id="ONE">
<div class="px-4 pt-3 pb-1" style="height: 540px; overflow: auto;">
<h1 style="color: #cc828a; letter-spacing:1px;" class="display-4 text-uppercase mb-3"><i class="fal fa-star fa-fw pull-right" /> Basics</h1>
<div class="row">
<div class="col-sm-6">
<span class="text-uppercase text-muted">Name</span>
<span class="pull-right">content</span>
<hr class="my-2">
</div>
<div class="col-sm-6">
<span class="text-uppercase text-muted">Called</span>
<span class="pull-right">content</span>
<hr class="my-2">
</div>
<div class="col-sm-6">
<span class="text-uppercase text-muted">Age</span>
<span class="pull-right">content</span>
<hr class="my-2">
</div>
<div class="col-sm-6">
<span class="text-uppercase text-muted">Gender</span>
<span class="pull-right">content</span>
<hr class="my-2">
</div>
<div class="col-sm-6">
<span class="text-uppercase text-muted">Race</span>
<span class="pull-right">content</span>
<hr class="my-2">
</div>
<div class="col-sm-6">
<span class="text-uppercase text-muted">Role</span>
<span class="pull-right">content</span>
<hr class="my-2">
</div>
<div class="col-sm-6">
<span class="text-uppercase text-muted">Alignment</span>
<span class="pull-right">content</span>
<hr class="my-2 hidden-md-up">
</div>
<div class="col-sm-6">
<span class="text-uppercase text-muted">Theme</span>
<span class="pull-right"> <a href="SONG LINK" style="color: #cc828a;" target="_BLANK">Song link</a></span>
</div>
</div>
<div>
<hr class="mt-2 mb-3">
<p class="text-center mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi varius libero non sem dapibus, eget viverra nisl sagittis. Ut interdum mi non sagittis euismod. Suspendisse id venenatis massa. Aliquam ornare, nibh sit amet interdum elementum, leo sem laoreet nibh, at sollicitudin diam ipsum eu risus. Aenean gravida eu nibh id tincidunt. Pellentesque lorem mauris, cursus sed ligula eget, cursus posuere risus. Phasellus vel enim volutpat, sagittis augue at, condimentum ex. </p>
<hr class="mt-3 mb-2">
</div>
<!------------------------------- LIKES & DISLIKES ----------------------------------->
<div class="row">
<div class="col-sm-6 mb-2">
<p class="text-uppercase text-muted"><i class="fal fa-heart fa-fw" /> Likes</p>
<ul class="mb-0">
<li class="mb-2">content</li>
<li class="mb-2">content</li>
<li class="mb-2">content</li>
<li class="mb-2">content</li>
</ul>
</div>
<div class="col-sm-6 mb-2">
<p class="text-uppercase text-muted"><i class="fal fa-times fa-fw" /> Dislikes</p>
<ul class="mb-0">
<li class="mb-2">content</li>
<li class="mb-2">content</li>
<li class="mb-2">content</li>
<li class="mb-2">content</li>
</ul>
</div>
</div>
</div>
</div>
<!------------------------------------ SECOND TAB ------------------------------------------------------------->
<div class="tab-pane fade" data-toggle="tab" id="TWO">
<div class="px-4 pt-3 pb-1" style="height: 540px; overflow: auto;">
<h1 style="color: #cc828a; letter-spacing:1px;" class="display-4 text-uppercase mb-3"><i class="fal fa-book fa-fw pull-right" />About</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi varius libero non sem dapibus, eget viverra nisl sagittis. Ut interdum mi non sagittis euismod. Suspendisse id venenatis massa. Aliquam ornare, nibh sit amet interdum elementum, leo sem laoreet nibh, at sollicitudin diam ipsum eu risus. Aenean gravida eu nibh id tincidunt. Pellentesque lorem mauris, cursus sed ligula eget, cursus posuere risus. Phasellus vel enim volutpat, sagittis augue at, condimentum ex. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent consectetur semper ligula, nec pretium tellus iaculis at. Nulla facilisi. Phasellus gravida pellentesque dui. Vestibulum vel dui sed odio vehicula finibus sit amet non mauris. Donec ut posuere dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam et nibh lorem.</p>
<p class="text-uppercase text-muted mb-0"><i class="fal fa-bookmark fa-fw" /> Subheader</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi varius libero non sem dapibus, eget viverra nisl sagittis. Ut interdum mi non sagittis euismod. Suspendisse id venenatis massa. Aliquam ornare, nibh sit amet interdum elementum, leo sem laoreet nibh, at sollicitudin diam ipsum eu risus. Aenean gravida eu nibh id tincidunt. Pellentesque lorem mauris, cursus sed ligula eget, cursus posuere risus. Phasellus vel enim volutpat, sagittis augue at, condimentum ex. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent consectetur semper ligula, nec pretium tellus iaculis at. Nulla facilisi. Phasellus gravida pellentesque dui. Vestibulum vel dui sed odio vehicula finibus sit amet non mauris. Donec ut posuere dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam et nibh lorem.</p>
<p class="text-uppercase text-muted mb-0"><i class="fal fa-bookmark fa-fw" /> Subheader</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi varius libero non sem dapibus, eget viverra nisl sagittis. Ut interdum mi non sagittis euismod. Suspendisse id venenatis massa. Aliquam ornare, nibh sit amet interdum elementum, leo sem laoreet nibh, at sollicitudin diam ipsum eu risus. Aenean gravida eu nibh id tincidunt. Pellentesque lorem mauris, cursus sed ligula eget, cursus posuere risus. Phasellus vel enim volutpat, sagittis augue at, condimentum ex. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent consectetur semper ligula, nec pretium tellus iaculis at. Nulla facilisi. Phasellus gravida pellentesque dui. Vestibulum vel dui sed odio vehicula finibus sit amet non mauris. Donec ut posuere dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam et nibh lorem.</p>
</div>
</div>
<!------------------------------------ THIRD TAB ------------------------------------------------------------->
<div class="tab-pane fade" data-toggle="tab" id="THREE">
<div class="px-4 pt-3 pb-1" style="height: 540px; overflow: auto;">
<h1 style="color: #cc828a; letter-spacing:1px;" class="display-4 text-uppercase mb-3"><i class="fal fa-users fa-fw pull-right" /> Relationships</h1>
<div class="row">
<!--------------------------- CHARACTER LINK -------------------------------------->
<div class="col-12 mb-3">
<img src="IMG URL" style="max-height:100px;" class="rounded float-sm-right ml-sm-2 d-block mx-auto" />
<p class="my-2" style="letter-spacing:1px; font-size: 14pt; font-weight:300;"><a href="LINK" style="color: #cc828a;">
Character</a>
<span class="text-muted pull-right small mt-1" style="letter-spacing:1px; font-weight:300">
[ relationship ]</span></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. Integer interdum urna ac dui sollicitudin sollicitudin. In feugiat posuere nulla, eget lobortis ante. </p>
</div>
<!--------------------------- CHARACTER LINK -------------------------------------->
<div class="col-12 mb-3">
<img src="IMG URL" style="max-height:100px;" class="rounded float-sm-right ml-sm-2 d-block mx-auto" />
<p class="my-2" style="letter-spacing:1px; font-size: 14pt; font-weight:300;"><a href="LINK" style="color: #cc828a;">
Character</a>
<span class="text-muted pull-right small mt-1" style="letter-spacing:1px; font-weight:300">
[ relationship ]</span></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. Integer interdum urna ac dui sollicitudin sollicitudin. In feugiat posuere nulla, eget lobortis ante. </p>
</div>
<!--------------------------- CHARACTER LINK -------------------------------------->
<div class="col-12 mb-3">
<img src="IMG URL" style="max-height:100px;" class="rounded float-sm-right ml-sm-2 d-block mx-auto" />
<p class="my-2" style="letter-spacing:1px; font-size: 14pt; font-weight:300;"><a href="LINK" style="color: #cc828a;">
Character</a>
<span class="text-muted pull-right small mt-1" style="letter-spacing:1px; font-weight:300">
[ relationship ]</span></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. Integer interdum urna ac dui sollicitudin sollicitudin. In feugiat posuere nulla, eget lobortis ante. </p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<p class="text-right small">HTML by @Pinky</p>
</div>
--
-- Default custom accent color is #cc828a
-- use find & replace in a word processor to quickly change all hex codes
--
--------------------------->
<div class="container px-0">
<div class="row no-gutters mb-2">
<div class="col-lg-4 col-md-5 pr-md-2 mb-md-0 mb-2">
<!-------- FOCAL IMAGE -- WILL SCALE & CROP WITH SCREEN -- FOCUS IN TOP CENTER ------------------>
<div style="background-image:url(IMG URL);
background-size: cover; repeat:no-repeat; background-position: top center; min-height: 400px;" class="rounded card-block bg-faded h-100"></div>
</div>
<div class="col-lg-8 col-md-7">
<ul class="nav nav-pills row no-gutters text-center text-uppercase" style="letter-spacing: 1px;">
<!----------------- NAVIGATION BUTTONS ----- YOU CAN CHANGE THE TEXT ---- DO NOT ADD MORE ------------------------------------->
<li class="nav-item col mr-1 mb-2"><a class="btn btn-default border-0 nav-link active" data-toggle="tab" href="#ONE">
Intro</a></li>
<li class="nav-item col mx-1 mb-2"><a class="btn btn-default border-0 nav-link" data-toggle="tab" href="#TWO">
About</a></li>
<li class="nav-item col ml-1 mb-2"><a class="btn btn-default border-0 nav-link" data-toggle="tab" href="#THREE">
Links</a></li>
</ul>
<div class="rounded bg-faded tab-content">
<!------------------------------------ FIRST TAB ------------------------------------------------------------->
<div class="tab-pane fade in active show" data-toggle="tab" id="ONE">
<div class="px-4 pt-3 pb-1" style="height: 540px; overflow: auto;">
<h1 style="color: #cc828a; letter-spacing:1px;" class="display-4 text-uppercase mb-3"><i class="fal fa-star fa-fw pull-right" /> Basics</h1>
<div class="row">
<div class="col-sm-6">
<span class="text-uppercase text-muted">Name</span>
<span class="pull-right">content</span>
<hr class="my-2">
</div>
<div class="col-sm-6">
<span class="text-uppercase text-muted">Called</span>
<span class="pull-right">content</span>
<hr class="my-2">
</div>
<div class="col-sm-6">
<span class="text-uppercase text-muted">Age</span>
<span class="pull-right">content</span>
<hr class="my-2">
</div>
<div class="col-sm-6">
<span class="text-uppercase text-muted">Gender</span>
<span class="pull-right">content</span>
<hr class="my-2">
</div>
<div class="col-sm-6">
<span class="text-uppercase text-muted">Race</span>
<span class="pull-right">content</span>
<hr class="my-2">
</div>
<div class="col-sm-6">
<span class="text-uppercase text-muted">Role</span>
<span class="pull-right">content</span>
<hr class="my-2">
</div>
<div class="col-sm-6">
<span class="text-uppercase text-muted">Alignment</span>
<span class="pull-right">content</span>
<hr class="my-2 hidden-md-up">
</div>
<div class="col-sm-6">
<span class="text-uppercase text-muted">Theme</span>
<span class="pull-right"> <a href="SONG LINK" style="color: #cc828a;" target="_BLANK">Song link</a></span>
</div>
</div>
<div>
<hr class="mt-2 mb-3">
<p class="text-center mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi varius libero non sem dapibus, eget viverra nisl sagittis. Ut interdum mi non sagittis euismod. Suspendisse id venenatis massa. Aliquam ornare, nibh sit amet interdum elementum, leo sem laoreet nibh, at sollicitudin diam ipsum eu risus. Aenean gravida eu nibh id tincidunt. Pellentesque lorem mauris, cursus sed ligula eget, cursus posuere risus. Phasellus vel enim volutpat, sagittis augue at, condimentum ex. </p>
<hr class="mt-3 mb-2">
</div>
<!------------------------------- LIKES & DISLIKES ----------------------------------->
<div class="row">
<div class="col-sm-6 mb-2">
<p class="text-uppercase text-muted"><i class="fal fa-heart fa-fw" /> Likes</p>
<ul class="mb-0">
<li class="mb-2">content</li>
<li class="mb-2">content</li>
<li class="mb-2">content</li>
<li class="mb-2">content</li>
</ul>
</div>
<div class="col-sm-6 mb-2">
<p class="text-uppercase text-muted"><i class="fal fa-times fa-fw" /> Dislikes</p>
<ul class="mb-0">
<li class="mb-2">content</li>
<li class="mb-2">content</li>
<li class="mb-2">content</li>
<li class="mb-2">content</li>
</ul>
</div>
</div>
</div>
</div>
<!------------------------------------ SECOND TAB ------------------------------------------------------------->
<div class="tab-pane fade" data-toggle="tab" id="TWO">
<div class="px-4 pt-3 pb-1" style="height: 540px; overflow: auto;">
<h1 style="color: #cc828a; letter-spacing:1px;" class="display-4 text-uppercase mb-3"><i class="fal fa-book fa-fw pull-right" />About</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi varius libero non sem dapibus, eget viverra nisl sagittis. Ut interdum mi non sagittis euismod. Suspendisse id venenatis massa. Aliquam ornare, nibh sit amet interdum elementum, leo sem laoreet nibh, at sollicitudin diam ipsum eu risus. Aenean gravida eu nibh id tincidunt. Pellentesque lorem mauris, cursus sed ligula eget, cursus posuere risus. Phasellus vel enim volutpat, sagittis augue at, condimentum ex. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent consectetur semper ligula, nec pretium tellus iaculis at. Nulla facilisi. Phasellus gravida pellentesque dui. Vestibulum vel dui sed odio vehicula finibus sit amet non mauris. Donec ut posuere dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam et nibh lorem.</p>
<p class="text-uppercase text-muted mb-0"><i class="fal fa-bookmark fa-fw" /> Subheader</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi varius libero non sem dapibus, eget viverra nisl sagittis. Ut interdum mi non sagittis euismod. Suspendisse id venenatis massa. Aliquam ornare, nibh sit amet interdum elementum, leo sem laoreet nibh, at sollicitudin diam ipsum eu risus. Aenean gravida eu nibh id tincidunt. Pellentesque lorem mauris, cursus sed ligula eget, cursus posuere risus. Phasellus vel enim volutpat, sagittis augue at, condimentum ex. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent consectetur semper ligula, nec pretium tellus iaculis at. Nulla facilisi. Phasellus gravida pellentesque dui. Vestibulum vel dui sed odio vehicula finibus sit amet non mauris. Donec ut posuere dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam et nibh lorem.</p>
<p class="text-uppercase text-muted mb-0"><i class="fal fa-bookmark fa-fw" /> Subheader</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi varius libero non sem dapibus, eget viverra nisl sagittis. Ut interdum mi non sagittis euismod. Suspendisse id venenatis massa. Aliquam ornare, nibh sit amet interdum elementum, leo sem laoreet nibh, at sollicitudin diam ipsum eu risus. Aenean gravida eu nibh id tincidunt. Pellentesque lorem mauris, cursus sed ligula eget, cursus posuere risus. Phasellus vel enim volutpat, sagittis augue at, condimentum ex. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent consectetur semper ligula, nec pretium tellus iaculis at. Nulla facilisi. Phasellus gravida pellentesque dui. Vestibulum vel dui sed odio vehicula finibus sit amet non mauris. Donec ut posuere dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam et nibh lorem.</p>
</div>
</div>
<!------------------------------------ THIRD TAB ------------------------------------------------------------->
<div class="tab-pane fade" data-toggle="tab" id="THREE">
<div class="px-4 pt-3 pb-1" style="height: 540px; overflow: auto;">
<h1 style="color: #cc828a; letter-spacing:1px;" class="display-4 text-uppercase mb-3"><i class="fal fa-users fa-fw pull-right" /> Relationships</h1>
<div class="row">
<!--------------------------- CHARACTER LINK -------------------------------------->
<div class="col-12 mb-3">
<img src="IMG URL" style="max-height:100px;" class="rounded float-sm-right ml-sm-2 d-block mx-auto" />
<p class="my-2" style="letter-spacing:1px; font-size: 14pt; font-weight:300;"><a href="LINK" style="color: #cc828a;">
Character</a>
<span class="text-muted pull-right small mt-1" style="letter-spacing:1px; font-weight:300">
[ relationship ]</span></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. Integer interdum urna ac dui sollicitudin sollicitudin. In feugiat posuere nulla, eget lobortis ante. </p>
</div>
<!--------------------------- CHARACTER LINK -------------------------------------->
<div class="col-12 mb-3">
<img src="IMG URL" style="max-height:100px;" class="rounded float-sm-right ml-sm-2 d-block mx-auto" />
<p class="my-2" style="letter-spacing:1px; font-size: 14pt; font-weight:300;"><a href="LINK" style="color: #cc828a;">
Character</a>
<span class="text-muted pull-right small mt-1" style="letter-spacing:1px; font-weight:300">
[ relationship ]</span></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. Integer interdum urna ac dui sollicitudin sollicitudin. In feugiat posuere nulla, eget lobortis ante. </p>
</div>
<!--------------------------- CHARACTER LINK -------------------------------------->
<div class="col-12 mb-3">
<img src="IMG URL" style="max-height:100px;" class="rounded float-sm-right ml-sm-2 d-block mx-auto" />
<p class="my-2" style="letter-spacing:1px; font-size: 14pt; font-weight:300;"><a href="LINK" style="color: #cc828a;">
Character</a>
<span class="text-muted pull-right small mt-1" style="letter-spacing:1px; font-weight:300">
[ relationship ]</span></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. Integer interdum urna ac dui sollicitudin sollicitudin. In feugiat posuere nulla, eget lobortis ante. </p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<p class="text-right small">HTML by @Pinky</p>
</div>
•
<div class="container-fluid px-0 pt-2" style="max-width: 750px; font-size: 10pt; letter-spacing: .5px;">
<div class="row no-gutters">
<div class="col-md-4 push-md-8">
<!-------- focal image here --------- focus will be in top center ------------->
<div style="background-image: url('IMG_URL');
background-repeat: no-repeat; background-position: top center; background-size: cover; min-height: 450px;"
class="image w-100 h-100 d-flex justify-content-end bg-faded">
<div class="col-md-3 col-2 pt-md-0 pt-3">
<h1 style="color: #fff; font-size: 2.5em; text-shadow: 0px 0px 6px rgba(255,255,255.5);" class="p-1 text-uppercase fa-rotate-90">
<!----- write name here -- depending on your image you may need to change the font color ----------->
NameHere
</h1>
</div>
</div>
</div>
<div class="pr-md-2 col-md-8 pull-md-4 p-0">
<!---- summary box ------------->
<div class=" bg-faded p-3 mb-2">
<p>Write a SMALL intro here. This box does not scroll, it will grow with content so keep it precise. Just a couple of sentences will do.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi varius libero non sem dapibus, eget viverra nisl sagittis. Ut interdum mi non sagittis euismod. Suspendisse id venenatis massa. </p>
</div>
<div class="row no-gutters">
<!---- taits & likes boxes ------------->
<div class="col-6 pr-1 mb-2">
<div class="bg-faded h-100">
<h2 class="card border-0 pb-1 mb-0" style="font-weight: 300; letter-spacing: 2px;">Traits</h2>
<div class="px-3 py-2">
<ul class="list-unstyled mb-0">
<li class="mb-1"><i class="fal fa-plus fa-fw" /> list</li>
<li class="mb-1"><i class="fal fa-plus fa-fw" /> some</li>
<li class="mb-1"><i class="fal fa-plus fa-fw" /> personality</li>
<li class="mb-1"><i class="fal fa-plus fa-fw" /> traits</li>
<li class="mb-1"><i class="fal fa-plus fa-fw" /> here</li>
</ul>
</div>
</div></div>
<div class="col-6 pl-1 mb-2">
<div class="bg-faded h-100">
<h2 class="card border-0 pb-1 mb-0" style="font-weight: 300; letter-spacing: 2px;">Likes</h2>
<div class="px-3 py-2">
<ul class="list-unstyled mb-0">
<li class="mb-1"><i class="fal fa-heart fa-fw" /> content</li>
<li class="mb-1"><i class="fal fa-heart fa-fw" /> content</li>
<li class="mb-1"><i class="fal fa-heart fa-fw" /> content</li>
<li class="mb-1"><i class="fal fa-heart fa-fw" /> content</li>
<li class="mb-1"><i class="fal fa-heart fa-fw" /> content</li>
</ul>
</div>
</div></div>
</div>
<h2 style=" font-weight: 300; letter-spacing: 2px;">Facts</h2>
<!---- facts box ------------->
<div class=" bg-faded p-3 pb-2">
<ul class="mb-0 pl-4">
<li class="mb-1"> Use this box to list facts/trivia</li>
<li class="mb-1"> This layout DOES NOT scroll</li>
<li class="mb-1"> It grows with the amount of content put in the boxes</li>
<li class="mb-1"> So don't put too much</li>
<li class="mb-1"> Or the image to the right will get ridiculously tall</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container-fluid pb-2 text-right" style="max-width: 750px;letter-spacing: .5px;">
<p class="small">HTML by @Pinky</p>
</div>
<div class="row no-gutters">
<div class="col-md-4 push-md-8">
<!-------- focal image here --------- focus will be in top center ------------->
<div style="background-image: url('IMG_URL');
background-repeat: no-repeat; background-position: top center; background-size: cover; min-height: 450px;"
class="image w-100 h-100 d-flex justify-content-end bg-faded">
<div class="col-md-3 col-2 pt-md-0 pt-3">
<h1 style="color: #fff; font-size: 2.5em; text-shadow: 0px 0px 6px rgba(255,255,255.5);" class="p-1 text-uppercase fa-rotate-90">
<!----- write name here -- depending on your image you may need to change the font color ----------->
NameHere
</h1>
</div>
</div>
</div>
<div class="pr-md-2 col-md-8 pull-md-4 p-0">
<!---- summary box ------------->
<div class=" bg-faded p-3 mb-2">
<p>Write a SMALL intro here. This box does not scroll, it will grow with content so keep it precise. Just a couple of sentences will do.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi varius libero non sem dapibus, eget viverra nisl sagittis. Ut interdum mi non sagittis euismod. Suspendisse id venenatis massa. </p>
</div>
<div class="row no-gutters">
<!---- taits & likes boxes ------------->
<div class="col-6 pr-1 mb-2">
<div class="bg-faded h-100">
<h2 class="card border-0 pb-1 mb-0" style="font-weight: 300; letter-spacing: 2px;">Traits</h2>
<div class="px-3 py-2">
<ul class="list-unstyled mb-0">
<li class="mb-1"><i class="fal fa-plus fa-fw" /> list</li>
<li class="mb-1"><i class="fal fa-plus fa-fw" /> some</li>
<li class="mb-1"><i class="fal fa-plus fa-fw" /> personality</li>
<li class="mb-1"><i class="fal fa-plus fa-fw" /> traits</li>
<li class="mb-1"><i class="fal fa-plus fa-fw" /> here</li>
</ul>
</div>
</div></div>
<div class="col-6 pl-1 mb-2">
<div class="bg-faded h-100">
<h2 class="card border-0 pb-1 mb-0" style="font-weight: 300; letter-spacing: 2px;">Likes</h2>
<div class="px-3 py-2">
<ul class="list-unstyled mb-0">
<li class="mb-1"><i class="fal fa-heart fa-fw" /> content</li>
<li class="mb-1"><i class="fal fa-heart fa-fw" /> content</li>
<li class="mb-1"><i class="fal fa-heart fa-fw" /> content</li>
<li class="mb-1"><i class="fal fa-heart fa-fw" /> content</li>
<li class="mb-1"><i class="fal fa-heart fa-fw" /> content</li>
</ul>
</div>
</div></div>
</div>
<h2 style=" font-weight: 300; letter-spacing: 2px;">Facts</h2>
<!---- facts box ------------->
<div class=" bg-faded p-3 pb-2">
<ul class="mb-0 pl-4">
<li class="mb-1"> Use this box to list facts/trivia</li>
<li class="mb-1"> This layout DOES NOT scroll</li>
<li class="mb-1"> It grows with the amount of content put in the boxes</li>
<li class="mb-1"> So don't put too much</li>
<li class="mb-1"> Or the image to the right will get ridiculously tall</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container-fluid pb-2 text-right" style="max-width: 750px;letter-spacing: .5px;">
<p class="small">HTML by @Pinky</p>
</div>
•
In order to change the links, you gotta edit the ones in quotations like “DALINK” and then the “BLANK” is where you put like, “DeviantArt” so it pops up as DeviantArt with the link on it I think!
For the image, you gotta copy the image address via right clicking (if using a laptop!) and pasting it on “IMG_URL” hope it helps!
For the image, you gotta copy the image address via right clicking (if using a laptop!) and pasting it on “IMG_URL” hope it helps!
•
•I am not smart so I may need help from someone who knows how to edit it (the character one I can just have the name. I'll get the link after I have them)
•
<div class="container-fluid px-0 pt-md-5 pb-md-4 py-3 border-0" style="max-width: 880px;">
<h1 class="display-4 text-uppercase text-primary">
<!--- NAME OR TITLE HERE------------------------>
Your Name
</h1>
<div class="d-block border-0 bg-faded p-3 mb-2" style="border-radius: 1em;">
<div class="modal-open" style="border-radius: 1em;"><div class="row no-gutters">
<!-- side column -->
<div class="col-md-4 mb-md-0 mb-3">
<div class="card d-block text-center p-3 border-0 h-100">
<!-- main icon -- use a 200 x 200 square image so it can become a square -->
<img src="IMG_URL"
class="d-block mx-auto rounded-circle mb-2" style="max-height: 200px;" />
<p class="text-muted mb-0">
age . gender . adjective</p>
<hr class="w-75 mb-2">
<hr class="w-75 mt-2">
<p class="mb-0" style="font-size: 14pt;">
<!-- social media icons -- use font awesome icons -- dont forget to fill in links -->
<a href="DALINK" target="BLANK"><i class="fab fa-deviantart fa-fw" /></a>
<a href="FALINK" target="BLANK"><i class="fas fa-paw fa-fw" /></a>
<a href="TWITTERLINK" target="BLANK"><i class="fab fa-twitter fa-fw" /></a>
<a href="TWITCHLINK" target="BLANK"><i class="fab fa-twitch fa-fw" /></a>
<!-- credit link -- leave this -->
<a href="/Pinky" target="_BLANK"><i class="fas fa-code fa-fw" /></a>
</p>
</div>
</div><!-- end column -->
<!-- content column -->
<div class="col-md-8 pl-md-3" style="font-size: 10pt;">
<div class="tab-content">
<!--- TAB ONE ----- about ----------------------------------->
<div class="tab-pane active show" data-toggle="tab" id="ONE">
<div class="card d-block pt-3 px-3 border-0"><div class="justify-content-between text-primary" style="font-size: 16pt; line-height: 1;">
<span>About</span>
<i class="fas fa-sparkles fa-fw" />
</div></div>
<div class="card d-block p-3 border-0" style="height: 300px; overflow:auto;">
<!-- optional pagedoll image -- this will be a very small image -- just erase if you dont wanna use -->
<img src="IMG_URL"
class="float-md-right ml-md-2 d-block mx-auto mb-md-0 mb-3" style="max-height:260px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris porta condimentum luctus. Curabitur eu tortor et augue ullamcorper imperdiet et vel quam. In finibus ipsum eget consequat placerat. Suspendisse dignissim euismod sem at iaculis. Vivamus porta acccumsan justo pulvinar ultricies. Praesent quis suscipit nisl. Integer enim ex, acccumsan iaculis condimentum id, finibus a est.</p>
</div>
</div>
<!--- TAB TWO ----- art ----------------------------------->
<div class="tab-pane" data-toggle="tab" id="TWO">
<div class="card d-block pt-3 px-3 border-0"><div class="justify-content-between text-primary" style="font-size: 16pt; line-height: 1;">
<span>Art</span>
<i class="fas fa-palette fa-fw" />
</div></div>
<div class="card d-block p-3 border-0" style="height: 300px; overflow:auto;">
<!-- if you dont do art, just erase this tab or conver it to something else ---->
<div class="row no-gutters mx-md-0 mx-3">
<!-------- art status section ------------->
<div class="col-md-6 mb-3">
<div class="justify-content-between">
<span class="text-muted"> commissions</span>
<i>closed</i>
</div>
<hr class="my-2" />
<div class="justify-content-between">
<span class="text-muted"> trades</span>
<i>closed</i>
</div>
<hr class="my-2" />
<div class="justify-content-between">
<span class="text-muted"> requests</span>
<i>closed</i>
</div>
</div>
<div class="col-md-6 pl-md-2 mb-3">
<!-------- art links section ------------->
<a href="PRICES_LINK" class="btn btn-secondary btn-block btn-sm m-1">Prices</a>
<a href="TOS_LINK" class="btn btn-secondary btn-block btn-sm m-1">T.o.S.</a>
<a href="EXAMPLES_LINK" class="btn btn-secondary btn-block btn-sm m-1">Examples</a>
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris porta condimentum luctus. Curabitur eu tortor et augue ullamcorper imperdiet et vel quam. In finibus ipsum eget consequat placerat. Suspendisse dignissim euismod sem at iaculis. Vivamus porta acccumsan justo pulvinar ultricies. Praesent quis suscipit nisl. Integer enim ex, acccumsan iaculis condimentum id, finibus a est.</p>
</div>
</div>
<!--- TAB THREE ----- characters ----------------------------------->
<div class="tab-pane" data-toggle="tab" id="THREE">
<div class="card d-block pt-3 px-3 border-0"><div class="justify-content-between text-primary" style="font-size: 16pt; line-height: 1;">
<span>Characters</span>
<i class="fas fa-users fa-fw" />
</div></div>
<div class="card d-block pt-3 px-3 border-0" style="height: 300px; overflow:auto;">
<div class="row">
<!------------------- CHARACTER -------------------------------------->
<div class="col-md-3 col-sm-6 text-center mb-3">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/17777845_Ja7J7dn53mMdWIX.png"
class="d-block mx-auto mb-1 rounded-circle" style="max-height: 100px;">
<a href="URL_HERE" class="small text-uppercase text-muted">Name</a>
</div>
<!------------------- CHARACTER -------------------------------------->
<div class="col-md-3 col-sm-6 text-center mb-3">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/17777845_Ja7J7dn53mMdWIX.png"
class="d-block mx-auto mb-1 rounded-circle" style="max-height: 100px;">
<a href="URL_HERE" class="small text-uppercase text-muted">Name</a>
</div>
<!------------------- CHARACTER -------------------------------------->
<div class="col-md-3 col-sm-6 text-center mb-3">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/17777845_Ja7J7dn53mMdWIX.png"
class="d-block mx-auto mb-1 rounded-circle" style="max-height: 100px;">
<a href="URL_HERE" class="small text-uppercase text-muted">Name</a>
</div>
<!------------------- CHARACTER -------------------------------------->
<div class="col-md-3 col-sm-6 text-center mb-3">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/17777845_Ja7J7dn53mMdWIX.png"
class="d-block mx-auto mb-1 rounded-circle" style="max-height: 100px;">
<a href="URL_HERE" class="small text-uppercase text-muted">Name</a>
</div>
<!------------------- CHARACTER -------------------------------------->
<div class="col-md-3 col-sm-6 text-center mb-3">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/17777845_Ja7J7dn53mMdWIX.png"
class="d-block mx-auto mb-1 rounded-circle" style="max-height: 100px;">
<a href="URL_HERE" class="small text-uppercase">Name</a>
</div>
<!------------------- CHARACTER -------------------------------------->
<div class="col-md-3 col-sm-6 text-center mb-3">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/17777845_Ja7J7dn53mMdWIX.png"
class="d-block mx-auto mb-1 rounded-circle" style="max-height: 100px;">
<a href="URL_HERE" class="small text-uppercase text-muted">Name</a>
</div>
<!------------------- CHARACTER -------------------------------------->
<div class="col-md-3 col-sm-6 text-center mb-3">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/17777845_Ja7J7dn53mMdWIX.png"
class="d-block mx-auto mb-1 rounded-circle" style="max-height: 100px;">
<a href="URL_HERE" class="small text-uppercase text-muted">Name</a>
</div>
<!------------------- CHARACTER -------------------------------------->
<div class="col-md-3 col-sm-6 text-center mb-3">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/17777845_Ja7J7dn53mMdWIX.png"
class="d-block mx-auto mb-1 rounded-circle" style="max-height: 100px;">
<a href="URL_HERE" class="small text-uppercase text-muted">Name</a>
</div>
</div>
</div>
</div>
</div><!-- end tab content container -->
</div> <!-- end column -->
</div></div>
</div>
<!-- NAV ------------------------------------------------------>
<ul class="nav justify-content-end text-uppercase">
<!----------------- NAVIGATION BUTTONS -- you can change the icons -- pls note these are listed backwards -->
<li class="nav-item pr-1">
<a class="nav-link btn btn-outline-primary border-0 p-1" style="box-shadow:none; border-radius: .5em;" data-toggle="tab" href="#THREE">
<i class="far fa-users fa-fw" /> <span class="hidden-sm-down">Characters</span></a>
</li>
<li class="nav-item px-1">
<a class="nav-link btn btn-outline-primary border-0 p-1" style="box-shadow:none; border-radius: .5em;" data-toggle="tab" href="#TWO">
<i class="far fa-palette fa-fw" /> <span class="hidden-sm-down">Art</span></a>
</li>
<li class="nav-item pl-1">
<a class="nav-link btn btn-outline-primary border-0 p-1 active" style="box-shadow:none; border-radius: .5em;" data-toggle="tab" href="#ONE">
<i class="far fa-sparkles fa-fw" /> <span class="hidden-sm-down">About</span></a>
</li>
</ul>
</div>
<h1 class="display-4 text-uppercase text-primary">
<!--- NAME OR TITLE HERE------------------------>
Your Name
</h1>
<div class="d-block border-0 bg-faded p-3 mb-2" style="border-radius: 1em;">
<div class="modal-open" style="border-radius: 1em;"><div class="row no-gutters">
<!-- side column -->
<div class="col-md-4 mb-md-0 mb-3">
<div class="card d-block text-center p-3 border-0 h-100">
<!-- main icon -- use a 200 x 200 square image so it can become a square -->
<img src="IMG_URL"
class="d-block mx-auto rounded-circle mb-2" style="max-height: 200px;" />
<p class="text-muted mb-0">
age . gender . adjective</p>
<hr class="w-75 mb-2">
<hr class="w-75 mt-2">
<p class="mb-0" style="font-size: 14pt;">
<!-- social media icons -- use font awesome icons -- dont forget to fill in links -->
<a href="DALINK" target="BLANK"><i class="fab fa-deviantart fa-fw" /></a>
<a href="FALINK" target="BLANK"><i class="fas fa-paw fa-fw" /></a>
<a href="TWITTERLINK" target="BLANK"><i class="fab fa-twitter fa-fw" /></a>
<a href="TWITCHLINK" target="BLANK"><i class="fab fa-twitch fa-fw" /></a>
<!-- credit link -- leave this -->
<a href="/Pinky" target="_BLANK"><i class="fas fa-code fa-fw" /></a>
</p>
</div>
</div><!-- end column -->
<!-- content column -->
<div class="col-md-8 pl-md-3" style="font-size: 10pt;">
<div class="tab-content">
<!--- TAB ONE ----- about ----------------------------------->
<div class="tab-pane active show" data-toggle="tab" id="ONE">
<div class="card d-block pt-3 px-3 border-0"><div class="justify-content-between text-primary" style="font-size: 16pt; line-height: 1;">
<span>About</span>
<i class="fas fa-sparkles fa-fw" />
</div></div>
<div class="card d-block p-3 border-0" style="height: 300px; overflow:auto;">
<!-- optional pagedoll image -- this will be a very small image -- just erase if you dont wanna use -->
<img src="IMG_URL"
class="float-md-right ml-md-2 d-block mx-auto mb-md-0 mb-3" style="max-height:260px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris porta condimentum luctus. Curabitur eu tortor et augue ullamcorper imperdiet et vel quam. In finibus ipsum eget consequat placerat. Suspendisse dignissim euismod sem at iaculis. Vivamus porta acccumsan justo pulvinar ultricies. Praesent quis suscipit nisl. Integer enim ex, acccumsan iaculis condimentum id, finibus a est.</p>
</div>
</div>
<!--- TAB TWO ----- art ----------------------------------->
<div class="tab-pane" data-toggle="tab" id="TWO">
<div class="card d-block pt-3 px-3 border-0"><div class="justify-content-between text-primary" style="font-size: 16pt; line-height: 1;">
<span>Art</span>
<i class="fas fa-palette fa-fw" />
</div></div>
<div class="card d-block p-3 border-0" style="height: 300px; overflow:auto;">
<!-- if you dont do art, just erase this tab or conver it to something else ---->
<div class="row no-gutters mx-md-0 mx-3">
<!-------- art status section ------------->
<div class="col-md-6 mb-3">
<div class="justify-content-between">
<span class="text-muted"> commissions</span>
<i>closed</i>
</div>
<hr class="my-2" />
<div class="justify-content-between">
<span class="text-muted"> trades</span>
<i>closed</i>
</div>
<hr class="my-2" />
<div class="justify-content-between">
<span class="text-muted"> requests</span>
<i>closed</i>
</div>
</div>
<div class="col-md-6 pl-md-2 mb-3">
<!-------- art links section ------------->
<a href="PRICES_LINK" class="btn btn-secondary btn-block btn-sm m-1">Prices</a>
<a href="TOS_LINK" class="btn btn-secondary btn-block btn-sm m-1">T.o.S.</a>
<a href="EXAMPLES_LINK" class="btn btn-secondary btn-block btn-sm m-1">Examples</a>
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris porta condimentum luctus. Curabitur eu tortor et augue ullamcorper imperdiet et vel quam. In finibus ipsum eget consequat placerat. Suspendisse dignissim euismod sem at iaculis. Vivamus porta acccumsan justo pulvinar ultricies. Praesent quis suscipit nisl. Integer enim ex, acccumsan iaculis condimentum id, finibus a est.</p>
</div>
</div>
<!--- TAB THREE ----- characters ----------------------------------->
<div class="tab-pane" data-toggle="tab" id="THREE">
<div class="card d-block pt-3 px-3 border-0"><div class="justify-content-between text-primary" style="font-size: 16pt; line-height: 1;">
<span>Characters</span>
<i class="fas fa-users fa-fw" />
</div></div>
<div class="card d-block pt-3 px-3 border-0" style="height: 300px; overflow:auto;">
<div class="row">
<!------------------- CHARACTER -------------------------------------->
<div class="col-md-3 col-sm-6 text-center mb-3">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/17777845_Ja7J7dn53mMdWIX.png"
class="d-block mx-auto mb-1 rounded-circle" style="max-height: 100px;">
<a href="URL_HERE" class="small text-uppercase text-muted">Name</a>
</div>
<!------------------- CHARACTER -------------------------------------->
<div class="col-md-3 col-sm-6 text-center mb-3">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/17777845_Ja7J7dn53mMdWIX.png"
class="d-block mx-auto mb-1 rounded-circle" style="max-height: 100px;">
<a href="URL_HERE" class="small text-uppercase text-muted">Name</a>
</div>
<!------------------- CHARACTER -------------------------------------->
<div class="col-md-3 col-sm-6 text-center mb-3">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/17777845_Ja7J7dn53mMdWIX.png"
class="d-block mx-auto mb-1 rounded-circle" style="max-height: 100px;">
<a href="URL_HERE" class="small text-uppercase text-muted">Name</a>
</div>
<!------------------- CHARACTER -------------------------------------->
<div class="col-md-3 col-sm-6 text-center mb-3">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/17777845_Ja7J7dn53mMdWIX.png"
class="d-block mx-auto mb-1 rounded-circle" style="max-height: 100px;">
<a href="URL_HERE" class="small text-uppercase text-muted">Name</a>
</div>
<!------------------- CHARACTER -------------------------------------->
<div class="col-md-3 col-sm-6 text-center mb-3">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/17777845_Ja7J7dn53mMdWIX.png"
class="d-block mx-auto mb-1 rounded-circle" style="max-height: 100px;">
<a href="URL_HERE" class="small text-uppercase">Name</a>
</div>
<!------------------- CHARACTER -------------------------------------->
<div class="col-md-3 col-sm-6 text-center mb-3">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/17777845_Ja7J7dn53mMdWIX.png"
class="d-block mx-auto mb-1 rounded-circle" style="max-height: 100px;">
<a href="URL_HERE" class="small text-uppercase text-muted">Name</a>
</div>
<!------------------- CHARACTER -------------------------------------->
<div class="col-md-3 col-sm-6 text-center mb-3">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/17777845_Ja7J7dn53mMdWIX.png"
class="d-block mx-auto mb-1 rounded-circle" style="max-height: 100px;">
<a href="URL_HERE" class="small text-uppercase text-muted">Name</a>
</div>
<!------------------- CHARACTER -------------------------------------->
<div class="col-md-3 col-sm-6 text-center mb-3">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/17777845_Ja7J7dn53mMdWIX.png"
class="d-block mx-auto mb-1 rounded-circle" style="max-height: 100px;">
<a href="URL_HERE" class="small text-uppercase text-muted">Name</a>
</div>
</div>
</div>
</div>
</div><!-- end tab content container -->
</div> <!-- end column -->
</div></div>
</div>
<!-- NAV ------------------------------------------------------>
<ul class="nav justify-content-end text-uppercase">
<!----------------- NAVIGATION BUTTONS -- you can change the icons -- pls note these are listed backwards -->
<li class="nav-item pr-1">
<a class="nav-link btn btn-outline-primary border-0 p-1" style="box-shadow:none; border-radius: .5em;" data-toggle="tab" href="#THREE">
<i class="far fa-users fa-fw" /> <span class="hidden-sm-down">Characters</span></a>
</li>
<li class="nav-item px-1">
<a class="nav-link btn btn-outline-primary border-0 p-1" style="box-shadow:none; border-radius: .5em;" data-toggle="tab" href="#TWO">
<i class="far fa-palette fa-fw" /> <span class="hidden-sm-down">Art</span></a>
</li>
<li class="nav-item pl-1">
<a class="nav-link btn btn-outline-primary border-0 p-1 active" style="box-shadow:none; border-radius: .5em;" data-toggle="tab" href="#ONE">
<i class="far fa-sparkles fa-fw" /> <span class="hidden-sm-down">About</span></a>
</li>
</ul>
</div>
•
