Soak Up The Sun 2.0

<!-----------

SOAK UP THE SUN 2.0 ☀
by meromercury

released: 3/2/25 || updated: 3/9/25

I would not recommend changing the colors here unless you know what you're doing!
Use FontAwesome.com to change any symbols.
If you have any issues, comments, or questions, please post in my forum thread!

---------->
<div class="container-fluid no-gutters p-0 mt-3" >
    <div class="mx-auto col-12 pt-2" style="overflow:hidden">

        <!----- sun ☀ ----->
        <div class="text-center col-12 mx-auto" style="z-index:-1;">
            <i class="fas fa-certificate fa-spin fa-stack-2x" style="color:#fcc56d;animation-duration: 7s;font-size:18rem;"></i>
            <i class="fas fa-certificate fa-spin fa-stack-2x" style="color:#fadda2;animation-duration: 7s;font-size:13rem;top:40px"></i>
        </div>

    <div class="col-12 mx-auto p-3 mt-5" style="position:relative;top:5px;max-width:700px">
        <!--- right cloud --->
        <div class="text-white d-block d-md-block" style="z-index:999;position:absolute;top:50px;right:85px;"><span><i class="fa-solid fa-stack-1x fa-cloud fa-6x" style=""></i><i class="fa-solid fa-stack-1x fa-cloud fa-6x" style="color:#17c3b2;z-index:-555;font-size:6.1rem;top:-9px;left:-7px;text-shadow:5px 5px 10px rgba(23,195,178,0.4);"></i></span></div>

        <div style="z-index:999;position:absolute;top:100px;right:10px;font-size:30px;">
            <a data-toggle="tooltip" title="code by mero" href="https://toyhou.se/meromercury" style="color:rgba(250,221,162,0.69)"><i class="fa-solid fa-code"></i></a>
        </div>

        <!--- left clouds --->
        <div class="text-white d-block d-md-block" style="z-index:999;position:absolute;bottom:200px;left:-25px;"><span><i class="fa-solid fa-stack-1x fa-clouds fa-9x"></i><i class="fa-solid fa-stack-1x fa-clouds" style="color:#17c3b2;z-index:-555;font-size:8.9rem;top:-9px;left:-8px;text-shadow:5px 5px 10px rgba(23,195,178,0.4);"></i><i class="fa-solid fa-stack-1x fa-clouds" style="color:#17c3b2;z-index:-555;font-size:8.7rem;top:-8px;left:-4px;"></i></span><i class="fa-solid fa-circle" style="color:#17c3b2;position:absolute;z-index:-666;font-size:4.5rem;bottom:-140px;left:35px;"></i></div>

        <!--===
                IMAGE
        replace IMG URL with your image url
        if your image isn't square, it'll center and cover.
        ===-->
        <div class="card mx-auto" style="
        background:url(IMG URL);
        background-size:cover;background-position:center;height:150px;width:150px;z-index:999;border-radius:50%;border:10px double #17c3b2;background-color:#fadda2;">
        </div>

        <div class="card border-0 p-2 text-white" style="background-color:#17c3b2;top:-70px;min-height:350px;box-shadow:5px 5px 10px
        rgba(23,195,178,0.4);">

            <!---- top links ---->
            <div class="row mx-0 mb-md-1">

                    <div class="d-md-none d-block p-4 mb-3 bg-none w-100"></div>

                <div class="col-lg-4 col-12 p-0 pt-0 pt-lg-2 ml-lg-3 text-center">

                    <!--=====
                    SOCIALS
                    replace LINKS to ones that you do have
                    remove or replace ones you don't
                    you can have up to FIVE links, no more!
                    make sure the link has "QUOTES" around it, it should look like this:
                    href="YOUR LINK HERE.com"
                    =====-->

                <a class="btn p-1" style="background-color:#227C9D;color:#fadda2;width:40px;font-size:20px" data-toggle="tooltip"
                    title="twitter"
                    href="LINK"
                ><i class="fab fa-twitter"></i></a>
                <a class="btn p-1" style="background-color:#227C9D;color:#fadda2;width:40px;font-size:20px" data-toggle="tooltip"
                    title="instagram"
                    href="LINK"
                ><i class="fab fa-instagram"></i></a>
                <a class="btn p-1" style="background-color:#227C9D;color:#fadda2;width:40px;font-size:20px" data-toggle="tooltip"
                    title="tumblr"
                    href="LINK"
                ><i class="fa-brands fa-tumblr"></i></a>
                <a class="btn p-1" style="background-color:#227C9D;color:#fadda2;width:40px;font-size:20px" data-toggle="tooltip"
                    title="deviantart"
                    href="LINK"
                ><i class="fab fa-deviantart"></i></a>
                <a class="btn p-1" style="background-color:#227C9D;color:#fadda2;width:40px;font-size:20px" data-toggle="tooltip"
                    title="fur affinity"
                    href="LINK"
                ><i class="fas fa-paw"></i></a>
                </div>

                  <div class="d-md-block d-none mr-2" style="width:160px"></div>

                <div class="col p-0 pt-2 pt-lg-2 text-center">

                    <!--===
                    PROFILE LINKS
                    change these to whatever you'd like. Trading posts, design sales, a BYF, a Trello, commission sheets, whatever!
                    remove them if you don't need them, though I would recommend keeping them, as it looks weird without them...
                    you can have up to THREE links, no more!
                    "title" can be changed to match your link.
                    make sure the link has "QUOTES" around it, it should look like this:
                    href="YOUR LINK HERE.com"
                    ===-->
                <a class="btn p-1 ml-0 ml-lg-0" style="background-color:#227C9D;color:#fadda2;width:50px;font-size:20px" data-toggle="tooltip"
                    title="trades"
                    href="LINK"
                ><i class="fa-solid fa-messages-dollar"></i></a>
                <a class="btn p-1 ml-0 ml-lg-0" style="background-color:#227C9D;color:#fadda2;width:50px;font-size:20px" data-toggle="tooltip"
                    title="character folder"
                    href="LINK"
                ><i class="fa-solid fa-folder-user"></i></a>
                <a class="btn p-1 ml-0 ml-lg-0" style="background-color:#227C9D;color:#fadda2;width:50px;font-size:20px" data-toggle="tooltip"
                    title="rules"
                    href="LINK"
                ><i class="fa-solid fa-info-circle"></i></a>

                <!---- end links ---->
                </div>
                    <div class="col d-none d-md-block" style="min-width:70px;max-width:70px;"></div>
            </div>

            <!---- main body ---->
            <div class="row no-gutters mt-3" >

                <div class="row no-gutters" style="width:100%; max-width:370px;">
            <!--====
            STATUS: you can put anything here! I've put an example, but you can change it.
            <!--- KEEP IN MIND that if this gets too long, it will be cut off. So keep it short!
            ====-->
                    <div class="mx-2 py-0 px-2 mb-0 text-center overflow-hidden" style="color:#227C9D; height:35px; width:100%; max-width:370px; background-color:#fcc56d;border:5px solid #fcc56d; border-radius:15px;">

                        <!-- put stuff below this line! -->
                        <span style="font-weight:800; letter-spacing:0.04em;">
                            Maybe I am crazy too. . .
                        </span>
                        <!-- put stuff above this line! -->

                    </div>

                <!--===
                INFO BOX: you can put anything here, too! Could be text, pictures, links, videos...
                ===-->
                    <div class="mx-2 p-2 mt-2 table-responsive" style="color:#fadda2; font-weight:400; letter-spacing:0.03em; font-size:13px; height:149px; width:100%; max-width:372px; background-color:#227C9D;border:5px solid #fcc56d; border-radius:15px; word-wrap:break-word;">
                        <!-- put stuff below this line! -->
                        <p>
                            This is a good place for a little information!
                        </p>

                        <p style="color:#17c3b2">
                            Some darker text here, too.
                        </p>

                        <hr class="w-75 my-3" style="border:1px solid rgba(252,197,109,0.5)">

                        <div class="text-center" style="font-style:italic; color:#17c3b2"><b>status:</b> online ◄ <b>commissions:</b> closed ► <b>dms:</b> open</div>
                        <!-- put stuff above this line! -->
                    </div>
                </div>

                <!-- dummy - ignore --> <div class="d-md-none d-sm-block p-1"></div>

                <!--===
                STAMPS - or blinkies or some other kind of text... personalize it! It should look ok... Let me know in my thread if it doesn't. =)
                To replace the stamps, change everything between the "quotes" after src=.
                This will scroll if you add more than 6 stamps. Also, large images will make it scroll too.
                ===-->
                <div class="col-sm-12 col-md mx-2 h-100">
                    <div class="p-2 text-center table-responsive" style="max-height:195px; max-width:100%; background-color:#227C9D;border:5px solid #fcc56d; border-radius:15px;">
                        <!--- pics below here! --->

                        <img src="https://64.media.tumblr.com/4a3f1da2bd593cfa87216520ea736307/2f8834b47d90034d-04/s100x200/83eeec5b1eb739699689c5ff45129daa90c5514d.pnj">
                        <img src="https://64.media.tumblr.com/b1514fbe13de88d774ef3a340a24fe5b/04a9620f8b93f225-c6/s100x200/6dfeb8921030178a806a2d3a3872d0dc9a55c138.gifv">
                        <img src="https://64.media.tumblr.com/93a84f2b63c894c018df9651e9e5a323/2deb1afcc85895a3-f5/s100x200/2126e8234efbad63140445e4c5fc9f588e9ceb59.pnj">
                        <img src="https://64.media.tumblr.com/fbe1d75816b546711b10818be8a68264/3d53631a19efa50e-7f/s100x200/4b0b82f51787f22be9c17d31a97c1b7a2f39ff90.pnj">
                        <img src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/9865a25b-3dcf-4076-ad61-b1e7a6a31980/darpsjq-982e2cec-1a00-42cb-af8b-940a6431a989.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzk4NjVhMjViLTNkY2YtNDA3Ni1hZDYxLWIxZTdhNmEzMTk4MFwvZGFycHNqcS05ODJlMmNlYy0xYTAwLTQyY2ItYWY4Yi05NDBhNjQzMWE5ODkuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.OYgiaAKERLJEWaPporvrol1ZEsjDraAtOSaFqADbFQw">
                        <img src="https://64.media.tumblr.com/d6be4a144387a44d157585bb22102e85/74c67c3b8b5d5330-6e/s100x200/0dbe7e1992e60a3a75b025db4324cf0a94fa522e.gifv">

                        <!--- pics above here! --->
                    </div>
                </div>
            </div>

            <div class="p-2 mt-1 w-100">
                <div class="row mx-1" style="font-size:18px;font-family:tahoma;">
                        <div class="d-none d-md-block bg-none" style="width:10px;"></div>

                    <!--===
                    CHARACTER ROWS - Replace 'LINK' 'NAME' and 'IMG URL' with yours.
                    ===-->

                    <!-- CHARACTER 1 -->
                    <div class="col justify-content-center text-center m-0 px-0">
                        <div class="card mb-0" style="width:120px;height:120px;border-radius:25%;background:#fadda2;border:5px double #fcc56d;background-image:url(
                            IMG URL
                        );background-position:center;background-size:cover;"><a
                            href="LINK"
                            title="Name"
                        data-toggle="tooltip" class="btn border-0 btn-outline-primary btn-block h-100" style="opacity:.25; z-index:10; border-radius:25%;"></a>
                        </div>
                    </div>

                    <!-- CHARACTER 2 -->
                    <div class="col justify-content-center text-center m-0 px-0">
                        <div class="card mb-0" style="width:120px;height:120px;border-radius:25%;background:#fadda2;border:5px double #fcc56d;background-image:url(
                            IMG URL
                        );background-position:center;background-size:cover;"><a
                            href="LINK"
                            title="Name"
                        data-toggle="tooltip" class="btn border-0 btn-outline-primary btn-block h-100" style="opacity:.25; z-index:10; border-radius:25%;"></a>
                        </div>
                    </div>


                        <div class="w-100 d-sm-block d-md-none"><div class="card border-0" style="height:10px;background:none;"></div></div>

                    <!-- CHARACTER 3 -->
                    <div class="col justify-content-center text-center m-0 px-0">
                        <div class="card mb-0" style="width:120px;height:120px;border-radius:25%;background:#fadda2;border:5px double #fcc56d;background-image:url(
                            IMG URL
                        );background-position:center;background-size:cover;"><a
                            href="LINK"
                            title="Name"
                        data-toggle="tooltip" class="btn border-0 btn-outline-primary btn-block h-100" style="opacity:.25; z-index:10; border-radius:25%;"></a>
                        </div>
                    </div>

                    <!-- CHARACTER 4 -->
                    <div class="col justify-content-center text-center m-0 px-0">
                        <div class="card mb-0" style="width:120px;height:120px;border-radius:25%;background:#fadda2;border:5px double #fcc56d;background-image:url(
                            IMG URL
                        );background-position:center;background-size:cover;"><a
                            href="LINK"
                            title="Name"
                        data-toggle="tooltip" class="btn border-0 btn-outline-primary btn-block h-100" style="opacity:.25; z-index:10; border-radius:25%;"></a>
                        </div>
                    </div>

                    <!---- end character rows ---->
                </div>
            </div>

        <!-- padding for the stupid clouds -->
        <div class="d-none d-md-block"><div class="card border-0" style="height:20px;background:none;"></div></div>
        <div class="d-sm-block d-md-none"><div class="card border-0" style="height:50px;background:none;"></div></div>
</div></div></div></div>