<!---
========================================================
code by Lullah
colors used:
> #1E1E1E (font color)
> #9b9b9b (box border)
> #dedede (box background)
> #3f3f3f (icon border)
> #ABABAB (icon background)
You may...
> Edit this code to oblivion!
> Recycle parts for your own use!
You may not...
> Remove my watermark!
========================================================
--->
<div class="container" style="color:#1E1E1E;font-size:1.6em;">
<!--- background credit to u/FeistyFlight9 on reddit! --->
<div class="rounded p-3 p-md-5" style="
background-image:url(https://preview.redd.it/2obw9yylddr51.jpg?width=960&crop=smart&auto=webp&s=b986cf7bdf8dcbf20101e67baa2429901cf779c0);
background-attachment:fixed;border-radius:10px;position:relative;">
<div class="row no-gutters mx-auto" style="max-width:500px;">
<!--- crewmate id card --->
<div class="col-12 px-4 pl-md-5 pb-4 pt-2 d-flex" style="min-height:275px;border-radius:10px;border:3px solid #9b9b9b;background-color:#dedede;">
<div class="my-auto">
<!--- among us/title --->
<div style="font-size:1.3em;font-weight:lighter;">Among Us</div>
<div class="row no-gutters d-flex">
<!---- icon ---->
<div class="col-md-4 rounded pr-md-2"><div style="height:160px;width:130px;
background-image:url(https://via.placeholder.com/160);
background-size:cover;background-position:;border:solid 5px #3f3f3f;border-radius:10px;background-color:#ABABAB;"></div></div>
<!---- basic profile ---->
<div class="col-md-8 pl-md-2 mt-2 mt-md-0 text-uppercase" style="font-size:0.95em;font-weight:lighter;line-height:150%;">
<div><b>Name:</b> Info</div>
<div><b>Height:</b> 3'5"</div>
<div><b>Weight:</b> 42lb</div>
<div><b>Occupation:</b> Crewmate</div></div>
</div>
</div>
</div>
<!--- spacer --->
<div class="col-12" style="height:50px;"></div>
<!--- crewmate info --->
<div class="col-12">
<div class="px-4 py-3" style="border-radius:10px;border:3px solid #9b9b9b;background-color:#dedede;">
<div class="text-uppercase" style="font-weight:lighter;">
<div><b>Color:</b> Info</div>
<div><b>Hat:</b> Info</div>
<div><b>Pet:</b> Info</div>
<div><b>Skin:</b> Info</div></div>
</div>
</div>
<!--- spacer --->
<div class="col-12" style="height:50px;"></div>
<!--- backstory & personality --->
<div class="col-12">
<div class="px-4 py-3" style="border-radius:10px;border:3px solid #9b9b9b;background-color:#dedede;">
<div class="text-uppercase">
<div style="font-weight:lighter;"><b>Backstory:</b></div>
<div style="font-size:0.9em;font-weight:lighter;">
Enter your story here! The box expands, so probably don't write too much.</div>
<div class="mt-3" style="font-weight:lighter;"><b>Personality</b>: </div>
<div style="font-size:0.9em;font-weight:lighter;">
Enter your personality here! The box expands, so probably don't write too much.</div>
</div>
</div>
</div>
<!--- spacer --->
<div class="col-12" style="height:50px;"></div>
<!--- relationships --->
<div class="col-12">
<div class="card pl-4 pr-3 py-3" style="border-radius:10px;border:3px solid #9b9b9b;background-color:#dedede;">
<div class="row no-gutters">
<!---- char 1 ---->
<div class="col-6 col-md-3 pr-2">
<div style="height:155px;
background-image:url(https://f2.toyhou.se/file/f2-toyhou-se/images/30325276_wHhwDElHu0pWjF1.png?1610461478);
background-size:cover;background-position:;border:solid 4px #3f3f3f;border-radius:10px;background-color:#ABABAB;"></div>
<div class="text-center mt-1" style="line-height:110%;">
<a href="" style="font-size:1.2em;">
<b>Name</b></a>
<span class="text-uppercase" style="font-size:0.9em;font-weight:lighter;">
Relation</span></div>
</div>
<!---- char 2 ---->
<div class="col-6 col-md-3 pr-2">
<div style="height:155px;
background-image:url(https://f2.toyhou.se/file/f2-toyhou-se/images/30325276_wHhwDElHu0pWjF1.png?1610461478);
background-size:cover;background-position:;border:solid 4px #3f3f3f;border-radius:10px;background-color:#ABABAB;"></div>
<div class="text-center mt-1" style="line-height:110%;">
<a href="" style="font-size:1.2em;">
<b>Name</b></a>
<span class="text-uppercase" style="font-size:0.9em;font-weight:lighter;">
Relation</span></div>
</div>
<!---- char 3 ---->
<div class="col-6 col-md-3 pr-2 mt-2 mt-md-0">
<div style="height:155px;
background-image:url(https://f2.toyhou.se/file/f2-toyhou-se/images/30325276_wHhwDElHu0pWjF1.png?1610461478);
background-size:cover;background-position:;border:solid 4px #3f3f3f;border-radius:10px;background-color:#ABABAB;"></div>
<div class="text-center mt-1" style="line-height:110%;">
<a href="" style="font-size:1.2em;">
<b>Name</b></a>
<span class="text-uppercase" style="font-size:0.9em;font-weight:lighter;">
Relation</span></div>
</div>
<!---- char 4 ---->
<div class="col-6 col-md-3 pr-2 mt-2 mt-md-0">
<div style="height:155px;
background-image:url(https://f2.toyhou.se/file/f2-toyhou-se/images/30325276_wHhwDElHu0pWjF1.png?1610461478);
background-size:cover;background-position:;border:solid 4px #3f3f3f;border-radius:10px;background-color:#ABABAB;"></div>
<div class="text-center mt-1" style="line-height:110%;">
<a href="" style="font-size:1.2em;">
<b>Name</b></a>
<span class="text-uppercase" style="font-size:0.9em;font-weight:lighter;">
Relation</span></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--- credit!! don't remove pls thx --->
<div class="text-right" style="font-size:0.8em;">
<a href="https://www.reddit.com/r/AmongUs/comments/j5vd1v/the_among_us_space_background_with_no_people_in_it/" data-toggle="tooltip" title="background by u/FeistyFlight9 on reddit!" class="text-secondary"><i class="fas fa-image fa-sm"></i></a>
<a href="https://toyhou.se/Lullah" class="text-secondary"><i class="fas fa-code fa-sm"></i></a>
</div>
</div>
