Select All
<!DOCTYPE HTML>
<!--Rules:
Dark Vers.
You may
-frankenstein with other codes (as long as the creator of said code allows it)
-edit/change as much as you need (example: making character codes into user codes, vice-versa)
You may not
-Redistribute, resell, and/or claim its yours
-Remove credit (you're allowed to move & edit it though, just keep it visible)
Misc Notes:
-When editing, remember to turn WYSIWYG off! My codes may break otherwise
-Some basic html knowledge is recommended for editing
Default Colors:
-Headers, links: #cc5776
-Card background: rgba(10,2,20,0.95)
-Footer/credit-section background: #010003
-Text: Text white
Change the colors: Ctrl+f and search for the color you want to change.
-->
<!--background
you can delete the bg if you don't need it-->
<div style="
background-image:url(https://images.unsplash.com/photo-1475687628081-a6cdfccba7ae?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80);
background-attachment:fixed;
background-size:cover;
background-position:center;
z-index:-20;
height:100%;
width:100%;
position:absolute;
left:0px;
right:0px;
top:0;
bottom:0;
margin-top:-15px;
min-height:695px;
box-shadow: 3px 3px 5px rgba(0,0,0,0.5);background-color:rgba(10,2,20,0.95)">
</div>
<!--end background-->
<div class="container" style="max-width:900px">
<!--Main info & socials-->
<div class="card border-0 rounded-0 my-3 text-white" style="box-shadow: 1px 1px 5px rgba(0,0,0,0.5);background-color:rgba(10,2,20,0.95)">
<h2 class="card-header text-white border-0" style="border-radius:0px;background-color:#cc5776">
<i class="fa-solid fa-heart"></i> Name - Pro/Noun - misc.
</h2>
<div class="row">
<!--Profile blurb-->
<div class="col-12 col-sm-7 col-lg-8 order-2 order-md-1">
<div class="card-body table-responsive p-3" style="max-height:250px">
<p>Have a lot of info? This section will scroll</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tincidunt elit non velit bibendum, egestas ullamcorper mauris efficitur. Integer viverra mauris a nunc vestibulum vestibulum. Aliquam cursus, tortor vitae tincidunt convallis, purus risus imperdiet leo, nec eleifend lectus nibh vitae lacus.</p>
<p>Phasellus euismod venenatis ante, a rhoncus urna luctus quis. Nullam vehicula euismod nunc sed malesuada.</p>
</div>
</div>
<!--Image-->
<div class="col-12 col-sm-5 col-lg-4 order-1 order-md-2">
<div class="card border-0 bg-transparent rounded-0" style="height:250px;
background-image:url(https://via.placeholder.com/250px);
background-size:cover;
background-position:top;
background-repeat:none;
">
<!--image credit(s)-->
<p style="position:absolute;top:3px;right:4px;letter-spacing:3px">
<a href="#" class="text-white" data-toggle="tooltip" title="Character - " style="font-size:16px;text-shadow: 0px 1px 3px #000000">
<i class="fas fa-user"></i>
</a>
<a href="#" class="text-white" data-toggle="tooltip" title="img - credit" style="font-size:16px;text-shadow: 0px 1px 3px #000000">
<i class="fas fa-image"></i>
</a>
</p>
</div>
</div>
</div>
<!--Socials-->
<div class="card border-0 p-2" style="border-radius:0px;text-align:center;font-size:20px;letter-spacing:15px;background-color:#010003">
<p>
<a href="#" style="color:#cc5776" data-toggle="tooltip" title="Twitter"><i class="fa-brands fa-twitter"></i></a>
<a href="#" style="color:#cc5776" data-toggle="tooltip" title="Instagram"><i class="fa-brands fa-instagram"></i></a>
<a href="#" style="color:#cc5776" data-toggle="tooltip" title="DeviantArt"><i class="fa-brands fa-deviantart"></i></a>
<a href="#" style="color:#cc5776" data-toggle="tooltip" title="Tumblr"><i class="fa-brands fa-tumblr"></i></a>
<a href="#" data-toggle="tooltip" style="color:#cc5776" title="Artfight"><i class="fa-solid fa-paintbrush-pencil"></i></a>
<a href="#" data-toggle="tooltip" style="color:#cc5776" title="Carrd"><i class='fa-solid fa-address-card'></i></a>
</p>
</div>
</div>
<!--end Main info & socials-->
<!--Stats & Misc Notes-->
<div class="row">
<div class="col-12 col-md-6 mb-3">
<div class="card border-0 rounded-0 mb-3 h-100 text-white" style="box-shadow: 1px 1px 5px rgba(0,0,0,0.5);background-color:rgba(10,2,20,0.95)">
<h2 class="card-header text-white border-0" style="border-radius:0px;background-color:#cc5776">
<i class="fa-duotone fa-chart-pie"></i> Status
</h2>
<div class="card-body p-3">
<div class="row">
<div class="col-6 mb-3">
<b>Requests</b>
</div>
<div class="col-6 mb-3">
status
</div>
<div class="col-6 mb-3">
<b>Trades</b>
</div>
<div class="col-6 mb-3">
status
</div>
<div class="col-6 mb-3">
<b>Commissions</b>
</div>
<div class="col-6 mb-3">
status
</div>
</div>
<hr>
A tl:dr of what you're working on, or if you're taking a break, busy with life stuff, etc. Both these sections will expand btw
</div>
</div>
</div>
<div class="col-12 col-md-6 mb-3">
<div class="card border-0 rounded-0 mb-3 h-100 text-white" style="box-shadow: 1px 1px 5px rgba(0,0,0,0.5);background-color:rgba(10,2,20,0.95)">
<h2 class="card-header text-white border-0" style="border-radius:0px;background-color:#cc5776">
<i class="fa-duotone fa-sparkles"></i> Misc notes
</h2>
<div class="card-body p-3">
<p><i class="fa fa-dot-circle"></i> Extra info a la profile CWs, fun facts about yourself, what is and isn't for offers, and so on
</p>
<p><i class="fa fa-dot-circle"></i> I would recommend not putting revealing info here though. Safety first yunno
<p><i class="fa fa-dot-circle"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
</div>
</div>
</div>
<!--end Stats & Misc Notes-->
<!--Featured Characters-->
<div class="card border-0 rounded-0 my-3 text-white" style="box-shadow: 1px 1px 5px rgba(0,0,0,0.5);background-color:rgba(10,2,20,0.95)">
<h2 class="card-header text-white border-0" style="border-radius:0px;background-color:#cc5776">
<i class="fa-duotone fa-user-group"></i> Featured Characters
</h2>
<div class="card-body p-3">
<!--Optional CW:
Copy-paste this on the featured character card in the image section:
<span class="text-white" style="position:absolute; top:2px; right:5px; font-size:25px;text-shadow:;text-shadow: 0px 1px 3px #000000" data-toggle="tooltip" title="Content Warning"><i class="fas fa-exclamation-triangle"></i> </span>
-->
<!--featured characters-->
<div class="row">
<!--Character 1-->
<div class="col-10 col-sm-4 col-md-5 col-lg-3 mt-2">
<div class="card border-0 rounded-0" style="
background-color:#cc5776;
box-shadow: 1px 1px 5px rgba(0,0,0,0.5)">
<div class="card bg-transparent border-0 rounded-0" style="
height:200px;
background-image:url(https://via.placeholder.com/250);
background-size:cover;
background-position:center">
<!--content warning goes here-->
<span class="text-white" style="position:absolute; top:2px; right:5px; font-size:25px;text-shadow:;text-shadow: 0px 1px 3px #000000" data-toggle="tooltip" title="CW - (warnings)"><i class="fas fa-exclamation-triangle"></i> </span>
</div>
<div class="card-body p-1" style="font-size:1.4em;text-align:center">
<a href="#" class="text-white" style="text-transform:uppercase;">Character</a>
</div>
</div>
</div>
<!--Character 2-->
<div class="col-10 col-sm-4 col-md-5 col-lg-3 mt-2">
<div class="card border-0 rounded-0" style="
background-color:#cc5776;
box-shadow: 1px 1px 5px rgba(0,0,0,0.5)">
<div class="card bg-transparent border-0 rounded-0" style="
height:200px;
background-image:url(https://via.placeholder.com/250);
background-size:cover;
background-position:center">
<!--content warning goes here-->
</div>
<div class="card-body p-1" style="font-size:1.4em;text-align:center">
<a href="#" class="text-white" style="text-transform:uppercase;">Character</a>
</div>
</div>
</div>
<!--Character 3-->
<div class="col-10 col-sm-4 col-md-5 col-lg-3 mt-2">
<div class="card border-0 rounded-0" style="
background-color:#cc5776;
box-shadow: 1px 1px 5px rgba(0,0,0,0.5)">
<div class="card bg-transparent border-0 rounded-0" style="
height:200px;
background-image:url(https://via.placeholder.com/250);
background-size:cover;
background-position:center">
<!--content warning goes here-->
</div>
<div class="card-body p-1" style="font-size:1.4em;text-align:center">
<a href="#" class="text-white" style="text-transform:uppercase;">Character</a>
</div>
</div>
</div>
<!--Character 4-->
<div class="col-10 col-sm-4 col-md-5 col-lg-3 mt-2">
<div class="card border-0 rounded-0" style="
background-color:#cc5776;
box-shadow: 1px 1px 5px rgba(0,0,0,0.5)">
<div class="card bg-transparent border-0 rounded-0" style="
height:200px;
background-image:url(https://via.placeholder.com/250);
background-size:cover;
background-position:center">
<!--content warning goes here-->
</div>
<div class="card-body p-1" style="font-size:1.4em;text-align:center">
<a href="#" class="text-white" style="text-transform:uppercase;">Character</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!--end Featured Characters-->
<!--Credit. You may move, but please don't remove-->
<p class="p-1 text-white" style="text-align:right;box-shadow: 1px 1px 5px rgba(0,0,0,0.5);background-color:#010003;margin:auto">HTML by <a href="https://toyhou.se/15783806" style="color:#cc5776"><i class='fa fa-heart'></i> Jade-Everstone</a> // bg - <a href="https://unsplash.com/photos/0RPE-kbAs5I" style="color:#cc5776">Unsplash</a></p>
<hr style="visibility:hidden">
</div>
Manual Select
<!DOCTYPE HTML>
<!--Rules:
Dark Vers.
You may
-frankenstein with other codes (as long as the creator of said code allows it)
-edit/change as much as you need (example: making character codes into user codes, vice-versa)
You may not
-Redistribute, resell, and/or claim its yours
-Remove credit (you're allowed to move & edit it though, just keep it visible)
Misc Notes:
-When editing, remember to turn WYSIWYG off! My codes may break otherwise
-Some basic html knowledge is recommended for editing
Default Colors:
-Headers, links: #cc5776
-Card background: rgba(10,2,20,0.95)
-Footer/credit-section background: #010003
-Text: Text white
Change the colors: Ctrl+f and search for the color you want to change.
-->
<!--background
you can delete the bg if you don't need it-->
<div style="
background-image:url(https://images.unsplash.com/photo-1475687628081-a6cdfccba7ae?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80);
background-attachment:fixed;
background-size:cover;
background-position:center;
z-index:-20;
height:100%;
width:100%;
position:absolute;
left:0px;
right:0px;
top:0;
bottom:0;
margin-top:-15px;
min-height:695px;
box-shadow: 3px 3px 5px rgba(0,0,0,0.5);background-color:rgba(10,2,20,0.95)">
</div>
<!--end background-->
<div class="container" style="max-width:900px">
<!--Main info & socials-->
<div class="card border-0 rounded-0 my-3 text-white" style="box-shadow: 1px 1px 5px rgba(0,0,0,0.5);background-color:rgba(10,2,20,0.95)">
<h2 class="card-header text-white border-0" style="border-radius:0px;background-color:#cc5776">
<i class="fa-solid fa-heart"></i> Name - Pro/Noun - misc.
</h2>
<div class="row">
<!--Profile blurb-->
<div class="col-12 col-sm-7 col-lg-8 order-2 order-md-1">
<div class="card-body table-responsive p-3" style="max-height:250px">
<p>Have a lot of info? This section will scroll</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tincidunt elit non velit bibendum, egestas ullamcorper mauris efficitur. Integer viverra mauris a nunc vestibulum vestibulum. Aliquam cursus, tortor vitae tincidunt convallis, purus risus imperdiet leo, nec eleifend lectus nibh vitae lacus.</p>
<p>Phasellus euismod venenatis ante, a rhoncus urna luctus quis. Nullam vehicula euismod nunc sed malesuada.</p>
</div>
</div>
<!--Image-->
<div class="col-12 col-sm-5 col-lg-4 order-1 order-md-2">
<div class="card border-0 bg-transparent rounded-0" style="height:250px;
background-image:url(https://via.placeholder.com/250px);
background-size:cover;
background-position:top;
background-repeat:none;
">
<!--image credit(s)-->
<p style="position:absolute;top:3px;right:4px;letter-spacing:3px">
<a href="#" class="text-white" data-toggle="tooltip" title="Character - " style="font-size:16px;text-shadow: 0px 1px 3px #000000">
<i class="fas fa-user"></i>
</a>
<a href="#" class="text-white" data-toggle="tooltip" title="img - credit" style="font-size:16px;text-shadow: 0px 1px 3px #000000">
<i class="fas fa-image"></i>
</a>
</p>
</div>
</div>
</div>
<!--Socials-->
<div class="card border-0 p-2" style="border-radius:0px;text-align:center;font-size:20px;letter-spacing:15px;background-color:#010003">
<p>
<a href="#" style="color:#cc5776" data-toggle="tooltip" title="Twitter"><i class="fa-brands fa-twitter"></i></a>
<a href="#" style="color:#cc5776" data-toggle="tooltip" title="Instagram"><i class="fa-brands fa-instagram"></i></a>
<a href="#" style="color:#cc5776" data-toggle="tooltip" title="DeviantArt"><i class="fa-brands fa-deviantart"></i></a>
<a href="#" style="color:#cc5776" data-toggle="tooltip" title="Tumblr"><i class="fa-brands fa-tumblr"></i></a>
<a href="#" data-toggle="tooltip" style="color:#cc5776" title="Artfight"><i class="fa-solid fa-paintbrush-pencil"></i></a>
<a href="#" data-toggle="tooltip" style="color:#cc5776" title="Carrd"><i class='fa-solid fa-address-card'></i></a>
</p>
</div>
</div>
<!--end Main info & socials-->
<!--Stats & Misc Notes-->
<div class="row">
<div class="col-12 col-md-6 mb-3">
<div class="card border-0 rounded-0 mb-3 h-100 text-white" style="box-shadow: 1px 1px 5px rgba(0,0,0,0.5);background-color:rgba(10,2,20,0.95)">
<h2 class="card-header text-white border-0" style="border-radius:0px;background-color:#cc5776">
<i class="fa-duotone fa-chart-pie"></i> Status
</h2>
<div class="card-body p-3">
<div class="row">
<div class="col-6 mb-3">
<b>Requests</b>
</div>
<div class="col-6 mb-3">
status
</div>
<div class="col-6 mb-3">
<b>Trades</b>
</div>
<div class="col-6 mb-3">
status
</div>
<div class="col-6 mb-3">
<b>Commissions</b>
</div>
<div class="col-6 mb-3">
status
</div>
</div>
<hr>
A tl:dr of what you're working on, or if you're taking a break, busy with life stuff, etc. Both these sections will expand btw
</div>
</div>
</div>
<div class="col-12 col-md-6 mb-3">
<div class="card border-0 rounded-0 mb-3 h-100 text-white" style="box-shadow: 1px 1px 5px rgba(0,0,0,0.5);background-color:rgba(10,2,20,0.95)">
<h2 class="card-header text-white border-0" style="border-radius:0px;background-color:#cc5776">
<i class="fa-duotone fa-sparkles"></i> Misc notes
</h2>
<div class="card-body p-3">
<p><i class="fa fa-dot-circle"></i> Extra info a la profile CWs, fun facts about yourself, what is and isn't for offers, and so on
</p>
<p><i class="fa fa-dot-circle"></i> I would recommend not putting revealing info here though. Safety first yunno
<p><i class="fa fa-dot-circle"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
</div>
</div>
</div>
<!--end Stats & Misc Notes-->
<!--Featured Characters-->
<div class="card border-0 rounded-0 my-3 text-white" style="box-shadow: 1px 1px 5px rgba(0,0,0,0.5);background-color:rgba(10,2,20,0.95)">
<h2 class="card-header text-white border-0" style="border-radius:0px;background-color:#cc5776">
<i class="fa-duotone fa-user-group"></i> Featured Characters
</h2>
<div class="card-body p-3">
<!--Optional CW:
Copy-paste this on the featured character card in the image section:
<span class="text-white" style="position:absolute; top:2px; right:5px; font-size:25px;text-shadow:;text-shadow: 0px 1px 3px #000000" data-toggle="tooltip" title="Content Warning"><i class="fas fa-exclamation-triangle"></i> </span>
-->
<!--featured characters-->
<div class="row">
<!--Character 1-->
<div class="col-10 col-sm-4 col-md-5 col-lg-3 mt-2">
<div class="card border-0 rounded-0" style="
background-color:#cc5776;
box-shadow: 1px 1px 5px rgba(0,0,0,0.5)">
<div class="card bg-transparent border-0 rounded-0" style="
height:200px;
background-image:url(https://via.placeholder.com/250);
background-size:cover;
background-position:center">
<!--content warning goes here-->
<span class="text-white" style="position:absolute; top:2px; right:5px; font-size:25px;text-shadow:;text-shadow: 0px 1px 3px #000000" data-toggle="tooltip" title="CW - (warnings)"><i class="fas fa-exclamation-triangle"></i> </span>
</div>
<div class="card-body p-1" style="font-size:1.4em;text-align:center">
<a href="#" class="text-white" style="text-transform:uppercase;">Character</a>
</div>
</div>
</div>
<!--Character 2-->
<div class="col-10 col-sm-4 col-md-5 col-lg-3 mt-2">
<div class="card border-0 rounded-0" style="
background-color:#cc5776;
box-shadow: 1px 1px 5px rgba(0,0,0,0.5)">
<div class="card bg-transparent border-0 rounded-0" style="
height:200px;
background-image:url(https://via.placeholder.com/250);
background-size:cover;
background-position:center">
<!--content warning goes here-->
</div>
<div class="card-body p-1" style="font-size:1.4em;text-align:center">
<a href="#" class="text-white" style="text-transform:uppercase;">Character</a>
</div>
</div>
</div>
<!--Character 3-->
<div class="col-10 col-sm-4 col-md-5 col-lg-3 mt-2">
<div class="card border-0 rounded-0" style="
background-color:#cc5776;
box-shadow: 1px 1px 5px rgba(0,0,0,0.5)">
<div class="card bg-transparent border-0 rounded-0" style="
height:200px;
background-image:url(https://via.placeholder.com/250);
background-size:cover;
background-position:center">
<!--content warning goes here-->
</div>
<div class="card-body p-1" style="font-size:1.4em;text-align:center">
<a href="#" class="text-white" style="text-transform:uppercase;">Character</a>
</div>
</div>
</div>
<!--Character 4-->
<div class="col-10 col-sm-4 col-md-5 col-lg-3 mt-2">
<div class="card border-0 rounded-0" style="
background-color:#cc5776;
box-shadow: 1px 1px 5px rgba(0,0,0,0.5)">
<div class="card bg-transparent border-0 rounded-0" style="
height:200px;
background-image:url(https://via.placeholder.com/250);
background-size:cover;
background-position:center">
<!--content warning goes here-->
</div>
<div class="card-body p-1" style="font-size:1.4em;text-align:center">
<a href="#" class="text-white" style="text-transform:uppercase;">Character</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!--end Featured Characters-->
<!--Credit. You may move, but please don't remove-->
<p class="p-1 text-white" style="text-align:right;box-shadow: 1px 1px 5px rgba(0,0,0,0.5);background-color:#010003;margin:auto">HTML by <a href="https://toyhou.se/15783806" style="color:#cc5776"><i class='fa fa-heart'></i> Jade-Everstone</a> // bg - <a href="https://unsplash.com/photos/0RPE-kbAs5I" style="color:#cc5776">Unsplash</a></p>
<hr style="visibility:hidden">
</div>