<!-- ===================================
[ F2U ] equinox
by sharkadelic
tou:
- do NOT run wysiwyg on this code. several components WILL BREAK if you do this and i will not be helping you fix it up.
- please keep my credit on this code.
- do not redistrubute.
notes:
- a medium user code with simple personality, history, design, stats, and relationships sections.
- this code uses bootstrap colors with a single custom color accent.
> primary accent color : [ #e3a573 ]
- press [ ctrl/cmd + h ] and select the color above for easier replacement.
- uses some flexbox and flex breakpoints to ensure responsivity. this may make major edits difficult and/or layout breaking. please keep this in mind and avoid major edits unless you know what you're doing!
- need a live code editor? try [ https://th.circlejourney.net/# ]
- need an easy palette generator? try [ https://coolors.co ]
- need free-to-use vector icons? try [ https://fontawesome.com ]
=================================== -->
<!--======== CODE START ========-->
<div class="container my-4" style="max-width:740px; font-size:13px; font-family:calibri; letter-spacing:0.4px">
<div class="row no-gutters">
<!--=======================
> LEFT SIDEBAR <
> includes:
- focal image
- quote block
- important links
- sticky!
=========================-->
<div class="col-lg-4 p-2">
<div class="flex-lg-column flex-row flex-wrap" style="position:sticky; top:10px">
<!--======== DECOR ========-->
<div class="col-12 mb-2">
<div class="mb-1" style="border-top:8px solid #e3a573"></div>
<div class="pt-1" style="border-top:2px solid #e3a573; border-bottom:2px dotted #e3a573; opacity:0.5"></div>
</div>
<!--======== END DECOR ========-->
<!--=========================
USER ICON
> replace [ IMG_URL ] with the link to the image you want!
- looks best with small to medium sized images!
> uses [ background-blend-mode ] to manipulate the image; a full list of valid blend mode effects can be found here: [ https://toyhou.se/6825162.f2u-snippets-resources/7232142.blend-modes ]
=========================== -->
<div class="col-lg-12 col-sm-6 col-12">
<div class="card rounded-0 p-2 h-100" style="min-height:150px;">
<div class="flex-fill card rounded-0" style="
background:#e3a573 url('IMG_URL') center;
background-size:cover;
background-blend-mode:screen"></div>
</div>
</div>
<!--====== QUOTE + LINKS ========-->
<div class="flex-fill col-lg-12 col-sm-6 col-12 mr-lg-4">
<!--====== QUOTE BLOCK ========-->
<div class="card rounded-0 my-3 p-3 ml-2" style="box-shadow:-8px 0px #e3a573; position:relative">
<i class="fa-thin fa-quote-left" style="opacity:0.25; position:absolute; top:5px; left:5px; font-size:2.5em; color:#e3a573"></i>
<i class="fa-thin fa-quote-right" style="opacity:0.25; position:absolute; bottom:5px; right:5px; font-size:2.5em; color:#e3a573"></i>
<p class="text-center font-italic" style="z-index:2">
say something here, make it silly, make it mean something!
</p>
</div>
<!--====== END QUOTE BLOCK ========-->
<!--====== LINKS ========-->
<div class="card border-0 align-items-center justify-content-center rounded-0 ">
<div class="flex-row flex-wrap no-gutters mx-n1">
<!---==== TWITTER LINK ====--->
<div class="col card rounded-0 m-1" style="background:#e3a573">
<a href="TWITTER" class="border-0 btn btn-outline-secondary w-100 rounded-0 p-1 px-2 text-center text-white" style="font-size:inherit; mix-blend-mode:screen">twitter</a>
</div>
<!---==== INSTAGRAM LINK ====--->
<div class="col card rounded-0 m-1" style="background:#e3a573">
<a href="INSTAGRAM" class="border-0 btn btn-outline-secondary w-100 rounded-0 p-1 px-2 text-center text-white" style="font-size:inherit; mix-blend-mode:screen">instagram</a>
</div>
<!---==== DEVIANTART LINK ====--->
<div class="col card rounded-0 m-1" style="background:#e3a573">
<a href="DEVIANTART" class="border-0 btn btn-outline-secondary w-100 rounded-0 p-1 px-2 text-center text-white" style="font-size:inherit; mix-blend-mode:screen">deviantart</a>
</div>
<!---==== TUMBLR LINK ====--->
<div class="col card rounded-0 m-1" style="background:#e3a573">
<a href="TUMBLR" class="border-0 btn btn-outline-secondary w-100 rounded-0 p-1 px-2 text-center text-white" style="font-size:inherit; mix-blend-mode:screen">tumblr</a>
</div>
<!---==== ADD MORE SOCIALS LINKS ABOVE THIS COMMENT! ====--->
<!---==== TERMS OF SERVICE LINK ====--->
<div class="col card rounded-0 m-1" style="background:#e3a573">
<a href="TERMS OF SERVICE" class="border-0 btn btn-outline-secondary w-100 rounded-0 p-1 px-2 text-center text-white" style="font-size:inherit; mix-blend-mode:screen">terms of service</a>
</div>
</div>
</div>
<!--====== END LINKS ========-->
</div>
<!--====== DECOR ========-->
<div class="col-12 mt-2">
<div class="pt-1" style="border-bottom:2px solid #e3a573; border-top:2px dotted #e3a573; opacity:0.5"></div>
<div class="mt-1" style="border-top:8px solid #e3a573"></div>
</div>
<!--====== END DECOR ========-->
</div>
</div>
<!--===== END LEFT SIDEBAR ====== -->
<!--=========================
> MAIN SECTION <
> includes:
- about section
- design section
- trivia/misc info section
- relationships section
=========================== -->
<div class="col-lg-8 p-2">
<div class="flex-column mx-n2 p-2">
<!--======= USERNAME HEADER =======-->
<div class="justify-content-between mt-n2 mb-3">
<p class="display-3 text-uppercase font-italic" style="font-family:georgia">
name!
</p>
<hr class="flex-fill ml-2 my-auto" style="border-top:2px dotted">
</div>
<!--======= END USERNAME HEADER =======-->
<!--=========================
> ABOUT SECTION <
> includes:
- introductory info
- short about blurb
=========================== -->
<div class="row no-gutters mx-n2">
<!--======= BASIC INFO =======-->
<div class="col-lg-4 col-md p-2" >
<div class="mt-n1">
<!------ name(s) ------->
<div class="card rounded-0 flex-row justify-content-between align-items-center p-2 my-2">
<i style="color:#e3a573" class="fa-regular fa-user fa-fw fa-sm mr-2"></i>
<span class="text-right">
name(s)
</span>
</div>
<!------ pronouns ------->
<div class="card rounded-0 flex-row justify-content-between align-items-center p-2 my-2">
<i style="color:#e3a573" class="fa-regular fa-message-dots fa-fw fa-sm mr-2"></i>
<span class="text-right">
pro/noun/s
</span>
</div>
<!------ birthday/age ------->
<div class="card rounded-0 flex-row justify-content-between align-items-center p-2 my-2">
<i style="color:#e3a573" class="fa-regular fa-cake fa-fw fa-sm mr-2"></i>
<span class="text-right">
birthday/age
</span>
</div>
<!------ timezone ------->
<div class="card rounded-0 flex-row justify-content-between align-items-center p-2 my-2">
<i style="color:#e3a573" class="fa-regular fa-clock fa-fw fa-sm mr-2"></i>
<span class="text-right">
+utc
</span>
</div>
<!------ location ------->
<div class="card rounded-0 flex-row justify-content-between align-items-center p-2 my-2">
<i style="color:#e3a573" class="fa-regular fa-globe-americas fa-fw fa-sm mr-2"></i>
<span class="text-right">
location
</span>
</div>
<!------ languages ------->
<div class="card rounded-0 flex-row justify-content-between align-items-center p-2 my-2">
<i style="color:#e3a573" class="fa-regular fa-comments fa-fw fa-sm mr-2"></i>
<span class="text-right">
lang + lang ok
</span>
</div>
</div>
<!----- additional links ----->
<div class="mt-1">
<!----- link one ----->
<div class="card rounded-0 mb-2" style="background:#e3a573">
<a href="LINK" class="btn btn-outline-secondary w-100 rounded-0 p-1 text-center text-white border-0" style="font-size:inherit; mix-blend-mode:screen">
rp comfort meme
</a>
</div>
<!----- link two ----->
<div class="card rounded-0 mb-2" style="background:#e3a573">
<a href="LINK" class="btn btn-outline-secondary w-100 rounded-0 p-1 text-center text-white border-0" style="font-size:inherit; mix-blend-mode:screen">
comms pinglist
</a>
</div>
<!--====== ADD MORE LINKS ABOVE THIS COMMENT! ======-->
</div>
</div>
<!--======= ABOUT BLURB =======
> this will scroll once the content inside is longer than the basic info column
=======================-->
<div class="col-lg col-md-7 p-2 pr-md-3 d-lg-flex d-block flex-column">
<div class="text-justify pr-md-3" style="flex:1 1 0; overflow-y:auto">
<p>
<!--==== ACCENT LETTER ====-->
<span class="float-left card rounded-0 align-items-center justify-content-center text-white p-2 mr-2 mt-1" style="font-size:1.2em; background:#e3a573; font-family:georgia">
Y
</span>
<!--==== REST OF WORDS! ====--->
our first words mean the most. Choose them wisely.
</p>
<!--==== ADDITIONAL NOTES ====-->
<p class="text-left font-italic mb-1" style="font-size:1.2em; letter-spacing:1px; font-family:georgia"> <i class="fa-light fa-pen-nib mr-2"></i> additional notes </p>
<ul class="pl-3 mb-0">
<li> note </li>
<li> note </li>
<li> note </li>
<li> note </li>
<li> note </li>
<!--====== ADD MORE NOTES ABOVE THIS COMMENT! ======-->
</ul>
</div>
</div>
</div>
<!--===== END ABOUT SECTION ====== -->
<!--=======================
> BOUNDARIES/DNI <
=========================-->
<div class="row no-gutters mb-4 mx-n2">
<!--======= HEADER =======-->
<div class="col-12 justify-content-between align-items-center p-2">
<i class="fa-light fa-triangle-exclamation mr-2"></i>
<p style="font-family:georgia; font-size:1.5em; font-style:italic;">boundaries</p>
<hr class="flex-fill my-auto ml-2" style="border-top:2px dotted">
</div>
<!--======= END HEADER =======-->
<div class="col-md p-2 pr-lg-3">
<!--====== "DO NOT" BOUNDARIES =====-->
<p class="text-left font-italic font-weight-bold mb-1" style="font-size:1.1em"> please do not... </p>
<ul class="fa-ul ml-4 text-justify">
<li><span class="fa-li"><i class="fa-regular fa-xmark"></i></span> boundary </li>
<li><span class="fa-li"><i class="fa-regular fa-xmark"></i></span> another boundary </li>
<!--===== ADD MORE BOUNDARIES ABOVE THIS LINE =====-->
</ul>
<!--====== "DO" BOUNDARIES =====-->
<p class="text-left font-italic font-weight-bold mb-1" style="font-size:1.1em"> please do... </p>
<ul class="fa-ul ml-3 text-justify mb-0">
<li><span class="fa-li"><i class="fa-regular fa-xmark"></i></span> boundary </li>
<li><span class="fa-li"><i class="fa-regular fa-xmark"></i></span> another boundary </li>
<!--===== ADD MORE BOUNDARIES ABOVE THIS LINE =====-->
</ul>
</div>
<div class="col-md pl-lg-3 p-2">
<!--====== BEFORE YOU FOLLOW =====-->
<p class="text-left font-italic font-weight-bold mb-0" style="font-size:1.1em"> before you follow... </p>
<p class="text-justify mb-1"> my art and characters may have themes of: </p>
<ul class="text-justify">
<li> content warning </li>
<li> content warning </li>
<li> content warning </li>
<li> content warning </li>
<!--===== ADD MORE WARNINGS ABOVE THIS LINE =====-->
</ul>
<!--====== DO NOT INTERACT =====-->
<p class="text-left font-italic font-weight-bold mb-0" style="font-size:1.1em"> do not interact... </p>
<p class="text-justify">
something here, something here, another something here, etc., etc.
</p>
</div>
</div>
<!--===== END BOUNDARIES/DNI ====== -->
<!--=======================
> FEATURED CHARACTERS <
> replace [ IMG_URL ] with the link to the image you want!
- manually set to a fixed height of 130px.
> uses [ background-blend-mode ] to manipulate the image; a full list of valid blend mode effects can be found here: [ https://toyhou.se/6825162.f2u-snippets-resources/7232142.blend-modes ]
=========================-->
<div class="flex-row flex-wrap mx-n2 mb-n3">
<!--======= HEADER =======-->
<div class="col-12 justify-content-between align-items-center p-2">
<i class="fa-light fa-heart mr-2"></i>
<p style="font-family:georgia; font-size:1.5em; font-style:italic;">featured characters</p>
<hr class="flex-fill my-auto ml-2" style="border-top:2px dotted">
</div>
<!--======= END HEADER =======-->
<!--======= CHARACTER CARD ONE =======-->
<div class="col p-2">
<div class="card rounded-0 p-2">
<div class="flex-fill p-1 pl-2 align-items-end" style="position:relative;
height:130px;
background:#e3a573 url('IMG_URL') center;
background-size:cover;
background-blend-mode:screen">
<!--====== CHARACTER INFO ======
> replace [ CHARACTER_LINK ] with the link to your character!
==============================-->
<span class="text-black font-weight-bold" style="font-family:georgia; text-shadow:-1px -1px 0.5px #fff,1px -1px 0.5px #fff,-1px 1px 0.5px #fff,1px 1px 0.5px #fff; z-index:2">
character name
</span>
<a
href="CHARACTER_LINK"
class="btn btn-outline-secondary rounded-0 h-100 w-100" style="position:absolute; left:0; top:0; mix-blend-mode:screen"></a>
</div>
</div>
</div>
<!--======= END CHARACTER CARD ONE =======-->
<!--======= CHARACTER CARD TWO =======-->
<div class="col p-2">
<div class="card rounded-0 p-2">
<div class="flex-fill p-1 pl-2 align-items-end" style="position:relative;
height:130px;
background:#e3a573 url('IMG_URL') center;
background-size:cover;
background-blend-mode:screen">
<!--====== CHARACTER INFO ======
> replace [ CHARACTER_LINK ] with the link to your character!
==============================-->
<span class="text-black font-weight-bold" style="font-family:georgia; text-shadow:-1px -1px 0.5px #fff,1px -1px 0.5px #fff,-1px 1px 0.5px #fff,1px 1px 0.5px #fff; z-index:2">
character name
</span>
<a
href="CHARACTER_LINK"
class="btn btn-outline-secondary rounded-0 h-100 w-100" style="position:absolute; left:0; top:0; mix-blend-mode:screen"></a>
</div>
</div>
</div>
<!--======= END CHARACTER CARD TWO =======-->
<!--======= CHARACTER CARD THREE =======-->
<div class="col p-2">
<div class="card rounded-0 p-2">
<div class="flex-fill p-1 pl-2 align-items-end" style="position:relative;
height:130px;
background:#e3a573 url('IMG_URL') center;
background-size:cover;
background-blend-mode:screen">
<!--====== CHARACTER INFO ======
> replace [ CHARACTER_LINK ] with the link to your character!
==============================-->
<span class="text-black font-weight-bold" style="font-family:georgia; text-shadow:-1px -1px 0.5px #fff,1px -1px 0.5px #fff,-1px 1px 0.5px #fff,1px 1px 0.5px #fff; z-index:2">
character name
</span>
<a
href="CHARACTER_LINK"
class="btn btn-outline-secondary rounded-0 h-100 w-100" style="position:absolute; left:0; top:0; mix-blend-mode:screen"></a>
</div>
</div>
</div>
<!--======= END CHARACTER CARD THREE =======-->
<!--===== ADD MORE CHARACTERS ABOVE THIS COMMENT! =====-->
</div>
<!--===== FEATURED CHARACTERS ====== -->
</div>
</div>
<!--===== END MAIN SECTION ====== -->
</div>
<!--======== CREDITS ========
> DO NOT REMOVE <
=========================-->
<div class="text-center mt-2"><a href="/sharkadelic/characters" class="text-muted" style="font-size:0.8em">code by sharkadelic</a></div>
</div>
<!--======== CODE END ========-->