boxy stars
created by:dxscmfrt
Mixed ColorsHTMLUser
Copy
<!--
boxy stars
by dxscmfrt
accent colors: #524587, #f8edfd
use find and replace!
icon: fal fa-sparkle fa-2xs
https://fontawesome.com/icons/categories
technically modular. if you're going to use this code that way you might need to mess around with the margins.
anything marked "box" is the modular part,
anything marked "col" is layout / columns.
-->
<!-- background - replace url (or remove if you don't want it) -->
<div class="container p-0" style="
background-image:url(https://f2.toyhou.se/file/f2-toyhou-se/images/30105610_FTTF3SMvfeQXlRl.gif);
background-size:25%; background-attachment:fixed; position:absolute; min-width:100%; min-height:100%; top:-20px; left:-20px; right:-20px; bottom:10px; z-index:-99"></div>
<!-- /background -->
<div class="container p-3 text-justify" style="max-width:900px">
<div class="row">
<!-- side image -->
<div class="col-sm-4 p-0 my-4" style="border:2px solid #f8edfd"><div style="border:6px solid #524587;
background-image:url(imglink);
background-size:cover; background-position:center; height:100%; min-height:300px"></div></div>
<!-- /side -->
<!-- content -->
<div class="col-sm-8">
<div class="row px-3">
<!-- col -->
<div class="col-sm-12 p-1">
<!-- box - basic info -->
<div class="my-2" style="border:2px solid #f8edfd"><div class="bg-faded px-2 pb-2" style="border:6px solid #524587">
<!-- box header -->
<div class="pb-2 mx-n2 mb-2 text-center" style="background-color:#524587; color:#f8edfd; font-size:1.2em; letter-spacing:1px">
name
<i class="fal fa-sparkle fa-2xs mx-1"></i>
pr/ns
<i class="fal fa-sparkle fa-2xs mx-1"></i>
thing
</div>
<!-- /header -->
<p>
<b>describe yourself here.</b> all boxes expand, not scroll. try to keep things shortish (but do whatever you want idc). Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
</p>
<p><i class="fal fa-warning"></i>
<b>my profile may contain</b>
stuff. list common warnings here.
</p>
</div></div>
<!-- /box -->
<!-- box - socials / credits
all socials icons are based on my own socials, here's the icons if you want to customize it:
https://fontawesome.com/search?o=r&f=brands
-->
<div style="border:2px solid #f8edfd">
<div class="text-center px-sm-5 py-3 justify-content-around align-items-center" style="background-color:#524587; color:#f8edfd; font-size:1.2em; letter-spacing:1px">
<!-- link -->
<a class="fal fa-id-card tooltipster" style="color:#f8edfd; text-decoration:none"
title="carrd" href="carrdlink"></a>
<!-- link -->
<a class="fal fa-paintbrush-pencil tooltipster" style="color:#f8edfd; text-decoration:none"
title="artfight" href="aflink"></a>
<!-- link -->
<a class="fab fa-tumblr tooltipster" style="color:#f8edfd; text-decoration:none"
title="tumblr" href="tumblrlink"></a>
<!-- link -->
<a class="fab fa-instagram tooltipster" style="color:#f8edfd; text-decoration:none"
title="instagram" href="instalink"></a>
<!-- divider-->
<i class="fal fa-sparkle fa-2xs"></i>
<!-- credit -->
<a class="fal fa-image tooltipster" style="color:#f8edfd; text-decoration:none"
title="bg image by Doxiie" href="https://toyhou.se/11019105.f2u-star-patterns"></a>
<!-- credit -->
<a class="fal fa-sun-haze tooltipster" style="color:#f8edfd; text-decoration:none"
title="code by dxscmfrt" href="https://toyhou.se/28474713.boxy-stars"></a>
<!-- put more links above this line -->
</div>
</div>
<!-- /box -->
</div>
<!-- /col -->
<!-- col -->
<div class="col-sm-8 p-1">
<!-- box - notices -->
<div style="border:2px solid #f8edfd"><div class="bg-faded px-2 pb-2" style="border:6px solid #524587">
<!-- box header -->
<div class="pb-2 mx-n2 mb-2 text-center" style="background-color:#524587; color:#f8edfd; font-size:1.2em; letter-spacing:1px">
notice
</div>
<!-- /header -->
<p>please read before interacting etc etc</p>
<ul class="fa-ul mb-0 ml-4">
<!-- item -->
<li><span class="fa-li fal fa-sparkle"></span>
btw all the placeholders are just suggestions
</li>
<!-- item -->
<li><span class="fa-li fal fa-sparkle"></span>
that being said put your rules here instead of in your profile warning for goodness sake. thanks.
</li>
<!-- item -->
<li><span class="fa-li fal fa-sparkle"></span>
content
</li>
<!-- item -->
<li><span class="fa-li fal fa-sparkle"></span>
content
</li>
<!-- put more list items above this line -->
</ul>
</div></div>
<!-- /box -->
</div>
<!-- /col -->
<!-- col -->
<div class="col-sm-4 p-1">
<!-- box - image -->
<div style="border:2px solid #f8edfd; height:100%; min-height:200px"><div class="bg-faded px-2 pb-2" style="border:6px solid #524587;
background-image:url(imglink);
background-size:cover; background-position:center; height:100%"></div></div>
<!-- /box -->
</div>
<!-- /col -->
<!-- col -->
<div class="col-sm-5 p-1">
<!-- box - status -->
<div style="border:2px solid #f8edfd; height:100%"><div class="bg-faded px-2 pb-2" style="border:6px solid #524587; height:100%">
<!-- box header -->
<div class="pb-2 mx-n2 mb-2 text-center" style="background-color:#524587; color:#f8edfd; font-size:1.2em; letter-spacing:1px">
status
</div>
<!-- /header -->
<!-- comms -->
<p class="justify-content-between align-items-center my-0">
<b>commissions</b> open
</p>
<!-- trades -->
<p class="justify-content-between align-items-center my-0">
<b>trades</b> ask
</p>
<!-- reqs -->
<p class="justify-content-between align-items-center my-0">
<b>requests</b> closed
</p>
<hr class="my-2">
<p>info here but in a paragraph. click below for more info.</p>
<!-- info links -->
<p class="text-center px-sm-3 justify-content-around">
<!-- link -->
<a class="fal fa-tag tooltipster" style="color:#524587; text-decoration:none"
title="commission info" href="commlink"></a>
<!-- link -->
<a class="fal fa-pencil tooltipster" style="color:#524587; text-decoration:none"
title="trade info" href="tradelink"></a>
<!-- link -->
<a class="fal fa-sparkles tooltipster" style="color:#524587; text-decoration:none"
title="wishlist" href="wishlink"></a>
<!-- link -->
<a class="fal fa-list-check tooltipster" style="color:#524587; text-decoration:none"
title="to-do" href="todolink"></a>
<!-- put more links above this line -->
</p>
<!-- /info -->
</div></div>
<!-- /box -->
</div>
<!-- /col -->
<!-- col -->
<div class="col-sm-7 p-1">
<!-- box - interests -->
<div style="border:2px solid #f8edfd; height:100%"><div class="bg-faded px-2 pb-2" style="border:6px solid #524587; height:100%">
<!-- box header -->
<div class="pb-2 mx-n2 mb-2 text-center" style="background-color:#524587; color:#f8edfd; font-size:1.2em; letter-spacing:1px">
interests
</div>
<!-- /header -->
<ul class="fa-ul mb-0 ml-4">
<!-- item -->
<li><span class="fa-li fal fa-heart"></span>
<b>likes</b>
thing
</li>
<!-- item -->
<li><span class="fa-li fal fa-xmark"></span>
<b>dislikes</b>
thing
</li>
<hr class="my-2">
<!-- item -->
<li><span class="fa-li fal fa-sparkle"></span>
content
</li>
<!-- item -->
<li><span class="fa-li fal fa-sparkle"></span>
content
</li>
<!-- put more list items above this line -->
</ul>
</div></div>
<!-- /box -->
</div>
<!-- /col -->
</div>
</div>
<!-- featured - ideally all images in this section are the same size. -->
<!-- col -->
<div class="col-sm-12 p-1">
<!-- box - section title -->
<div style="border:2px solid #f8edfd">
<div class="text-center px-sm-5 py-2 justify-content-around align-items-center" style="background-color:#524587; color:#f8edfd; font-size:1.2em; letter-spacing:1px">
featured (characters/friends/folders)
</div>
</div>
<!-- /box -->
</div>
<!-- /col -->
<!-- col - character -->
<div class="col-6 col-sm-3 p-1">
<!-- box - character -->
<div style="border:2px solid #f8edfd; height:100%"><div class="bg-faded px-2 pt-2" style="border:6px solid #524587; height:100%">
<!-- image + link -->
<a href="charlink"><img class="w-100"
src="imglink"
></a>
<!-- name -->
<div class="pt-1 mx-n2 mt-2 text-center" style="background-color:#524587; color:#f8edfd; font-size:1.2em; letter-spacing:1px">
name
</div>
</div></div>
<!-- /box -->
</div>
<!-- /col -->
<!-- col - character -->
<div class="col-6 col-sm-3 p-1">
<!-- box - character -->
<div style="border:2px solid #f8edfd; height:100%"><div class="bg-faded px-2 pt-2" style="border:6px solid #524587; height:100%">
<!-- image + link -->
<a href="charlink"><img class="w-100"
src="imglink"
></a>
<!-- name -->
<div class="pt-1 mx-n2 mt-2 text-center" style="background-color:#524587; color:#f8edfd; font-size:1.2em; letter-spacing:1px">
name
</div>
</div></div>
<!-- /box -->
</div>
<!-- /col -->
<!-- col - character -->
<div class="col-6 col-sm-3 p-1">
<!-- box - character -->
<div style="border:2px solid #f8edfd; height:100%"><div class="bg-faded px-2 pt-2" style="border:6px solid #524587; height:100%">
<!-- image + link -->
<a href="charlink"><img class="w-100"
src="imglink"
></a>
<!-- name -->
<div class="pt-1 mx-n2 mt-2 text-center" style="background-color:#524587; color:#f8edfd; font-size:1.2em; letter-spacing:1px">
name
</div>
</div></div>
<!-- /box -->
</div>
<!-- /col -->
<!-- col - character -->
<div class="col-6 col-sm-3 p-1">
<!-- box - character -->
<div style="border:2px solid #f8edfd; height:100%"><div class="bg-faded px-2 pt-2" style="border:6px solid #524587; height:100%">
<!-- image + link -->
<a href="charlink"><img class="w-100"
src="imglink"
></a>
<!-- name -->
<div class="pt-1 mx-n2 mt-2 text-center" style="background-color:#524587; color:#f8edfd; font-size:1.2em; letter-spacing:1px">
name
</div>
</div></div>
<!-- /box -->
</div>
<!-- /col -->
<!-- /featured -->
<!-- links -->
<!-- col - link -->
<div class="col-sm-4 p-1">
<!-- box - link -->
<div style="border:2px solid #f8edfd">
<a class="text-center px-sm-5 py-2 btn btn-block border-0 rounded-0" style="background-color:#524587; color:#f8edfd; font-size:1.2em; letter-spacing:1px"
href="misclink">link
</a>
</div>
<!-- /box -->
</div>
<!-- /col -->
<!-- col - link -->
<div class="col-sm-4 p-1">
<!-- box - link -->
<div style="border:2px solid #f8edfd">
<a class="text-center px-sm-5 py-2 btn btn-block border-0 rounded-0" style="background-color:#524587; color:#f8edfd; font-size:1.2em; letter-spacing:1px"
href="misclink">link
</a>
</div>
<!-- /box -->
</div>
<!-- /col -->
<!-- col - link -->
<div class="col-sm-4 p-1">
<!-- box - link -->
<div style="border:2px solid #f8edfd">
<a class="text-center px-sm-5 py-2 btn btn-block border-0 rounded-0" style="background-color:#524587; color:#f8edfd; font-size:1.2em; letter-spacing:1px"
href="misclink">link
</a>
</div>
<!-- /box -->
</div>
<!-- /col -->
<!-- /links -->
<!-- /content -->
</div>
</div>
<!-- end -->