radiokids

<!--
good morning. i hope you're doing well.

colors:
background + header color: #fafafa (this is also the background of the transparent texture)
border + links: #9aff00
icon shadow + text color: #000

background image: https://transparenttextures.com/patterns/black-lozenge.png
go to transparrenttextures.com for more textures
-->

<div class="col-lg-4 col-md-6 col-sm-12 mx-auto p-0 mt-3" style="background-color: #fafafa; border-radius: 10px">
    <div class="col-12 p-2" style="background-image: url(https://transparenttextures.com/patterns/black-lozenge.png); border-radius: 10px">

        <!-- icon -->
        <div class="col-md-4 col-sm-auto p-2 mt-n4 ml-md-n3 ml-sm-0 float-left mx-sm-auto mr-md-2 mb-sm-2 mb-md-0" style="border-radius: 10px; border: 5px solid #9aff00; box-shadow: 5px 5px 0px #000; z-index: 1;">

            <!-- replace https://cdn.discordapp.com/attachments/841329887633604669/1050981926758010990/Radiokids.png with your img -->
            <img src="https://cdn.discordapp.com/attachments/841329887633604669/1050981926758010990/Radiokids.png" style="box-shadow: 5px 5px 0px #000;">

        </div>



        <div class="col-12 p-0">

            <!-- username? name? keep it short either way -->
            <p class="font-italic text-sm-center text-md-left mt-sm-2 mt-md-0" style="color: #fafafa; text-shadow: 2px 2px 0px #000; font-size: 30px; font-family: terminal, monaco">
            _SNDWRK/gh
            </p>

            <!-- intro paragraph -->
            <div class="col-12 p-2 mt-sm-2 mt-md-0" style="background-color: #fafafa; color: #000; border-radius: 10px">
            this is an introductory paragraph. first of all, keep it atleast 2 lines so the buttons look ok. second of all, this doesn't scroll, it expands (i dont think overflow auto works with what i was doing w the photo) so keep it not too long. i guess you could also use this as a character code.
            </div>
        </div>

    </div>

</div>

<div class="col-lg-4 col-md-6 col-sm-12 mx-auto p-0">

    <!-- buttons, shoutout to togo for giving me this snippet :-) -->
<div class="row no-gutters align-items-center mt-n3">

        <!-- btn 1 -->
        <div class="d-inline-flex px-2 py-1 mx-1 ml-auto text-black rounded align-items-center" style="position: relative; background-color: #9aff00; overflow: hidden; border-radius: 20px">

                <!-- i kept them as content so they can b used for anything, a long about me, a social media link, but anyways you can change the fontawesome icon by going to fontawesome.com. -->
                <span style="color: #000"><i class="fas fa-star mr-1"></i> Content</span>

                <!-- change the # to your link. -->
                <a href="#" class="btn btn-outline-primary border-0" style="position: absolute; top: 0; right: 0; bottom: 0; left: 0; box-shadow: none; filter: grayscale(1) brightness(-1000%); opacity: .25; color: #000"></a>
        </div>

        <!-- btn 2 -->
        <div class="d-inline-flex px-2 py-1 mx-1 text-black rounded align-items-center" style="position: relative; background-color: #9aff00; overflow: hidden; border-radius: 20px">

                <!-- link name and font awesome icon -->
                <span style="color: #000"><i class="fas fa-star mr-1"></i> Content</span>

                <!-- actual link href. change the # -->
                <a href="#" class="btn btn-outline-primary border-0" style="position: absolute; top: 0; right: 0; bottom: 0; left: 0; box-shadow: none; filter: grayscale(1) brightness(-1000%); opacity: .25; color: #000"></a>
        </div>

        <!-- btn 3 -->
        <div class="d-inline-flex px-2 py-1 mx-1 mr-auto text-black rounded align-items-center" style="position: relative; background-color: #9aff00; overflow: hidden; border-radius: 20px">

                <!-- link name and icon -->
                <span style="color: #000"><i class="fas fa-star mr-1"></i> Content</span>

                <!-- link href -->
                <a href="#" class="btn btn-outline-primary border-0" style="position: absolute; top: 0; right: 0; bottom: 0; left: 0; box-shadow: none; filter: grayscale(1) brightness(-1000%); opacity: .25; color: #000"></a>
        </div>

    </div>

    <!-- dont remove thx -->
   <p style="text-align:center"> <a href="/micro-wave" style="color: #9aff00"><i class="fas fa-microwave"></i></a></p>
</div>