Profile
07 | F2U Code
code by ano_
thanks for using my code!
- You may not remove the credit however you may move it around and edit it
- You may edit and modify the code however you'd like
- You may use my codes as templates but it must be F2U and you must include credits (unless you heavily edited it)
- Please do not redistribute the code as your own
- Please consider bumping/ commenting on my coding thread or just favoriting any codes you use!
- Full Term of Service here
<!--Tip:
Ctrl+F to find keywords;
URL HERE is for images
# is for links
-->
<div class="card rounded-0 p-2 shadow-sm">
<div class="text-white p-1 shadow-sm" style="font-size:20px; word-spacing:2px; background-color:#99abb4">
<!--Character Name-->
<i class="far fa-heart p-1"></i>Name
<!--Info Button
>> Don't remove this since it's where I put my code credits;
if you do want to delete it however, please make sure to
credit me somewhere else on this code!
-->
<a data-toggle="collapse" href="#info" style="color:inherit">
<i class="fal fa-info-circle p-3 tooltipster" style="position:absolute; top:0; right:0" title="Character Info"></i>
</a>
<!--Info Box-->
<div id="info" class="collapse fade" style="position:absolute; top:0; right:0">
<div class="card rounded-0 p-2 text-muted border-top-0 border-right-0" style="z-index:1; opacity:0.8">
<a data-toggle="collapse" href="#info" style="color:inherit; text-decoration:none; position:absolute; top:0; right:0">
<i class="fal fa-times p-3" style="margin-right: 3px; margin-top: -1px"></i>
</a>
<!--Info Content-->
<blockquote class="bg-faded" style="font-size:inherit;">
<div class="col-12" style="font-size:14px; margin-left: -20px; white-space:nowrap;">
Designer: @user<br>
Value: $XXX<br>
<span class="badge tooltipster" style="background-color:#99abb4" title="Badge Name">Badge Name</span>
</div>
</blockquote>
<!--Credit (Do not remove)-->
<div class="container-fluid text-center" style="margin-top: -20px;">
<div class="row no-gutters">
<div class="col-md-5"><hr style="max-width:75%" class="hidden-sm-down"></div>
<div class="col-md-2 text-center">
<a href="https://toyhou.se/ano_2/characters" style="color:inherit; margin-top: -20px; font-size:14px" class="text-muted tooltipster text-center" title="Code by ano_"><i class="fal fa-code"></i></a>
</div>
<div class="col-md-5"><hr style="max-width:75%" class="hidden-sm-down"></div>
</div></div>
</div></div>
</div>
<div class="container-fluid p-1">
<div class="row no-gutters">
<!--Image Carousel-->
<div class="col-md-3">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" style="width:250px; height:250px">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<!--Image 1-->
<div class="carousel-item active">
<img class="img-thumbnail tooltipster my-2 rounded-0 border-0 shadow-sm" src="URL HERE" style="width:250px; height:250px;" title="Image by User"></div>
<!--Image 2-->
<div class="carousel-item">
<img class="img-thumbnail tooltipster my-2 rounded-0 border-0 shadow-sm" src="URL HERE" style="width:250px; height:250px" title="Image by User 2"></div>
<!--Image 3-->
<div class="carousel-item">
<img class="img-thumbnail tooltipster my-2 rounded-0 border-0 shadow-sm" src="URL HERE" style="width:250px; height:250px" title="Image by User 3"></div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" data-slide="prev">
<i class="fal fa-angle-left fa-3x"></i></a>
<a class="carousel-control-next" href="#carouselExampleIndicators" data-slide="next">
<i class="fal fa-angle-right fa-3x pull-right"></i></a>
</div>
</div>
<!--Tabs-->
<div class="col-md-2">
<blockquote style="font-size:inherit; margin-left: -5px; margin-top: 20px;">
<ul class="nav flex-column bg-faded shadow-sm" style="margin-left: -10px;">
<li class="nav-item py-2">
<a class="nav-link active btn btn-default rounded-0 border-0" data-toggle="tab" href="#TAB-1" style="font-weight:lighter; text-transform: lowercase">About</a>
</li>
<li class="nav-item py-2">
<a class="nav-link btn btn-default rounded-0 border-0" data-toggle="tab" href="#TAB-2" style="font-weight:lighter; text-transform: lowercase">Personality</a>
</li>
<li class="nav-item py-2">
<a class="nav-link btn btn-default rounded-0 border-0" data-toggle="tab" href="#TAB-3" style="font-weight:lighter; text-transform: lowercase">Story</a>
</li>
<li class="nav-item py-2">
<a class="nav-link btn btn-default rounded-0 border-0" data-toggle="tab" href="#TAB-4" style="font-weight:lighter; text-transform: lowercase">Links</a>
</li>
</ul>
</blockquote>
</div>
<div class="col-md-7 p-3">
<div class="tab-content" style="height:234px; overflow-x:hidden; overflow-y:auto;">
<!--
TAB 1 (Info)
-->
<div class="tab-pane fade show active" id="TAB-1">
<!--Title-->
<div class="text-center p-2">
<span style="letter-spacing:2px; text-transform: lowercase; text-align:center; border-bottom: 3px solid; border-color:#D3D3D3; font-weight:lighter">
<i class="fal fa-user-circle" style="font-size:1.2em"></i> About
<br></span></div>
<!--Info-->
<blockquote class="bg-faded" style="font-size:inherit;">
<span style="font-weight:lighter">n</span>ame: ---
<br>
<span style="font-weight:lighter">g</span>ender: ---
<br>
<span style="font-weight:lighter">a</span>ge: ---
<br>
<span style="font-weight:lighter">h</span>eight: ---
<br>
<span style="font-weight:lighter">o</span>ccupation: ---
</blockquote>
<hr>
<!--Quick Bio-->
<p style="text-indent:20px">Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<br>
<!--Quote-->
<i><blockquote class="text-muted bg-faded" style="font-size:inherit;">
<i class="fal fa-quote-left"></i>
<sup>Insert a character quote here...There won't be a 2nd place if there's no competition //hides knife~//</sup>
<i class="fal fa-quote-right"></i>
</blockquote></i></div>
<!--
TAB 2 (Personality)
-->
<div class="tab-pane fade" id="TAB-2">
<!--Title-->
<div class="text-center p-2">
<span style="letter-spacing:2px; text-transform: lowercase; text-align:center; border-bottom: 3px solid; border-color:#D3D3D3; font-weight:lighter">
<i class="fal fa-ribbon" style="font-size:1.2em"></i> Personality
<br></span></div>
<!--Personality Info-->
<p style="text-indent:20px">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 class="container-fluid p-1">
<div class="row">
<!--Likes-->
<div class="col-sm-6">
<span style="border-bottom: 1px solid; border-color:#D3D3D3; letter-spacing:1px">
<i class="fal fa-heart"></i> Likes</span>
<ul type="square">
<li>Add Likes</li>
<li>Add Likes</li>
<li>Add Likes</li>
</ul></div>
<!--Dislikes-->
<div class="col-sm-6">
<span style="border-bottom: 1px solid; border-color:#D3D3D3; letter-spacing:1px">
<i class="fal fa-heart-broken"></i> Dislikes</span>
<ul type="square">
<li>Add dislikes</li>
<li>Add dislikes</li>
<li>Add dislikes</li>
</ul></div>
</div></div>
<!--Stats Title-->
<blockquote class="bg-faded" style="font-size:inherit;">
<div class="text-center"><span style="border-bottom: 1px solid; border-color:#D3D3D3; letter-spacing:1px">
<i class="fal fa-seedling"></i> Stats</span>
</div>
<!--Stats Info
>> Change the fal to fas to fill in the circles stats
-->
<div class="container-fluid p-1" style="white-space:nowrap">
<div class="row">
<div class="col-6">
<i class="fal fa-swords p-1 shadow-sm"></i> Strength</div>
<div class="col-6 text-right">
<i class="fas fa-circle"></i>
<i class="fas fa-circle"></i>
<i class="fas fa-circle"></i>
<i class="fal fa-circle"></i>
<i class="fal fa-circle"></i>
</div>
<div class="col-6">
<i class="fal fa-brain p-1 shadow-sm"></i> Intelligence</div>
<div class="col-6 text-right">
<i class="fas fa-circle"></i>
<i class="fas fa-circle"></i>
<i class="fas fa-circle"></i>
<i class="fal fa-circle"></i>
<i class="fal fa-circle"></i>
</div>
<div class="col-6">
<i class="fal fa-wind p-1 shadow-sm"></i> Speed</div>
<div class="col-6 text-right">
<i class="fas fa-circle"></i>
<i class="fas fa-circle"></i>
<i class="fas fa-circle"></i>
<i class="fal fa-circle"></i>
<i class="fal fa-circle"></i>
</div>
<div class="col-6">
<i class="fal fa-sparkles p-1 shadow-sm"></i> Magic</div>
<div class="col-6 text-right">
<i class="fas fa-circle"></i>
<i class="fas fa-circle"></i>
<i class="fas fa-circle"></i>
<i class="fal fa-circle"></i>
<i class="fal fa-circle"></i>
</div>
</div></div>
</blockquote>
</div>
<!--TAB 3 (Story)-->
<div class="tab-pane fade" id="TAB-3">
<!--Title-->
<div class="text-center p-2">
<span style="letter-spacing:2px; text-transform: lowercase; text-align:center; border-bottom: 3px solid; border-color:#D3D3D3; font-weight:lighter">
<i class="fal fa-books" style="font-size:1.2em"></i> Story
<br></span></div>
<!--Subheader-->
<span style="border-bottom: 1px solid; border-color:#D3D3D3; letter-spacing:1px">
<i class="fal fa-bookmark"></i> Subheader</span>
<p style="text-indent:20px">Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. You can also <span class="tooltipster" style="border-bottom: 1px dotted; border-color:#D3D3D3;" title="you found the secret message :D">underline</span> words that need a definition; hover over the text to see the hidden message</p>
<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>
<hr style="width:100px">
<!--History-->
<span style="border-bottom: 1px solid; border-color:#D3D3D3; letter-spacing:1px">
<i class="fal fa-bookmark"></i> History</span>
<p style="text-indent:20px">Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<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><br>
<!--Timeline-->
<blockquote class="text-muted" style="font-size:inherit; font-weight:lighter">
<ul type="circle">
<li>XXXX: Historic Event</li>
<li>XXXX: Historic Event</li>
<li>XXXX: Historic Event</li>
<li>XXXX: Historic Event</li>
</ul></blockquote></div>
<!--TAB 4 (Links)-->
<div class="tab-pane fade" id="TAB-4">
<!--Title-->
<div class="text-center p-2">
<span style="letter-spacing:2px; text-transform: lowercase; text-align:center; border-bottom: 3px solid; border-color:#D3D3D3; font-weight:lighter">
<i class="fal fa-link" style="font-size:1.2em"></i> Links
<br></span></div>
<div class="container-fluid p-1">
<div class="row no-gutters">
<!--Friend 1-->
<a href="#" style="text-decoration:none; color:inherit">
<div class="col-6">
<img src="URL HERE"; style="border-radius:50%; width:100px; height:100px" class="img-thumbnail tooltipster m-2" title="Image by User"><br>
<i class="fal fa-user-alt"></i>
<span style="border-bottom: 1px solid; border-color:#D3D3D3;"> Character Name</span><br>
<blockquote class="text-muted bg-faded m-1" style="font-size:inherit; margin-top: 5px">
Character relation and small description; text box will not scroll
</blockquote></div></a>
<!--Friend 2-->
<a href="#" style="text-decoration:none; color:inherit">
<div class="col-6">
<img src="URL HERE"; style="border-radius:50%; width:100px; height:100px" class="img-thumbnail tooltipster m-2" title="Image by User"><br>
<i class="fal fa-user-alt"></i>
<span style="border-bottom: 1px solid; border-color:#D3D3D3;"> Character Name</span><br>
<blockquote class="text-muted bg-faded m-1" style="font-size:inherit; margin-top: 5px">
Character relation and small description; text box will not scroll
</blockquote></div></a>
</div></div></div>
</div></div></div></div></div>
Recent Images
No images.