/cake (vibrant)

<!doctype html>

<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=0.9" />
        <title> cakes-site </title>
        <link
            rel="icon"
            type="image/x-icon"
            href="https://wilardo.crd.co/assets/images/gallery18/5d0964ed.png?v=e670c4e7"
        />
        <script>
            window.location.hash = "one";
        </script>

        <style type="text/css">* {cursor: url(https://cur.cursors-4u.net/others/oth-8/oth705.cur), auto !important;}</style><a href="https://www.cursors-4u.com/cursor/2011/12/03/cute-polka-dotted-grey-bow-tie-ribbon.html" target="_blank" title="Cute Polka Dotted Grey Bow Tie Ribbon"><img src="https://cur.cursors-4u.net/cursor.png" border="0" alt="Cute Polka Dotted Grey Bow Tie Ribbon" style="position:absolute; top: 0px; right: 0px;" /></a>

    <head>
        <style>
            :root {
                --one: #faeff7; /* pink */
                --two: #f3f5fb; /* blue */
                --three: #f8f7e8; /* yellow */
                --border: #8a8a8a;
                --four: #fdf7fb; /* lighter pink (the bg) */
            }

            @font-face {
                src: url("https://file.garden/Ze_zdVVdmFtXO7cR/Mali-Regular.ttf");
                font-family: "mali";
            }

            body {
                background:
                    rgba(255, 255, 255, 1) 40%,
                    rgba(255, 255, 255, 1) 100%;
                background-repeat: no-repeat;
                width: auto;
                height: 100dvh;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                font-family: "mali";
                font-size: 13px;
                color: #525252;
            }

            #top {
                width: 380px;
                height: 35px;
                background: var(--one);
                border: solid 1px var(--border);
                border-top-left-radius: 10px;
                border-top-right-radius: 10px;
                display: flex;
                flex-direction: column;
            }

            .text {
                border-radius: 3px;
                border: solid 1px var(--border);
                background: #fff;
                width: 190px;
                height: 20px;
                padding: 2px;
                margin-left: 15px;
                margin-top: 5px;
                padding-left: 5px;
                font-size: 13px;
                text-decoration: underline dotted 1px var(--border);
            }

            .line {
                width: 380px;
                height: 15px;
                border: solid 1px var(--border);
                background: var(--two);
                font-size: 11px;
                margin-top: 6px;
                position: relative;
                right: 1px;
                text-align: center;
            }

            #box {
                width: 380px;
                height: 300px;
                background: var(--four);
                border: solid 1px var(--border);
                border-top: none;
                border-bottom: none;
                display: grid;
                grid-template-areas:
                    'one one two two'
                'one one two two'
                'one one two two';
            }

            #links {
                width: 380px;
                height: 20px;
                border-bottom-left-radius: 10px;
                border-bottom-right-radius: 10px;
                border: solid 1px var(--border);
                background: var(--two);
                text-align: center;
                position: relative;
                font-size: 14px;
                padding-top: 3px;
            }

            #left {
                width: 160px;
                height: 290px;
                grid-area: one;
            }

            #img {
                align-item: left;
                width: 85%;
                margin-left: 10px;
                margin-top: 18px;
                flex-direction: column;
                border: solid 1px var(--border);
            }

            .bands {
                width: 126px;
                height: 60px;
                border: solid 1px var(--border);
                border-radius: 5px;
                background: #fff;
                margin-top: 5px;
                margin-left: 10px;
                padding: 6px;
                overflow: auto;
            }

            .info {
                width: 126px;
                height: 35px;
                border: solid 1px var(--border);
                border-radius: 5px;
                background: var(--one);
                margin-top: 5px;
                margin-left: 10px;
                font-size: 12px;
                padding: 6px;
                overflow: auto;
            }

            #right {
                width: 200px;
                height: 260px;
                background: var(--one);
                border-radius: 5px;
                border: solid 1px var(--border);
                margin-top: 18px;
                margin-right: 10px;
                float: right;
                align-item: right;
                position: relative;
                padding: 6px;
                overflow: auto;
            }

            .scroll-one {
                width: 185px;
                height: 70px;
                border: solid 1px var(--border);
                border-radius: 5px;
                background: #fff;
                margin-top:;
                margin-left:;
                padding: 6px;
                overflow: auto;
            }

            .scroll-two {
                width: 185px;
                height: 70px;
                border: solid 1px var(--border);
                border-radius: 5px;
                background: #fff;
                margin-top: 6px;
                margin-left:;
                padding: 6px;
                overflow: auto;
            }

            .scroll-three {
                width: 185px;
                height: 65px;
                border: solid 1px var(--border);
                border-radius: 5px;
                background: #fff;
                margin-top: 6px;
                margin-left:;
                padding: 6px;
                overflow: auto;
            }

            mark {
                background: var(--three);
                border-radius: 3px;
                border: solid 1px var(--border);
                padding: 0px 4px 0px 4px !important;
                margin-right: 3px;
                color: #525252;
            }

            u{
                color: var(--border);
            }

            a{
                color: var(--border);
                transition: 0.7s ease;
            }

            a:hover{
                opacity: 0.6;
            }

            ::-webkit-scrollbar {
                background: none !important;
                width: 0px !important;
            }

            ::-webkit-scrollbar-tab {
                width: 0px !important;
            }

            ::selection{
                background: #f0f0f0;
            }

        </style>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

<!-------MUSIC PLAYER BY GLENTHEMES------->
<script src="//static.tumblr.com/gtjt4bo/QRmphdsdv/glenplayer02.js"></script>

<head>
<script src="https://kit.fontawesome.com/77e60dd6da.js" crossorigin="anonymous"></script></head>

<style type="text/css">
/*-------MUSIC PLAYER BY GLENTHEMES-------*/
#glenplayer02 {
position:relative;#container07;
bottom:0;
margin-bottom:10px;
left:-8.5px;
margin-right:340px;
display:flex;
z-index:99;
}
#glenplayer02 a {
text-decoration:none;
}

#glenplayer02 > div {
align-self:center;
-webkit-align-self:center;
}

.music-controls {
user-select:none;
-webkit-user-select:none;
width:22px;
font-size:16px;
cursor:pointer;
}

.playy, .pausee {
background: #fff;
-webkit-background-clip: text;
-webkit-text-fill-color:#fff;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #8a8a8a;
font-size: 22px;
color: #ffffff;
}

.pausee {
display:none;
}

</style>
<body>
<!-------MUSIC PLAYER BY GLENTHEMES------->
<div id="glenplayer02">
<div class="music-controls" onclick="songstart();">
<div class="playy" style="display: block;"><span><i class="fas fa-play-circle" aria-hidden="true"></i></span></div>
<div class="pausee" style="display: none;"><span><i class="fas fa-pause-circle" aria-hidden="true"></i></span></div></div>
</div>

<audio id="tune" src="https://file.garden/Ze_zdVVdmFtXO7cR/%E3%82%8F%E3%83%BC%E3%81%99%E3%81%9F(WASUTA)%E3%80%8C%E3%81%88%E3%81%84%E3%81%8D%E3%82%85%E3%83%BC%E3%82%80%E3%81%A1%E3%82%85%E3%83%BC%E3%81%A7%E3%81%93%E3%81%86%E3%81%97%E3%82%93%E3%81%A1%E3%82%85%E3%81%A3%EF%BC%81%E2%99%A1%E3%80%8D.mp3"></audio>
</body>


    </head>
    <body>
        <div id="top">
            <div class="text">https://names-text.domain/</div>
            <div class="line">
                last updated on 6/11/2024 : ouu text
            </div>
        </div>
        <div id="box">
            <div id="left">
                <img
                    src="https://i.pinimg.com/564x/7c/26/c8/7c26c8927c7db6cb9d0c992eed63a097.jpg"
                    id="img"
                />
                <div class="bands"> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text  </div>
                <div class="info"> text text  </div>
            </div>

            <div id="right">
                <div class="scroll-one">
                    <mark>byi/f</mark>
                    text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
                </div>
                <div class="scroll-two">
                    <mark> dni </mark>
                    text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
                </div>
                <div class="scroll-three">
                    <mark>likes</mark>
                    text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
                </div>
            </div>
        </div>
        <div id="links"> <a href=""> link </a> - <a href=""> link</a> - <a href=""> link </a> </div>
    </body>
    </head>
</html>