tiny grass is dreaming
tender fragrant grass ♡･ﾟ✧*ﾟ
[div class=container]
[/div]
[div class=window1Open]
[/div]
[div class=window2Open]
[/div]
[div class=window3Open]
[/div]
[div class=window4Open]
[/div]
[div class=wcontainer0][div class=window0Close][div class=windowX]X[/div][/div][div class=window0][div class=scroll0] The Sad Boy's Club, which is what they call themselves, is a gang. It was formed by a group of high school delinquents who go around terrorizing the city. Most commonly, it's self expression taking the form of vandalism and 2am highway motorcycle races. These kids created this community for themselves, a community where they could feel free to express themselves in any way they desire without feeling intense judgement, shame, or rejection. These boys lean on and take care of one another, no matter how in their feelings any of them may be. If another member is in need of support, the others must always have their backs.
To become a member of the Sad Boy's Club one must make a vow, a vow dubbed "Forever or Never." A true sadboi is always there for his brothers no matter what. He keeps his promises, provides emotional support, and always has his brothers' backs.
There are other things that come into play for the acceptance of a sadboi. For one, the potential sadboi has to have the proper aesthetic. He has to have style. This isn't restricted to fashion, but there has to be something about the boy, maybe it's the way he walks and talks, or it's the color of his hair, but there has to be something about this person that sets him apart from the rest of society.
Another requirement is the state of the boy's heart. An extremely prevalent trend among the members of the Sad Boy's Club is heartbreak. In fact, the original members formed this gang to vent in any way they desire alongside others who needed similar coping methods or escapes. He doesn't have to be entirely suicidal or depressed, but the potential sadboi has to be hurt or broken in some way. How else would they trust someone into their tight-knit gang, especially considering how this assumes the role of a family more than anything else. They need to feel comfortable around anyone who joins their ranks, so it only makes sense that it would be someone similar to them, who goes through internal struggles like they do.
If any member were to ever break "Forever or Never", they must go through prosecution by the rest of the gang. Once the prosecution is complete, they are to lose contact with all other sadbois and never speak to any of them again. They will be shunned by the rest of the group (which is a doublesided part of the vow - members must also shun anyone who breaks it). It is unknown what happens if any of these parts of the vow are broken. No one has ever done this.
[/div][/div][/div]
[div class=wcontainer1][div class=window1Close][div class=windowX]X[/div][/div][div class=window1][div class=scroll1]
common sadboi traits:
- "kms" "i wanna die" "kill yourself"
- dark and offesnive humor
- depression memes / self depreciating humor
- popular 2k+ followers instagram accounts with aesthetic themes or edits
- 80s / 90s anime screencaps
- "you ruined me"
- sad and coping drunks
- romanticizing toxic behaviors
- just fuckin emo
common sadboi activities:
- motorcycle races in midday, weaving through cars on busy mainroads and highways
- getting into fights
- crying
- 2-4 am motorcycle races on empty highways
- graffiti tagging
- underage drinking
- setting things on fire
- drunk texting exes
- egging the homes of enemies
- skipping class to smoke cigarettes together
- unconditionally loving and supporting bros no matter what
[/div][/div][/div]
[div class=wcontainer2][div class=window2Close][div class=windowX]X[/div][/div][div class=window2][div class=scroll2]
anyway uh.... wow i have no idea how to introduce an rp ooc haha,,,
this is going to take place in south korea... i think... i'm still thinking it over. i'm debating between hongdae, sk, and flushing, ny. (flushing is a region of nyc in the us with a very dense and dominant asian population) i feel like having it take place in flushing would add a bit of spice to an asian based rp. maybe it'd be interesting? it would serve for a lot of plot inspo, and also leave the rp open for the integration of a lot of different asian races. (for all those asian-but-not-korean fcs y'all got in your lists, this is your chance!! hahaha) please lemme know what all think.
this is going to be role based!
rpn rules apply ofc
please!! let me know if you're busy or going to be inactive. no one likes when an rp dies becauseplot progression is waiting on one person.
the ooc is going to be here on discord.
[/div][/div][/div]
[div class=wcontainer3][div class=window3Close][div class=windowX]X[/div][/div][div class=window3][div class=scroll3]
brokenhearted | old member - this will be my role. always insists the gang has no leader, but he's the one everyone answeres to. overall an extremely attention seeking and explosive person. watch out, he's the most well known and feared member of the gang.
sadgurl | old member - this is a no girls allowed type of gang, but this girl was too rad and too sad and broke this rule. she's the only exception. basically the second in command.
backbone | not specified - (
youngkyun
) the shoulder that everyone cries on. has a tendency to forget about his own feelings.
michealangelo | old member - still mysterious even to his fellow old gangmates. an artist in every way.
loverboy | not specified - in a perpetual cycle of falling in love, getting his heart broken, and falling in love all over again.
problem child | new member - the youngest member, a freshman. he comes from an abusive household.
hypebeast | not specified - the gang's stylist, always making sure everyone is fresh and fitted. always flexing and way too big on brand hype. absolute fashionista.
suicidal | not specified - is this happy go lucky kid actually suicidal? no one really knows but he sure acts like it. the only predictable thing about him is that when given any chance of taking a risk, he'll take that chance without hesitation.
once i create the cs thread i'll write the roles in more detail. these are just one line basic summaries for now.
you could also suggest new roles! i'm always open to them even if the rp has started already, so if you have any ideas please don't be shy!!
not going to put a limit on the ratio of old to new members but if it happens to lean too far towards one or the other i may request yall to even it out js
[/div][/div][/div]
[div class=wcontainer4][div class=window4Close][div class=windowX]X[/div][/div][div class=window4][div class=scroll4] [div class=fancy]uxie♡[/div]
uxie, back at it again with another messy cs code
(why do u only do cs codes)
i can't really say i tried something that new this time but i've been slowly figuring it out. this one only took me like, what, 5 hours? haha. ): the layout and general aesthetic (is there even one) is credited to my good friend /u/roommate. her ideas r fresh and great and good for me bc im uncreative af
ive been harassing her 2 give me layout ideas as of late bc she's p new to coding while i am (???) not. so it's fun.
she's getting p good at it actually monkaS
anyways, as always, this code is free to use as long as you keep this cool little thing here. notice i always do this 4 the ones i spend way too much time on lol. it might be a bit laggy when ur editing it bc there's so much text oops. have fun with it, try not to edit too much it might break? i hope not. i've been trying to get mine to break less • ͜ > •
for the background i lit just googled vaporwave background LOL
palette used (w/ a few edits from me ofc)
ya
enjoy!
disclaimer: this code isn't mobile friendly nor tablet-friendly (bIG SAD) bc the dimensions are way too big!! the stuff itself might not fuck up, but a lot of things'll be cut off, so it's recommended it only be viewed on pc. then again, you couldn't see this part if you were on mobile or tablet, i'm p sure ?
[/div][/div][/div]
[/div]
[class=container] height:450px; width:500px; background:url('https://data.whicdn.com/images/311394204/large.jpg'); background-size:100%; background-position: 40% 0%; margin:auto; position:relative; [/class] [class=bigimage] height:350px; width:350px; background:url('https://data.whicdn.com/images/313488831/large.jpg'); background-size:100%; border:8px solid #c773d1; [/class] [class=bigimghover] height:350px; width:350px; background-color:#8795E8; position:absolute; opacity:0; transition:0.8s; [/class] [class name=bigimghover state=hover] opacity:0.8; transition:0.8s; [/class] [class=wcontainer0] height:140px; width:290px; position:absolute; top:270px; left:100px; [/class] [class=window0Close] height:17px; width:17px; background-color:#e53d3d; position:absolute; top:2.3px; left:274.5px; z-index:6; border-radius:1.8px; [/class] [class=window0] border:5px solid #d5d6f2; border-top:22px solid #d5d6f2; height:120px; width:280px; border-radius:1.5px; overflow:hidden; padding:3px; background:white; box-shadow:6px 7px 5px rgba(0, 0, 0, 0.34); [/class] [class=scroll0] padding-right:7.6px; margin-top:2.5px; height:127px; width:277px; overflow-y:scroll; [/class] [class name=scroll0] font-size:10.5px; color:black; text-align:justify; [/class] [class=wcontainer1] height:160px; width:290px; position:absolute; left:420px; top:15px; transform: scale(0.1,0.1); opacity:0; [/class] [class=window1] border:5px solid #d5d6f2; border-top:22px solid #d5d6f2; height:130px; width:280px; border-radius:1.5px; overflow:hidden; padding:3px; background:white; box-shadow:6px 7px 5px rgba(0, 0, 0, 0.34) [/class] [class=scroll1] padding-right:7.6px; margin-top:2.5px; height:127px; width:277px; overflow-y:scroll; [/class] [class name=scroll1] font-size:10.5px; color:black; text-align:justify; [/class] [class=wcontainer2] height:230px; width:215px; position:absolute; left:-218px; top:128px; transform: scale(0.1,0.1); opacity:0; [/class] [class=window2] border:5px solid #d5d6f2; border-top:22px solid #d5d6f2; height:200px; width:215px; border-radius:1.5px; overflow:hidden; position:relative; padding:3px; background:white; [/class] [class=scroll2] padding-right:7px; margin-top:2.5px; height:197px; width:212px; overflow-y:scroll; [/class] [class name=scroll2] font-size:10.5px; color:black; text-align:justify; [/class] [class=wcontainer3] height:200px; width:290px; position:absolute; left:480px; top:198px; transform: scale(0.1,0.1); opacity:0; [/class] [class=window3] border:5px solid #d5d6f2; border-top:22px solid #d5d6f2; height:170px; width:280px; border-radius:1.5px; overflow:hidden; padding:3px; background:white; box-shadow:6px 7px 5px rgba(0, 0, 0, 0.34) [/class] [class=scroll3] padding-right:7.6px; margin-top:2.5px; height:167px; width:277px; overflow-y:scroll; [/class] [class name=scroll3] font-size:10.5px; color:black; text-align:justify; [/class] [class=wcontainer4] height:170px; width:280px; position:absolute; left:180px; top:120px; transform: scale(0.1,0.1); opacity:0; z-index:6; [/class] [class=window4] border:5px solid #cedae5; border-top:22px solid #cedae5; height:160px; width:160px; border-radius:1.5px; overflow:hidden; padding:3px; background:white; box-shadow:6px 7px 5px rgba(0, 0, 0, 0.34) [/class] [class=scroll4] padding-right:8px; margin-top:2.5px; height:157px; width:157px; overflow-y:scroll; [/class] [class name=scroll4] font-size:10.5px; color:black; text-align:justify; [/class] [class name=fancy] font-size:35px; color:#ff9ee3; text-shadow:1.5px 2px #cd6cd8; position:absolute; left:-15px; top:165px; font-style
blique;
font-weight:bold;
letter-spacing:1px;
[/class]
[class=boxshadow]
box-shadow:6px 7px 5px rgba(0, 0, 0, 0.34)
[/class]
[class=window1Close]
height:17px;
width:17px;
background-color:#e53d3d;
position:absolute;
top:2.3px;
left:274.5px;
z-index:6;
border-radius:1.8px;
[/class]
[class=window2Close]
height:17px;
width:17px;
background-color:#e53d3d;
position:absolute;
top:2.8px;
left:209.5px;
z-index:6;
border-radius:1.8px;
[/class]
[class=window3Close]
height:17px;
width:17px;
background-color:#e53d3d;
position:absolute;
top:2.3px;
left:274.5px;
z-index:6;
border-radius:1.8px;
[/class]
[class=window4Close]
height:17px;
width:17px;
background-color:#e53d3d;
position:absolute;
top:2.3px;
left:155px;
z-index:6;
border-radius:1.8px;
[/class]
[class=windowX]
font-size:15px;
color:white;
font-weight:bold;
position:relative;
left:3.3px;
top:-2.5px;
cursor:pointer;
[/class]
[class=window1Open]
height:60px;
width:60px;
cursor:pointer;
position:relative;
margin-left:25px;
top:-60px;
[/class]
[class=window2Open]
height:60px;
width:60px;
cursor:pointer;
position:relative;
margin-left:25px;
top:-60px;
[/class]
[class=window3Open]
height:60px;
width:60px;
cursor:pointer;
position:relative;
margin-left:25px;
top:-60px;
[/class]
[class=window4Open]
height:60px;
width:60px;
cursor:pointer;
position:relative;
margin-left:25px;
top:-60px;
[/class]
[script class=window1Open on=click]
addClass windowOpen wcontainer1
addClass boxshadow window1
removeClass windowClose wcontainer1
[/script]
[script class=window2Open on=click]
addClass windowOpen wcontainer2
addClass boxshadow window2
removeClass windowClose wcontainer2
[/script]
[script class=window3Open on=click]
addClass windowOpen wcontainer3
addClass boxshadow window3
removeClass windowClose wcontainer3
[/script]
[script class=window4Open on=click]
addClass windowOpen wcontainer4
addClass boxshadow window4
removeClass windowClose wcontainer4
[/script]
[script class=window1Close on=click]
addClass windowClose wcontainer1
removeClass windowOpen wcontainer1
removeClass boxshadow window1
[/script]
[script class=window2Close on=click]
addClass windowClose wcontainer2
removeClass windowOpen wcontainer2
removeClass boxshadow window2
[/script]
[script class=window3Close on=click]
addClass windowClose wcontainer3
removeClass windowOpen wcontainer3
removeClass boxshadow window3
[/script]
[script class=window4Close on=click]
addClass windowClose wcontainer4
removeClass windowOpen wcontainer4
removeClass boxshadow window4
[/script]
[class=windowOpen]
animation-name: {post_id}windowOpen;
animation-duration:0.8s;
animation-fill-mode:forwards;
[/class]
[class=windowClose]
animation-name: {post_id}windowClose;
animation-duration:0.5s;
animation-fill-mode:forwards;
[/class]
[animation=windowOpen]
[keyframe=0]
opacity:0;
transform: scale(0.05,0.05);
[/keyframe]
[keyframe=1]
opacity:1;
[/keyframe]
[keyframe=100]
opacity:1;
transform: scale(1,1);
[/keyframe]
[/animation]
[animation=windowClose]
[keyframe=0]
opacity:1;
transform: scale(1,1);
[/keyframe]
[keyframe=99]
opacity:0;
[/keyframe]
[keyframe=100]
opacity:0;
transform: scale(0.05,0.05);
[/keyframe]
[/animation]
[div class=bigimage][div class=bigimghover]
[/div]술픈 소년 쿠러브
[/div]
[div class=window1Open]
MISC
[/div]
[div class=window2Open]
INFO
[/div]
[div class=window3Open]
ROLES
[/div]
[div class=window4Open]
README
[/div]
[div class=wcontainer0][div class=window0Close][div class=windowX]X[/div][/div][div class=window0][div class=scroll0] The Sad Boy's Club, which is what they call themselves, is a gang. It was formed by a group of high school delinquents who go around terrorizing the city. Most commonly, it's self expression taking the form of vandalism and 2am highway motorcycle races. These kids created this community for themselves, a community where they could feel free to express themselves in any way they desire without feeling intense judgement, shame, or rejection. These boys lean on and take care of one another, no matter how in their feelings any of them may be. If another member is in need of support, the others must always have their backs.
To become a member of the Sad Boy's Club one must make a vow, a vow dubbed "Forever or Never." A true sadboi is always there for his brothers no matter what. He keeps his promises, provides emotional support, and always has his brothers' backs.
There are other things that come into play for the acceptance of a sadboi. For one, the potential sadboi has to have the proper aesthetic. He has to have style. This isn't restricted to fashion, but there has to be something about the boy, maybe it's the way he walks and talks, or it's the color of his hair, but there has to be something about this person that sets him apart from the rest of society.
Another requirement is the state of the boy's heart. An extremely prevalent trend among the members of the Sad Boy's Club is heartbreak. In fact, the original members formed this gang to vent in any way they desire alongside others who needed similar coping methods or escapes. He doesn't have to be entirely suicidal or depressed, but the potential sadboi has to be hurt or broken in some way. How else would they trust someone into their tight-knit gang, especially considering how this assumes the role of a family more than anything else. They need to feel comfortable around anyone who joins their ranks, so it only makes sense that it would be someone similar to them, who goes through internal struggles like they do.
If any member were to ever break "Forever or Never", they must go through prosecution by the rest of the gang. Once the prosecution is complete, they are to lose contact with all other sadbois and never speak to any of them again. They will be shunned by the rest of the group (which is a doublesided part of the vow - members must also shun anyone who breaks it). It is unknown what happens if any of these parts of the vow are broken. No one has ever done this.
[/div][/div][/div]
[div class=wcontainer1][div class=window1Close][div class=windowX]X[/div][/div][div class=window1][div class=scroll1]
common sadboi traits:
- "kms" "i wanna die" "kill yourself"
- dark and offesnive humor
- depression memes / self depreciating humor
- popular 2k+ followers instagram accounts with aesthetic themes or edits
- 80s / 90s anime screencaps
- "you ruined me"
- sad and coping drunks
- romanticizing toxic behaviors
- just fuckin emo
common sadboi activities:
- motorcycle races in midday, weaving through cars on busy mainroads and highways
- getting into fights
- crying
- 2-4 am motorcycle races on empty highways
- graffiti tagging
- underage drinking
- setting things on fire
- drunk texting exes
- egging the homes of enemies
- skipping class to smoke cigarettes together
- unconditionally loving and supporting bros no matter what
[/div][/div][/div]
[div class=wcontainer2][div class=window2Close][div class=windowX]X[/div][/div][div class=window2][div class=scroll2]
anyway uh.... wow i have no idea how to introduce an rp ooc haha,,,
this is going to take place in south korea... i think... i'm still thinking it over. i'm debating between hongdae, sk, and flushing, ny. (flushing is a region of nyc in the us with a very dense and dominant asian population) i feel like having it take place in flushing would add a bit of spice to an asian based rp. maybe it'd be interesting? it would serve for a lot of plot inspo, and also leave the rp open for the integration of a lot of different asian races. (for all those asian-but-not-korean fcs y'all got in your lists, this is your chance!! hahaha) please lemme know what all think.
this is going to be role based!
rpn rules apply ofc
please!! let me know if you're busy or going to be inactive. no one likes when an rp dies becauseplot progression is waiting on one person.
the ooc is going to be here on discord.
[/div][/div][/div]
[div class=wcontainer3][div class=window3Close][div class=windowX]X[/div][/div][div class=window3][div class=scroll3]
brokenhearted | old member - this will be my role. always insists the gang has no leader, but he's the one everyone answeres to. overall an extremely attention seeking and explosive person. watch out, he's the most well known and feared member of the gang.
sadgurl | old member - this is a no girls allowed type of gang, but this girl was too rad and too sad and broke this rule. she's the only exception. basically the second in command.
backbone | not specified - (
youngkyun
) the shoulder that everyone cries on. has a tendency to forget about his own feelings.michealangelo | old member - still mysterious even to his fellow old gangmates. an artist in every way.
loverboy | not specified - in a perpetual cycle of falling in love, getting his heart broken, and falling in love all over again.
problem child | new member - the youngest member, a freshman. he comes from an abusive household.
hypebeast | not specified - the gang's stylist, always making sure everyone is fresh and fitted. always flexing and way too big on brand hype. absolute fashionista.
suicidal | not specified - is this happy go lucky kid actually suicidal? no one really knows but he sure acts like it. the only predictable thing about him is that when given any chance of taking a risk, he'll take that chance without hesitation.
once i create the cs thread i'll write the roles in more detail. these are just one line basic summaries for now.
you could also suggest new roles! i'm always open to them even if the rp has started already, so if you have any ideas please don't be shy!!
not going to put a limit on the ratio of old to new members but if it happens to lean too far towards one or the other i may request yall to even it out js
[/div][/div][/div]
[div class=wcontainer4][div class=window4Close][div class=windowX]X[/div][/div][div class=window4][div class=scroll4] [div class=fancy]uxie♡[/div]
uxie, back at it again with another messy cs code
(why do u only do cs codes)
i can't really say i tried something that new this time but i've been slowly figuring it out. this one only took me like, what, 5 hours? haha. ): the layout and general aesthetic (is there even one) is credited to my good friend /u/roommate. her ideas r fresh and great and good for me bc im uncreative af
ive been harassing her 2 give me layout ideas as of late bc she's p new to coding while i am (???) not. so it's fun.
she's getting p good at it actually monkaS
anyways, as always, this code is free to use as long as you keep this cool little thing here. notice i always do this 4 the ones i spend way too much time on lol. it might be a bit laggy when ur editing it bc there's so much text oops. have fun with it, try not to edit too much it might break? i hope not. i've been trying to get mine to break less • ͜ > •
for the background i lit just googled vaporwave background LOL
palette used (w/ a few edits from me ofc)
ya
enjoy!
disclaimer: this code isn't mobile friendly nor tablet-friendly (bIG SAD) bc the dimensions are way too big!! the stuff itself might not fuck up, but a lot of things'll be cut off, so it's recommended it only be viewed on pc. then again, you couldn't see this part if you were on mobile or tablet, i'm p sure ?
[/div][/div][/div]
[/div]
[class=container] height:450px; width:500px; background:url('https://data.whicdn.com/images/311394204/large.jpg'); background-size:100%; background-position: 40% 0%; margin:auto; position:relative; [/class] [class=bigimage] height:350px; width:350px; background:url('https://data.whicdn.com/images/313488831/large.jpg'); background-size:100%; border:8px solid #c773d1; [/class] [class=bigimghover] height:350px; width:350px; background-color:#8795E8; position:absolute; opacity:0; transition:0.8s; [/class] [class name=bigimghover state=hover] opacity:0.8; transition:0.8s; [/class] [class=wcontainer0] height:140px; width:290px; position:absolute; top:270px; left:100px; [/class] [class=window0Close] height:17px; width:17px; background-color:#e53d3d; position:absolute; top:2.3px; left:274.5px; z-index:6; border-radius:1.8px; [/class] [class=window0] border:5px solid #d5d6f2; border-top:22px solid #d5d6f2; height:120px; width:280px; border-radius:1.5px; overflow:hidden; padding:3px; background:white; box-shadow:6px 7px 5px rgba(0, 0, 0, 0.34); [/class] [class=scroll0] padding-right:7.6px; margin-top:2.5px; height:127px; width:277px; overflow-y:scroll; [/class] [class name=scroll0] font-size:10.5px; color:black; text-align:justify; [/class] [class=wcontainer1] height:160px; width:290px; position:absolute; left:420px; top:15px; transform: scale(0.1,0.1); opacity:0; [/class] [class=window1] border:5px solid #d5d6f2; border-top:22px solid #d5d6f2; height:130px; width:280px; border-radius:1.5px; overflow:hidden; padding:3px; background:white; box-shadow:6px 7px 5px rgba(0, 0, 0, 0.34) [/class] [class=scroll1] padding-right:7.6px; margin-top:2.5px; height:127px; width:277px; overflow-y:scroll; [/class] [class name=scroll1] font-size:10.5px; color:black; text-align:justify; [/class] [class=wcontainer2] height:230px; width:215px; position:absolute; left:-218px; top:128px; transform: scale(0.1,0.1); opacity:0; [/class] [class=window2] border:5px solid #d5d6f2; border-top:22px solid #d5d6f2; height:200px; width:215px; border-radius:1.5px; overflow:hidden; position:relative; padding:3px; background:white; [/class] [class=scroll2] padding-right:7px; margin-top:2.5px; height:197px; width:212px; overflow-y:scroll; [/class] [class name=scroll2] font-size:10.5px; color:black; text-align:justify; [/class] [class=wcontainer3] height:200px; width:290px; position:absolute; left:480px; top:198px; transform: scale(0.1,0.1); opacity:0; [/class] [class=window3] border:5px solid #d5d6f2; border-top:22px solid #d5d6f2; height:170px; width:280px; border-radius:1.5px; overflow:hidden; padding:3px; background:white; box-shadow:6px 7px 5px rgba(0, 0, 0, 0.34) [/class] [class=scroll3] padding-right:7.6px; margin-top:2.5px; height:167px; width:277px; overflow-y:scroll; [/class] [class name=scroll3] font-size:10.5px; color:black; text-align:justify; [/class] [class=wcontainer4] height:170px; width:280px; position:absolute; left:180px; top:120px; transform: scale(0.1,0.1); opacity:0; z-index:6; [/class] [class=window4] border:5px solid #cedae5; border-top:22px solid #cedae5; height:160px; width:160px; border-radius:1.5px; overflow:hidden; padding:3px; background:white; box-shadow:6px 7px 5px rgba(0, 0, 0, 0.34) [/class] [class=scroll4] padding-right:8px; margin-top:2.5px; height:157px; width:157px; overflow-y:scroll; [/class] [class name=scroll4] font-size:10.5px; color:black; text-align:justify; [/class] [class name=fancy] font-size:35px; color:#ff9ee3; text-shadow:1.5px 2px #cd6cd8; position:absolute; left:-15px; top:165px; font-style
blique;
font-weight:bold;
letter-spacing:1px;
[/class]
[class=boxshadow]
box-shadow:6px 7px 5px rgba(0, 0, 0, 0.34)
[/class]
[class=window1Close]
height:17px;
width:17px;
background-color:#e53d3d;
position:absolute;
top:2.3px;
left:274.5px;
z-index:6;
border-radius:1.8px;
[/class]
[class=window2Close]
height:17px;
width:17px;
background-color:#e53d3d;
position:absolute;
top:2.8px;
left:209.5px;
z-index:6;
border-radius:1.8px;
[/class]
[class=window3Close]
height:17px;
width:17px;
background-color:#e53d3d;
position:absolute;
top:2.3px;
left:274.5px;
z-index:6;
border-radius:1.8px;
[/class]
[class=window4Close]
height:17px;
width:17px;
background-color:#e53d3d;
position:absolute;
top:2.3px;
left:155px;
z-index:6;
border-radius:1.8px;
[/class]
[class=windowX]
font-size:15px;
color:white;
font-weight:bold;
position:relative;
left:3.3px;
top:-2.5px;
cursor:pointer;
[/class]
[class=window1Open]
height:60px;
width:60px;
cursor:pointer;
position:relative;
margin-left:25px;
top:-60px;
[/class]
[class=window2Open]
height:60px;
width:60px;
cursor:pointer;
position:relative;
margin-left:25px;
top:-60px;
[/class]
[class=window3Open]
height:60px;
width:60px;
cursor:pointer;
position:relative;
margin-left:25px;
top:-60px;
[/class]
[class=window4Open]
height:60px;
width:60px;
cursor:pointer;
position:relative;
margin-left:25px;
top:-60px;
[/class]
[script class=window1Open on=click]
addClass windowOpen wcontainer1
addClass boxshadow window1
removeClass windowClose wcontainer1
[/script]
[script class=window2Open on=click]
addClass windowOpen wcontainer2
addClass boxshadow window2
removeClass windowClose wcontainer2
[/script]
[script class=window3Open on=click]
addClass windowOpen wcontainer3
addClass boxshadow window3
removeClass windowClose wcontainer3
[/script]
[script class=window4Open on=click]
addClass windowOpen wcontainer4
addClass boxshadow window4
removeClass windowClose wcontainer4
[/script]
[script class=window1Close on=click]
addClass windowClose wcontainer1
removeClass windowOpen wcontainer1
removeClass boxshadow window1
[/script]
[script class=window2Close on=click]
addClass windowClose wcontainer2
removeClass windowOpen wcontainer2
removeClass boxshadow window2
[/script]
[script class=window3Close on=click]
addClass windowClose wcontainer3
removeClass windowOpen wcontainer3
removeClass boxshadow window3
[/script]
[script class=window4Close on=click]
addClass windowClose wcontainer4
removeClass windowOpen wcontainer4
removeClass boxshadow window4
[/script]
[class=windowOpen]
animation-name: {post_id}windowOpen;
animation-duration:0.8s;
animation-fill-mode:forwards;
[/class]
[class=windowClose]
animation-name: {post_id}windowClose;
animation-duration:0.5s;
animation-fill-mode:forwards;
[/class]
[animation=windowOpen]
[keyframe=0]
opacity:0;
transform: scale(0.05,0.05);
[/keyframe]
[keyframe=1]
opacity:1;
[/keyframe]
[keyframe=100]
opacity:1;
transform: scale(1,1);
[/keyframe]
[/animation]
[animation=windowClose]
[keyframe=0]
opacity:1;
transform: scale(1,1);
[/keyframe]
[keyframe=99]
opacity:0;
[/keyframe]
[keyframe=100]
opacity:0;
transform: scale(0.05,0.05);
[/keyframe]
[/animation]
