Select All
<!DOCTYPE HTML>
<!--Rules:
I miss you
For the Coders Quarters March 2023 Challenge
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)
-use offsite
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 (Bootstrap Colors):
- pfp bg: bg-secondary
- Section headers: bg-primary
- image bgs, sidebar bgs: bg-faded
Change the colors: Ctrl+f and search for the color you want to change.
-->
<div class="mx-auto" style="max-width:500px">
<div style="border-style:solid;border-width:2px;border-color:rgba(0,0,0,0.3);box-shadow:3px 3px 0px rgba(0,0,0,0.3)">
<!-- /// Main info /// -->
<div class="px-2 py-1 bg-primary text-white" style="font-size:2em;font-weight:bold;letter-spacing:1px;text-align:right">
Username
</div>
<!--header image-->
<div class="bg-faded" style="min-height:250px;
background-image:url(https://images.unsplash.com/photo-1534085838602-9624ac7ab9e5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80);
background-size:cover;
background-position:bottom">
<!--Image Credits-->
<a href="https://unsplash.com/photos/6jjvx8sZrRc" target="_blank"
data-toggle="tooltip"
title="img - unsplash"
style="position:relative;left:5px;top:3px;font-size:1.1em;text-shadow:3px 3px 0px rgba(0,0,0,0.3)">
<i class="fa-solid fa-image text-white"></i>
</a>
</div>
<div class="bg-primary" style="height:25px"></div>
<div class="row no-gutters">
<div class="col-sm-4">
<div class="p-2 bg-faded h-100" style="min-height:100px;">
<!--user image-->
<div class="bg-secondary mb-2" style="
height:125px;width:125px;
margin-left:auto;margin-right:auto;margin-top:-120px;
box-shadow:3px 3px 0px rgba(0,0,0,0.3);
background-image:url( )"></div>
<!--basic info-->
<span>(Pref.) name</span><hr class="mt-0 mb-1">
<span>Gender</span><hr class="mt-0 mb-1">
<span>Pro/Noun</span>
<hr class="my-2" style="border-width:2px">
<!--Socials-->
<a href="#"><i class="fa-solid fa-circle"></i> Social Link</a><hr class="mt-0 mb-1">
<a href="#"><i class="fa-solid fa-circle"></i> Social Link</a><hr class="mt-0 mb-1">
<a href="#"><i class="fa-solid fa-circle"></i> Social Link</a>
</div>
</div>
<!--info-->
<div class="col-sm-8">
<div class="p-2 h-100" style="min-height:200px">
<p>An introduction to yourself. I would recommend not putting revealing info here though. Safety first yunno.</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.</p>
</div>
</div>
</div>
<!-- /// End Main info /// -->
<!-- /// Art Status /// -->
<div class="px-2 py-1 bg-primary text-white" style="font-size:1.5em;font-weight:bold;letter-spacing:1px">
Art Status
</div>
<div class="row no-gutters">
<!--info-->
<div class="col-sm-8">
<div class="p-2 h-100">
<!--basic stats-->
<div class="d-flex flex-wrap">
<span class="mr-auto" style="font-weight:bold">Commissions</span>
<span>Status</span>
</div>
<hr class="mt-0 mb-2">
<div class="d-flex flex-wrap">
<span class="mr-auto" style="font-weight:bold">Trades</span>
<span>Status</span>
</div>
<hr class="mt-0 mb-2">
<div class="d-flex flex-wrap">
<span class="mr-auto" style="font-weight:bold">Requests</span>
<span>Status</span>
</div>
<!--blurb-->
<hr class="mt-0 mb-2">
<p>More notes about the above: ongoing projects, hiatuses, how busy you are, trello links, etc.</p>
</div>
</div>
<!--sidebar image-->
<div class="col-sm-4">
<div class="bg-faded h-100" style="position:sticky;top:0px;min-height:150px;
background-image:url(https://images.unsplash.com/photo-1488590528505-98d2b5aba04b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80);
background-size:cover;
background-position:center;
text-align:right">
<!--Image Credits-->
<a href="https://unsplash.com/photos/XJXWbfSo2f0" target="_blank"
data-toggle="tooltip"
title="img - unsplash"
style="position:relative;right:5px;top:3px;font-size:1.1em;text-shadow:3px 3px 0px rgba(0,0,0,0.3)">
<i class="fa-solid fa-image text-white"></i>
</a>
</div>
</div>
</div>
<!-- /// End Art Status /// -->
<!-- /// Notice /// -->
<div class="px-2 py-1 bg-primary text-white" style="font-size:1.5em;font-weight:bold;letter-spacing:1px;text-align:right">
Notice
</div>
<div class="row no-gutters">
<!--sidebar image-->
<div class="col-sm-3 order-2 order-sm-1">
<div class="bg-faded h-100" style="position:sticky;top:0px;min-height:150px;
background-image:url(https://images.unsplash.com/photo-1600201574319-ac79b6dab11c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=764&q=80);
background-size:cover;
background-position:center">
<!--Image Credits-->
<a href="https://unsplash.com/photos/0flJkZkv4DA" target="_blank"
data-toggle="tooltip"
title="img - unsplash"
style="position:relative;left:5px;top:3px;font-size:1.1em;text-shadow:3px 3px 0px rgba(0,0,0,0.3)">
<i class="fa-solid fa-image text-white"></i>
</a>
</div>
</div>
<!--info-->
<div class="col-sm-9 order-1 order-sm-2">
<div class="p-2">
<p><i class="fa-solid fa-circle"></i> A Content Warning, BYF, DNI, Misc. Notes section. Again, best to avoid putting personal info here.</p>
<p><i class="fa-solid fa-circle"></i> Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p><i class="fa-solid fa-circle"></i> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
</div>
</div>
<!-- /// End Notice /// -->
<!-- /// Featured OCs /// -->
<div class="px-2 py-1 bg-primary text-white" style="font-size:1.5em;font-weight:bold;letter-spacing:1px;">
Featured OCs
</div>
<div class="row no-gutters">
<!--Character 1-->
<div class="col-sm-4">
<a href="#">
<!--chara image-->
<div class="bg-faded" style="min-height:175px;
background-image:url( );
background-size:cover;
background-position:center">
<span class="badge badge-primary rounded-0 m-2" style="font-size:1.1em;box-shadow:3px 3px 0px rgba(0,0,0,0.3);position:absolute;bottom:0px;">Character Name</span>
</div>
</a>
</div>
<!--Character 2-->
<div class="col-sm-4">
<a href="#">
<!--chara image-->
<div class="bg-faded" style="min-height:175px;
background-image:url( );
background-size:cover;
background-position:center">
<span class="badge badge-primary rounded-0 m-2" style="font-size:1.1em;box-shadow:3px 3px 0px rgba(0,0,0,0.3);position:absolute;bottom:0px;">Character Name</span>
</div>
</a>
</div>
<!--Character 3-->
<div class="col-sm-4">
<a href="#">
<!--chara image-->
<div class="bg-faded" style="min-height:175px;
background-image:url( );
background-size:cover;
background-position:center">
<span class="badge badge-primary rounded-0 m-2" style="font-size:1.1em;box-shadow:3px 3px 0px rgba(0,0,0,0.3);position:absolute;bottom:0px;">Character Name</span>
</div>
</a>
</div>
</div>
<!-- /// End Featured OCs /// -->
</div>
<!--Credit: you may move but please do not remove!-->
<p style="margin-top:5px;text-align:right">
HTML <a href="https://toyhou.se/20650109"><i class='fa-solid fa-heart'></i> Jade-Everstone</a>
</p>
</div>
Manual Select
<!DOCTYPE HTML>
<!--Rules:
I miss you
For the Coders Quarters March 2023 Challenge
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)
-use offsite
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 (Bootstrap Colors):
- pfp bg: bg-secondary
- Section headers: bg-primary
- image bgs, sidebar bgs: bg-faded
Change the colors: Ctrl+f and search for the color you want to change.
-->
<div class="mx-auto" style="max-width:500px">
<div style="border-style:solid;border-width:2px;border-color:rgba(0,0,0,0.3);box-shadow:3px 3px 0px rgba(0,0,0,0.3)">
<!-- /// Main info /// -->
<div class="px-2 py-1 bg-primary text-white" style="font-size:2em;font-weight:bold;letter-spacing:1px;text-align:right">
Username
</div>
<!--header image-->
<div class="bg-faded" style="min-height:250px;
background-image:url(https://images.unsplash.com/photo-1534085838602-9624ac7ab9e5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80);
background-size:cover;
background-position:bottom">
<!--Image Credits-->
<a href="https://unsplash.com/photos/6jjvx8sZrRc" target="_blank"
data-toggle="tooltip"
title="img - unsplash"
style="position:relative;left:5px;top:3px;font-size:1.1em;text-shadow:3px 3px 0px rgba(0,0,0,0.3)">
<i class="fa-solid fa-image text-white"></i>
</a>
</div>
<div class="bg-primary" style="height:25px"></div>
<div class="row no-gutters">
<div class="col-sm-4">
<div class="p-2 bg-faded h-100" style="min-height:100px;">
<!--user image-->
<div class="bg-secondary mb-2" style="
height:125px;width:125px;
margin-left:auto;margin-right:auto;margin-top:-120px;
box-shadow:3px 3px 0px rgba(0,0,0,0.3);
background-image:url( )"></div>
<!--basic info-->
<span>(Pref.) name</span><hr class="mt-0 mb-1">
<span>Gender</span><hr class="mt-0 mb-1">
<span>Pro/Noun</span>
<hr class="my-2" style="border-width:2px">
<!--Socials-->
<a href="#"><i class="fa-solid fa-circle"></i> Social Link</a><hr class="mt-0 mb-1">
<a href="#"><i class="fa-solid fa-circle"></i> Social Link</a><hr class="mt-0 mb-1">
<a href="#"><i class="fa-solid fa-circle"></i> Social Link</a>
</div>
</div>
<!--info-->
<div class="col-sm-8">
<div class="p-2 h-100" style="min-height:200px">
<p>An introduction to yourself. I would recommend not putting revealing info here though. Safety first yunno.</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.</p>
</div>
</div>
</div>
<!-- /// End Main info /// -->
<!-- /// Art Status /// -->
<div class="px-2 py-1 bg-primary text-white" style="font-size:1.5em;font-weight:bold;letter-spacing:1px">
Art Status
</div>
<div class="row no-gutters">
<!--info-->
<div class="col-sm-8">
<div class="p-2 h-100">
<!--basic stats-->
<div class="d-flex flex-wrap">
<span class="mr-auto" style="font-weight:bold">Commissions</span>
<span>Status</span>
</div>
<hr class="mt-0 mb-2">
<div class="d-flex flex-wrap">
<span class="mr-auto" style="font-weight:bold">Trades</span>
<span>Status</span>
</div>
<hr class="mt-0 mb-2">
<div class="d-flex flex-wrap">
<span class="mr-auto" style="font-weight:bold">Requests</span>
<span>Status</span>
</div>
<!--blurb-->
<hr class="mt-0 mb-2">
<p>More notes about the above: ongoing projects, hiatuses, how busy you are, trello links, etc.</p>
</div>
</div>
<!--sidebar image-->
<div class="col-sm-4">
<div class="bg-faded h-100" style="position:sticky;top:0px;min-height:150px;
background-image:url(https://images.unsplash.com/photo-1488590528505-98d2b5aba04b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80);
background-size:cover;
background-position:center;
text-align:right">
<!--Image Credits-->
<a href="https://unsplash.com/photos/XJXWbfSo2f0" target="_blank"
data-toggle="tooltip"
title="img - unsplash"
style="position:relative;right:5px;top:3px;font-size:1.1em;text-shadow:3px 3px 0px rgba(0,0,0,0.3)">
<i class="fa-solid fa-image text-white"></i>
</a>
</div>
</div>
</div>
<!-- /// End Art Status /// -->
<!-- /// Notice /// -->
<div class="px-2 py-1 bg-primary text-white" style="font-size:1.5em;font-weight:bold;letter-spacing:1px;text-align:right">
Notice
</div>
<div class="row no-gutters">
<!--sidebar image-->
<div class="col-sm-3 order-2 order-sm-1">
<div class="bg-faded h-100" style="position:sticky;top:0px;min-height:150px;
background-image:url(https://images.unsplash.com/photo-1600201574319-ac79b6dab11c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=764&q=80);
background-size:cover;
background-position:center">
<!--Image Credits-->
<a href="https://unsplash.com/photos/0flJkZkv4DA" target="_blank"
data-toggle="tooltip"
title="img - unsplash"
style="position:relative;left:5px;top:3px;font-size:1.1em;text-shadow:3px 3px 0px rgba(0,0,0,0.3)">
<i class="fa-solid fa-image text-white"></i>
</a>
</div>
</div>
<!--info-->
<div class="col-sm-9 order-1 order-sm-2">
<div class="p-2">
<p><i class="fa-solid fa-circle"></i> A Content Warning, BYF, DNI, Misc. Notes section. Again, best to avoid putting personal info here.</p>
<p><i class="fa-solid fa-circle"></i> Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p><i class="fa-solid fa-circle"></i> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
</div>
</div>
<!-- /// End Notice /// -->
<!-- /// Featured OCs /// -->
<div class="px-2 py-1 bg-primary text-white" style="font-size:1.5em;font-weight:bold;letter-spacing:1px;">
Featured OCs
</div>
<div class="row no-gutters">
<!--Character 1-->
<div class="col-sm-4">
<a href="#">
<!--chara image-->
<div class="bg-faded" style="min-height:175px;
background-image:url( );
background-size:cover;
background-position:center">
<span class="badge badge-primary rounded-0 m-2" style="font-size:1.1em;box-shadow:3px 3px 0px rgba(0,0,0,0.3);position:absolute;bottom:0px;">Character Name</span>
</div>
</a>
</div>
<!--Character 2-->
<div class="col-sm-4">
<a href="#">
<!--chara image-->
<div class="bg-faded" style="min-height:175px;
background-image:url( );
background-size:cover;
background-position:center">
<span class="badge badge-primary rounded-0 m-2" style="font-size:1.1em;box-shadow:3px 3px 0px rgba(0,0,0,0.3);position:absolute;bottom:0px;">Character Name</span>
</div>
</a>
</div>
<!--Character 3-->
<div class="col-sm-4">
<a href="#">
<!--chara image-->
<div class="bg-faded" style="min-height:175px;
background-image:url( );
background-size:cover;
background-position:center">
<span class="badge badge-primary rounded-0 m-2" style="font-size:1.1em;box-shadow:3px 3px 0px rgba(0,0,0,0.3);position:absolute;bottom:0px;">Character Name</span>
</div>
</a>
</div>
</div>
<!-- /// End Featured OCs /// -->
</div>
<!--Credit: you may move but please do not remove!-->
<p style="margin-top:5px;text-align:right">
HTML <a href="https://toyhou.se/20650109"><i class='fa-solid fa-heart'></i> Jade-Everstone</a>
</p>
</div>