- Created
- 1 year, 5 months ago
- Creator
- Codesrollss
- Favorites
- 305
Profile
QUOTE; Lorem ipsum dolor sit amet.
SALUTATIONS! You can just delete these if you dont want to write more, 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 blandit
INTEREST
WRITE YOUR INTERESTS HERE
IT CAN BE MEDIAS YOU LIKE
OR JUST YOUR FAV FOODS
I LIKE CATS!
THEYRE LIKE LITTLE GOBLINS
If you want to write more about your interest, otherwise just delete these; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit.
BYF !
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus
DNI X
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
MY LOVELIES!
CODE
<!------------------------
COLOURS USED
Colour goes from darkest to lightest
- #720029 ("black" texts)
/ presents in Font Awesome icons only /
- #ff5e99 (darker accent)
- #ff85b2 (dark accent)
- #ffaccb (main accent)
- #ffd4e3 (light background)
- #fff (white)
------------------------>
<!------ / START LEFT ROW / ----->
<div class="p-1" style="background-color:#fff;border-top-left-radius:50px;border-top-right-radius:50px;">
<div class="row no-gutters">
<div class="col-md-4 row no-gutters">
<div class="col-12">
<div class="p-3 h-100" style="background-color:#fff;border-top-left-radius:50px;border-top-right-radius:50px;">
<div class="sticky-top ">
<!-------- / pagedoll (transparent preferred) or icon here! /----------->
<img src="https://sdl-stickershop.line.naver.jp/products/0/0/6/1026/android/stickers/16638.png">
<!------------- / Username + little info space for writing / ------------->
<p style="color:#720029;font-weight:bold"> My name is..... <br>
<span align="center" style="font-size:32px;color:#ffaccb"> USERNAME
<!--------- / you can change the icon and the animation! check out the Font Awesome website doc /
https://fontawesome.com/docs/web/style/animate --------->
<i class="fas fa-flower fa-spin" style="animation-duration:4s"></i>
</span>
</p>
<!-------- / divider - delete the border-style:dashed for normal lined divider /--------->
<hr style="border-style:dashed;border-color:#ffaccb;border-width:1px">
<!---------- / write about yourself here! or it can be anything really /
- reminder, it doesn't scroll. It will expand the longer you write ------------>
<p style="color:#720029;font-weight:bold">
Write something silly here, Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<!----- / bunch of links here, you can delete the <a></a> for regular badge pills /----->
<div align="center">
<div class="badge badge-pill p-2" style="background-color:#ffaccb">
<a href="LINK" style="color:#720029"><u> LINK </u></div> </a>
<div class="badge badge-pill p-2" style="background-color:#ffaccb">
<a href="LINK" style="color:#720029"><u> LINK </u></a></div>
<div class="badge badge-pill p-2" style="background-color:#ffaccb">
<a href="LINK" style="color:#720029"><u> LINK </u></a></div>
<div class="badge badge-pill p-2" style="background-color:#ffaccb">
<a href="LINK" style="color:#720029"><u> LINK </u></a></div>
<div class="badge badge-pill p-2" style="background-color:#ffaccb">
<a href="LINK" style="color:#720029"><u> LINK </u></a></div>
</div>
<!---------- / divider / ---->
<hr style="border-color:#ffaccb;border-width:1px">
<!-------[ SOCIAL MEDIA LINKS ]------------>
<p align="center" class="p-2" style="background-color:#ffaccb"><b>
<a style="color:#720029" href="LINK CARRD">
<i class="fa-regular fa-address-card fa-lg"></i></a>
<a style="color:#720029" href="LINK IG">
<i class="fa-brands fa-instagram fa-lg"></i></a>
<a style="color:#720029" href="LINK TWT">
<i class="fa-brands fa-twitter fa-lg"></i></a>
<a style="color:#720029" href="LINK YT">
<i class="fa-brands fa-youtube fa-lg"></i></a>
<a style="color:#720029" href="LINK DC">
<i class="fa-brands fa-discord fa-lg"></i></a>
<!---- / add more above this line / ----->
</b>
</p>
<!------------ / divider / ------------>
<hr style="border-color:#ffaccb;border-width:1px">
</div>
</div>
</div>
</div>
<!------------ / END LEFT ROW /-------------->
<!------- / START RIGHT ROW /------->
<div class="col-md-8 row no-gutters">
<div class="col-12">
<div class="p-3 h-100" style="background-color:#ffd4e3;border-top-right-radius:50px">
<div class="row no-gutters">
<div class="p-3" style="background-color:#ffffff">
<!----- / this is supposed to be the ribbon bow icons, delete them if you dont want it /----->
<p style="font-size:23px">
<i class="fa-solid fa-caret-right" style="color:#ffaccb; transform:scale(4, 2.5)"></i>
<i class="fa-solid fa-circle" style="color:#ffaccb"></i>
<i class="fa-solid fa-caret-left" style="color:#ffaccb; transform:scale(4, 2.5)"></i>
</p>
<!---------------------------------------------------------->
</div>
<div class="col p-3" style="background-color:#ffffff;border-top-right-radius:100px;border-bottom-right-radius:100px">
<!--------------- / quotes, i'd suggest to try keep em short / ------------------>
<p style="font-size:20px;font-weight:bold;color:#ffaccb"> QUOTE; Lorem ipsum dolor sit amet. </p>
</div>
</div>
<!----------- / divider / --------------->
<hr style="border-width:3px;background-color:#fff">
<div class="row no-gutters rounded"
style="background-color:#ffaccb;border-top-right-radius:20px;border-top-left-radius:20px">
<div class="col-md-8 row no-gutters">
<div class="col-12 p-1" >
<!------------/ this the start of the 'about' row starting with left row u.u / ------------->
<div class="row no-gutters">
<div class="p-1 h-100">
<p class="p-2"
style="background-color:#fff;border-top-right-radius:25px;border-top-left-radius:25px;">
<i class="fas fa-flower-tulip fa-lg" style="color:#ff5e99"></i>
</p>
</div>
<div class="col p-1 h-100">
<p class="p-2 text-center "
style="background-color:#fff;color:#720029;font-weight:bold;border-top-left-radius:10px;
font-weight:bold">
NAME/NICKNAME
</p>
</div>
<div class="p-1 h-100">
<p class="p-2"
style="background-color:#fff;color:#ffaccb;font-weight:bold;border-top-right-radius:10px;">
<i class="fas fa-id-card"></i>
</p>
</div>
</div>
<!-----------1-------------->
<div class="row no-gutters">
<div class="p-1 h-100">
<p class="p-2"
style="background-color:#fff;border-top-right-radius:25px;border-top-left-radius:25px;">
<i class="fas fa-flower-daffodil fa-lg" style="color:#ffaccb"></i>
</p>
</div>
<div class="col p-1 h-100">
<p class="p-2 text-right"
style="background-color:#fff;color:#720029;font-weight:bold">
PRO/NOUNS
<!------ you can use the link here for pronouns.page,
if you dont want link delete the <a> </a> ------->
<a href="LINK HERE"><i class="fas fa-signature" style="color:#720029"></i></a>
</p>
</div>
<div class="col p-1 h-100">
<p class="p-2 text-left"
style="background-color:#fff">
<!------ / (I RECOMMEND USING SMALL FLAG BTW) here's some link for pride flags,
the one im using right now is https://toyhou.se/6899962.mini-pride-flags
others: https://toyhou.se/15017403.-f2u-pixel-pride-flags
https://toyhou.se/11507691.pride-flags
https://f2.toyhou.se/file/f2-toyhou-se/images/21309512_FFAopHxOV0J28Rg.gif
------>
<!----(you can remove credit if you want, since the creator said credit isn't necessary
i think its good to leave it here so others can find and use it easily tho :3)--------->
<a href="https://toyhou.se/6899962.mini-pride-flags"><i class="fas fa-heart" style="color:#720029"></i></a>
<!-------- first flag --------->
<span data-toggle="tooltip" title="FLAG'S NAME" style="cursor:help;">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/35731788_YEbHDVaatvP52pt.png?1623251727"> </span>
<!-------- second flag --------->
<span data-toggle="tooltip" title="FLAG'S NAME" style="cursor:help;">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/35731788_YEbHDVaatvP52pt.png?1623251727"> </span>
<!-------- third flag --------->
<span data-toggle="tooltip" title="FLAG'S NAME" style="cursor:help;">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/35731788_YEbHDVaatvP52pt.png?1623251727"> </span>
<!-------- fourth flag --------->
<span data-toggle="tooltip" title="FLAG'S NAME" style="cursor:help;">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/35731788_YEbHDVaatvP52pt.png?1623251727"> </span>
</p>
</div>
</div>
<!-----------2-------------->
<div class="row no-gutters">
<div class="p-1 h-100">
<p class="p-2"
style="background-color:#fff;border-top-right-radius:25px;border-top-left-radius:25px;">
<i class="fas fa-flower-tulip fa-lg" style="color:#ff5e99"></i>
</p>
</div>
<div class="col p-1 h-100">
<p class="p-2 text-right"
style="background-color:#fff;color:#720029;font-weight:bold">
AGE 1234
<i class="fas fa-calendars" style="color:#ffaccb"></i>
</p>
</div>
<div class="col p-1 h-100">
<p class="p-2"
style="background-color:#fff;color:#720029;font-weight:bold;border-top-right-radius:10px;">
<i class="fas fa-cake" style="color:#ffaccb"></i>
BIRTHDAY!!
</p>
</div>
</div>
<!-----------3-------------->
<div class="row no-gutters">
<div class="p-1 h-100">
<p class="p-2"
style="background-color:#fff;border-top-right-radius:25px;border-top-left-radius:25px;">
<i class="fas fa-flower-daffodil fa-lg" style="color:#ffaccb"></i>
</p>
</div>
<div class="col p-1 h-100">
<p class="p-2 text-right"
style="background-color:#fff;color:#720029;font-weight:bold">
TIMEZONE
<i class="fas fa-globe" style="color:#ffaccb"></i>
</p>
</div>
<div class="col p-1 h-100">
<p class="p-2"
style="background-color:#fff;color:#720029;font-weight:bold">
<i class="fas fa-language" style="color:#ffaccb"></i>
LANGUAGE
</p>
</div>
</div>
<!--------5-------->
<div class="row no-gutters">
<div class="p-1 h-100">
<p class="p-2"
style="background-color:#fff;border-top-right-radius:25px;border-top-left-radius:25px;">
<i class="fas fa-flower-tulip fa-lg" style="color:#ff5e99"></i>
</p>
</div>
<div class="col p-1 h-100">
<p class="p-2 text-center"
style="background-color:#fff;color:#720029;font-weight:bold;border-bottom-left-radius:10px;">
Theme - Lorem ipsum dolor sit amet.
</p>
</div>
<div class="p-1 h-100">
<p class="p-2"
style="background-color:#fff;color:#720029;font-weight:bold;border-bottom-right-radius:10px;">
<!-------[ replace [ # ] with youtube video id (found after https://www.youtube.com/watch?v=) ]------------>
<iframe src="https://www.youtube.com/embed/#"
frameborder="0" style="height:1rem;width:1rem;opacity:.001;position:absolute;"></iframe>
<!--------- / you can replace it with - fas fa-disc fa-lg fa-spin - for a spinning disc :D / ------------->
<i class="fas fa-gramophone fa-lg"></i>
</p>
</div>
</div>
<!----------/ end left 'about' row, start right 'pagedoll' row / ------------->
</div>
</div>
<div class="col-md-4 row no-gutters">
<div class="col-12 p-1">
<div class="p-1">
<!------------- / I recommend using transparent pagedoll
you can also change the animation (flip, spin, fade, beat, beat-fade, shake, bounce) and animation duration! / --->
<i class="fa fa-flip" style="animation-duration:3s">
<img src="https://sdl-stickershop.line.naver.jp/products/0/0/6/1026/android/stickers/16641.png"></i>
</div>
</div>
</div>
</div>
<!--------- / END 'ABOUT' ROW / ------------>
<br>
<!-------------- / more writing!! this is for introduction.
However you can just delete them if you dont want to write more /------------------->
<p class="p-2 rounded" style="color:#720029;font-weight:bold;background-color:#fff">
<span class="p-1 rounded"
style="background-color:#ffaccb;color:#720029;font-weight:bold">
<!----- / you can change the animation /
(flip, spin, fade, beat, beat-fade, shake, bounce)------>
<i class="fa fa-bounce">
<span style="font-family:arial black"> SALUTATIONS!</span></i></span>
<i class="fas fa-flower" style="color:#ffaccb"></i>
You can just delete these if you dont want to write more, 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 blandit </p>
<!--------- / end introduction / ------------>
<!-------------- / divider (and the flower) / ---------------->
<div class="row no-gutters align-items-center">
<div class="col">
<div style="height:3px; background-image:linear-gradient(to left,#fff,#ffd4e3);"></div></div>
<div class="p-2">
<i class="fa-solid fa-leaf fa-flip-horizontal fa-2x" style="color:#fff"></i>
<span class="fa-stack fa-2x">
<i class="fas fa-circle fa-stack-1x" style="color:#ffaccb"></i>
<i class="fas fa-flower fa-stack-2x fa-spin" style="color:#ff5e99;animation-duration:5s"></i>
<i class="fas fa-flower fa-stack-2x fa-spin" style="color:#ffaccb;animation-duration:4.5s"></i>
<i class="fas fa-flower fa-stack-1x" style="color:#ff85b2"></i>
</span>
<i class="fa-solid fa-leaf fa-2x" style="color:#fff"></i>
</div>
<div class="col">
<div style="height:3px; background-image:linear-gradient(to left,#ffd4e3,#fff);"></div>
</div>
</div>
<!---------------- / end divider /------------------------->
<!---------------- / 'interest' row, starting with left row 'pagedoll' / ----------------------->
<div class="row no-gutters p-1"
style="background-color:#ffaccb;border-top-left-radius:100px;border-top-right-radius:100px">
<div class="col-md-4 row no-gutters">
<div class="col-12 p-1">
<div class="p-1 h-100">
<!------------- / I recommend using transparent pagedoll
you can also change the animation (flip, spin, fade, beat, beat-fade, shake, bounce) and animation duration! / --->
<i class="fa fa-bounce" style="animation-duration:2s"> <img src="https://sdl-stickershop.line.naver.jp/products/0/0/6/1026/android/stickers/16642.png"> </i>
</div>
</div>
</div>
<!------------- / end right 'pagedoll' row - start right row 'interest' / ------------------>
<div class="col-md-8 row no-gutters">
<div class="col-12 p-1">
<div class="p-3 h-100"
style="background-color:#fff;border-top-right-radius:90px;border-top-left-radius:90px;">
<p align="center" style="font-size:20px;font-weight:bold;color:#ff85b2">
<i class="fas fa-circle" style="font-size:7px;color:#ffd4e3"></i>
<i class="fas fa-circle" style="font-size:11px;color:#ffd4e3"></i>
<i class="fas fa-flower" style="color:#ffaccb"></i>
INTEREST
<i class="fas fa-flower" style="color:#ffaccb"></i>
<i class="fas fa-circle" style="font-size:11px;color:#ffd4e3"></i>
<i class="fas fa-circle" style="font-size:7px;color:#ffd4e3"></i>
</p>
<hr style="border-style:dashed;border-width:1px;border-color:#ffd4e3">
<div class="badge badge-pill" style="background-color:#ffaccb;color:#720029"> WRITE YOUR INTERESTS HERE </div>
<div class="badge badge-pill" style="background-color:#ffaccb;color:#720029"> IT CAN BE MEDIAS YOU LIKE </div>
<div class="badge badge-pill" style="background-color:#ffaccb;color:#720029"> OR JUST YOUR FAV FOODS </div>
<div class="badge badge-pill" style="background-color:#ffaccb;color:#720029"> I LIKE CATS! </div>
<div class="badge badge-pill" style="background-color:#ffaccb;color:#720029"> THEYRE LIKE LITTLE GOBLINS </div>
<div class="badge badge-pill" style="background-color:#ffaccb;color:#720029"> </div>
<!--------------- / add more above this line! / --------------------->
<!----- / divider / ------>
<hr style="border-style:dashed;border-width:1px;border-color:#ffd4e3">
<!------------------->
<p style="color:#720029;font-weight:bold"> If you want to write more about your interest, otherwise just delete these; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit. </p>
<!------------------->
</div>
</div>
</div>
</div>
<br>
<!------------------- / END 'INTEREST' ROW / ----------------->
<!---------- / divider / ------------------>
<p align="center" style="font-size:30px">
<i class="fa-solid fa-clothes-hanger" style="color:#ffaccb"></i>
<i class="fa-solid fa-socks" style="color:#ff85b2"></i>
<i class="fa-solid fa-scarf" style="color:#ff5e99"></i>
<i class="fa-solid fa-mitten" style="color:#ff85b2"></i>
<i class="fa-solid fa-mitten fa-flip-horizontal" style="color:#ffaccb"></i>
</p>
<div class="row no-gutters align-items-center">
<div class="col"><hr style="border-width:2px;border-color:#fff;border-style:dashed"></div>
<i class="fa-solid fa-scissors fa-flip-horizontal fa-3x" style="color:#fff"></i>
</div>
<!---------- / end divider / ------------------>
<!------------------------ / BYF AND DNI ROW - starting with left row 'BYF' /----------------------------->
<div class="row no-gutters" style="background-color:#fff;border-top-right-radius:40px;border-top-left-radius:40px">
<div class="col-md-6 p-2">
<div class="p-2 h-100" style="border-top-right-radius:40px;border-top-left-radius:40px;background-color:#fff">
<p align="center" style="color:#ff85b2"> <i class="fas fa-bounce">
<span style="font-family:arial black"> BYF !</span></i> </p>
<p style="color:#720029;font-weight:bold"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus </p>
</div>
</div>
<!-------------------- / right row DNI / -------------------->
<div class="col-md-6 p-2">
<div class="p-3 h-100" style="border-top-right-radius:40px;border-top-left-radius:40px;background-color:#fff">
<p align="center" style="color:#ff85b2"> <i class="fas fa-beat">
<span style="font-family:arial black"> DNI X </span></i></p>
<p style="color:#720029;font-weight:bold"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. </p>
</div>
</div>
</div>
<!----------------/ end BYF and DNI row / ---------------->
<!---------------- / divider / --------------------------->
<div class="row no-gutters align-items-center">
<div class="col">
<div style="height:3px; background-image:linear-gradient(to left,#ffaccb,#fff);"></div></div>
<div class="p-2">
<i class="fa-solid fa-heart fa-flip fa-2x" style="color:#ff5e99;animation-duration:3s"></i> </div>
<div class="col">
<div style="height:3px; background-image:linear-gradient(to left,#fff,#ffaccb);"></div>
</div>
</div>
<!---------------- / end divider / --------------------------->
<!--------------- / pagedolls row / -------------------------->
<div class="row no-gutters"
style="background-color:#fff;border-bottom-left-radius:45px;border-bottom-right-radius:45px">
<div class="col-lg-3 col-3 p-2">
<img src="https://sdl-stickershop.line.naver.jp/products/0/0/6/1026/android/stickers/16651.png">
</div>
<div class="col-lg-3 col-3 p-2">
<img src="https://sdl-stickershop.line.naver.jp/products/0/0/1/2628/android/stickers/218677.png;">
</div>
<div class="col-lg-3 col-3 p-2">
<img src="https://sdl-stickershop.line.naver.jp/products/0/0/1/2628/android/stickers/218679.png">
</div>
<div class="col-lg-3 col-3 p-2">
<img src="https://sdl-stickershop.line.naver.jp/products/0/0/6/1026/android/stickers/16644.png">
</div>
</div>
</div>
</div>
<!--------------- / end pagedolls row / -------------------------->
<!---/divider/---->
<div class="col-12">
<div class="p-4 h-100" style="background-color:#ffaccb">
</div>
</div>
</div>
</div>
</div>
<!-------------(end main container)------------>
<!-------------- / FEATURED CONTAINER / ------------------>
<!----------- / starting with left row - pagedoll / ----------------->
<br>
<div class="p-1" style="background-color:#fff;border-top-left-radius:100px;border-top-right-radius:15px">
<div style="background-color:#ffd4e3;border-top-left-radius:100px;border-top-right-radius:100px">
<div class="row no-gutters">
<div class="col-md-3 p-2" style="background-color:#ffd4e3;border-top-left-radius:100px;
border-top-right-radius:100px">
<div align="center" class="p-1 h-100" style="background-color:#fff;border-top-right-radius:100px;border-top-left-radius:100px;">
<!------------- / I recommend using transparent pagedoll
you can also change the animation (flip, spin, fade, beat, beat-fade, shake, bounce) and animation duration! / --->
<br>
<i class="fas fa-flip" style="animation-duration:3s">
<img src="https://sdl-stickershop.line.naver.jp/products/0/0/6/1026/android/stickers/16639.png"></i>
</div>
</div>
<!---------------------->
<!----------- / END LEFT ROW - starting right row - featured (can be friends or ocs) / ----------------->
<div class="col-md-9 p-2" style="background-color:#ffd4e3;border-top-right-radius:15px">
<p class="p-3" style="font-size:20px;font-weight:bold;background-color:#ffaccb;border-top-right-radius:15px;border-top-left-radius:15px;color:#720029">
<span class="p-2"> MY LOVELIES!
<i class="fas fa-heart fa-flip" style="animation-duration:3s"></i>
</span>
</p>
<div class="row no-gutters" style="background-color:#fff">
<!-------[ featured one ]------------>
<div class="col-lg-3 col-3 p-2">
<a href="LINK_HERE1">
<img class="rounded-circle"
src="https://f2.toyhou.se/file/f2-toyhou-se/images/34089527_Ujs0TKC3LT0rTom.png"></a>
</div>
<!-------[ featured two ]------------>
<div class="col-lg-3 col-3 p-2">
<a href="LINK_HERE2">
<img class="rounded-circle"
src="https://f2.toyhou.se/file/f2-toyhou-se/images/34089527_Ujs0TKC3LT0rTom.png"></a>
</div>
<!-------[ featured three ]------------>
<div class="col-lg-3 col-3 p-2">
<a href="LINK_HERE3">
<img class="rounded-circle"
src="https://f2.toyhou.se/file/f2-toyhou-se/images/34089527_Ujs0TKC3LT0rTom.png"></a>
</div>
<!-------[ featured four ]------------>
<div class="col-lg-3 col-3 p-2">
<a href="LINK_HERE4">
<img class="rounded-circle"
src="https://f2.toyhou.se/file/f2-toyhou-se/images/34089527_Ujs0TKC3LT0rTom.png"></a>
</div>
</div>
</div>
</div>
<!---------------- / end featured / ------------------->
<!---------------- / credits ;3 / -------------------->
<div class="p-3 text-center" style="background-color:#ffaccb;font-weight:bold;color:#720029">
<span style="font-size:14px">[ IMAGE CREDITS: </span>
<span style="font-size:14px"> SANRIO & LINE STICKER ]</span>
<a style="color:#000" href="/codesrollss">
<i class="fas fa-cat-space fa-lg"></i><i class="fas fa-apple-whole fa-spin"></i>
<span style="font-size:14px"><u> CODE BY APPLEROLLSS </u></span>
</a>
</div>
</div>
</div>
<!--------------- / END CODE! WEEE ^w^ / ----------------------------->
Recent Images
No images.