It's Pink!
created by:raccodes
HTMLCustom ColorsUser
Copy
<!------------------------------------------
its pink!
small gift for advent 2025!!
pink accent:#d26b8c
light pink: #fcb7ce
white: #fff
off-white: #f4f4f4
text: #333;
------------------------------------------>
<div class="container p-0 my-lg-5" style="max-width:700px;scrollbar-width: thin;scrollbar-color:#fcb7ce #fff;">
<!-- MAIN CARD -->
<div class="card" style="border-radius:0; border:0;background:#f4f4f4;border-radius:15px;box-shadow: 6px 6px 0px 0px rgba(210,107,140,1);">
<!-- MAIN ROW (LEFT SIDEBAR + RIGHT CONTENT) -->
<div class="row no-gutters">
<!-- ================= LEFT SIDEBAR ================= -->
<div class="col-lg-4">
<!-- SIDEBAR CARD -->
<div class="card border-0 h-100 p-2 py-lg-5 py-3" style="background:#f29ab7; border-radius:13px;">
<div class="row no-gutters">
<div class="col-12 p-1">
<!-- USERNAME -->
<div class="card card-block mx-lg-3 mb-2 p-1 text-lowercase text-center" style="background:#d26b8c; border:0; color:#fff;"> username </div>
</div>
<!-- -------- PROFILE IMAGE SECTION -------- -->
<div class="col-lg-12 col-auto p-1">
<!-- PROFILE IMAGE -->
<div class="card mx-auto" style="height:180px; width:180px; background:url('https://i.pinimg.com/736x/69/2b/61/692b610b37d4bd2032a05cdb4d571a79.jpg'); background-size:cover; border:4px solid #fff; border-radius:0;"></div>
</div>
<!-- -------- BLURB / ABOUT SECTION -------- -->
<div class="col-lg-12 col p-1">
<!-- SMALL TITLE -->
<div class="card d-block text-center border-0 mt-5 mt-lg-3 ml-lg-4" style="width:70px;border-radius:14px 14px 0 0;background:#d26b8c;color:#fff;"> hello <i>!!</i>
</div>
<!-- SCROLLING TEXT BOX -->
<div class="card d-block p-1 small mx-auto text-center" style="border-radius:0;background:#fff;color:#333;max-height:130px;max-width:180px;overflow:auto;border:4px solid #d26b8c;">
<!--- flags // Use @l0stlights's tiny pride flags! https://toyhou.se/21355465.my-tiny-pride-flags-v1 ---->
<!---- flag ---->
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/97878944_kJi21W4SypJstwn.png" class="btn btn-outline-transparent p-0 tooltipster mr-1" title="FLAG_NAME" style="height:15px;width:23px;" />
<!---- flag ---->
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/97878944_kJi21W4SypJstwn.png" class="btn btn-outline-transparent p-0 tooltipster mr-1" title="FLAG_NAME" style="height:15px;width:23px;" />
<!---- flag ---->
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/97878944_kJi21W4SypJstwn.png" class="btn btn-outline-transparent p-0 tooltipster mr-1" title="FLAG_NAME" style="height:15px;width:23px;" /> <br> name // pronouns // timezone
</div>
<div class="d-flex justify-content-center align-items-center pull-right mr-lg-4" style="position:relative; height:20px; width:50px; background:#d26b8c; color:#fff; border-radius:0 0 14px 14px; cursor:pointer;">
<!-- PLAY ICON -->
<i class="fas fa-play fa-fw" style="font-size:12px;"></i>
<!-- MUSIC -->
<div style="position:absolute; left:0; top:0; right:0; bottom:0; inset:0; opacity:.0001; overflow:hidden; pointer-events:auto;">
<iframe width="700" height="500" src="https://www.youtube-nocookie.com/embed/-5fgnXsPrL8?&controls=0" frameborder="0" style="position:absolute; top:-100px; left:-300px;"></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ================= RIGHT CONTENT ================= -->
<div class="col-lg-8 p-2">
<div class="card-0 h-100 p-1" style="border:0;overflow:auto;">
<!---------->
<div class="row no-gutters">
<!---- section ---->
<div class="col-12 p-1">
<!--- info + socials --->
<div class="row no-gutters">
<!--- small intro --->
<div class="col p-1">
<!-- SMALL TITLE -->
<div class="card d-block text-center border-0 mt-2 ml-lg-3" style="width:140px;
border-radius:14px 14px 0 0;
background:#d26b8c;
color:#fff;"> about me <i>!!</i>
</div>
<!--- about me --->
<div class="card d-block p-1" style="border:4px solid #d26b8c;background:#fff;color:#333;border-radius:0px;max-height:145px;overflow:auto;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. </div>
</div>
<!--- links --->
<div class="col-auto p-1 pt-2">
<!--- twitter --->
<div class="card-0 d-flex mb-2 mt-4" style="background:#d26b8c;border-radius:15px;overflow:hidden;width:35px;height:30px;">
<a href="LINK_HERE" class="btn btn-outline-warning rounded-0 w-100 border-0 align-items-center justify-content-center" style="letter-spacing: 2px; cursor: pointer; box-shadow:none; mix-blend-mode: luminosity;font-size:11pt;color:#fff;"><i class="fa-brands fa-twitter"></i></a>
</div>
<!--- tumblr --->
<div class="card-0 d-flex mb-2" style="background:#d26b8c;border-radius:15px;overflow:hidden;width:35px;height:30px;">
<a href="LINK_HERE" class="btn btn-outline-warning rounded-0 w-100 border-0 align-items-center justify-content-center" style="letter-spacing: 2px; cursor: pointer; box-shadow:none; mix-blend-mode: luminosity;font-size:11pt;color:#fff;"><i class="fa-brands fa-tumblr"></i></a>
</div>
<!--- bluesky--->
<div class="card-0 d-flex mb-2" style="background:#d26b8c;border-radius:15px;overflow:hidden;width:35px;height:30px;">
<a href="LINK_HERE" class="btn btn-outline-warning rounded-0 w-100 border-0 align-items-center justify-content-center" style="letter-spacing: 2px; cursor: pointer; box-shadow:none; mix-blend-mode: luminosity;font-size:11pt;color:#fff;"><i class="fa-brands fa-bluesky"></i></a>
</div>
<!--- carrd/neocities --->
<div class="card-0 d-flex mb-2" style="background:#d26b8c;border-radius:15px;overflow:hidden;width:35px;height:30px;">
<a href="LINK_HERE" class="btn btn-outline-warning rounded-0 w-100 border-0 align-items-center justify-content-center" style="letter-spacing: 2px; cursor: pointer; box-shadow:none; mix-blend-mode: luminosity;font-size:11pt;color:#fff;"><i class="fa-solid fa-id-card"></i></a>
</div>
</div>
</div>
<!--- dni + byi + etc --->
<div class="row no-gutters mt-n1">
<!--- boundaries --->
<div class="col p-1">
<!-- SMALL TITLE -->
<div class="card d-block text-center border-0 mt-1 ml-lg-3" style="width:60px;
border-radius:14px 14px 0 0;
background:#d26b8c;
color:#fff;"> byf </div>
<!--- byf --->
<div class="card d-block p-1" style="border:4px solid #d26b8c;background:#fff;color:#333;border-radius:0px;max-height:145px;overflow:auto;">
<ul class="list-unstyled pl-1 mb-0" style="max-height:130px;">
<li>Warning.</li>
<li>Warning.</li>
<li>Warning.</li>
<li>Warning.</li>
<li>Warning.</li>
</ul>
</div>
</div>
<!--- dni --->
<div class="col p-1">
<!-- SMALL TITLE -->
<div class="card d-block text-center border-0 mt-1 ml-lg-3" style="width:50px;
border-radius:14px 14px 0 0;
background:#d26b8c;
color:#fff;"> dni </div>
<!--- dni list --->
<div class="card d-block p-1" style="border:4px solid #d26b8c;background:#fff;color:#333;border-radius:0px;max-height:145px;overflow:auto;">
<ul class="list-unstyled pl-1 mb-0" style="max-height:130px;">
<li>DNI List.</li>
<li>DNI List.</li>
<li>DNI List.</li>
<li>DNI List.</li>
<li>DNI List.</li>
</ul>
</div>
</div>
</div>
<!-- SMALL TITLE -->
<div class="card d-block text-center border-0 mt-1 ml-lg-3" style="width:90px;
border-radius:14px 14px 0 0;
background:#d26b8c;
color:#fff;"> my favs <i>♥</i>
</div>
<!--- byf --->
<div class="card d-block p-1" style="border:4px solid #d26b8c;background:#fff;color:#333;border-radius:0px;max-height:145px;overflow:auto;">
<!------------------------>
<div class="row no-gutters">
<!--- character --->
<div class="col-lg-auto col-6 p-1">
<div class="card p-1" style="border:4px solid #fcb7ce;border-radius:0px;background:#fff;">
<!--- character image --->
<div class="card-0 p-0 text-uppercase align-items-end" style="background:url('https://i.pinimg.com/736x/4b/8d/a5/4b8da53d452d3b651871ce3adf247a3b.jpg') center;background-size:cover;height:81px;min-width:80px;opacity:0.8;border-radius:0px;">
<!--- link + folder name --->
<a href="LINK_HERE" class="btn btn-outline-danger w-100 border-0 h-100 align-items-center justify-content-center text-white" style="box-shadow:none; color:#d26b8c; border-color:#d26b8c; mix-blend-mode: hard-light; letter-spacing:1px;border-radius:0px;"></a>
</div>
</div>
</div>
<!--- character --->
<div class="col-lg-auto col-6 p-1">
<div class="card p-1" style="border:4px solid #fcb7ce;border-radius:0px;background:#fff;">
<!--- character image --->
<div class="card-0 p-0 text-uppercase align-items-end" style="background:url('https://i.pinimg.com/736x/4b/8d/a5/4b8da53d452d3b651871ce3adf247a3b.jpg') center;background-size:cover;height:81px;min-width:81px;opacity:0.8;border-radius:0px;">
<!--- link + folder name --->
<a href="LINK_HERE" class="btn btn-outline-danger w-100 border-0 h-100 align-items-center justify-content-center text-white" style="box-shadow:none; color:#d26b8c; border-color:#d26b8c; mix-blend-mode: hard-light; letter-spacing:1px;border-radius:0px;"></a>
</div>
</div>
</div>
<!--- character --->
<div class="col-lg-auto col-6 p-1">
<div class="card p-1" style="border:4px solid #fcb7ce;border-radius:0px;background:#fff;">
<!--- character image --->
<div class="card-0 p-0 text-uppercase align-items-end" style="background:url('https://i.pinimg.com/736x/4b/8d/a5/4b8da53d452d3b651871ce3adf247a3b.jpg') center;background-size:cover;height:81px;min-width:80px;opacity:0.8;border-radius:0px;">
<!--- link + folder name --->
<a href="LINK_HERE" class="btn btn-outline-danger w-100 border-0 h-100 align-items-center justify-content-center text-white" style="box-shadow:none; color:#d26b8c; border-color:#d26b8c; mix-blend-mode: hard-light; letter-spacing:1px;border-radius:0px;"></a>
</div>
</div>
</div>
<!--- character --->
<div class="col-lg-auto col-6 p-1">
<div class="card p-1" style="border:4px solid #fcb7ce;border-radius:0px;background:#fff;">
<!--- character image --->
<div class="card-0 p-0 text-uppercase align-items-end" style="background:url('https://i.pinimg.com/736x/4b/8d/a5/4b8da53d452d3b651871ce3adf247a3b.jpg') center;background-size:cover;height:81px;min-width:81px;opacity:0.8;border-radius:0px;">
<!--- link + folder name --->
<a href="LINK_HERE" class="btn btn-outline-danger w-100 border-0 h-100 align-items-center justify-content-center text-white" style="box-shadow:none; color:#d26b8c; border-color:#d26b8c; mix-blend-mode: hard-light; letter-spacing:1px;border-radius:0px;"></a>
</div>
</div>
</div>
</div>
</div>
<!----- end --->
</div>
</div>
</div>
</div>
</div>
</div>
<a href="https://toyhou.se/36731388" class="text-muted pull-right mr-2 mt-2"><i class="fa-duotone fa-solid fa-raccoon"></i></a>
</div>