Profile
08 | 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
Custom Colors:
> Card #ddbea9
> Shadows #cb997e
> Accents #ffe8d6
> Misc #b7b7a4 #a5a58d #6b705c (green)
Color Palette from https://coolors.co/cb997e-ddbea9-ffe8d6-b7b7a4-a5a58d-6b705c
-->
<div class="container-fluid text-dark" style="letter-spacing:1px; font-weight:300;">
<div class="row">
<div class="col-md-4">
<i class="fad fa-map-pin fa-3x" style="position:absolute; right:45%; margin-top:-15px; z-index:1; color:#6b705c"></i>
<div class="card border-0 rounded-0 p-3" style="background-color:#ddbea9; transform:rotate(0.5deg)">
<!--Front image-->
<img src="URL HERE" style="border-top: 1px dashed white; box-shadow: 4px 4px #cb997e; transform:rotate(1deg)" class="tooltipster" title="Image by User">
<br>
<!--Character info-->
<blockquote style="font-size:inherit; background: rgba(255, 255, 255, 0.1); border-left: 2px dashed white;">
<span class="bagde badge-pill" style="background-color:#b7b7a4; color:#6b705c">
<i class="fas fa-heart fa-fw" style="text-shadow: 1px 1px #ffe8d6"></i> Name
</span><br>
<span class="bagde badge-pill" style="background-color:#b7b7a4; color:#6b705c">
<i class="fas fa-ruler fa-fw" style="text-shadow: 1px 1px #ffe8d6"></i> Age
</span><br>
<span class="bagde badge-pill" style="background-color:#b7b7a4; color:#6b705c">
<i class="fas fa-venus-mars fa-fw" style="text-shadow: 1px 1px #ffe8d6"></i> Gender
</span><br>
<span class="bagde badge-pill" style="background-color:#b7b7a4; color:#6b705c">
<i class="fas fa-user fa-fw" style="text-shadow: 1px 1px #ffe8d6"></i> Race
</span><br>
<span class="bagde badge-pill" style="background-color:#b7b7a4; color:#6b705c">
<i class="fas fa-pencil fa-fw" style="text-shadow: 1px 1px #ffe8d6"></i> Designer
</span>
</blockquote>
<!--Character Tags-->
<span>
<span class="bagde badge-pill py-1" style="background-color:#b7b7a4; color:#6b705c; font-size:11px;">
<i class="fas fa-hashtag py-1"></i> Character Tag</span>
<span class="bagde badge-pill py-1" style="background-color:#b7b7a4; color:#6b705c; font-size:11px;">
<i class="fas fa-hashtag py-1"></i> Character Tag</span>
</span><br>
<!--Green decor strip-->
<div class="row"><div class="col-12 p-1" style="background-color:#a5a58d;"></div></div><br>
<!--Bio-->
<span class="display-4 py-1" style="font-size:20px; letter-spacing: 3px; font-size:18px">Bio</span>
<!--Bio text-->
<blockquote style="font-size:inherit; background: rgba(255, 255, 255, 0.1); border-left: 2px dashed white;">
<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.</p>
</blockquote>
<!--Color palette-->
<div class="row m-1 shadow-sm">
<div class="col-2 p-1" style="background-color:#cb997e"></div>
<div class="col-2 p-1" style="background-color:#ddbea9"></div>
<div class="col-2 p-1" style="background-color:#ffe8d6"></div>
<div class="col-2 p-1" style="background-color:#b7b7a4"></div>
<div class="col-2 p-1" style="background-color:#a5a58d"></div>
<div class="col-2 p-1" style="background-color:#6b705c"></div>
</div><br>
<!--Image-->
<div class="card rounded-0 border-0 p-1 py-3 bg-light" style="transform: rotate(3deg); box-shadow: 4px 4px #cb997e">
<img src="URL HERE" class="tooltipster" title="Image by User">
</div>
</div></div>
<!--
Column Box 2
-->
<div class="col-md-8">
<i class="fas fa-bookmark fa-3x" style="transform:rotate(180deg); margin-left:25px; color:#6b705c;"></i>
<div class="card border-0 rounded-0 p-3 shadow-sm" style="background-color:#ddbea9; margin-top:-5px">
<!--Decor strip-->
<div style="background:url(URL HERE); height:10px; background-attachment:fixed; background-size: repeat; opacity:0.5"></div>
<!--Story-->
<span style="border-bottom: 1px solid #6b705c; letter-spacing: 3px; font-size:18px" class="my-2">
<i class="fas fa-books" style="text-shadow: 2px 2px #ffe8d6"></i> Story</span>
<!--Story text-->
<blockquote style="font-size:inherit; background: rgba(255, 255, 255, 0.1); border-left: 2px dashed white;">
<i class="fal fa-paperclip fa-3x" style="position:absolute; z-index:1; right:15%; top: 8%; opacity:0.3; text-shadow: 2px 2px #ffe8d6"></i>
<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>
<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>
<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>
</blockquote>
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<!--Trivia-->
<span style="border-bottom: 1px solid #6b705c; letter-spacing: 3px; font-size:18px; margin-left: -12px">
<i class="fas fa-map-marker-question" style="text-shadow: 2px 2px #ffe8d6"></i> Trivia</span>
<!--Trivia text-->
<blockquote style="font-size:inherit; background: rgba(255, 255, 255, 0.1); border-left: 0px; border-right: 2px dashed white; margin-left: -12px">
<span><i class="fas fa-thumbtack"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span><br>
<span><i class="fas fa-thumbtack"></i> Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</span><br>
<span><i class="fas fa-thumbtack"></i> Donec accumsan tempor lacus, et venenatis elit feugiat non.</span><br>
<span><i class="fas fa-thumbtack"></i> Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros.</span><br>
<span><i class="fas fa-thumbtack"></i> Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</span><br>
</blockquote>
</div>
<!--Image-->
<div class="col-md-6">
<div class="card rounded-0 border-0 p-1 py-3 bg-light" style="transform: rotate(1deg); box-shadow: 4px 4px #cb997e">
<img src="URL HERE" class="tooltipster" title="Image by User">
</div>
</div></div></div>
<hr style="width:100%">
<!--Timeline
> Dates won't appear on mobile
-->
<div class="row">
<div class="col-md-1 font-weight-bold hidden-sm-down" style="margin-top:8px">
XXXX<br><br>
XXXX<br>
XXXX<br><br>
XXXX
</div>
<!--Events text-->
<div class="col-md-11">
<blockquote style="font-size:inherit; background: rgba(255, 255, 255, 0.1); border-left: 2px solid white;">
<i class="fas fa-map-marker-alt" style="margin-left:-22.5px"></i> <span class="mx-2 font-weight-bold">Event</span>- Lorem ipsum dolor sit amet, consectetur adipiscing elit<br><br>
<i class="fas fa-map-marker-alt" style="margin-left:-22.5px"></i> <span class="mx-2 font-weight-bold">Event</span>- Duis sollicitudin elit sed tellus blandit viverra sed eget odio<br>
<i class="fas fa-map-marker-alt" style="margin-left:-22.5px"></i> <span class="mx-2 font-weight-bold">Event</span>- Donec accumsan tempor lacus, et venenatis elit feugiat non<br><br>
<i class="fas fa-map-marker-alt" style="margin-left:-22.5px"></i> <span class="mx-2 font-weight-bold">Event</span>- Duis porta eros et velit blandit dapibus
</blockquote>
</div></div>
<!--Decor strip-->
<div style="background:url(URL HERE); height:10px; background-attachment:fixed; background-size: repeat; opacity:0.5"></div>
</div>
<span style="float:right;">
<!--Code credits (do not remove)-->
<a class="btn btn-default border-0 tooltipster" href="https://toyhou.se/ano_2/characters/folder:2215267" style="background-color:#a5a58d; color:white; border-radius: 0px 0px 10px 10px" title="Code by ano_">
<i class="fal fa-code"></i></a>
<!--Images credits-->
<a class="btn btn-default border-0 tooltipster" href="https://stock.adobe.com/" style="background-color:#a5a58d; color:white; border-radius: 0px 0px 10px 10px" title="Images from Adobe Stock">
<i class="fal fa-image"></i></a>
</span>
</div></div></div>