Profile
<!---------====== Mellow | [F2U by cosmical, layout by branch-sky] ======----------->
<!---------
Thank you for choosing to use my code! Before you start editing, keep the following things in mind:
You MAY:
- Edit! You may modify my codes however you'd like!
- Frankenstein my codes with others' as long as they allow it in their T.O.S. (Do NOT redistribute it, however).
- Ask me for help with my code! I'll do my best to respond! ^^
You may NOT:
- Remove the credit. However you edit it, the credit MUST be on there!
- Redistribute my codes. Making edited versions for PERSONAL USE is completely fine, but do not redistribute them!
Other notes:
- Turn WYSIWYG off. My codes won't work otherwise
-Leave a post in my forum page: https://toyhou.se/~forums/16.htmlcss-graphics/163815.- (I'd love to see what you do! ^^)
----------->
<div class="row no-gutters" style="font-family: calibri; margin-top: 85px;">
<div class="col-md-4"></div>
<div class="col-md-4">
<div class="bg-faded p-1">
<!----- Icon [must be a square image or it will be stretched] ----->
<img src="https://images.unsplash.com/photo-1513754934927-4606bafe9858?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" style="padding: 8px; margin: -80px auto; width:150px; height:150px; margin-bottom: 1px" class="rounded-circle d-block bg-faded">
</div>
<div class="bg-faded">
<div class="tab-content">
<!----- Tab 1 [Basics] ----->
<div class="tab-pane fade active show" id="basics">
<div class="bg-faded p-2" style="height: 280px; overflow: auto;">
<div class="p-2">
<!----- Name + Basic Info ----->
<p class="text-center mb-1 text-dark" style="font-size:24px;">name here</p>
<hr class="mt-1 mb-1" style="width: 75%">
<p class="text-center text-dark text-muted">adj . adj . adj</p><br>
<!----- Image ----->
<div class="card rounded-0 border-0" style="height: 150px; background-image: url(https://images.unsplash.com/photo-1611272953219-4a3faa61885e?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80); background-position: center; background-size: cover;"></div>
</div>
</div>
</div>
<!----- Tab 2 [About] ----->
<div class="tab-pane fade" id="about">
<div class="bg-faded p-2" style="height: 280px; overflow: auto;">
<div class="card rounded-0 border-0 p-2 text-muted" style="height: 180px; margin-bottom: 10px; overflow: auto;">
Hello! I'm an artist/designer! Write something about yourself here. This box scrolls, so write as much as you'd like! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer laoreet elit sit amet purus tincidunt, at tincidunt lectus ultricies. Donec ut lacus eget justo eleifend lobortis non ac urna. Mauris consequat lobortis arcu, ut pretium enim.
</div>
<!----- Image ----->
<div class="card rounded-0 border-0" style="height: 180px; background-image: url(https://images.unsplash.com/photo-1611273184231-01e0e3407596?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80); background-position: center; background-size: cover;"></div>
</div>
</div>
<!----- Tab 3 [Info] ----->
<div class="tab-pane fade" id="info">
<div class="bg-faded p-2" style="height: 280px; overflow: auto;">
<!----- 1st Box ----->
<div class="card rounded-0 border-0 p-2 text-muted" style="height: 120px; margin-bottom: 10px; overflow: auto;">
<ul class="fa-ul">
<li><span class="fa-li"><i class="fas fa-chevron-right"></i></span>List some notices here! Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><span class="fa-li"><i class="fas fa-chevron-right"></i></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><span class="fa-li"><i class="fas fa-chevron-right"></i></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
</ul>
</div>
<!----- 2nd Box ----->
<div class="card rounded-0 border-0 p-2 text-muted" style="height: 120px; margin-bottom: 10px; overflow: auto;">
<ul class="fa-ul">
<li><span class="fa-li"><i class="fas fa-chevron-right"></i></span>List some notices here! Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><span class="fa-li"><i class="fas fa-chevron-right"></i></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><span class="fa-li"><i class="fas fa-chevron-right"></i></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
</ul>
</div>
</div>
</div>
<!----- Tab 4 [Art Status] ----->
<div class="tab-pane fade" id="art">
<div class="bg-faded p-2" style="height: 280px; overflow: auto;">
<div class="card rounded-0 border-0 p-2 text-muted" style="height: 120px; margin-bottom: 10px; overflow: auto;">
<p><span class="text-uppercase" style="font-size: 18px;">Art Trades:</span><span class="pull-right">status</span></p>
<p><span class="text-uppercase" style="font-size: 18px;">Design Trades:</span><span class="pull-right">status</span></p>
<p><span class="text-uppercase" style="font-size: 18px;">Commissions:</span><span class="pull-right">status</span></p>
</div>
<!----- Art Example ----->
<div class="card rounded-0 border-0 p-2 text-muted" style="height: 120px; margin-bottom: 10px; overflow: auto; background-image: url(https://images.unsplash.com/photo-1611273040958-f556bfa2937b?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80); background-position: center; background-size: cover;">
<!----- Link to Other Examples ----->
<div class="card border-0 rounded-0 p-1 text-center" style="background-color:rgba(255,255,255,0.5);"><p><a href="URL_HERE" class="text-uppercase text-dark">Art Examples</a></p></div>
</div>
</div>
</div>
<!----- Tab 5 [Links] ----->
<div class="tab-pane fade" id="links">
<div class="bg-faded p-2" style="height: 280px; overflow: auto;">
<div class="card rounded-0 border-0 p-2 text-muted" style="height: 250px; margin-bottom: 10px; overflow: auto;">
<!----- Other Social Links [insert url inside the quotation marks] ----->
<p class="text-uppercase text-dark text-center m-2" style="font-size: 18px;">Links:</p>
<div class="card rounded-0">
<div class="bg-faded p-2">
<div class="d-flex justify-content-around">
<span class="text-muted"><a href="URL_HERE"><i class="fab fa-deviantart text-secondary tooltipster" title="deviantart"></i></a></span>
<span class="text-muted"><a href="URL_HERE"><i class="fab fa-twitter text-secondary tooltipster" title="twitter"></i></a></span>
<span class="text-muted"><a href="URL_HERE"><i class="fab fa-instagram text-secondary tooltipster" title="instagram"></i></a></span>
<span class="text-muted"><a href="URL_HERE"><i class="fab fa-tumblr text-secondary tooltipster" title="tumblr"></i></a></span>
<span class="text-muted"><a href="URL_HERE"><i class="fab fa-discord text-secondary tooltipster" title="discord"></i></a></span>
</div>
</div>
</div>
<!----- Character Links [insert url inside quotation marks, replace 'Character Name' with your character's name] ----->
<p class="text-uppercase text-dark text-center m-2" style="font-size: 18px;">Characters:</p>
<div class="card rounded-0">
<div class="bg-faded p-2">
<div class="d-flex justify-content-around">
<span class="text-muted"><a href="URL_HERE"><i class="far fa-user text-secondary tooltipster" title="Character Name"></i></a></span>
<span class="text-muted"><a href="URL_HERE"><i class="far fa-user text-secondary tooltipster" title="Character Name"></i></a></span>
<span class="text-muted"><a href="URL_HERE"><i class="far fa-user text-secondary tooltipster" title="Character Name"></i></a></span>
<span class="text-muted"><a href="URL_HERE"><i class="far fa-user text-secondary tooltipster" title="Character Name"></i></a></span>
<span class="text-muted"><a href="URL_HERE"><i class="far fa-user text-secondary tooltipster" title="Character Name"></i></a></span>
</div>
</div>
</div>
<!----- Folder Links [insert url inside quotation marks, replace 'Folder Name' with your folder's name] ----->
<p class="text-uppercase text-dark text-center m-2" style="font-size: 18px;">Folders:</p>
<div class="card rounded-0">
<div class="bg-faded p-2">
<div class="d-flex justify-content-around">
<span class="text-muted"><a href="URL_HERE"><i class="far fa-folder text-secondary tooltipster" title="Folder Name"></i></a></span>
<span class="text-muted"><a href="URL_HERE"><i class="far fa-folder text-secondary tooltipster" title="Folder Name"></i></a></span>
<span class="text-muted"><a href="URL_HERE"><i class="far fa-folder text-secondary tooltipster" title="Folder Name"></i></a></span>
<span class="text-muted"><a href="URL_HERE"><i class="far fa-folder text-secondary tooltipster" title="Folder Name"></i></a></span>
<span class="text-muted"><a href="URL_HERE"><i class="far fa-folder text-secondary tooltipster" title="Folder Name"></i></a></span>
</div>
</div>
</div>
<!----- Friend Links [insert url inside quotation marks, replace 'Name' with your friends's name] ----->
<p class="text-uppercase text-dark text-center m-2" style="font-size: 18px;">Friends:</p>
<div class="card rounded-0">
<div class="bg-faded p-2">
<div class="d-flex justify-content-around">
<span class="text-muted"><a href="URL_HERE"><i class="far fa-heart text-secondary tooltipster" title="Name"></i></a></span>
<span class="text-muted"><a href="URL_HERE"><i class="far fa-heart text-secondary tooltipster" title="Name"></i></a></span>
<span class="text-muted"><a href="URL_HERE"><i class="far fa-heart text-secondary tooltipster" title="Name"></i></a></span>
<span class="text-muted"><a href="URL_HERE"><i class="far fa-heart text-secondary tooltipster" title="Name"></i></a></span>
<span class="text-muted"><a href="URL_HERE"><i class="far fa-heart text-secondary tooltipster" title="Name"></i></a></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!----- Tabs ----->
<ul class="nav nav-tabs card-header-tabs row no-gutters mb-1">
<li class="col-2"><a class="btn bg-faded btn-block btn-outline-secondary rounded-0 active" data-toggle="tab" href="#basics"><i class="far fa-heart"></i></a></li>
<li class="col-2"><a class="btn bg-faded btn-block btn-outline-secondary rounded-0" data-toggle="tab" href="#about"><i class="far fa-square"></i></a></li>
<li class="col-2"><a class="btn bg-faded btn-block btn-outline-secondary rounded-0" data-toggle="tab" href="#info"><i class="far fa-list"></i></a></li>
<li class="col-2"><a class="btn bg-faded btn-block btn-outline-secondary rounded-0" data-toggle="tab" href="#art"><i class="far fa-pencil-alt"></i></a></li>
<li class="col-2"><a class="btn bg-faded btn-block btn-outline-secondary rounded-0" data-toggle="tab" href="#links"><i class="far fa-paperclip"></i></a></li>
<!----- Code Credits [Don't Remove!!!] ----->
<li class="col-2"><a class="btn bg-faded btn-block btn-outline-secondary rounded-0 tooltipster" title="code by cosmical" href="https://toyhou.se/9675846.-"><i class="far fa-code"></i></a></li>
</ul>
</div>
</div>
<div class="col-md-4"></div>
</div>Recent Images
No images.