Stor8

<!--
background colour: bg-light
text colour: text-dark
border colour: text-primary
icon colour: text-secondary
-->
<div class="container" style="max-width:500px">
    <!-- background image -->
    <div style="background:url('IMG_HERE'); background-size:cover; background-repeat:no-repeat; background-position:center; padding-top:125px; padding-bottom:25px">
    <!-- profile -->
    <div class="row no-gutters justify-content-center" style="height:auto"><div class="col-10 mx-md-1"><div class="mb-2 bg-light text-primary" style="position:relative; border-radius:20px; border:7.5px double;">
        <!-- pfp -->
        <div class="justify-content-center">
            <div class="bg-light text-primary" style="border-radius:20px; height:250px; width:250px; border-radius:50%; position:absolute; top:-100px; border:7.5px double">
                <div style="background:url('IMG_HERE'); background-size:cover; background-repeat:no-repeat; background-position:center; height:100%; width:100%; border-radius:50%"></div>
            </div>
        </div>
        <!-- name -->
        <div class="justify-content-center text-dark" style="font-size:30px; font-variant:small-caps; margin-top:145px">
            <span>Name</span>
        </div>
        <!-- age/pronouns/timezone -->
        <div class="justify-content-center text-dark" style="font-size:17.5px; font-variant:small-caps; opacity:0.90; margin-top:-5px">
            <span>age . pronouns . timezone</span>
        </div>
            <hr class="mx-3 mt-2 mb-2 text-primary" style="border:1px solid">
        <!-- text -->
        <div class="text-center p-1 text-dark" style="font-size:16px"><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.
            <br>Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
        </p></div>
            <hr class="mx-3 mt-3 mb-1 text-primary" style="border:1px dashed">
        <!-- icons -->
        <div class="justify-content-center p-1" style="letter-spacing:10px; font-size:20px"> 
            <a href="URL_HERE" target="_blank"><i class="fas fa-link text-secondary"></i></a>
            <a href="URL_HERE" target="_blank" ><i class="fab fa-deviantart text-secondary"></i></a>
            <a href="URL_HERE" target="_blank" ><i class="fab fa-twitter text-secondary"></i></a>
            <a href="URL_HERE" target="_blank" ><i class="fab fa-tumblr text-secondary"></i></a>
            <a href="URL_HERE" target="_blank" data-toggle="tooltip" title="Username here!"><i class="fab fa-discord text-secondary"></i></a>
			<!-- credit, please do not remove! -->
            <a href="/Aris" target="_blank" data-toggle="tooltip" title="HTML by Palarista"><i class="fas fa-code text-secondary"></i></a>

        </div>
    </div></div></div>
    </div>
</div>

<div class="container" style="max-width:500px; color:{{c!Text Colour!}}">
    <!-- background image -->
    <div style="background:url('{{u!Background Image!}}'); background-size:cover; background-repeat:no-repeat; background-position:center; padding-top:125px; padding-bottom:25px">
    <!-- profile -->
    <div class="row no-gutters justify-content-center" style="height:auto"><div class="col-10 mx-md-1"><div class="mb-2" style="position:relative; background-color:{{c!Background Colour!}}; border-radius:20px; border:7.5px double {{c!Border Colour!}};">
        <!-- pfp -->
        <div class="justify-content-center">
            <div style="background-color:{{c!Background Colour!}}; border-radius:20px; height:250px; width:250px; border-radius:50%; position:absolute; top:-100px; border:7.5px double {{c!Border Colour!}}">
                <div style="background:url('{{u!Profile Picture!}}'); background-size:cover; background-repeat:no-repeat; background-position:center; height:100%; width:100%; border-radius:50%"></div>
            </div>
        </div>
        <!-- name -->
        <div class="justify-content-center" style="font-size:30px; font-variant:small-caps; margin-top:145px">
            <span>{{!Name!}}</span>
        </div>
        <!-- age/pronouns/timezone -->
        <div class="justify-content-center" style="font-size:17.5px; font-variant:small-caps; opacity:0.90; margin-top:-5px">
            <span>{{!Text . under . name!}}</span>
        </div>
            <hr class="mx-3 mt-2 mb-2" style="border:1px solid {{c!Border Colour!}}">
        <!-- text -->
        <div class="text-center p-1" style="font-size:16px"><p>
            {{l!Profile Text!}}
        </p></div>
            <hr class="mx-3 mt-3 mb-1" style="border:1px dashed {{c!Border Colour!}}">
        <!-- icons -->
        <div class="justify-content-center p-1" style="letter-spacing:10px; font-size:20px"> 
            {{%Icons%<a href="{{u%Link%}}" target="_blank" data-toggle="tooltip" title="{{%Text when hovered over%}}"><i class="{{i%Icon%}}" style="color:{{c!Icon Colour!}}"></i></a>%end%}}
            <!-- credit, please do not remove! -->
            <a href="/Aris" target="_blank" data-toggle="tooltip" title="HTML by Palarista"><i class="fas fa-code" style="color:{{c!Icon Colour!}}"></i></a>
        </div>
    </div></div></div>
    </div>
</div>