Profile
<!--==========================================
[15] CROW by TOGO
-- -- -- -- -- -- -- -- -- -- -- -- -- --
anything you need to edit should be
tabbed and clearly marked - i've also
added comments for light code edits you
may want to do. feel free to change
any elements to your needs!
-- -- -- -- -- -- -- -- -- -- -- -- -- --
> do not use with WYSIWYG on, it will
break the code.
> keep my credit in.
> direct any questions to my comments,
PMs or discord. thank you!
===========================================-->
<!-- MAIN CONTAINER =======================-->
<div class="my-5 mx-auto" style="max-width: 800px;">
<div class="card bg-faded rounded-0" style="border-width: 4px; border-style: double; box-shadow: 0 0 10px rgba(0,0,0,.3);">
<div class="row no-gutters">
<div class="col p-4 d-block d-md-flex flex-column">
<div class="tab-content mr-n3 mb-4 pr-3" style="flex: 0 0 400px; min-height: 400px; overflow-y: auto;" id="crow">
<!-- 1ST TAB ==============================-->
<div class="tab-pane fade show active h-100" style="" id="badge">
<div class="h-100 flex-column">
<!-- TITLE ================================-->
<div class="row align-items-center">
<div class="col">
<p class="mb-0 text-monospace font-italic" style="font-size: 20px; letter-spacing: 1px;">
USERNAME
</p>
</div>
<div class="col-auto">
<i class="fal fa-crow fa-flip-horizontal" style="font-size: 18px;"></i>
</div>
</div>
<hr class="w-100 mt-2 mb-2">
<div class="card d-block mb-3 py-1 px-3 text-monospace font-italic text-primary border-0 rounded-0" style="letter-spacing: 1px;">
age
<i class="fal fa-angle-right mx-1"></i>
pronouns
<i class="fal fa-angle-right mx-1"></i>
title or adjective
</div>
<!-- TEXT BLOCK ===========================-->
<div class="my-auto">
<div class="card mb-3 ml-1 py-1 pl-3 bg-faded rounded-0" style="border-width: 0 0 0 3px;">
<p>
Some text about yourself. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id ligula elit. Donec enim nibh, dapibus sit amet dui et, hendrerit faucibus quam. Cras vestibulum gravida libero tempus.
</p>
<p>
Suspendisse a aliquet metus. Morbi arcu ipsum, accumsan ut finibus scelerisque, commodo id diam.
</p>
</div>
</div>
<!-- SOCIAL MEDIAS ========================-->
<hr class="w-100 mt-auto mb-2">
<div class="row no-gutters justify-content-center align-items-center mx-n2" style="font-size: 18px;">
<!--=======================================-->
<div class="col-auto mb-2 px-2">
<a href="TWITTER URL">
<i class="fab fa-twitter"></i>
</a>
</div>
<!--=======================================-->
<div class="col-auto mb-2 px-2">
<a href="DEVIANTART URL">
<i class="fab fa-deviantart"></i>
</a>
</div>
<!--=======================================-->
<div class="col-auto mb-2 px-2">
<a href="TUMBLR URL">
<i class="fab fa-tumblr"></i>
</a>
</div>
<!--=======================================-->
<div class="col-auto mb-2 px-2">
<span title="DISCORD USER#0000" class="text-primary" data-toggle="tooltip" data-placement="top">
<i class="fab fa-discord"></i>
</span>
</div>
<!--=======================================-->
</div>
<hr class="w-100 mt-0 mb-3">
<div class="row no-gutters align-items-center">
<!-- ART STATUS ===========================-->
<div class="col-md-4 font-italic" style="letter-spacing: 1px;">
<!--=======================================-->
<div class="row align-items-center">
<div class="col">
<a href="COMM INFO URL">
COMMISSIONS
</a>
</div>
<div class="col-auto">
<i class="fal fa-check fa-fw"></i>
<!-- status. use fa-check for checkmark / fa-times for X. -->
</div>
</div>
<hr class="my-2">
<!--=======================================-->
<div class="row align-items-center">
<div class="col">
TRADES
</div>
<div class="col-auto">
<i class="fal fa-check fa-fw"></i>
</div>
</div>
<hr class="my-2">
<!--=======================================-->
<div class="row align-items-center">
<div class="col">
REQUESTS
</div>
<div class="col-auto">
<i class="fal fa-times fa-fw"></i>
</div>
</div>
<!--=======================================-->
</div>
<!-- MUSIC PLAYER =========================-->
<div class="col-auto align-self-stretch d-none d-md-flex flex-column px-3">
<div class="card flex-grow-1 border-right-0 border-bottom-0"></div>
</div>
<div class="col-md mt-3 mt-md-0">
<div style="position: relative; height: 97px; overflow: hidden;">
<div style="position: absolute; top: -175px; left: -150px; height: 450px; width: 600px;">
<iframe src="https://www.youtube.com/embed/T8NQPS7Vv5w?controls=0" frameborder="0" style="height: 100%; width: 100%; margin-bottom: -5px;"></iframe>
<!-- youtube embed - replace 'T8NQPS7Vv5w' with your yt id, keep controls=0 at the end.
note that the video will be cropped, so some sort of visualizer mv looks best -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 2ND TAB ==============================-->
<div class="tab-pane fade" id="journal">
<!-- LINKS ================================-->
<div class="row no-gutters justify-content-center mx-n1 mb-2 font-italic text-uppercase" style="letter-spacing: 1px;">
<!--=======================================-->
<div class="col-6 col-lg-3 mb-2 px-1">
<a href="URL"
class="btn btn-secondary d-flex justify-content-center align-items-center h-100 py-3 px-1 rounded-0" style="white-space: normal;">
Commission Info
</a>
</div>
<!--=======================================-->
<div class="col-6 col-lg-3 mb-2 px-1">
<a href="URL"
class="btn btn-secondary d-flex justify-content-center align-items-center h-100 py-3 px-1 rounded-0" style="white-space: normal;">
UFT Folder
</a>
</div>
<!--=======================================-->
<div class="col-6 col-lg-3 mb-2 px-1">
<a href="URL"
class="btn btn-secondary d-flex justify-content-center align-items-center h-100 py-3 px-1 rounded-0" style="white-space: normal;">
Sales Thread
</a>
</div>
<!--=======================================-->
<div class="col-6 col-lg-3 mb-2 px-1">
<a href="URL"
class="btn btn-secondary d-flex justify-content-center align-items-center h-100 py-3 px-1 rounded-0" style="white-space: normal;">
Wishlist
</a>
</div>
<!--=======================================-->
</div>
<hr class="w-100 mt-0 mb-3">
<div class="row no-gutters">
<!-- INTERESTS ============================-->
<div class="col-md mb-3">
<p class="mb-2 text-monospace font-italic text-md-center" style="font-size: 18px; letter-spacing: 1px;">
INTERESTS
</p>
<ul class="mb-0 ml-1 pl-3">
<li>
content
</li>
<li>
content
</li>
<li>
content
</li>
<li>
content
</li>
</ul>
</div>
<div class="col-md-auto align-self-stretch flex-column mb-3 px-md-3">
<div class="card flex-grow-1 border-right-0 border-bottom-0"></div>
</div>
<!-- FAVORITES ============================-->
<div class="col-md mb-3">
<p class="mb-2 text-monospace font-italic text-md-center" style="font-size: 18px; letter-spacing: 1px;">
FAVORITES
</p>
<ul class="mb-0 ml-1 pl-3">
<li>
content
</li>
<li>
content
</li>
<li>
content
</li>
<li>
content
</li>
</ul>
</div>
</div>
<hr class="mt-0 mb-3">
<!-- FEATURED CHARACTERS / FRIENDS ========-->
<div class="row no-gutters mx-n1 text-center font-italic text-uppercase" style="letter-spacing: 1px;">
<!--=======================================-->
<div class="col-6 col-md-3 mb-2 mb-md-0 px-1">
<a href="URL"
class="flex-column text-body">
<img class="img-thumbnail mb-1 rounded-0"
src="IMAGE URL">
<span>
Name
</span>
</a>
</div>
<!--=======================================-->
<div class="col-6 col-md-3 mb-2 mb-md-0 px-1">
<a href="URL"
class="flex-column text-body">
<img class="img-thumbnail mb-1 rounded-0"
src="IMAGE URL">
<span>
Name
</span>
</a>
</div>
<!--=======================================-->
<div class="col-6 col-md-3 mb-2 mb-md-0 px-1">
<a href="URL"
class="flex-column text-body">
<img class="img-thumbnail mb-1 rounded-0"
src="IMAGE URL">
<span>
Name
</span>
</a>
</div>
<!--=======================================-->
<div class="col-6 col-md-3 mb-2 mb-md-0 px-1">
<a href="URL"
class="flex-column text-body">
<img class="img-thumbnail mb-1 rounded-0"
src="IMAGE URL">
<span>
Name
</span>
</a>
</div>
<!--=======================================-->
</div>
</div>
<!-- 3RD TAB ==============================-->
<div class="tab-pane fade" id="inventory">
<!-- WARNING ==============================-->
<div class="card mb-3 py-2 px-3 border-0 rounded-0">
<div class="row no-gutters align-items-center">
<div class="col text-muted">
<p>
A warning or notice. Nam risus quam, tempor vel sem eget, ullamcorper accumsan nulla. Aliquam metus at, imperdiet lacus. Mauris eu velit finibus, convallis turpis quis.
</p>
</div>
<div class="col-auto pl-3 pr-2">
<i class="fal fa-exclamation-triangle text-primary" style="font-size: 24px;"></i>
</div>
</div>
</div>
<!-- STORY SUMMARIES ======================-->
<hr class="mt-0 mb-2">
<p class="mb-2 pl-2 text-monospace font-italic" style="font-size: 18px; letter-spacing: 1px;">
STORIES + PROJECTS
</p>
<!--=======================================-->
<div class="card mb-2 rounded-0">
<div style="height: 100px;
background-image: url(IMAGE URL);
background-size: cover; background-position: 30%;"></div>
<div class="pt-2 px-3 pb-3">
<div class="row no-gutters align-items-center">
<div class="col text-monospace font-italic" style="font-size: 16px; letter-spacing: 1px;">
<a href="URL">
STORY TITLE.
</a>
</div>
<div class="col-auto">
<i class="fal fa-heart"></i>
</div>
</div>
<hr class="w-100 mt-1 mb-2">
<p>
Story summary. Aliquam erat volutpat. Vestibulum eget ligula tortor. Integer sed eros egestas, aliquet nulla sit amet, sollicitudin nisl.
</p>
</div>
</div>
<!--=======================================-->
<div class="card mb-2 rounded-0">
<div style="height: 100px;
background-image: url(IMAGE URL);
background-size: cover; background-position: 30%;"></div>
<div class="pt-2 px-3 pb-3">
<div class="row no-gutters align-items-center">
<div class="col text-monospace font-italic" style="font-size: 16px; letter-spacing: 1px;">
<a href="URL">
STORY TITLE.
</a>
</div>
<div class="col-auto">
<i class="fal fa-heart"></i>
</div>
</div>
<hr class="w-100 mt-1 mb-2">
<p>
Story summary. Aliquam erat volutpat. Vestibulum eget ligula tortor. Integer sed eros egestas, aliquet nulla sit amet, sollicitudin nisl.
</p>
</div>
</div>
<!--=======================================-->
<div class="card mb-2 rounded-0">
<div style="height: 100px;
background-image: url(IMAGE URL);
background-size: cover; background-position: 30%;"></div>
<div class="pt-2 px-3 pb-3">
<div class="row no-gutters align-items-center">
<div class="col text-monospace font-italic" style="font-size: 16px; letter-spacing: 1px;">
<a href="URL">
STORY TITLE.
</a>
</div>
<div class="col-auto">
<i class="fal fa-heart"></i>
</div>
</div>
<hr class="w-100 mt-1 mb-2">
<p>
Story summary. Aliquam erat volutpat. Vestibulum eget ligula tortor. Integer sed eros egestas, aliquet nulla sit amet, sollicitudin nisl.
</p>
</div>
</div>
<!--=======================================-->
</div>
</div>
<!-- NAV BUTTONS + CREDIT =================-->
<div class="row no-gutters align-items-center">
<div class="col-auto">
<ul class="nav d-flex mx-n2 text-monospace font-italic">
<li class="nav-item">
<a href="#badge" class="nav-link active py-0 px-2" data-toggle="tab">
I.
</a>
</li>
<li class="nav-item">
<a href="#journal" class="nav-link py-0 px-2" data-toggle="tab">
II.
</a>
</li>
<li class="nav-item">
<a href="#inventory" class="nav-link py-0 px-2" data-toggle="tab">
III.
</a>
</li>
</ul>
</div>
<div class="col px-4">
<hr class="w-100 m-0">
</div>
<div class="col-auto">
<a href="https://toyhou.se/Togo">
<i class="fal fa-code"></i>
</a>
</div>
</div>
</div>
<!-- SIDE IMAGE ===========================-->
<div class="col-md-4 pr-md-4 pl-md-2">
<div class="h-100 mt-md-n4" style="min-height: 400px;
background-image: url(IMAGE URL);
background-size: cover; background-position: 53% 50%; border-radius: 115px 115px 0 0;"></div>
</div>
</div>
</div>
</div>
Recent Images
No images.