f2u - roulette

<!--   FIND + REPLACE
gradient colour 1: #95d6c9
gradient colour 2: #e8afa4
accent colour: #F7819C
-->

<div class="container p-3" style="max-width:610px; background:url(https://cdn.discordapp.com/attachments/273482437135171585/947161017136332810/ripples.png); background-attachment:fixed; border-radius:5px;">
<div class="container p-0" style="box-shadow: rgba(0,0,0,0.1) 0px 1px 4px 1px">
    <div class="container p-1" style="background-image: linear-gradient(#95d6c9, #e8afa4); border-radius:2px">
        <div class="row no-gutters">
            <div class="col-sm-3">
                <div class="container p-2">
                <div class="container bg-white p-2" style="border-radius:1rem">
                    <!--   left side image - put image link where it says URL HERE   -->
                    <div class="card border-0" style="background:url(URL HERE); height:115px; background-size:cover; background-position:center; background-repeat:no-repeat; border-radius:1rem"></div>
                </div>
                </div>
            </div>
            <div class="col-sm-9">
                <div class="container p-2">
                <div class="container justify-content-end p-0 pr-2" style="font-size:2rem; color:white; text-shadow: 2px 1px #F7819C">hi! put whatever here!</div>
                <!--   about you!   -->
                <div class="container bg-white text-dark p-2 px-3" style="height:83px; border-radius:1rem; overflow:auto">
                    <p>a little about yourself here. this scrolls when filled.</p>
                    <p>another paragraph.</p>
                </div>
                </div>
            </div>
        </div>
        <div class="row no-gutters">
            <div class="col-sm-9">
                <div class="row no-gutters">
                    <div class="col-sm-7">
                <div class="container p-2">
                    <!--  interests   -->
                    <div class="container bg-white text-dark" style="border-radius:1rem; height:150px; overflow:auto">
                        <div class="container p-2" style="font-size:16px; border-bottom:1px dashed #F7819C">interests <span class="pull-right"><i class="fal fa-heart fa-fw text-secondary"></i></span></div>
                        <ul class="p-1 px-3">
                            <li>one</li>
                            <li>two</li>
                        </ul>
                    </div>
                </div>
            </div>
                    <div class="col-sm-5">
                <div class="container p-2">
                    <div class="container bg-white text-dark" style="border-radius:1rem; height:150px">
                        <div class="container bg-white text-dark" style="border-radius:1rem; height:150px; overflow:auto">
                        <div class="container px-0 py-2" style="font-size:16px; border-bottom:1px dashed #F7819C">notices <span class="pull-right"><i class="fal fa-info fa-fw text-secondary"></i></span></div>
                        <ul class="p-1 px-3">
                            <li>one</li>
                            <li>two</li>
                        </ul>
                    </div>
                    </div>
                </div>
            </div>
                    <div class="col-sm-2 mt-1">
                        <div class="container p-2">
                            <!--   social media - use font awesome's gallery to change them if you wish and put link where it says link   -->
                            <div class="container bg-white align-items-center mb-2 text-center" style="border-radius:1rem; height:40px; font-size:18px;"><a href="link"><i class="fab fa-tumblr fa-fw text-secondary"></i></a></div>
                            <div class="container bg-white align-items-center text-center my-2 text-center" style="border-radius:1rem; height:40px; font-size:18px;"><a href="link"><i class="fab fa-twitter fa-fw text-secondary"></i></a></div>
                            <div class="container bg-white align-items-center text-center my-2 text-center" style="border-radius:1rem; height:40px; font-size:18px;"><a href="link"><i class="fab fa-instagram fa-fw text-secondary"></i></a></div>
                            <div class="container bg-white align-items-center text-center my-2 text-center" style="border-radius:1rem; height:40px; font-size:18px;"><a href="link"><i class="fab fa-tiktok fa-fw text-secondary"></i></a></div>
                            <div class="container bg-white align-items-center text-center my-2 text-center" style="border-radius:1rem; height:40px; font-size:18px;"><a href="link"><i class="fab fa-youtube fa-fw text-secondary"></i></a></div>
                        </div>

                    </div>
                    <div class="col-sm-10">
                        <div class="container p-2">
                            <!--   music   -->
                            <div class="container justify-content-end p-0" style="font-size:2rem; color:white; text-shadow: 2px 1px #F7819C">커지는 heart b-b-beat!</div>
                            <div class="card border-0 bg-white p-2" style="border-radius:20px">
                                        <!--   put ONLY the end of your youtube url after the embed/ . for example https://www.youtube.com/watch?v=QslJYDX3o8s would give me https://www.youtube.com/embed/QslJYDX3o8s-->
                                        <iframe style="width:100%px; height:179px; border-radius:20px" class="content-align-center" frameborder="0"
                                    src="https://www.youtube.com/embed/QslJYDX3o8s">
                                    </iframe>
                                    </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="container p-2">
<!--   featured characters   -->
                <div class="container bg-white p-2 mb-2" style="border-radius:1rem">
                    <!--  put image link where it says URL HERE and char link/name where it says!   -->
                    <a class="btn" href="char link" style="background:url(URL HERE); height:115px; width:100%; background-size:cover; background-position:center; background-repeat:no-repeat; border-radius:1rem" data-toggle="tooltip" title="char name"></a>
                </div>
                <div class="container bg-white p-2 mb-2" style="border-radius:1rem">
                    <!--   put image link where it says URL HERE and char link/name where it says!   -->
                    <a class="btn" href="char link" style="background:url(URL HERE); height:115px; width:100%; background-size:cover; background-position:center; background-repeat:no-repeat; border-radius:1rem" data-toggle="tooltip" title="char name"></a>
                </div>
                <div class="container bg-white p-2 mb-2" style="border-radius:1rem">
                    <!--   put image link where it says URL HERE and char link/name where it says!   -->
                    <a class="btn" href="char link" style="background:url(URL HERE); height:115px; width:100%; background-size:cover; background-position:center; background-repeat:no-repeat; border-radius:1rem" data-toggle="tooltip" title="char name"></a>
                </div>
                </div>

            </div>
        </div>
    </div>
</div>
<a class="pull-right text-secondary" style="font-size:11px">code by hanyu</a>
</div>