Profile
<!---
magby things ! non-wysiwyg please
--- 6/9/22
i recommend using Circlejourney's TH editor!
--- https://th.circlejourney.net/
---------------------
colors:
GLOW EFFECT COLOR:
-- #ea4830
TEXT/ACCENTS:
accent (originally red text + accent boxes)
-- #b91619
secondary accent
-- #e4c401
BOXES:
left box
-- #1f1813
right box
-- #1f1813
--->
<!--- glowy effect -- feel free to remove --->
<div style="text-shadow: 0px 0px 7px #ea4830">
<!--- pagedoll -- if you don't want it, remove this section
to make it a link, add <a href="link_here"> at the beginning and put </a> before the <--- end pagedoll ---/ line --->
<div class="hidden-sm-down fixed-bottom m-4" style="left: inherit;">
<img src="https://media-cerulean.cursecdn.com/avatars/thumbnails/320/47/215/199/240.png" style="width:300px;">
</div>
<!--- end pagedoll --->
<!--- font-awesome icons --->
<div class="hidden-sm-down" style="z-index:999">
<!--- profile picture --->
<i class="fad fa-fire fa-2x" style="position:absolute; top:10px; left:90px; color:#b91619; font-size:60px"></i>
<!--- fire --->
<i class="far fa-fire fa-2x" style="position:absolute; top:165px; left:480px; color:#b91619; font-size:100px"></i>
<i class="far fa-fire fa-2x" style="position:absolute; top:840px; left:1600px; color:#b91619; font-size:40px"></i>
</div>
<!--- end fa icons --->
<div class="container">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="background-color: #b91619; border-width:0px">
</div>
<!---body--->
<div class="p-1" style="background:#1f1813">
<div class="card border-0 p-1">
<div class="row no-gutters">
<!---picture/info--left--->
<div class="container border-0 col-md-3" style="height:600px;overflow:auto; background:#1f1813">
<!--- divider --->
<div>
<hr class="m-1" style="background:#b91619">
<hr class="m-1" style="background:#b91619">
</div>
<!-------------->
<div class="card border-0" style="height:300px">
<div class="card col-12 mx-auto border-0"
style="border-radius:0px; border:2px solid #b91619;
background:url(https://th.bing.com/th/id/OIP.adkPs5IPOF4Q-1LpGVHPVQAAAA?pid=ImgDet&rs=1); background-size:cover;
background-position:center; background-repeat:no-repeat;">
</div><hr class="m-1" style="background:#b91619">
</div>
<p class="my-2" style="color:#b91619; text-align:center">
<span style="font-size:20px">
name/title/header
</span><br>
<i>
info . info . info
</i></p>
<!--- tooltip info icons
if you make the icons smaller, im sure you could fit more inside --->
<div class="card col-10 mx-auto mb-3" style="height:70px;border: 5px solid #1f1813; border-radius:60px">
<div class="container mt-3" style="letter-spacing:9px; color:#e4c401">
<p style="text-align:center">
<!--- price notice
-- change "square-dollar" to "square-xmark" for NFS/NFT
-- "square-star" or "square-pen" for trade/art
-- these are just suggestions, though ^^ set it to what you want
--->
<span data-toggle="tooltip" title="Price or Trades/Art Only or NFS/NFT">
<i class="fa-solid fa-square-dollar fa-2x"></i>
</span>
<!--- status
-- there's a lot of good FA Icons to pick from for these.
some of my favorites:
house-circle-check
house-circle-exclamation
house-chimney-crack
house-chimney-heart
house-night (i like to use this for FH hehe)
---->
<span data-toggle="tooltip" title="Forever-Homed or Tentative or For Sale">
<i class="fa-solid fa-house-circle-xmark fa-2x"></i>
</span>
<!--- rp status
-- change to any standard "no" FA icon or just leave as is
there are also more dice varieties available
-dice
-dice-(one-8)
-d4
-d6
-d8
-d10
-d12
-d20 (the default setting here)
--->
<span data-toggle="tooltip" title="(Not) Available for RP">
<i class="fa-light fa-dice-d20 fa-2x"></i>
</span>
</p>
</div>
</div>
<!--- small text box --->
<div class="card border-0 m-2 p-2" style="background:#1f1813">
<div class="card border-0 rounded-0 p-2" style="border-radius:10px;max-height: 160px;">
<p>A box for the shortest of summaries, best for short phrases or lyrics. It will not scroll. The text that is in this box is about the maximum amount that this box can support, and no more.</p>
</div>
</div>
<!--- divider --->
<div>
<hr class="m-1" style="background:#b91619">
<hr class="m-1" style="background:#b91619">
</div>
<!-------------->
<div class="container">
<!--- info section
-------
all text here is lowercase. to fix it, you can
either remove lowercase, change lowercase to uppercase,
or alternate between lower and uppercase.
---
also, keep these short! they only have so much room!
--->
<p style="text-align:left; font-size:20px; color:#e4c401">
<i class="fa-light fa-id-card my-2"></i> INFO
</p>
<!-- 1 -->
<div class="d-flex justify-content-between" style="color:#e4c401">
<span class="w-25 text-right text-lowercase">name</span> <hr style="width:50px; background:#b91619">
<span class="w-25 text-left text-lowercase">content</span>
</div>
<!-- 2 -->
<div class="d-flex justify-content-between" style="color:#e4c401">
<span class="w-25 text-right text-lowercase">nickname</span> <hr style="width:50px; background:#b91619">
<span class="w-25 text-left text-lowercase">content</span>
</div>
<!-- 3 -->
<div class="d-flex justify-content-between" style="color:#e4c401">
<span class="w-25 text-right text-lowercase">age</span> <hr style="width:50px; background:#b91619">
<span class="w-25 text-left text-lowercase">content</span>
</div>
<!-- 4 -->
<div class="d-flex justify-content-between" style="color:#e4c401">
<span class="w-25 text-right text-lowercase">species/race <!-- remove one or the other here for brevity --></span> <hr style="width:50px; background:#b91619">
<span class="w-25 text-left text-lowercase">content</span>
</div>
<!-- 5 -->
<div class="d-flex justify-content-between" style="color:#e4c401">
<span class="w-25 text-right text-lowercase">gender</span> <hr style="width:50px; background:#b91619">
<span class="w-25 text-left text-lowercase">content</span>
</div>
<!-- 6 -->
<div class="d-flex justify-content-between" style="color:#e4c401">
<span class="w-25 text-right text-lowercase">pronouns</span> <hr style="width:50px; background:#b91619">
<span class="w-25 text-left text-lowercase">content</span>
</div>
<!-- 7 -->
<div class="d-flex justify-content-between" style="color:#e4c401">
<span class="w-25 text-right text-lowercase">sexuality</span> <hr style="width:50px; background:#b91619">
<span class="w-25 text-left text-lowercase">content</span>
</div>
<!-- 8 -->
<div class="d-flex justify-content-between" style="color:#e4c401">
<span class="w-25 text-right text-lowercase">role/job</span> <hr style="width:50px; background:#b91619">
<span class="w-25 text-left text-lowercase">content</span>
</div>
<!--- end info section -- copy/paste more above this line --->
</div>
<!--- divider --->
<div>
<hr class="m-1" style="background:#b91619">
<hr class="m-1" style="background:#b91619">
</div>
<!-------------->
<!--- playlist -- feel free to remove/replace this section entirely!--->
<div class="container">
<p style="text-align:left; font-size:20px; color:#e4c401">
<i class="fa-light fa-list-music my-2"></i> THEME
</p>
<!-- 1 -->
<a target="_BLANK" class="text-muted">
<!--- change xj5PMy3xGXY to the video id from any youtube video -- double click it in the code to go to the youtube video --->
<iframe src="https://www.youtube.com/embed/xj5PMy3xGXY" style="position:absolute; top: 0; bottom:0; left:0; right:0; opacity:.001" class="h-100 w-100" frameborder="0"></iframe>
<div class="d-flex justify-content-between" style="color:#e4c401">
<i class="fa-solid fa-music w-25 m-2 text-left"></i>
<span style="text-size:30px">
Artist - Song
</p></div></a>
</div>
<!--- divider --->
<div>
<hr class="m-1" style="background:#b91619">
<hr class="m-1" style="background:#b91619">
</div>
<!-------------->
</div>
<!---left card--->
<div class="card col-md-9 border-0" style="height:600px;overflow:auto;border-radius:0px; background:#1f1813">
<!--- top deco --->
<div class="card col-12 mx-auto border-0" style="border-radius:0px;max-height:30px;
background:url(https://images.unsplash.com/photo-1507471509451-1d04d60f896d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80);background-size:cover;
background-position:center; background-repeat:no-repeat;">
</div>
<!--------------->
<div class="container p-1 row no-gutters">
<div class="container my-2">
<!--- progress bar info --->
<a href="#topcollapse" data-toggle="collapse">
<div class="btn btn-outline-warning col-12 mb-3" style=""> Info Bars
</div></a>
<div id="topcollapse" class="collapse">
<div class="container">
<!------ start progress bar ------>
<div class="px-1 col-lg-12 col-sm-6">
<!--- STAT NAME --->
<div class="d-flex justify-content-between">
<p style="text-align: left;"><span style="color:#dee0ea">
Introverted
</span></p>
<p style="text-align: right;"><span style="color:#dee0ea">
Extroverted
</span></p>
</div>
<!----------------->
<div class="card border-0" style="border-radius:60px ;height: 7px; width:100%">
<div class="progress-bar my-0 rounded-0 progress-bar-striped progress-bar-animated" style="height: 7px;
width:10%;
background-color:#b91619;border-radius:60px ">
</div>
</div>
</div>
<!------- end progress bar ------>
<!------ start progress bar ------>
<div class="px-1 col-lg-12 col-sm-6">
<!--- STAT NAME --->
<div class="d-flex justify-content-between">
<p style="text-align: left;"><span style="color:#dee0ea">
Friendly
</span></p>
<p style="text-align: right;"><span style="color:#dee0ea">
Cold
</span></p>
</div>
<!----------------->
<div class="card border-0" style="border-radius:60px ;height: 7px; width:100%">
<div class="progress-bar my-0 rounded-0 progress-bar-striped progress-bar-animated" style="height: 7px;
width:10%;
background-color:#b91619;border-radius:60px ">
</div>
</div>
</div>
<!------- end progress bar ------>
<!------ start progress bar ------>
<div class="px-1 col-lg-12 col-sm-6">
<!--- STAT NAME --->
<div class="d-flex justify-content-between">
<p style="text-align: left;"><span style="color:#dee0ea">
Honest
</span></p>
<p style="text-align: right;"><span style="color:#dee0ea">
Dishonest
</span></p>
</div>
<!----------------->
<div class="card border-0" style="border-radius:60px ;height: 7px; width:100%">
<div class="progress-bar my-0 rounded-0 progress-bar-striped progress-bar-animated" style="height: 7px;
width:10%;
background-color:#b91619;border-radius:60px ">
</div>
</div>
</div>
<!------- end progress bar ------>
<!------ start progress bar ------>
<div class="px-1 col-lg-12 col-sm-6">
<!--- STAT NAME --->
<div class="d-flex justify-content-between">
<p style="text-align: left;"><span style="color:#dee0ea">
Kind
</span></p>
<p style="text-align: right;"><span style="color:#dee0ea">
Evil
</span></p>
</div>
<!----------------->
<div class="card border-0" style="border-radius:60px ;height: 7px; width:100%">
<div class="progress-bar my-0 rounded-0 progress-bar-striped progress-bar-animated" style="height: 7px;
width:10%;
background-color:#b91619;border-radius:60px ">
</div>
</div>
</div>
<!------- end progress bar ------>
<!------ start progress bar ------>
<div class="px-1 col-lg-12 col-sm-6">
<!--- STAT NAME --->
<div class="d-flex justify-content-between">
<p style="text-align: left;"><span style="color:#dee0ea">
Polite
</span></p>
<p style="text-align: right;"><span style="color:#dee0ea">
Blunt
</span></p>
</div>
<!----------------->
<div class="card border-0" style="border-radius:60px ;height: 7px; width:100%">
<div class="progress-bar my-0 rounded-0 progress-bar-striped progress-bar-animated" style="height: 7px;
width:10%;
background-color:#b91619;border-radius:60px ">
</div>
</div>
</div>
<!------- end progress bar ------>
<!------ start progress bar ------>
<div class="px-1 col-lg-12 col-sm-6">
<!--- STAT NAME --->
<div class="d-flex justify-content-between">
<p style="text-align: left;"><span style="color:#dee0ea">
Timid
</span></p>
<p style="text-align: right;"><span style="color:#dee0ea">
Bold
</span></p>
</div>
<!----------------->
<div class="card border-0 mb-4" style="border-radius:60px ;height: 7px; width:100%">
<div class="progress-bar my-0 rounded-0 progress-bar-striped progress-bar-animated" style="height: 7px;
width:10%;
background-color:#b91619;border-radius:60px ">
</div>
</div>
</div>
<!------- end progress bar ------>
<!--- end progress bar info -- add more above here--->
</div>
</div>
<!--- story section --->
<h3 style="color:#e4c401"> <i class="far fa-bookmark"></i> Story </h3>
<hr class="m-1" style="background:#e4c401">
<div class="container text-light" style="max-height:100px;overflow:auto">
<p>
The section for backstory or general info. It will scroll to infinity, so you can write as much as you want. <br> 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 class="m-2" style="background:#b91619"> <!--- add more of these lines by pasting above text --->
<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.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>
<!--- end story section --->
<!--- Aesthetics --- to add more, just copy and paste as many of these lines as needed below the line underneath this section --->
<div class="container my-4">
<div class="row" style="height:15px;">
<span class="badge badge-pill bg-warning mx-auto" style="max-width:100px;">this</span>
<!--- ( ^ this is one line btw) --->
<span class="badge badge-pill bg-warning mx-auto" style="max-width:100px;">will</span>
<span class="badge badge-pill bg-warning mx-auto" style="max-width:100px;">not</span>
<span class="badge badge-pill bg-warning mx-auto" style="max-width:100px;">scroll</span>
<span class="badge badge-pill bg-warning mx-auto" style="max-width:100px;">it</span>
<span class="badge badge-pill bg-warning mx-auto" style="max-width:100px;">will</span>
<span class="badge badge-pill bg-warning mx-auto" style="max-width:100px;">expand</span>
</div>
<!--- add more above this line --->
</div>
<!------>
<hr class="my-1" style="background:#b91619">
<!--- design info --->
<!--- color palette
-- add "text-dark" (for light colors) or "text-light" (for dark colors) --->
<div class="row no-gutters">
<div class="container p-1 col-2 text-light"
style="border-top-left-radius:5px;border-bottom-left-radius:5px;
background:#b91619">
<p class="hidden-sm-down">
#b91619
</p>
</div>
<!--- to add or delete colors please do it below this line --->
<div class="container p-1 col-2 text-dark"
style="background:#e4c401">
<p class="hidden-sm-down">
#e4c401
</p>
</div>
<div class="container p-1 col-2 text-dark"
style="background:#f1e9e6">
<p class="hidden-sm-down">
#f1e9e6
</p>
</div>
<div class="container p-1 col-2 text-light"
style="background:#0c0402">
<p class="hidden-sm-down">
#0c0402
</p>
</div>
<div class="container p-1 col-2 text-light"
style="background:#67150e">
<p class="hidden-sm-down">
#67150e
</p>
</div>
<!--- to add or delete colors please do it above this line --->
<div class="container p-1 col-2 text-light"
style="border-top-right-radius:5px;border-bottom-right-radius:5px;
background:#e29fb3">
<p class="hidden-sm-down">
#e29fb3
</p>
</div>
<!--- end color palette --->
</div>
<!--- info --->
<div class="row no-gutters my-3">
<div class="container col-md-6">
<!-- 1 -->
<div class="d-flex justify-content-between" style="color:#e4c401">
<span class="w-25 text-right text-lowercase">height</span> <hr style="width:50px; background:#b91619">
<span class="w-25 text-left text-lowercase">content</span>
</div>
<!-- 1 -->
<div class="d-flex justify-content-between" style="color:#e4c401">
<span class="w-25 text-right text-lowercase">weight</span> <hr style="width:50px; background:#b91619">
<span class="w-25 text-left text-lowercase">content</span>
</div>
<!-- 1 -->
<div class="d-flex justify-content-between" style="color:#e4c401">
<span class="w-25 text-right text-lowercase">build</span> <hr style="width:50px; background:#b91619">
<span class="w-25 text-left text-lowercase">content</span>
</div>
<!-- 1 -->
<div class="d-flex justify-content-between" style="color:#e4c401">
<span class="w-25 text-right text-lowercase">eye color</span> <hr style="width:50px; background:#b91619">
<span class="w-25 text-left text-lowercase">content</span>
</div>
<!-- 1 -->
<div class="d-flex justify-content-between" style="color:#e4c401">
<span class="w-25 text-right text-lowercase">hair color</span> <hr style="width:50px; background:#b91619">
<span class="w-25 text-left text-lowercase">content</span>
</div>
<!-- 1 -->
<div class="d-flex justify-content-between" style="color:#e4c401">
<span class="w-25 text-right text-lowercase">extra</span> <hr style="width:50px; background:#b91619">
<span class="w-25 text-left text-lowercase">content</span>
</div>
<!-- 1 -->
<div class="d-flex justify-content-between" style="color:#e4c401">
<span class="w-25 text-right text-lowercase">extra</span> <hr style="width:50px; background:#b91619">
<span class="w-25 text-left text-lowercase">content</span>
</div>
</div>
<!--- picture --->
<div class="col-md-6">
<div class="card mx-auto border-0"
style="border-radius:0px; height:230px;
background:url(https://4.bp.blogspot.com/-thr_7yvoWZg/VhGamT1WUWI/AAAAAAAAgWg/I0yLeIdBCdo/s1600/Magby-81111.gif); background-size:cover;
background-position:center; background-repeat:no-repeat;">
</div>
</div>
</div>
<!--- end design info --->
<!--- likes + dislikes --->
<div class="row no-gutters mx-5">
<!--- likes --->
<div class="container col-6">
<p style="font-size: 20px; text-align:left; color:#b91619">
Likes
</p>
<ul class="list-unstyled">
<li><i class="fa-solid fa-hexagon-check"></i><b style="color:#e4c401"> LIKE </b></li>
<li><i class="fa-solid fa-hexagon-check"></i><b style="color:#e4c401"> LIKE </b></li>
<li><i class="fa-solid fa-hexagon-check"></i><b style="color:#e4c401"> LIKE </b></li>
<li><i class="fa-solid fa-hexagon-check"></i><b style="color:#e4c401"> LIKE </b></li>
<li><i class="fa-solid fa-hexagon-check"></i><b style="color:#e4c401"> LIKE </b></li>
</ul>
</div>
<!--- dislikes --->
<div class="container p-1 col-6">
<p style="font-size: 20px; text-align:left; color:#b91619">
Dislikes
</p>
<ul class="list-unstyled">
<li><i class="fa-solid fa-hexagon-xmark"></i><b style="color:#e4c401"> DISLIKE </b></li>
<li><i class="fa-solid fa-hexagon-xmark"></i><b style="color:#e4c401"> DISLIKE </b></li>
<li><i class="fa-solid fa-hexagon-xmark"></i><b style="color:#e4c401"> DISLIKE </b></li>
<li><i class="fa-solid fa-hexagon-xmark"></i><b style="color:#e4c401"> DISLIKE </b></li>
<li><i class="fa-solid fa-hexagon-xmark"></i><b style="color:#e4c401"> DISLIKE </b></li>
</ul>
</div>
</div>
<!--- end likes + dislikes --->
<hr class="my-4" style="background:#b91619">
<!--- relations/friends --->
<div class="row no-gutters">
<!-- 1 -->
<div class="rounded card m-3 progress-bar-striped progress-bar-animated mx-auto" style="width:150;height:150px;border-radius:100px;background-color: #b91619">
<a href="LINK_HERE" data-toggle="tooltip" title="NAME | RELATION">
<img src="https://th.bing.com/th/id/R.4a7001acf248a7a7db56855b2591cab6?rik=ZNQVbVncarS3Kg&pid=ImgRaw&r=0" class="btn btn-outline-warning p-2 rounded-circle" style="width:150px;height:150px; overflow-auto"></a>
</div>
<!-- 2 -->
<div class="rounded card m-3 progress-bar-striped progress-bar-animated mx-auto" style="width:150;height:150px;border-radius:100px;background-color: #b91619">
<a href="LINK_HERE" data-toggle="tooltip" title="NAME | RELATION">
<img src="https://th.bing.com/th/id/R.4a7001acf248a7a7db56855b2591cab6?rik=ZNQVbVncarS3Kg&pid=ImgRaw&r=0" class="btn btn-outline-warning p-2 rounded-circle" style="width:150px;height:150px"></a>
</div>
<!-- 3 -->
<div class="rounded card m-3 progress-bar-striped progress-bar-animated mx-auto" style="width:150;height:150px;border-radius:100px;background-color: #b91619">
<a href="LINK_HERE" data-toggle="tooltip" title="NAME | RELATION">
<img src="https://th.bing.com/th/id/R.4a7001acf248a7a7db56855b2591cab6?rik=ZNQVbVncarS3Kg&pid=ImgRaw&r=0" class="btn btn-outline-warning p-2 rounded-circle" style="width:150px;height:150px; overflow-auto"></a>
</div>
<!-- 4 -->
<div class="rounded card m-3 progress-bar-striped progress-bar-animated mx-auto" style="width:150;height:150px;border-radius:100px;background-color: #b91619">
<a href="LINK_HERE" data-toggle="tooltip" title="NAME | RELATION">
<img src="https://th.bing.com/th/id/R.4a7001acf248a7a7db56855b2591cab6?rik=ZNQVbVncarS3Kg&pid=ImgRaw&r=0" class="btn btn-outline-warning p-2 rounded-circle" style="width:150px;height:150px"></a>
</div>
<!-- 5 -->
<div class="rounded card m-3 progress-bar-striped progress-bar-animated mx-auto" style="width:150;height:150px;border-radius:100px;background-color: #b91619">
<a href="LINK_HERE" data-toggle="tooltip" title="NAME | RELATION">
<img src="https://th.bing.com/th/id/R.4a7001acf248a7a7db56855b2591cab6?rik=ZNQVbVncarS3Kg&pid=ImgRaw&r=0" class="btn btn-outline-warning p-2 rounded-circle" style="width:150px;height:150px"></a>
</div>
<!--- end relations/friends -- add more above this line --->
</div>
</div>
<!--- bottom deco --->
<div class="card col-12 mx-auto border-0"
style="border-radius:0px;height:30px;
background:url(https://images.unsplash.com/photo-1507471509451-1d04d60f896d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80); background-size:cover;
background-position:center; background-repeat:no-repeat;">
</div>
<!------------------->
</div>
</div>
<!------>
</div>
</div>
<!---end--->
<div class="progress-bar progress-bar-striped progress-bar-animated" style="background-color: #b91619; border-width:0px">
</div>
</div>
</div>
<!---credit--->
<a href="https://toyhou.se/MK_/characters/folder:3368881" data-toggle="tooltip" title="code by MK_">
<p class="my-2" style="text-align:center">
<i class="fa-duotone fa-campfire" style="font-size:20px; color:#e4c401"></i>
</p></a>
</div>
<!---end credit--->
