Post by Mogsie on Apr 13, 2021 1:32:08 GMT
[nospaces][googlefont=Montserrat:800|Teko:700|Catamaran:700|Work+Sans:400,400i,700]
[newclass=.punkifavsound .accentbg]background: #f56643;[/newclass]
[newclass=.punkifavsound h3, .punkifavsoundcredit a, .punkifavsound .scroll b, .punkifavsound .scroll i]color: #f56643;[/newclass]
[newclass=.punkifavsound .accentborder]border-color: #f56643;[/newclass]
[newclass=.punkifavsound]width: 400px; height: 400px; background: #ffffff; margin: auto; border-radius: 5px; overflow: hidden;[/newclass]
[newclass=.punkifavsound .img]position: absolute; width: 120px; height: 120px; background: #F8FBFB; background-repeat: no-repeat; background-position: center; padding: 39px; border: 1px solid rgba(0,0,0,0.03); margin-top: 50px; margin-left: 100px; border-radius: 50%;[/newclass]
[newclass=.punkifavsound .img > div:first-child]width: 150px; height: 150px; position: absolute; border-radius: 50%; border-width: 1px; border-style: solid; margin-left: -16px; margin-top: -16px; opacity: 0.6; clip-path: polygon(0 10px,100% 10px,100% 141px,0 141px); animation: punkifavsoundcircle 5s linear infinite; } @keyframes punkifavsoundcircle { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }[/newclass]
[newclass=.punkifavsound .img > div:last-child]width: 200px; height: 200px; position: absolute; border-width: 1px; border-style: solid; border-radius: 50%; margin-top: -41px; margin-left: -41px; clip-path: polygon(20px 0, 181px 0,181px 20px,20px 20px); animation: punkifavsoundcircle 3s linear infinite reverse;[/newclass]
[newclass=.punkifavsound .img .icon]width: inherit; height: inherit; border: 15px solid #ffffff; position: absolute; border-radius: 50%; background: url('https://i.imgur.com/Jl5ta64.jpg'); margin-left: -15px; margin-top: -15px;[/newclass]
[newclass=.punkifavsound .charname]position: absolute; font-family: Montserrat; font-size: 40px; line-height: 35px; width: 400px; margin-left: 0px; text-align: center; text-transform: uppercase; margin-top: 285px; color: #f56643; text-shadow: 1px 1px rgba(0,0,0,0.075), -1px 1px rgba(0,0,0,0.075), 1px -1px rgba(0,0,0,0.075),-1px -1px rgba(0,0,0,0.075); font-weight: 800; letter-spacing: -1px;[/newclass]
[newclass=.punkifavsound .bulk]width: 400px; height: 400px; padding-left: 450px; background: #F8FBFB; position: relative; left: 350px; clip-path: polygon(0 400px,400px 0,100% 0,100% 100%,0 100%); transition: all 1s ease; transition-delay: 0.5s;[/newclass]
[newclass=.punkifavsound:hover .bulk]background: #ffffff; left: -450px; transition-delay: 0s;[/newclass]
[newclass=.punkifavsound .bulk > div:first-child]width: 0; height: 0; position: absolute; border-left: 451px solid rgba(0,0,0,0.03); border-bottom: 451px solid transparent; margin-left: -450px; margin-top: -49px;[/newclass]
[newclass=.punkifavsound .fade]position: relative; height: 400px; transition: all 0.5s ease; opacity: 0;[/newclass]
[newclass=.punkifavsound:hover .fade]opacity: 1; transition-delay: 1s;[/newclass]
[newclass=.punkifavsound .t]height: 111px; background: #6e6e6e; position: absolute; width: 374px; padding-left: 26px; padding-top: 28px; font-family: Teko; font-size: 40px; line-height: 26px; color: #ffffff; text-transform: uppercase; letter-spacing: -1px; font-weight: bold; text-shadow: 0px 0px 2px rgba(0,0,0,0.2);[/newclass]
[newclass=.punkifavsound .t > div span]display: inline-block; font-size: 11px; line-height: 21px; margin-top: 10px; padding: 0 5px; border: 1px solid rgba(255,255,255,0.15); border-radius: 2px; letter-spacing: 0px; font-family: Catamaran;[/newclass]
[newclass=.punkifavsound .tborder]height: 142px; border-right-width: 120px; border-right-style: solid; background: #E4E6E6;[/newclass]
[newclass=.punkifavsound .scroll]height: 258px; overflow: auto;[/newclass]
[newclass=.punkifavsound .scroll > div]padding: 20px; padding-top: 0; font-family: Work Sans; font-size: 11px; line-height: 17px; text-align: justify; color: #6e6e6e;[/newclass]
[newclass=.punkifavsound .scroll i]opacity: 0.8;[/newclass]
[newclass=.punkifavsound h3]background: #F8FBFB; border: 1px solid rgba(0,0,0,0.03); border-left: none; border-right: none; font-family: Catamaran; font-size: 20px; line-height: 40px; text-indent: 10px; margin: 20px -20px; text-transform: uppercase; font-weight: 700; letter-spacing: -1px;[/newclass]
[newclass=.punkifavsoundcredit]width: 400px; margin: auto; color: #6e6e6e; text-align: right; font-family: Catamaran; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; line-height: 25px; font-weight: bold;[/newclass]
[newclass=.punkifavsoundcredit a]font-size: inherit; font: inherit; transition: all 0.3s ease;[/newclass]
[newclass=.punkifavsoundcredit a:hover]opacity: 0.6;[/newclass]
[newclass=.punkifavsound .accentbg]background: #f56643;[/newclass]
[newclass=.punkifavsound h3, .punkifavsoundcredit a, .punkifavsound .scroll b, .punkifavsound .scroll i]color: #f56643;[/newclass]
[newclass=.punkifavsound .accentborder]border-color: #f56643;[/newclass]
[newclass=.punkifavsound]width: 400px; height: 400px; background: #ffffff; margin: auto; border-radius: 5px; overflow: hidden;[/newclass]
[newclass=.punkifavsound .img]position: absolute; width: 120px; height: 120px; background: #F8FBFB; background-repeat: no-repeat; background-position: center; padding: 39px; border: 1px solid rgba(0,0,0,0.03); margin-top: 50px; margin-left: 100px; border-radius: 50%;[/newclass]
[newclass=.punkifavsound .img > div:first-child]width: 150px; height: 150px; position: absolute; border-radius: 50%; border-width: 1px; border-style: solid; margin-left: -16px; margin-top: -16px; opacity: 0.6; clip-path: polygon(0 10px,100% 10px,100% 141px,0 141px); animation: punkifavsoundcircle 5s linear infinite; } @keyframes punkifavsoundcircle { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }[/newclass]
[newclass=.punkifavsound .img > div:last-child]width: 200px; height: 200px; position: absolute; border-width: 1px; border-style: solid; border-radius: 50%; margin-top: -41px; margin-left: -41px; clip-path: polygon(20px 0, 181px 0,181px 20px,20px 20px); animation: punkifavsoundcircle 3s linear infinite reverse;[/newclass]
[newclass=.punkifavsound .img .icon]width: inherit; height: inherit; border: 15px solid #ffffff; position: absolute; border-radius: 50%; background: url('https://i.imgur.com/Jl5ta64.jpg'); margin-left: -15px; margin-top: -15px;[/newclass]
[newclass=.punkifavsound .charname]position: absolute; font-family: Montserrat; font-size: 40px; line-height: 35px; width: 400px; margin-left: 0px; text-align: center; text-transform: uppercase; margin-top: 285px; color: #f56643; text-shadow: 1px 1px rgba(0,0,0,0.075), -1px 1px rgba(0,0,0,0.075), 1px -1px rgba(0,0,0,0.075),-1px -1px rgba(0,0,0,0.075); font-weight: 800; letter-spacing: -1px;[/newclass]
[newclass=.punkifavsound .bulk]width: 400px; height: 400px; padding-left: 450px; background: #F8FBFB; position: relative; left: 350px; clip-path: polygon(0 400px,400px 0,100% 0,100% 100%,0 100%); transition: all 1s ease; transition-delay: 0.5s;[/newclass]
[newclass=.punkifavsound:hover .bulk]background: #ffffff; left: -450px; transition-delay: 0s;[/newclass]
[newclass=.punkifavsound .bulk > div:first-child]width: 0; height: 0; position: absolute; border-left: 451px solid rgba(0,0,0,0.03); border-bottom: 451px solid transparent; margin-left: -450px; margin-top: -49px;[/newclass]
[newclass=.punkifavsound .fade]position: relative; height: 400px; transition: all 0.5s ease; opacity: 0;[/newclass]
[newclass=.punkifavsound:hover .fade]opacity: 1; transition-delay: 1s;[/newclass]
[newclass=.punkifavsound .t]height: 111px; background: #6e6e6e; position: absolute; width: 374px; padding-left: 26px; padding-top: 28px; font-family: Teko; font-size: 40px; line-height: 26px; color: #ffffff; text-transform: uppercase; letter-spacing: -1px; font-weight: bold; text-shadow: 0px 0px 2px rgba(0,0,0,0.2);[/newclass]
[newclass=.punkifavsound .t > div span]display: inline-block; font-size: 11px; line-height: 21px; margin-top: 10px; padding: 0 5px; border: 1px solid rgba(255,255,255,0.15); border-radius: 2px; letter-spacing: 0px; font-family: Catamaran;[/newclass]
[newclass=.punkifavsound .tborder]height: 142px; border-right-width: 120px; border-right-style: solid; background: #E4E6E6;[/newclass]
[newclass=.punkifavsound .scroll]height: 258px; overflow: auto;[/newclass]
[newclass=.punkifavsound .scroll > div]padding: 20px; padding-top: 0; font-family: Work Sans; font-size: 11px; line-height: 17px; text-align: justify; color: #6e6e6e;[/newclass]
[newclass=.punkifavsound .scroll i]opacity: 0.8;[/newclass]
[newclass=.punkifavsound h3]background: #F8FBFB; border: 1px solid rgba(0,0,0,0.03); border-left: none; border-right: none; font-family: Catamaran; font-size: 20px; line-height: 40px; text-indent: 10px; margin: 20px -20px; text-transform: uppercase; font-weight: 700; letter-spacing: -1px;[/newclass]
[newclass=.punkifavsoundcredit]width: 400px; margin: auto; color: #6e6e6e; text-align: right; font-family: Catamaran; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; line-height: 25px; font-weight: bold;[/newclass]
[newclass=.punkifavsoundcredit a]font-size: inherit; font: inherit; transition: all 0.3s ease;[/newclass]
[newclass=.punkifavsoundcredit a:hover]opacity: 0.6;[/newclass]
[attr=class,punkifavsound]
[attr=class,img]
[attr=class,accentborder]
[attr=class,icon]
[attr=class,accentborder]
[attr=class,charname]
MOGSIE[break]
THE MOOGLE
MOGSIE[break]
THE MOOGLE
[attr=class,bulk]
[attr=class,fade]
[attr=class,t accentbg]
i think i found my favorite sound
[attr=class,accentbg]ALLIANCE [attr=class,accentbg]YOUNG ADULT [attr=class,accentbg]RED MAGE [attr=class,accentbg]FOREST OF HNIFS
i think i found my favorite sound
[attr=class,accentbg]ALLIANCE [attr=class,accentbg]YOUNG ADULT [attr=class,accentbg]RED MAGE [attr=class,accentbg]FOREST OF HNIFS
[attr=class,tborder accentborder]
[attr=class,scroll]
"I can't wait to meet all my new friends, kupo! I've never left the forest before. (And I never knew anyone that did.) I'm a little nervous but I just have to find someone to help save my home. This is an emergency situation, kupo! Don't tell anyone back home but I've always dreamed of going on an adventure!"
"There are some people that really don't want to be my friend. Don't ask me why, kupo! If they want to be mean to me... well, I guess that's alright. But I won't let them hurt my new friends or the forest. I-I'll fight them if I have to... kupo."
best friends, kupo!
"I can't wait to meet all my new friends, kupo! I've never left the forest before. (And I never knew anyone that did.) I'm a little nervous but I just have to find someone to help save my home. This is an emergency situation, kupo! Don't tell anyone back home but I've always dreamed of going on an adventure!"
not so much . . .
"There are some people that really don't want to be my friend. Don't ask me why, kupo! If they want to be mean to me... well, I guess that's alright. But I won't let them hurt my new friends or the forest. I-I'll fight them if I have to... kupo."
