<!--
Atsushi by katerpillarwithagun (USER CODE)
Based on the character 'Atsushi Nakajima' from manga 'Bungou Stray Dogs'
THANK YOU <3
Resources:
https://fontawesome.com/icons - Fontawesome Icons
https://www.w3schools.com/ - Coding Tutorials and Help
Code written on Playhouse:
https://cheeriko.github.io/playhouse/ - Toyhouse Real-time HTML Editor
Images from Pexels:
https://www.pexels.com/
Color Palette:
#232323
#414141
#d9cfc6
#eae4cc
#f3f5f4
-->
<!-- TOP BANNER - change image if wanted -->
<div class="card border-0 rounded-0 mx-auto" style="max-width:600px;height:150px;background-image:url('https://images.pexels.com/photos/1088158/pexels-photo-1088158.jpeg')">
</div>
<div class="card border-0 rounded-0 mx-auto" style="max-width:600px;height:20px;background-color:#eae4cc;margin-top:5px">
<!-- replace with image with transparent background -->
<img style="position:absolute;z-index:3;bottom:-100px;max-width:30%;height:auto" src="https://bungoustrayshots.weebly.com/uploads/9/0/7/4/90745023/published/atsushi_2.png">
</div>
<div class="card border-0 rounded-0 mx-auto" style="max-width:600px;height:20px;background-color:#d9cfc6;margin-top:5px"></div>
<div class="card border-0 rounded-0 mx-auto" style="max-width:600px;height:20px;background-color:#414141;margin-top:5px"></div>
<!-- CONTENT BLOCK -->
<div class="card border-0 rounded-0 mx-auto p-3" style="max-width:600px;min-height:450px;background-color:#f3f5f4;margin-top:5px">
<div class="card border-0 rounded-0 p-4" style="max-width:450px;min-height:100px;background-color:#414141;text-align:right">
<!-- DECORATIVE ICON - change icon if you want -->
<div class="display-1" style="position:absolute;bottom:-25px;right:-20px;z-index:2;color:#d9cfc6"><i class="fas fa-paw-claws fa-"></i></div>
<!-- NAME -->
<h1 style="font-family:serif;color:#eae4cc;font-size:300%;line-height:70%"> your name here .</h1>
<p style="font-family:serif;color:#d9cfc6;font-size:110%;">pro/nouns . language . timezone</p>
<!-- SOCIALS, change, add or remove icons to your liking. Replace links with your socials -->
<span style="letter-spacing:3px;">
<!-- DISCORD - replace the "your id" with your discord id -->
<a href="https://discord.com/users/YOURID" style="color:#f3f5f4;"><i class="fa-brands fa-discord"></i></a>
<!-- TWITTER -->
<a href="https://toyhou.se/LINK_HERE" style="color:#f3f5f4;"><i class="fa-brands fa-twitter"></i></a>
<!-- PINTEREST -->
<a href="https://toyhou.se/LINK_HERE" style="color:#f3f5f4;"><i class="fa-brands fa-pinterest"></i></a>
<!-- TUMBLR -->
<a href="https://toyhou.se/LINK_HERE" style="color:#f3f5f4;"><i class="fa-brands fa-tumblr"></i></a>
<!-- DEVIANTART -->
<a href="https://toyhou.se/LINK_HERE" style="color:#f3f5f4;"><i class="fa-brands fa-deviantart"></i></a>
<!-- CARRD -->
<a href="https://toyhou.se/LINK_HERE" style="color:#f3f5f4;"><i class="fa-solid fa-address-card"></i></a>
</span>
</div>
<!-- TABS -->
<div class="row no-gutters mt-3" style="display: flex; justify-content: flex-end">
<div class="col-md-1 my-3">
<ul class="nav nav-tabs row card-header-tabs">
<li class="col-12 mb-1"><a class="btn btn-block active rounded-0 border-0" style="background:#232323;color:#ffffff;" data-toggle="tab" href="#byidni" ><i class="fa-solid fa-circle-exclamation"></i></a></li>
<li class="col-12 mb-1"><a class="btn bg-faded btn-block border-0 rounded-0" style="background:#414141;color:#ffffff;" data-toggle="tab" href="#info"><i class="fa-solid fa-user"></i></a></li>
<li class="col-12 mb-1"><a class="btn bg-faded btn-block border-0 rounded-0" style="background:#d9cfc6;color:#232323;"data-toggle="tab" href="#tastes"><i class="fa-solid fa-heart"></i></a></li>
<li class="col-12 mb-1"><a class="btn bg-faded btn-block rounded-0 border-0" style="background:#eae4cc;color:#232323;" data-toggle="tab" href="#art"><i class="fa-solid fa-palette"></i></a></li>
</ul>
</div>
<!-- TAB ONE (WARNINGS) -->
<div class="col-md-9" style="font-family:serif;">
<div class="tab-content">
<div class="tab-pane fade active show" id="byidni">
<div class="card p-4 border-0 rounded-0" style="height:280px;background-color:#232323;overflow-y:auto">
<div class="row no-gutters">
<!-- BYI - add, remove, or replace list items to your liking -- box auto scrolls. -->
<div class="col-sm-6 pr-sm-1">
<div class="card border-0 p-2" style="background-color:#414141;color:#eae4cc">
<p style="font-size:120%">before you interact ...</p>
<ul>
<li>Atsushi Nakajima </li>
<li>is a fictional character</li>
<li>in the manga series</li>
<li>Bungo Stray Dogs,</li>
<li>written by Kafka Asagiri and</li>
<li>illustrated by Sango Harukawa.</li>
</ul>
</div>
</div>
<!-- DNI - add, remove, or replace list items to your liking -- box auto scrolls. -->
<div class="col-sm-6 pl-sm-1">
<div class="card border-0 p-2" style="background-color:#d9cfc6;color:#232323">
<p style="font-size:120%">do not interact if ...</p>
<ul>
<li>Atsushi Nakajima </li>
<li>is a fictional character</li>
<li>in the manga series</li>
<li>Bungo Stray Dogs,</li>
<li>written by Kafka Asagiri and</li>
<li>illustrated by Sango Harukawa.</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- ABOUT -->
<div class="tab-pane fade" id="info">
<div class="card p-3 border-0 rounded-0" style="height:280px;background-color:#414141;overflow-y:auto">
<div class="p-2">
<h1 style="color:#eae4cc;font-size:200%">about me<i class="far fa-bookmark pl-1 fa-fw"></i> </h1>
<p style="color:#d9cfc6;font-size:115%"><b>Write about yourself here! </b> <b>bold</b> <i>italic</i> <u>underline</u> <s>strikethrough</s> Atsushi Nakajima (Japanese: 中島 敦, Hepburn: Nakajima Atsushi) is a fictional character in the manga series Bungo Stray Dogs, written by Kafka Asagiri and illustrated by Sango Harukawa. Atsushi also appears in the light novels based on the series and the 2018 film Bungo Stray Dogs: Dead Apple. He is an 18-year-old orphan who was thrown out of an orphanage—an experience that motivates him to find a reason to live. Upon meeting detective Osamu Dazai, Atsushi learns he has a supernatural power called "Beast Beneath the Moonlight" that allows him to turn into a large white tiger with incredible strength, speed, durability, and regenerative capabilities. Despite his lack of confidence, Atsushi has a pure heart and is protective of others, hoping to become a strong person by helping the weak.</p>
</div>
</div>
</div>
<!-- INTERESTS -->
<div class="tab-pane fade" id="tastes">
<div class="card p-3 border-0 rounded-0" style="height:280px;background-color:#d9cfc6;overflow-y:auto">
<div class="p-2">
<h1 style="color:#232323;font-size:250%">interests</h1>
<!-- FANDOMS - replace with fandom names -->
<div class="card border-0 rounded-0 p-2" style="background-color:#232323;"><p style="font-size:115%;color:#f3f5f4"><b>fandoms</b> content fandom content <u>fandom you're most interested in</u> content </p></div>
<!-- LIKES/HOBBIES -->
<div class="card border-0 rounded-0 p-2" style="background-color:#414141;"><p style="font-size:115%;color:#eae4cc;"><b>likes</b> content hobby content like <u>big hobby</u> content like content content hobby like</p></div>
<!-- DISLIKE -->
<div class="card border-0 rounded-0 p-2" style="background-color:#eae4cc;"><p style="font-size:115%;color:#414141;"><b>dislikes</b> content dislike content <u>hate</u> content dislike content dislike</p></div>
<!-- FRIENDS - replace each dummy link with your friends toyhouse, card, or another link to their social (or delete the <a> tags entirely) -->
<div class="card border-0 rounded-0 p-2" style="background-color:#f3f5f4;"><p style="font-size:115%;color:#232323;"><b>friends</b> <a href="https://toyhou.se/LINK_HERE"><u>best friend</u></a> <a href="https://toyhou.se/LINK_HERE">friend</a> <a href="https://toyhou.se/LINK_HERE">friend</a> <a href="https://toyhou.se/LINK_HERE">friend</a> <a href="https://toyhou.se/LINK_HERE">friend</a> <a href="https://toyhou.se/LINK_HERE">friend</a></p></div>
</div>
</div>
</div>
<div class="tab-pane fade" id="art">
<div class="card p-3 border-0 rounded-0" style="height:280px;background-color:#eae4cc;overflow-y:auto;">
<div class="p-2">
<!-- COMMISSION STATUS -->
<div style="font-size:115%;color:#232323">
<div class="justify-content-between"=>
<span><b>commissions</b></span>
<span>open/closed/content</span></div>
<!-- ART TRADE STATUS -->
<div class="justify-content-between"=>
<span><b>art trades</b></span>
<span>open/closed/content</span></div>
<!-- REQUEST STATUS -->
<div class="justify-content-between"=>
<span><b>art requests</b></span>
<span>open/closed/content</span></div>
</div>
<!-- CURRENCY YOU TAKE -->
<div class="mt-2" style="color:#414141">
<div class="justify-content-between" style="font-size:115%">
<span><b>currency</b></span>
<span>currency you take</span></div>
<!-- TERMS OF SERVICE -->
<div class="justify-content-between" style="font-size:115%">
<span><b>terms of service</b></span>
<span><a href="https://toyhou.se/LINK_HERE">link</a></span></div>
<!-- ART EXAMPLES -->
<div class="justify-content-between">
<span><b>art examples</b></span>
<span><a href="https://toyhou.se/LINK_HERE">link</a></span></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- CODE CREDIT - DO NOT REMOVE -->
<a href="https://toyhou.se/24940539.f2u-html-atsushi" class="tooltipster justify-content-center mt-3" title="Code by katerpillarwithagun"> <i class="fa fa-code"></i></a>
