What's new
  • When posting, please be aware that artistic nudity is still nudity and not allowed under RpNation rules. Please edit your pictures accordingly!

    Remember to credit artists when using work not your own.

Accepting Requests ๐œ๐จ๐ซ๐ง๐Ÿ๐ฅ๐จ๐ฐ๐ž๐ซ ๐›๐ฅ๐ฎ๐ž - kosc's things;

koschei.

(ใฃโ€™-โ€˜)โ•ฎ =อŸอŸอžอž ๐Ÿฆ† ๏พŒ๏พž๏ฝซ๏พ
[nobr]
[class name="cornflower" minWidth="800px"]
width:80vw;height:600px;background:url(https://images2.imgbox.com/71/75/tqMS7axg_o.png);background-size:cover;background-position:right;display:flex;overflow:hidden
[/class]
[class name="cornflower" maxWidth="800px"]
background:url(https://images2.imgbox.com/71/75/tqMS7axg_o.png);background-size:cover;background-position:right;display:flex;flex-wrap: wrap;justify-content:center
[/class]
[class name="cornflowerbox"]
padding-top:130px;margin-left:7vw;transition:1.1s!important;[/class]
[class name="hover"]
border-radius:50%;border:1px solid white;width:55px;height:55px;text-align:center;padding:50px;color:white;line-height:55px;transition:0.5s;margin-top:-50px;
[/class]
[class name="tabbox" minWidth="1000px"]
margin:150px 0 0 10vw;
[/class]
[class name="tabbox" maxWidth="1000px"]
display:none
[/class]
[class name="mobilepls" minWidth="800px"]display:flex;width:200%[/class][class name="mobilepls" maxWidth="800px"][/class][class name="mobilebls" maxWidth="800px"]display:none[/class]

[div class="cornflower"]
[div class="change cornflowerbox"]
[div style="position:relative;width:40vw;margin-left:4vw"]
[div style="font-size:8vw;color:transparent;-webkit-text-stroke:1px white;opacity:0.3;line-height:4.9vw;position:absolute"]corn /[br][/br]
[div style="margin-left:10vw;"]/ flower[/div]
[/div]
[/div]
[div style="overflow:hidden;margin:17vh 0 0 5vw;width:30vw;height:22vh;opacity:0.7;min-width:300px"][div class="mobilepls"]
[div style="width:50%;height:22vh;overflow:hidden;transition:0.5s;margin-right:20px;min-width:300px!important" class="moveover"][div style="padding-right:100px;width:30vw;min-width:300px;height:100%;overflow:auto;font-size:12px;text-align:justify;color:white"]heyo all and welcome to this corner of the bbcode forums where i dump all my attempts at wrangling code. i'm koschei, lurker and (very occasionally) i code and write. coding's a fun hobby for me but geez i wish i knew what i was doing even 1% of the time (i.e codes are supposed to be mobile friendly but mostly they're just ???). please excuse my weird creations as i relearn this stuff again and again im afflicted with chronic dumbass syndrome[br][/br][br][/br]

all of my codes here are free to use, take apart, change, idc really as long as you keep the credit in the corner (it's really small, i promise), i just really love seeing my codes used! please do mind the mess though haha, i never manage to keep anything neat, and if you have any questions/critiques/whatever please tell me![/div][/div]

[div style="width:calc(50% - 20px);height:22vh;overflow:hidden;margin-right:20px" class="mobilebls"][div style="width:100%;padding-right:100px;height:100%;overflow:auto;font-size:12px;text-align:justify;color:white"]this is a sort of test run for requesting codes. i don't have any sort of formal template or rules or anything for these for now, just shoot me a pm with what you want.[br][/br][br][/br]

please make sure your pm is as detailed as possible, including type of code (ic/character sheet/idk), color palette/overall theme, size of template, number of tabs/subsections (if any), anything you absolutely must have included, as much information as you can provide![br][/br][br][/br]

i'll accept requests that i feel confident completing, as i said, this is mostly a test run so apologies if things don't turn out perfect first time. if you want any edits made to the code just let me know and i'll get onto it! i'm fairly busy most of the time, so it might take a while for me to complete requests, so please, please be patient with me. [br][/br][br][/br]

all codes will be free to use for everyone with credit to me, this is non-negotiable.[/div][/div]
[/div][/div][/div]


[div class="change tabbox"]
[div class="hover about"]home[/div]
[div class="hover comms"]request[/div]
[div class="hover codes"]codes[/div]
[/div]

[div style="margin-left:50px;padding-top:50px;padding-bottom:50px;height:500px;overflow:hidden;width:300px" class="appear"] [div style="overflow-y:auto;overflow-x:hidden;padding-right:1000px;width:100%;height:500px;"]
[div class="linkBox"]
[div class="linkNum"]01[/div]
[div class="linkTitle"]skylight[/div]
[div class="linkDesc"]app template[/div]
[/div]


[div class="linkBox"]
[div class="linkNum"]02[/div]
[div class="linkTitle"]stands for secret[/div]
[div class="linkDesc"]app template[/div]
[/div]


[div class="linkBox"]
[div class="linkNum"]03[/div]
[div class="linkTitle"]all's fair[/div]
[div class="linkDesc"]app template[/div]
[/div]


[div class="linkBox"]
[div class="linkNum"]04[/div]
[div class="linkTitle"]name[/div]
[div class="linkDesc"]description[/div]
[/div]

[div class="linkBox"]
[div class="linkNum"]05[/div]
[div class="linkTitle"]name[/div]
[div class="linkDesc"]description[/div]
[/div] [/div]
[/div]
[/div]






[class name="hover" state="hover"]
background:white;
color:black!important;
cursor:pointer
[/class]

[class name="width"]
margin-left:50px!important;transition:0.5s;
[/class]

[class name="select"]
background:white;
color:black!important;
cursor:pointer
[/class]

[class name="change"]
transition:0.5s
[/class]

[class name="appear" minWidth="1000px"]
transition:0.5s!important;
transition-delay:0.7s;
opacity:0
[/class]

[class name="appear" maxWidth="1000px"]
opacity:1;
[/class]

[class name="Opacity"]
transition-delay:1s!important;
opacity:1!important
[/class]

[class name="moving"]
margin-left:-50%
[/class]

[script class="codes" on="click"]
addClass width change
addClass select codes
removeClass select about
addClass Opacity appear
removeClass select comms
[/script]

[script class="comms" on="click"]
removeClass select codes
removeClass select about
addClass select comms
addClass moving moveover
[/script]

[script class="about" on="click"]
removeClass width change
removeClass select codes
removeClass moving moveover
removeClass select comms
addClass select about
removeClass Opacity appear
[/script]

[class name="linkBox"]transition:0.5s;margin-top:30px;width:fit-content[/class]
[class name="linkBox" state="hover"]margin-left:20px[/class]
[class name="linkNum"]font-size:50px!important;font-weight:bold!important;font-family:'Open Sans', sans serif!important;float:left;margin-right:5px;color:transparent;-webkit-text-stroke:1px white;[/class]
[class name="linkTitle"]font:light 10px Open Sans!important;letter-spacing:1px!important;text-transform:uppercase;width:300px;padding-top:20px;color:white[/class]
[class name="linkDesc"]font:lighter 10px Open Sans!important;width:300px;color:#fff!important;[/class]

[/nobr]
 
Last edited:

koschei.

(ใฃโ€™-โ€˜)โ•ฎ =อŸอŸอžอž ๐Ÿฆ† ๏พŒ๏พž๏ฝซ๏พ
[nobr]

[div class="aboutcontainer"]
[div class="abouttext"]
[div class="abouttitle"]skylight[/div]
[div class="abouttagscont"]
[div class="abouttags"]app template[/div]
[div class="abouttags"]mobile friendly[/div]
[div class="abouttags"]nobr[/div]
[/div]
[/div]

[/div]


[class name="aboutcontainer"]width:30%;padding:50px;min-width:200px;margin:auto;overflow:hidden;[/class][class name="abouttext"]padding:50px;background:#7C1B24;color:#fff!important;font-weight:bold;font-size:30px;border-radius:5px;transition:0.5s;margin-top:0%;width:calc(100% -50px);[/class][class name="abouttagscont"]min-width:200px;display:flex;flex-wrap:wrap;margin-top:-10px[/class][class name="abouttags"]color:#7C1B24;background:#fff;letter-spacing:1px;text-transform:uppercase;font-weight:100;font-size:10px;margin:2.5px;padding:5px;width:fit-content[/class][class name="abouttitle"]color:#fff!important;[/class]

[/nobr]
[nobr]



[class name="majorContainer" minWidth="500px"]
width:500px;
background:#fff;
margin:auto;
border:1px solid #f1f1f1;
padding:50px;
--accent:#555
[/class]

[class name="majorContainer" maxWidth="499px"]
width:250px;
background:#fff;
margin:auto;
border:1px solid #f1f1f1;
padding:50px;
--accent:#555
[/class]

[class name="colorChange"]
--accent:#9D0F0D
[/class]



[div class="majorContainer"]
[div class="titleText"]ไนฐๆคŸ่ฟ˜็ 

[div class="quoteContainer"]
[div style="font-size:10px"]i believe in love but love won't believe in me[/div]
[/div]

[/div]


[div style="padding:10px;border:1px solid #f1f1f1"]

[div class="imageHover"]

[div class="goBack"]goiback[/div]

[div class="flexright"]
[div class="infobox"]
[div class="pageContainers"]

[div class="tabContainers"]
[div class="tabStyle taba"]basics[/div]
[div class="tabStyle tabb"]character[/div]
[div class="tabStyle tabc"]extra[/div]
[div class="goBackMobile"]goiback[/div]
[/div]


[div class="containerPages pageOne"]

[div class="basicInfo"]
[div class="basicInfoLabel"]name[/div]
[div class="basicInfoText"]william shakespeare[/div]
[/div]

[div class="basicInfo"]
[div class="basicInfoLabel"]n.name[/div]
[div class="basicInfoText"]bill[/div]
[/div]

[div class="basicInfo"]
[div class="basicInfoLabel"]age[/div]
[div class="basicInfoText"]centuries[/div]
[/div]

[div class="basicInfo"]
[div class="basicInfoLabel"]gender[/div]
[div class="basicInfoText"]male [/div]
[/div]

[div class="basicInfo"]
[div class="basicInfoLabel"]sexuality[/div]
[div class="basicInfoText"]dunno[/div]
[/div]

[div class="basicInfo"]
[div class="basicInfoLabel"]class[/div]
[div class="basicInfoText"]varies[/div]
[/div]

[div class="basicInfo"]
[div class="basicInfoLabel"]spare[/div]
[div class="basicInfoText"]other info[/div]
[/div]



[/div]



[div class="containerPages pageTwo"]

[div class="personContainer"]

[div style="padding:5px"]
[div class="basicInfoLabel"]likes[/div]
[/div]

[div class="personFlex"]
[div class="personWrap"]

[div class="likeDislike"]#likes[/div]
[div class="likeDislike"]here[/div]
[div class="likeDislike"]#at[/div]
[div class="likeDislike"]#least[/div]
[div class="likeDislike"]#five[/div]
[/div]
[/div]


[/div]

[div class="personContainer"]

[div style="padding:5px"]
[div class="basicInfoLabel"]dislikes[/div]
[/div]

[div class="personFlex"]
[div class="personWrap"]

[div class="likeDislike"]#dislikes[/div]
[div class="likeDislike"]here[/div]
[div class="likeDislike"]#at[/div]
[div class="likeDislike"]#least[/div]
[div class="likeDislike"]#five[/div]
[/div]
[/div]

[/div]

[div class="personContainer"]
[div class="traitLeftContainer"]
[div class="traitName"]outgoing[/div]
[div class="traitMeterOut"]

[div class="traitMeter" style="width:95%;"][/div]
[/div]

[div class="traitName"]enthusiastic[/div]
[div class="traitMeterOut"]
[div class="traitMeter" style="width:50%;"][/div]
[/div]

[div class="traitName"]dedicated[/div]
[div class="traitMeterOut"]
[div class="traitMeter" style="width:45%;"][/div]
[/div]

[div class="traitName"]truthful[/div]
[div class="traitMeterOut"]
[div class="traitMeter" style="width:95%;"][/div]
[/div]

[div class="traitName"]observant[/div]
[div class="traitMeterOut"]
[div class="traitMeter" style="width:5%;"][/div]
[/div]

[div class="traitName"]protective[/div]
[div class="traitMeterOut"]
[div class="traitMeter" style="width:35%;"][/div]
[/div]
[/div]

[div class="traitLeftContainer"]

[div class="traitName"]forgetful[/div]
[div class="traitMeterOut"]
[div class="traitMeter" style="width:35%;"][/div]
[/div]

[div class="traitName"]brash[/div]
[div class="traitMeterOut"]
[div class="traitMeter" style="width:85%;"][/div]
[/div]

[div class="traitName"]incautious[/div]
[div class="traitMeterOut"]
[div class="traitMeter" style="width:45%;"][/div]
[/div]

[div class="traitName"]manipulative[/div]
[div class="traitMeterOut"]
[div class="traitMeter" style="width:65%;"][/div]
[/div]

[div class="traitName"]vindictive[/div]
[div class="traitMeterOut"]
[div class="traitMeter" style="width:58%;"][/div]
[/div]

[div class="traitName"]impatient[/div]
[div class="traitMeterOut"]
[div class="traitMeter" style="width:75%;"][/div]
[/div]
[/div]

[/div]



[/div]

[div class="containerPages pageThree"]
[div class="imgContainers"]
[div class="imgBox"]

[/div]
[div class="imgBox"]

[/div]
[div class="imgBox"]

[/div]
[div class="imgBox"]

[/div]
[/div]

[div class="oocBox"]
@ooc name
[/div]

[div class="oocInfo"]pronouns, gmt +etc, discord[/div]
[/div]
[/div]
[/div]
[/div]
[/div]
[/div]
[/div]

[div style="max-width:500px;margin:auto;width:100%;font-size:8px;text-transform:uppercase;opacity:0.6;text-align:right"]cheers, lamb[/div]





[class name="titleText" minWidth="500px"]
font-size:5em;
color:var(--accent);
transition:1s;
[/class]

[class name="titleText" maxWidth="499px"]
font-size:4em;
color:var(--accent);
transition:1s;
[/class]

[class name="quoteContainer" minWidth="500px"]
margin-top:-0.9em;
margin-left:3em;
background:#fff;
color:#555;
text-transform:uppercase;
position:absolute;
z-index:1;
letter-spacing:0.5px;
padding:5px;
[/class]

[class name="quoteContainer" maxWidth="499px"]
margin-top:-0.9em;
background:#fff;
color:#555;
text-transform:uppercase;
position:absolute;
z-index:1;
padding:5px;
[/class]




[class name="imageHover" minWidth="500px"]
width:100%;
height:300px;
background:url(https://images2.imgbox.com/13/f6/zWjpZqlS_o.jpg);
background-position:center;
background-size:150%;
transition:0.5s ease all;
filter:grayscale(100%);
overflow:hidden;
display:flex;
transition-duration:1s;
cursor:crosshair;
[/class]

[class name="imageHover" maxWidth="499px"]
width:100%;
height:300px;
background:url(https://images2.imgbox.com/13/f6/zWjpZqlS_o.jpg);
background-position:center;
background-size:cover;
transition:0.5s ease all;
filter:grayscale(100%);
overflow:hidden;
display:flex;
transition-duration:1s;
cursor:crosshair;
[/class]


[class name="goBack" minWidth="500px"]
margin-left:calc(50% - 50px);
color:#fff;
text-transform:uppercase;
font-size:10px;
margin-top:285px;
font-weight:bold;
transition:1s;
opacity:0;
[/class]

[class name="goBack" maxWidth="499px"]
display:none
[/class]

[class name="goBackMobile" minWidth="500px"]
display:none
[/class]

[class name="goBackMobile" maxWidth="499px"]
color:#555;
text-transform:uppercase;
font-size:10px;
font-weight:bold;
transition:1s;
opacity:1;
padding:5px;
cursor:pointer;
[/class]




[class name="flexright" minWidth="500px"]
width:250px;
height:100%;
transition-duration:1s;
margin-left:calc(50% + 10px);
[/class]

[class name="flexright" maxWidth="499px"]
width:250px;
height:100%;
transition-duration:1s;
margin-left:100%;
[/class]


[class="infobox"]
width:250px;
height:100%;
background:#fff;
overflow:hidden;
cursor:auto;
[/class]





[class name="pageContainers"]
width:calc(100% - 25px);
padding:0px 0px 0px 10px;
height:100%;
overflow:hidden;
[/class]

[class name="containerPages"]
font-size:11px;
text-align:justify;
color:#555;
height:265px;
overflow:auto;
width:220px;
padding-right:17px;
padding-left:3px;
[/class]

[class name="tabContainers"]
display:flex;
margin-bottom:7px;
height:22px;
[/class]

[class name="tabStyle"]
font-size:10px;
text-transform:uppercase;
color:#555;
font-weight:bold;
padding:5px;
transition:0.1s;
cursor:pointer;
[/class]




[class name="basicInfo"]
padding:6px;
border:1px solid #f1f1f1;
display:flex;
justify-content:space-between;
margin-bottom:5px;
[/class]

[class name="basicInfoLabel"]
font-size:9.5px;
text-transform:uppercase;
color:#fff;
font-weight:bold;
padding:2px 5px 2px 5px;
background:var(--accent);
[/class]

[class name="basicInfoText"]
font-size:11px;
color:#555;
[/class]




[class name="personContainer"]
display:flex;
width:100%;
font-size:9.5px;
margin-top:5px;
[/class]

[class name="personFlex"]
width:100px;
flex-grow:1;
padding:5px;
[/class]

[class name="personWrap"]
display:flex;
flex-wrap:wrap;
width:100%;
[/class]

[class name="traitLeftContainer"]
width:calc(50% - 15px);
margin:5px;
[/class]

[class name="traitName"]
text-transform:uppercase;
font-weight:bold;
margin-bottom:-5px;
color:#000;
[/class]

[class name="traitMeterOut"]
border:1px solid var(--accent);
width:100%;
height:5px;
border-radius:5px;
padding:1px;
margin-bottom:5px;
[/class]

[class name="traitMeter"]
background:var(--accent);
height:5px;
[/class]

[class name="likeDislike"]
background-color:#eeeeee;
color:#555;
text-transform:uppercase;
width:fit-content;
padding:2px 5px 2px 5px;
border-radius:5px;
margin:1px;
[/class]



[class name="imgContainers"]
display:flex;
width:223px;
flex-wrap:wrap;
pointer-events:none;
justify-content:space-between;
[/class]

[class name="imgBox"]
border:5px solid #fff;
box-shadow:1px 1px #ddd;
width:100px;
height:100px;
filter:saturate(200%);
[/class]

[class name="oocBox"]
width:100%;
padding-right:10px;
border-top:3px solid var(--accent);
margin-top:3px;
text-align:right;
text-transform:uppercase;
color:#555;
font-size:15px;
font-weight:bold;
[/class]

[class name="oocInfo"]
width:100%;
text-align:right;
[/class]





[class name="animate" minWidth="500px"]
animation-name:{post_id}imageAnimate;
animation-duration: 2s;
animation-fill-mode: forwards;
[/class]

[class name="animate" maxWidth="499px"]
animation-name:{post_id}mobileAnimate;
animation-duration: 2s;
animation-fill-mode: forwards;
[/class]

[class name="backAnimate" minWidth="500px"]
animation-name:{post_id}postAnimate;
animation-duration: 2s;
animation-fill-mode: forwards;
[/class]

[class name="backAnimate" maxWidth="499px"]
animation-name:{post_id}postMobile;
animation-duration: 2s;
animation-fill-mode: forwards;
[/class]

[class name="movers" minWidth="500px"]
margin-left:calc(0% + 5px);
transition-delay:1s;
[/class]

[class name="movers" maxWidth="499px"]
margin-left:calc(0% - 10px);
transition-delay:1s;
[/class]

[class name="opacityChange"]
opacity:1;
transition-delay:2s;
cursor: pointer;
[/class]




[script class="imageHover" on="mouseenter"]
addClass animate imageHover
removeClass backAnimate imageHover
addClass movers flexright
addClass opacityChange goBack
addClass colorChange majorContainer
[/script]

[script class="goBack" on="click"]
removeClass animate imageHover
addClass backAnimate imageHover
removeClass movers flexright
removeClass opacityChange goBack
removeClass colorChange majorContainer
[/script]

[script class="goBackMobile" on="click"]
removeClass animate imageHover
addClass backAnimate imageHover
removeClass movers flexright
removeClass opacityChange goBack
removeClass colorChange majorContainer
[/script]



[script class="containerPages"]
hide containerPages
show pageOne
removeClass tabSelect tabStyle
addClass tabSelect taba
[/script]

[class name="tabSelect"]
border-bottom:2px solid var(--accent);
margin-left:0px;
[/class]

[script class="taba" on="click"]
hide containerPages
show pageOne
removeClass tabSelect tabStyle
addClass tabSelect taba
[/script]

[script class="tabb" on="click"]
hide containerPages
show pageTwo
removeClass tabSelect tabStyle
addClass tabSelect tabb
[/script]

[script class="tabc" on="click"]
hide containerPages
show pageThree
removeClass tabSelect tabStyle
addClass tabSelect tabc
[/script]



[animation=imageAnimate]
[keyframe=50]
background-size:130%;filter:grayscale(0%);background-position:center;
[/keyframe]

[keyframe=100]
background-size:130%;filter:grayscale(0%);background-position:center right;
[/keyframe]

[/animation]

[animation=postAnimate]
[keyframe=0]
background-size:130%;filter:grayscale(0%);background-position:center right;
[/keyframe]

[keyframe=50]
background-size:130%;filter:grayscale(0%);background-position:center;
[/keyframe]

[keyframe=100]
background-size:150%;filter:grayscale(100%);background-position:center;
[/keyframe]
[/animation]

[animation=mobileAnimate]
[keyframe=50]
filter:grayscale(0%);background-position:center;
[/keyframe]

[keyframe=100]
filter:grayscale(0%);background-position:center right;
[/keyframe]

[/animation]

[animation=postMobile]
[keyframe=0]
filter:grayscale(0%);background-position:center right;
[/keyframe]

[keyframe=50]
filter:grayscale(0%);background-position:center;
[/keyframe]

[keyframe=100]
filter:grayscale(100%);background-position:center;
[/keyframe]
[/animation]


[/nobr]
 
Last edited:

koschei.

(ใฃโ€™-โ€˜)โ•ฎ =อŸอŸอžอž ๐Ÿฆ† ๏พŒ๏พž๏ฝซ๏พ
[nobr]

[div class="aboutcontainer"]
[div class="abouttext"]
[div class="abouttitle"]s stands for secret[/div]
[div class="abouttagscont"]
[div class="abouttags"]app template[/div]
[div class="abouttags"]mobile friendly[/div]
[div class="abouttags"]nobr[/div]
[/div]
[/div]

[/div]


[class name="aboutcontainer"]width:30%;padding:50px;min-width:200px;margin:auto;overflow:hidden;[/class][class name="abouttext"]padding:50px;background:#7C1B24;color:#fff!important;font-weight:bold;font-size:30px;border-radius:5px;transition:0.5s;margin-top:0%;width:calc(100% -50px);[/class][class name="abouttagscont"]min-width:200px;display:flex;flex-wrap:wrap;margin-top:-10px[/class][class name="abouttags"]color:#7C1B24;background:#fff;letter-spacing:1px;text-transform:uppercase;font-weight:100;font-size:10px;margin:2.5px;padding:5px;width:fit-content[/class][class name="abouttitle"]color:#fff!important;[/class]

[/nobr]
[nobr]


[nobr]
[div class="majorContainer"]




[div class="fileGridSize"]

[div class="fileTitle"]
character file #001
[/div]

[div class="fileQuote"]
one quick line of quote here
[/div]

[/div]



[div class="infoGridOne"]

[div class="infoBoxLeft"]
[div class="infoHeight"]
[div class="infoNumber"]01[/div]
[div class="infoTitle"]name[/div]
[div class="infoField"]cecile lalond[/div]
[/div]
[/div]

[div class="infoBoxLeft"]
[div class="infoHeight"]
[div class="infoNumber"]02[/div]
[div class="infoTitle"]age[/div]
[div class="infoField"]here[/div]
[/div]
[/div]


[div class="infoBoxLeft"]
[div class="infoHeight"]
[div class="infoNumber"]03[/div]
[div class="infoTitle"]gender[/div]
[div class="infoField"]here[/div]
[/div]
[/div]

[div class="infoBoxLeft"]
[div class="infoHeight"]
[div class="infoNumber"]04[/div]
[div class="infoTitle"]sexuality[/div]
[div class="infoField"]here[/div]
[/div]
[/div]
[/div]

[div class="infoGridTwo"]

[div class="infoBoxRight"]
[div class="infoHeight"]
[div class="infoNumber"]05[/div]
[div class="infoTitle"]occupation[/div]
[div class="infoField"]cecile lalond[/div]
[/div]
[/div]

[div class="infoBoxRight"]
[div class="infoHeight"]
[div class="infoNumber"]06[/div]
[div class="infoTitle"]height[/div]
[div class="infoField"]here[/div]
[/div]
[/div]


[div class="infoBoxRight"]
[div class="infoHeight"]
[div class="infoNumber"]07[/div]
[div class="infoTitle"]weight[/div]
[div class="infoField"]here[/div]
[/div]
[/div]

[div class="infoBoxRight"]
[div class="infoHeight"]
[div class="infoNumber"]08[/div]
[div class="infoTitle"]sexuality[/div]
[div class="infoField"]here[/div]
[/div]
[/div]

[/div]




[div class="aestheticGrid"]

[div class="aestheticImage"]
[/div]
[div class="aestheticImage"]
[/div]
[div class="aestheticImage"]
[/div]
[div class="aestheticImage"]
[/div]

[/div]



[div class="characterGrid"]

[div class="characterImage"]
[/div]

[/div]



[div class="overviewGrid"]

[div class="overviewContainer"]

[div class="overviewScroll"]
Turtle merry nutria as less amongst gosh jeepers salmon thanks frog a porpoise beneath much combed caribou ouch so hypnotic therefore.Wherever alas dear stupid snapped groundhog fetching more as flailed meekly petulantly far bet concentrically slick pious merrily less much from far gosh together including much hello silently until well amoral since.
[/div]
[/div]
[/div]


[div class="personalityColumn"]

[div class="textContainer"]
[div class="textTitle"]personality[/div]
[div class="textNoscroll"]
[div class="textScroll"]

Turtle merry nutria as less amongst gosh jeepers salmon thanks frog a porpoise beneath much combed caribou ouch so hypnotic therefore. Wherever alas dear stupid snapped groundhog fetching more as flailed meekly petulantly far bet concentrically slick pious merrily less much from far gosh together including much hello silently until well amoral since. The and wove yet considering across following the darn more snootily despite hello ate seagull jeepers whale hugely a grumbled wherever and panda that well amongst.

[/div]
[/div]
[/div]

[/div]



[div class="dividerGrid"]

[div class="dividerImage"]
[/div]

[/div]




[div class="historyColumn"]


[div class="textContainer"]
[div class="textTitle"]history[/div]
[div class="textNoscroll"]
[div class="textScroll"]

Turtle merry nutria as less amongst gosh jeepers salmon thanks frog a porpoise beneath much combed caribou ouch so hypnotic therefore. Wherever alas dear stupid snapped groundhog fetching more as flailed meekly petulantly far bet concentrically slick pious merrily less much from far gosh together including much hello silently until well amoral since. The and wove yet considering across following the darn more snootily despite hello ate seagull jeepers whale hugely a grumbled wherever and panda that well amongst.

[/div]
[/div]
[/div]

[/div]

[/div]

















[class name="majorContainer" minWidth="900px"]
width:750px;
height:505px;
padding:25px;
margin:5px auto;
border:0.1px solid #f1f1f1;

display:grid;
grid-gap:5px;
grid-template-columns: 120px 120px 120px 120px 120px 120px;
grid-template-rows: 120px 120px 120px 120px

[/class]

[class name="majorContainer"]
--accent:#864052
[/class]

[class name="majorContainer" maxWidth="900px"]
width:245px;
height:1245px;
padding:25px;
margin:5px auto;
border:0.1px solid #f1f1f1;

display:grid;
grid-gap:5px;
grid-template-columns: 120px 120px;
grid-template-rows: 120px 120px 120px 120px 120px 120px 120px 120px 120px 120px;

[/class]



[class name="fileGridSize" minWidth="900px"]
grid-column: 1 / span 3;
grid-row: 1 / 1;
[/class]

[class name="fileGridSize" maxWidth="900px"]
grid-column: 1 / span 2;
grid-row: 1 / 1;
[/class]



[class name="fileTitle"]
border:0.1px solid #f1f1f1;
border-bottom:0px;
padding:40px 50px 37px 50px;
font-size:10px;
font-weight:150;
text-transform:uppercase;
letter-spacing:1px;
height:calc(1.3em - 0.2px)
[/class]

[class name="fileQuote"]
border-left:0.1px solid var(--accent);
border-right:0.1px solid var(--accent);
padding:10px;
background:var(--accent);
font-size:8px;
font-weight:150;
text-transform:uppercase;
color:#fff;
letter-spacing:1px;
height:1.3em;
[/class]



[class name="infoGridOne" minWidth="900px"]
grid-column: 4 / span 1;
grid-row: 1 / 3;
[/class]

[class name="infoGridTwo" minWidth="900px"]
grid-column: 5 / span 1;
grid-row: 1 / 3;
[/class]

[class name="infoGridOne" maxWidth="900px"]
grid-column: 1 / span 1;
grid-row: 3 / span 2;
[/class]

[class name="infoGridTwo" maxWidth="900px"]
grid-column: 2 / span 1;
grid-row: 3 / span 2;
[/class]

[class name="infoBoxLeft"]
width:100px;
padding:10px 5px 10px 15px;
[/class]

[class name="infoHeight"]
height:40px
[/class]

[class name="infoNumber"]
color:var(--accent);
font-family:serif;
font-size:20px;
font-weight:bold;
float:left;
margin-right:5px;
[/class]

[class name="infoTitle"]
font-weight:bold;
font-size:10px;
text-transform:uppercase;
padding-top:2px;
[/class]

[class name="infoField"]
font-size:10px;
text-transform:uppercase;
[/class]

[class name="infoBoxRight"]
width:100px;
padding:10px 15px 10px 5px;
[/class]



[class name="aestheticGrid" minWidth="900px"]
grid-column: 6 / span 1;
grid-row: 1 / 5;
border:0.1px solid #f1f1f1;
[/class]

[class name="aestheticGrid" maxWidth="900px"]
grid-column: 1 / span 2;
grid-row: 9 / span 2;
border:0.1px solid #f1f1f1;
display:flex;
flex-wrap:wrap;
justify-content:space-evenly;
[/class]

[class name="aestheticImage" minWidth="900px"]
margin:35px 20px 30px 20px;
padding:10px;
pointer-events:none;
width:60px;
height:60px;
border:0.1px solid #f1f1f1;
[/class]

[class name="aestheticImage" maxWidth="900px"]
margin:20px;
padding:10px;
pointer-events:none;
width:60px;
height:60px;
border:0.1px solid #f1f1f1;
[/class]



[class name="characterGrid"]
grid-column: 1 / span 1;grid-row: 2 / span 1;
border:0.1px solid #f1f1f1;
[/class]
[class name="characterImage"]
padding:20px;
pointer-events:none;
width:80px;
height:80px
[/class]



[class name="overviewGrid" minWidth="900px"]
grid-column: 2 / span 2;
grid-row: 2 / 2;
border:0.1px solid #f1f1f1;
[/class]

[class name="overviewGrid" maxWidth="900px"]
grid-column: 2 / span 1;
grid-row: 2 / 2;
border:0.1px solid #f1f1f1;
[/class]

[class name="overviewContainer"]
width:calc(100% - 50px);
height:calc(100% - 50px);
margin:15px;
padding:10px;
border:0.1px solid #f1f1f1;
overflow:hidden;
[/class]

[class name="overviewScroll"]
font-size:11px;
width:calc(100% + 17px);
height:100%;
overflow:auto;
padding-right:100px;
text-align:justify;
[/class]




[class name="personalityColumn" minWidth="900px"]
grid-column: 1 / span 2;
grid-row: 3 / span 2;
[/class]

[class name="historyColumn" minWidth="900px"]
grid-column: 4 / span 2;
grid-row: 3 / span 2;
[/class]

[class name="personalityColumn" maxWidth="900px"]
grid-column: 1 / span 2;
grid-row: 5 / span 2;
[/class]

[class name="historyColumn" maxWidth="900px"]
grid-column: 1 / span 2;
grid-row: 7 / span 2;
[/class]



[class name="textContainer" minWidth="900px"]
width:200px;
border:0.1px solid #f1f1f1;
padding:20px;
height:205px
[/class]

[class name="textTitle" minWidth="900px"]
color:var(--accent);
font-family:serif;
font-size:25px;
font-weight:bold;
margin-left:5px;
margin-top:-10px;
[/class]

[class name="textNoscroll" minWidth="900px"]
width:180px;
border:0.1px solid #f1f1f1;
padding:10px;
margin-top:-15px;
height:175px;
overflow:hidden;
[/class]
[class name="textScroll" minWidth="900px"]
width:197px;
height:175px;
overflow:auto;
font-size:11px;
padding-right:100px;
text-align:justify;
[/class]


[class name="textContainer" maxWidth="900px"]
width:205px;
border:0.1px solid #f1f1f1;
padding:20px;
height:205px
[/class]

[class name="textTitle" maxWidth="900px"]
color:var(--accent);
font-family:serif;
font-size:25px;
font-weight:bold;
margin-left:5px;
margin-top:-10px;
[/class]

[class name="textNoscroll" maxWidth="900px"]
width:185px;
border:0.1px solid #f1f1f1;
padding:10px;
margin-top:-15px;
height:175px;
overflow:hidden;
[/class]
[class name="textScroll" maxWidth="900px"]
width:202px;
height:175px;
overflow:auto;
font-size:11px;
padding-right:100px;
text-align:justify;
[/class]



[class name="dividerGrid" minWidth="900px"]
grid-column: 3 / span 1;
grid-row:3 / span 2;
border:0.1px solid #f1f1f1;
[/class]

[class name="dividerGrid" maxWidth="900px"]
display:none
[/class]

[class name="dividerImage"]
margin:10px;
padding:10px;
pointer-events:none;
width:80px;
height:205px;
filter:brightness(120%);
[/class][/nobr][/nobr]
 
Last edited:

koschei.

(ใฃโ€™-โ€˜)โ•ฎ =อŸอŸอžอž ๐Ÿฆ† ๏พŒ๏พž๏ฝซ๏พ
[nobr]

[div class="aboutcontainer"]
[div class="abouttext"]
[div class="abouttitle"]all's fair[/div]
[div class="abouttagscont"]
[div class="abouttags"]app template[/div]
[div class="abouttags"]mobile compatible[/div]
[div class="abouttags"]nobr[/div]
[/div]
[/div]

[/div]

[class name="aboutcontainer"]width:30%;padding:50px;min-width:200px;margin:auto;overflow:hidden;[/class][class name="abouttext"]padding:50px;background:#7C1B24;color:#fff!important;font-weight:bold;font-size:30px;border-radius:5px;transition:0.5s;margin-top:0%;width:calc(100% -50px);[/class][class name="abouttagscont"]min-width:200px;display:flex;flex-wrap:wrap;margin-top:-10px[/class][class name="abouttags"]color:#7C1B24;background:#fff;letter-spacing:1px;text-transform:uppercase;font-weight:100;font-size:10px;margin:2.5px;padding:5px;width:fit-content[/class][class name="abouttitle"]color:#fff!important;[/class]

[/nobr]


[nobr]mitchelle springsmitchelle springs

[class name="loveContainerMajor"]
--accent: #aecc42
[/class]


[div class="loveContainerMajor"]

[div class="loveImageContainer"]
[div class="loveMainImage" style="background:url(https://images2.imgbox.com/5b/8e/5Cfj373b_o.png)"][/div]
[/div]

[div class="loveRightContainer"]
[div class="loveTitleContainer"]
[div class="loveStudentProfile"]Student profile[/div]
[div class="loveStudentName"]mitchelle springs[/div]
[/div]

[div class="loveTabbedcontent"]
[div class="lovePageContainer"]



[div class="lovePage pageOne"]

[div class="loveInfoBox"]

[div class="loveInfoTitle"]nickname[/div]
[div class="loveInfoText"]mitch[/div]

[/div]
[div class="loveInfoBox"]

[div class="loveInfoTitle"]age[/div]
[div class="loveInfoText"]sixteen[/div]

[/div]

[div class="loveInfoBox"]

[div class="loveInfoTitle"]grade[/div]
[div class="loveInfoText"]eleventy nine[/div]

[/div]
[div class="loveInfoBox"]

[div class="loveInfoTitle"]gender[/div]
[div class="loveInfoText"]female [/div]

[/div]
[div class="loveInfoBox"]

[div class="loveInfoTitle"]sexuality[/div]
[div class="loveInfoText"]lgbt speedrun[/div]

[/div]

[div class="pageOneFlex"]

[div class="pageOneList"]

  • five
  • positive
  • personality traits
  • or
  • likes
[/div]

[div class="pageOneList"]

  • five
  • negative
  • personality traits
  • or
  • dislikes
[/div]
[/div]
[/div]


[div class="lovePage pageTwo"]
[div class="pageTwoText"]

Freeform character application. use [br][/br]

[div class="loveHeader"]text here[/div]​
[br][/br]

for headers, and[br][/br]

[div class="loveSubheader"]text here[/div]​
[br][/br]

for subheaders, as well as br tags for paragraph breaks. although freeform, please write at least 500 words, encompassing a little about history as well as personality![br][/br]

[div class="loveHeader"]header example[/div]
[div class="loveSubheader"]subheader example[/div]

Turtle merry nutria as less amongst gosh jeepers salmon thanks frog a porpoise beneath much combed caribou ouch so hypnotic therefore.[br][/br][br][/br]

Wherever alas dear stupid snapped groundhog fetching more as flailed meekly petulantly far bet concentrically slick pious merrily less much from far gosh together including much hello silently until well amoral since.[br][/br][br][/br]

The and wove yet considering across following the darn more snootily despite hello ate seagull jeepers whale hugely a grumbled wherever and panda that well amongst.[br][/br][br][/br]

One far far congratulated hence blushed goldfish frowned emu crab much chameleon handsome bluebird wolf heron pitifully and between imminently underwrote then beyond that.

[/div]

[/div]


[div class="lovePage pageThree"]

[div class="loveInfoBox"]

[div class="loveInfoTitle"]height[/div]
[div class="loveInfoText"]inch/cm[/div]

[/div]
[div class="loveInfoBox"]

[div class="loveInfoTitle"]weight[/div]
[div class="loveInfoText"]kg/lb[/div]

[/div]

[div class="loveInfoBox"]

[div class="loveInfoTitle"]figure[/div]
[div class="loveInfoText"]go figure[/div]

[/div]

[div class="loveInfoBox"]

[div class="loveInfoTitle"]markings[/div]
[div class="loveInfoText"]earrings, tattoos, etc[/div]

[/div]

[div class="pageThreeContainer"]
[div class="pageThreeTab friends"]friends[/div]
[div class="pageThreeTab foes"]foes[/div]
[div class="pageThreeTab lovers"]lovers[/div]
[div class="pageThreeTab others"]others[/div]
[/div]

[div class="pageThreeSelect"][/div]

[div class="pageThreePage friendsPage"]

[div class="pageThreeText"]

Turtle merry nutria as less amongst gosh jeepers salmon thanks frog a porpoise beneath much combed caribou ouch so hypnotic therefore. Wherever alas dear stupid snapped groundhog fetching more as flailed meekly petulantly far bet concentrically slick pious merrily less much from far gosh together including much hello silently until well amoral since. The and wove yet considering across following the darn more snootily despite hello ate seagull jeepers whale hugely a grumbled wherever and panda that well amongst.

[/div]

[div class="pageThreeText"]

[div class="pageThreeTitle"]friend #1[/div]

Turtle merry nutria as less amongst gosh jeepers salmon thanks frog a porpoise beneath much combed caribou ouch so hypnotic therefore. Wherever alas dear stupid snapped groundhog fetching more as flailed meekly petulantly far bet concentrically slick pious merrily less much from far gosh together including much hello silently until well amoral since. The and wove yet considering across following the darn more snootily despite hello ate seagull jeepers whale hugely a grumbled wherever and panda that well amongst. The and wove yet considering across following the darn more snootily despite hello ate seagull jeepers whale hugely a grumbled wherever and panda that well amongst.

[/div]
[/div]

[div class="pageThreePage foesPage"]

[div class="pageThreeText"]

Turtle merry nutria as less amongst gosh jeepers salmon thanks frog a porpoise beneath much combed caribou ouch so hypnotic therefore. Wherever alas dear stupid snapped groundhog fetching more as flailed meekly petulantly far bet concentrically slick pious merrily less much from far gosh together including much hello silently until well amoral since. The and wove yet considering across following the darn more snootily despite hello ate seagull jeepers whale hugely a grumbled wherever and panda that well amongst.

[/div]

[div class="pageThreeText"]

[div class="pageThreeTitle"]foe #1[/div]

Turtle merry nutria as less amongst gosh jeepers salmon thanks frog a porpoise beneath much combed caribou ouch so hypnotic therefore. Wherever alas dear stupid snapped groundhog fetching more as flailed meekly petulantly far bet concentrically slick pious merrily less much from far gosh together including much hello silently until well amoral since. The and wove yet considering across following the darn more snootily despite hello ate seagull jeepers whale hugely a grumbled wherever and panda that well amongst. The and wove yet considering across following the darn more snootily despite hello ate seagull jeepers whale hugely a grumbled wherever and panda that well amongst.

[/div]
[/div]

[div class="pageThreePage loversPage"]

[div class="pageThreeText"]

Turtle merry nutria as less amongst gosh jeepers salmon thanks frog a porpoise beneath much combed caribou ouch so hypnotic therefore. Wherever alas dear stupid snapped groundhog fetching more as flailed meekly petulantly far bet concentrically slick pious merrily less much from far gosh together including much hello silently until well amoral since. The and wove yet considering across following the darn more snootily despite hello ate seagull jeepers whale hugely a grumbled wherever and panda that well amongst.

[/div]

[div class="pageThreeText"]

[div class="pageThreeTitle"]love #1[/div]

Turtle merry nutria as less amongst gosh jeepers salmon thanks frog a porpoise beneath much combed caribou ouch so hypnotic therefore. Wherever alas dear stupid snapped groundhog fetching more as flailed meekly petulantly far bet concentrically slick pious merrily less much from far gosh together including much hello silently until well amoral since. The and wove yet considering across following the darn more snootily despite hello ate seagull jeepers whale hugely a grumbled wherever and panda that well amongst. The and wove yet considering across following the darn more snootily despite hello ate seagull jeepers whale hugely a grumbled wherever and panda that well amongst.

[/div]
[/div]

[div class="pageThreePage othersPage"]

[div class="pageThreeText"]

Turtle merry nutria as less amongst gosh jeepers salmon thanks frog a porpoise beneath much combed caribou ouch so hypnotic therefore. Wherever alas dear stupid snapped groundhog fetching more as flailed meekly petulantly far bet concentrically slick pious merrily less much from far gosh together including much hello silently until well amoral since. The and wove yet considering across following the darn more snootily despite hello ate seagull jeepers whale hugely a grumbled wherever and panda that well amongst.

[/div]

[div class="pageThreeText"]

[div class="pageThreeTitle"]other #1[/div]

Turtle merry nutria as less amongst gosh jeepers salmon thanks frog a porpoise beneath much combed caribou ouch so hypnotic therefore. Wherever alas dear stupid snapped groundhog fetching more as flailed meekly petulantly far bet concentrically slick pious merrily less much from far gosh together including much hello silently until well amoral since. The and wove yet considering across following the darn more snootily despite hello ate seagull jeepers whale hugely a grumbled wherever and panda that well amongst. The and wove yet considering across following the darn more snootily despite hello ate seagull jeepers whale hugely a grumbled wherever and panda that well amongst.

[/div]
[/div]


[/div]



[div class="lovePage pageFour"]
[div class="pageFourFlex"]
[div class="pageFourInfo"]
[div class="loveInfoBox"]

[div class="loveInfoTitle"]hobbies[/div]
[div class="loveInfoText"]fly fishing[/div]

[/div]
[div class="loveInfoBox"]

[div class="loveInfoTitle"]fav. color[/div]
[div class="loveInfoText"]octarine[/div]

[/div]
[div class="loveInfoBox"]

[div class="loveInfoTitle"]family[/div]
[div class="loveInfoText"]playable only[/div]

[/div]
[/div]

[div class="loveMusicContainer"]
[div class="loveMusicSquare"]
[div class="loveMusicSymbol"][/div]
[/div]
[div class="loveMusicBox"]
[div class="loveMusicHide"]
[/div]
[/div]
[/div]
[/div]

[div class="pageFourLeft"][/div]
[div class="pageFourQuote"]
I want my father back, you son of a bitch!
[br][/br]
max two line quote
[/div]
[div class="pageFourRight"][/div]
[div class="pageFourImages"]
[div class=" pageFourImage " style="background:url(https://78.media.tumblr.com/812863ac1ba04949356a3f2194cc834f/tumblr_o7sw5yTsFk1ug2laoo4_r2_250.gif)"][/div]
[div class=" pageFourImage " style="background:url(https://image.ibb.co/mxQHiF/62.jpg)"][/div]
[div class=" pageFourImage " style="background:url(https://78.media.tumblr.com/f5f714cbd75054e5b9934c80d3809646/tumblr_inline_p0li81kQvH1v0ahz0_540.png)"][/div]
[/div]

[/div]



[/div]

[div style="color:#555;padding-left:10px"]

[div class="loveIconTabs tabOne"][/div]
[div class="loveIconTabs tabTwo"][/div]
[div class="loveIconTabs tabThree"][/div]
[div class="loveIconTabs tabFour"][/div]

[/div]
[/div]
[/div]
[/div]

[/nobr][nobr]



[class name="loveContainerMajor" minWidth="820px"]
width:800px;
background:#fff;
padding:10px;
border:0.1px solid #f1f1f1;
margin:auto;
position:relative;
display:flex;
height:520px;
[/class]

[class name="loveContainerMajor" maxWidth="819px"]
width:calc(100% - 20px)
background:#fff;
padding:10px;
border:0.1px solid #f1f1f1;
margin:auto;
position:relative;
display:flex;
[/class]

[class name="loveRightContainer" minWidth="820px"]
width:calc(100% - 10px);
margin-left:10px;
[/class]




[class name="loveImageContainer" minWidth="820px"]
padding:10px;
border:0.1px solid #f1f1f1;
[/class]

[class name="loveMainImage" minWidth="820px"]
width:300px;
height:500px;
[/class]

[class name="loveImageContainer" maxWidth="819px"]
display:none;
[/class]



[class name="loveTitleContainer"]
padding:25px;
color:#555;
align:right;
text-transform:uppercase;
border:0.1px solid #f1f1f1;
height:75px;
[/class]

[class name="loveStudentProfile"]
width:fit-content;
padding:10px 10px 5px 10px;
border-bottom:0.1px solid #f1f1f1;
font-size:10px;
[/class]

[class name="loveStudentName"]
font-size:25px;
letter-spacing:1px;
font-family:'Raleway', sans-serif;
[/class]



[class name="loveTabbedcontent" minWidth="820px"]
width:100%;
padding-top:10px;
display:flex;
height:365px;
[/class]

[class name="lovePageContainer" minWidth="820px"]
width:360px;
padding:10px;
border:0.1px solid #f1f1f1;
height:calc(100% - 0.1px);
overflow:hidden;
[/class]
[class name="lovePage" minWidth="820px"]
width:360px;
height:100%;
overflow:auto;
padding-right:100px;
margin-bottom:10px;
[/class]

[class name="loveIconTabs" minWidth="820px"]
padding:27.5px;
font-size:20px;
text-align:center;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
transition:color 0.5s;
[/class]

[class name="loveIconTabs" maxWidth="819px"]
display:none;
[/class]


[class name="loveIconTabs" state="hover" minWidth="820px"]
color: var(--accent);
animation-name: {post_id}loveIconPush;
animation-duration: 0.5s;
cursor:pointer;
[/class]



[class name="loveInfoTitle"]
text-transform:uppercase;
letter-spacing:1px;
font-weight:bold;
font-family:'Open Sans', sans-serif;
font-size:10px;
color:#555;
[/class]

[class name="loveInfoText"]
text-transform: lowercase;
font-family:'Open Sans', sans-serif;
font-size:10.5px;
color:#555;
[/class]

[class name="loveInfoBox" minWidth:"820px"]
padding:10px 20px;
display:flex;
justify-content:space-between;
border:1px solid #f1f1f1;
margin-bottom:5px
[/class]

[class name="loveInfoBox" maxWidth:"819px"]
padding:10px 20px;
display:flex;
justify-content:space-between;
border:1px solid #f1f1f1;
margin-top:5px
[/class]

[class name="loveInfoBox"]
padding:10px 20px;
display:flex;
justify-content:space-between;
border:1px solid #f1f1f1;
margin-bottom:5px
[/class]



[class name="loveHeader"]
width:fit-content;
padding:0px 10px 0px 10px;
border-bottom:0.1px solid #f1f1f1;
text-transform:lowercase;
font-size:20px;
font-weight:bold;
margin:auto;
color: var(--accent)
[/class]

[class name="loveSubheader"]
padding:5px;
text-align:center;
text-transform: uppercase;
font-size:10px;
letter-spacing:1px
color:#555
[/class]



[class name="loveMusicContainer" minWidth="820px"]
border:1px solid #f1f1f1;
display:inline-block;
padding:0px 15px 20px 10px;
[/class]

[class name="loveMusicContainer" maxWidth="819px"]
display:none;
[/class]

[class name="loveMusicSquare" minWidth="820px"]
padding:20px;
pointer-events:none;
height:80px;
width:80px;
[/class]

[class name="loveMusicSymbol" minWidth="820px"]
box-sizing: border-box; height: 50px;
border-color: transparent transparent transparent var(--accent);
transition: 100ms all ease; will-change: border-width;
cursor: pointer; border-style: solid;
border-width: 25px 0 25px 40px;
pointer-events:none;
position:absolute;
z-index:2;
margin:25px 0px 0px 25px;
background:#fff;
[/class]

[class name="loveMusicBox" minWidth="820px"]
width:40px;
height:40px;
overflow:hidden;
position:absolute;
margin-top:-68px;
margin-left:45px;
z-index:1;
cursor: pointer;
border-radius:100%
[/class]

[class name="loveMusicHide" minWidth="820px"]
width:100px;
height:100px;
position:absolute;
margin-left:-10px;
margin-top:-10px
[/class]

[class name="pause" minWidth="820px"]
border-style:double!important;
border-width: 0px 0px 0px 40px!important;
[/class]



[class name="pageOneFlex"]
display:flex;
justify-content:space-between;
[/class]

[class name="pageOneList"]
border:0.1px solid #f1f1f1;
padding:5px;
text-align:justify;
font-size:11px;
color:#555;
width:calc(50% - 15px);
[/class]



[class name="pageTwoText" minWidth="820px"]
font-family:'Open Sans', sans-serif;
font-size:11px;color:#555;
text-align:justify;
padding:10px;
width:calc(100% - 5px)
[/class]



[class name="pageThreeSelect"]
margin-top:-1px;
width:90px;
height:1px;
background:#555;
transition:0.4s ease;
[/class]

[class name="pageThreePage" minWidth="820px"]
width:calc(100% + 17px);height:145px;overflow:auto;margin-top:5px;padding-right:30px;display:none;
[/class]

[class name="pageThreePage" maxWidth="819px"]
width:calc(100% - 10px);margin-top:5px;padding:5px
[/class]

[class name="pageThreeText"]
padding:10px;font-family:'Open Sans', sans-serif;font-size:11px;color:#555;text-align:justify;
[/class]

[class name="pageThreeTitle"]
padding:20px;float:left; font-size:15px;font-weight:bold;
[/class]

[class name="pageThreeContainer"]
display:flex;
margin-top:10px
[/class]

[class name="pageThreeTab"]
flex-grow:1;
text-transform:uppercase;
font-size:10px;
color:#555;
text-align:center;
cursor:pointer;
padding-bottom:5px;
[/class]


[class name="pageThreeTab" maxWidth="819px"]
display:none
[/class]

[class name="selectedTwo"]
margin-left:89px
[/class]

[class name="selectedThree"]
margin-left:178px
[/class]

[class name="selectedFour"]
margin-left:267px
[/class]

[class name="tabSelect"]
border-bottom:1px solid #f1f1f1;
[/class]


[class name="pageFourFlex" minWidth="820px"]
display:flex;
position:relative;
[/class]

[class name="pageFourInfo" minWidth="820px"]
padding:5px;
flex-grow:1;
padding-top:8px;
[/class]

[class name="pageFourLeft" minWidth="820px"]
width:20px;
height:20px;
border-top:0.1px solid #e1e1e1;
border-left:1px solid #e1e1e1;
margin-left: 25px;
margin-top:20px ;
[/class]

[class name="pageFourRight" minWidth="820px"]
width:20px;
height:20px;
border-bottom:0.1px solid #e1e1e1;
border-right:1px solid #e1e1e1;
margin-left:calc(100% - 50px);
[/class]

[class name="pageFourQuote"]
text-align:center;
font-size:10px;
color:#555;
text-transform:uppercase;
margin:auto;
font-family:'open sans', sans serif;
margin:auto;
width:250px
[/class]

[class name="pageFourImages" minWidth="820px"]
margin:auto;
display:flex;
width:fit-content;
margin-top:20px
[/class]

[class name="pageFourImage" minWidth="820px"]
width:100px;
height:100px;
background-size:100px!important;
margin:5px;
background-repeat:no-repeat; [/class]



[animation=loveIconPush]
[keyframe=50]
-webkit-transform: scale(0.8);
transform: scale(0.8);
[/keyframe]
[keyframe=100]
-webkit-transform: scale(1);
transform: scale(1);
[/keyframe]
[/animation]

[script class="tabTwo" on="click"]
hide lovePage
show pageTwo
[/script]

[script class="tabThree" on="click"]
hide lovePage
show pageThree
[/script]

[script class="tabFour" on="click"]
hide lovePage
show pageFour
[/script]

[script class="tabOne" on="click"]
hide lovePage
show pageOne
[/script]

[script class="loveMusicHide"]
set onPlay 0
[/script]

[script class="loveMusicBox" on="mouseenter"]
inc onPlay
if (eq ${onPlay} 1) (addClass pause loveMusicSymbol)
if (eq ${onPlay} 2) (set onPlay 0)
if (eq ${onPlay} 0) (removeClass pause loveMusicSymbol)
[/script]

[script class="loveMusicBox" on="mouseleave"]
inc onPlay
if (eq ${onPlay} 1) (addClass pause loveMusicSymbol)
if (eq ${onPlay} 2) (set onPlay 0)
if (eq ${onPlay} 0) (removeClass pause loveMusicSymbol)
[/script]

[script class="friends"]
addClass tabSelect foes
addClass tabSelect lovers
addClass tabSelect others
show friendsPage
[/script]

[script class="friends" on="click"]
removeClass tabSelect friends
addClass tabSelect foes
addClass tabSelect lovers
addClass tabSelect others

removeClass selectedTwo pageThreeSelect
removeClass selectedThree pageThreeSelect
removeClass selectedFour pageThreeSelect

hide pageThreePage
show friendsPage
[/script]

[script class="foes" on="click"]
addClass tabSelect friends
removeClass tabSelect foes
addClass tabSelect lovers
addClass tabSelect others

addClass selectedTwo pageThreeSelect
removeClass selectedThree pageThreeSelect
removeClass selectedFour pageThreeSelect

hide pageThreePage
show foesPage
[/script]

[script class="lovers" on="click"]
addClass tabSelect friends
addClass tabSelect foes
removeClass tabSelect lovers
addClass tabSelect others

removeClass selectedTwo pageThreeSelect
addClass selectedThree pageThreeSelect
removeClass selectedFour pageThreeSelect

hide pageThreePage
show loversPage
[/script]

[script class="others" on="click"]
addClass tabSelect friends
addClass tabSelect foes
addClass tabSelect lovers
removeClass tabSelect others

removeClass selectedTwo pageThreeSelect
removeClass selectedThree pageThreeSelect
addClass selectedFour pageThreeSelect

hide pageThreePage
show othersPage
[/script]

[/nobr]
[nobr]
[div style="max-width:800px;margin:auto;width:100%;font-size:8px;text-transform:uppercase;opacity:0.6;text-align:right"]cheers, koschei[/div][/nobr]
 
Last edited:

Asuhra

weeb
I love how interactive this template is! It's so prettyy โ™ฅ โ™ฅ Would it be alright if I used it? I know you said these are your freebies, but I like to ask anyways..
 

koschei.

(ใฃโ€™-โ€˜)โ•ฎ =อŸอŸอžอž ๐Ÿฆ† ๏พŒ๏พž๏ฝซ๏พ
[div style="max-Width:500px;margin:auto;font-size:12px;"] Asuhra Asuhra ahh thank you so much for your praise! yes, feel free to use any of my templates wherever you like, I don't mind![/div]
 

Users Who Are Viewing This Thread (Users: 0, Guests: 1)

Top