<!-- main background image here --- use a very big/high res image -->
<div style="background-image: url('IMG_URL');
background-size: cover; background-position: center; max-width: 1250px; border-radius: 1em;" class="container-fluid py-5 px-md-5 px-4 my-5">
<div class="container-fluid py-md-5 py-4 px-0" style="max-width: 600px;">
<div style="font-size: 10.5pt; letter-spacing: .25px; border-radius: 1em;" class="card d-block p-md-5 p-4 text-center">
<div class="row no-gutters justify-content-center">
<div class="col-md-auto px-lg-2 mb-md-0 mb-3">
<!-- avatar icon here -->
<img src="IMG_URL"
class="rounded" style="max-height: 150px;">
</div>
<div class="col-md-auto"><div class="h-100 w-100 flex-column justify-content-center align-items-center">
<div class="mb-2"><h1 style="font-size: 2em; letter-spacing: 1px;" class="text-primary text-uppercase">
<!-- name/title here -->
Your Name Here
</h1></div>
<div><h4 style="font-weight:400; letter-spacing: 1px;" class="text-uppercase mb-0">
<!-- subtitle adjectives here --->
Age | Gender | Adj
</h4></div>
</div></div>
</div>
<hr class="w-50 bg-primary my-4">
<div class="text-uppercase mb-4" style="letter-spacing: 1px;">
<!-- page links -- i put in some random examples for demo but you can customize these links to be whatever you want -->
<a href="LINK_HERE" style="border-radius:.5em;" class="btn btn-primary d-inline-block m-1">
About
</a>
<a href="LINK_HERE" style="border-radius:.5em;" class="btn btn-primary d-inline-block m-1">
FAQ
</a>
<a href="LINK_HERE" style="border-radius:.5em;" class="btn btn-primary d-inline-block m-1">
Commissions
</a>
<a href="LINK_HERE" style="border-radius:.5em;" class="btn btn-primary d-inline-block m-1">
Queue
</a>
<a href="LINK_HERE" style="border-radius:.5em;" class="btn btn-primary d-inline-block m-1">
Trades
</a>
<a href="LINK_HERE" style="border-radius:.5em;" class="btn btn-primary d-inline-block m-1">
RP Info
</a>
</div>
<!-- small about blurb here --------------->
<p>Write a SMALL blurb here. This box grows with content, it does not scroll. The buttons above are all links. This layout is inspired by carrd, it's meant to serve a quick & easy hub for creators with lots of pages/social media sites!</p>
<hr class="w-50 mt-4 mb-md-5 mb-4 bg-primary">
<!-- SOCIAL MEDIA LINKS -- use "font awesome" icons -- erase or add icons & links based on what you need -->
<a href="TWITTER_LINK" target="_BLANK">
<i class="fab fa-twitter fa-fw fa-2x "/>
</a>
<a href="DEVIANTART_LINK" target="_BLANK">
<i class="fab fa-deviantart fa-fw fa-2x "/>
</a>
<a href="FA_LINK" target="_BLANK">
<i class="fas fa-paw fa-fw fa-2x "/>
</a>
<a href="YOUTUBE_LINK" target="_BLANK">
<i class="fab fa-youtube fa-fw fa-2x "/>
</a>
<a href="TWITCH_LINK" target="_BLANK">
<i class="fab fa-twitch fa-fw fa-2x "/>
</a>
<a href="CURIOUSCAT_LINK" target="_BLANK">
<i class="fas fa-cat fa-fw fa-2x "/>
</a>
<!-- background image credit ---->
<a href="CREDIT_LINK" target="_BLANK">
<i class="fas fa-image fa-fw fa-2x "/>
</a>
<!-- coding credit -- please leave this link -->
<a href="/eggy" target="_BLANK">
<i class="fas fa-code fa-fw fa-2x "/>
</a>
</div> </div>
</div>
Latest Comments