GA-11124: Zander

<!--==========================================

[12] UNDERLINED (CARD) by TOGO

-- -- -- -- -- -- -- -- -- -- -- -- -- --
anything you need to edit should be
tabbed and clearly marked - i've also
added comments for light code edits you
may want to do. feel free to change
any elements to your needs!
-- -- -- -- -- -- -- -- -- -- -- -- -- --
this code has a custom accent colour;
the easiest way to change it is to
mark the colour code below, and
then use ctrl+f to find and replace
all instances of it in the code.

accent :

#4fa4bb

-- -- -- -- -- -- -- -- -- -- -- -- -- --

> do not use with WYSIWYG on, it will
break the code.
> keep my credit in.
> direct any questions to my comments,
PMs or discord. thank you!

===========================================-->

<!-- MAIN CONTAINER =======================-->

<div class="my-5 mx-auto py-4 px-3 p-md-4" style="position: relative; max-width: 750px; border-radius: 15px; overflow: hidden;">

<!-- BACKGROUND ===========================-->

<div class="h-100 w-100" style="position: absolute; top: 0; left: 0;

background-image: url(https://images.pexels.com/photos/53148/shish-kebab-meat-skewer-vegetable-skewer-meat-products-53148.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1);
background-size: cover;
filter: blur(3px);
/*
remove background-size if you're using a seamless pattern.
filter will automatically blur the background - remove it if you'd like the bg sharp.
*/;

background-position: center; transform: scale(1.1,1.1);"></div>
<div class="row flex-md-row-reverse justify-content-center align-items-center">

<!-- IMAGE ================================-->

<div class="col-7 col-md-4">
<img class="w-100"

src="https://f2.toyhou.se/file/f2-toyhou-se/images/69165781_VhWMcT6YZVGjAUa.png">

</div>

<!-- TEXT TITLE ===========================-->

<div class="my-4 col-10 col-md-8">
<div class="card p-3 border-0" style="border-radius: 15px;">
<p class="mb-0" style="font-family: 'Courier New', monospace;">

Zander. He/Him. Quiet.

<!-- MUSIC LINK ===========================-->

<a class="float-right"

href="YOUTUBE URL" target="_blank" style="color: #f09542;">

<i class="fal fa-music-alt"></i>
</a>
</p>
<hr class="w-100 mt-1 mb-3" style="border-top-style: dashed; border-top-width: 2px;">

<!-- TEXT BODY ============================-->

<div class="mb-3 text-center font-italic text-muted" style="max-height: 200px; overflow-y: auto;">

<p>A cook for Big b's restaurant and brother of Bruce.
</p>

</div>

<!-- TEXT FOOTER ==========================-->

<hr class="w-100 mt-0 mb-1" style="border-top-style: dashed; border-top-width: 2px;">
<p class="text-right" style="font-family: 'Courier New', monospace;">
<!-- credit. you can restyle, but don't hide/remove it. -->
<a href="https://toyhou.se/Togo" class="float-left" style="color: #f09542; margin-top: 1px;">
<i class="fal fa-code"></i>
</a>

design + art by
<a href="DESIGNER URL" style="color: #f09542;">
designer.
</a>
</p>
</div>
</div>
</div>
</div>