first of all this code is sexy af

secondly, confession time, if you were referencing the newclass animation demo i made your fonts fucking up is entirely my fault, i realized there's a helluva typo in it earlier today (after screaming at the code myself, funnily enough) and forgot to update it. i am SO SORRY and you have permission to snipe me for my crimes. delete the extra } at the end of your .silkeGal2:hover .widowBounce IMG class and they should come back.

as for the image malfunctioning, i think the cause is proboards img style defaulting to max-width:100%? if you manually (as in the html part, not in the newclasses) set the image width to the width of the container that should fix it. there might be a fancier css solution but ¯\_(ツ)_/¯ PRETTY SURE IT'LL WORK.

i think i'm happier right now than i have been in a decade and it feels amazing

man it's so nice to have coding inspiration again

if you knew me before i turned 18 i'd like to formally apologize

in other news i missed my cats so much aaaaah

can everyone stop opening or preparing to open amazing sites until im back from vacation thank u

[nospaces][break]

[div][attr="class","animationTesting"][/div]

[newclass=.animationTesting]border:2px solid transparent; border-left:2px solid #bbb; height:100px; width:100px; border-radius:100%;  animation: spinner 4s linear infinite; } @keyframes spinner { 0% { transform: rotate(0deg); } 100% { transform: rotate(-360deg); }[/newclass][break][break]



[newclass=.fontfaceTesting]font:bold 25px 'Signerica Fat'; } @font-face { font-family:Signerica Fat; src:url(//dl.dropbox.com/s/o5tlpkcxt7qwgj1/Signerica_Fat.ttf) format('truetype');[/newclass][break]

[div][attr="class","fontfaceTesting"]lorem ipsum.[/div]

[newclass=.fontfaceTesting]font:bold 25px 'Signerica Fat'; } @font-face { font-family:Signerica Fat; src:url(//dl.dropbox.com/s/o5tlpkcxt7qwgj1/Signerica_Fat.ttf) format('truetype');[/newclass]

[break]

1. generate svg as normal while coding [break]
2. paste finished svg xml into the converter at the bottom here; edit dimensions of svg as necessary (pulling them from inspect element in the original code is easiest)[break]
3. replace svg xml with inserted image (can probably also use it in pseudoelements to cut down on # of divs) [break]
4. edit as necessary to make PB happy. you'll likely need to set the img html tag to display:block && you may need to slightly manipulate margins/img size to display properly

how do i put my social anxiety and my desire to write in a fight-to-the-death cage match

it's in style tags! i put a demo of it on my tester if you (or anyone else lmAO) want to look at the syntax of it :0

EDIT: moved preview to my gallery until i or someone else get a proper tutorial up o/

i am 90% sure this cat can teleport

this prompt gave me so much INSPIRATION that i couldn't not make something for it >:/ i did cheat by using more than 3 colors, feel free to smite me for breaking the rules again. thanks so much to iceguin for posting about how to get @ font-face working in newclasses, i had no idea it was a possibility ;o; [break][break]

[nospaces][googlefont=Montserrat:700|Roboto+Condensed:700]



[newclass=.selkBorder] border:10px solid #efefef; outline:1px solid #ddd; width:452px; margin:1px; [/newclass]
[newclass=.selkBody] border:1px solid #ddd; background-color:#fefefe; [/newclass]
[newclass=.selkHeader] display:flex; justify-content:space-between; align-items:center; background-color:#fafafa; border-bottom:1px solid #ddd; padding:20px; [/newclass]
[newclass=.selkIcon] padding:10px; width:100px; height:100px; border:2px solid #ddd; display:flex; align-items:center; justify-content:center; border-radius:100%; [/newclass]
[newclass=.selkLyric] display:flex; flex-direction:column; cursor:default [/newclass]
[newclass=.selkLyric1] font:700 31px/100% Montserrat; color:#ddd; text-transform:uppercase; text-align:right; [/newclass]
[newclass=.selkLyric2] font:800 24px Signerica_Fat; color:#88C26D; line-height:24px; text-shadow: #FAFAFA 1px 1px, #FAFAFA -1px 1px, #FAFAFA 1px -1px, #FAFAFA -1px -1px; margin-top:-10px; } @font-face { font-family:Signerica_Fat; src:url(http://files.jcink.net/uploads/derse/Signerica_Fat.ttf) format('truetype'); [/newclass]
[newclass=.selkPost] font:11px roboto; color:#7a7a7a; padding:50px; text-align:justify; [/newclass]
[newclass=.selkPost b] color:#57ADBD; font:700 10px Montserrat; [/newclass]
[newclass=.selkFooter] display:flex; height:40px; [/newclass]
[newclass=.selkTag] width:50%; font:9px roboto; text-transform:uppercase; padding:10px; border-top:1px solid #DDDDDD; background-color:#FAFAFA; color:#7a7a7a; display:flex; align-items:center; justify-content:center; [/newclass]
[newclass=.selkTag a] font:9px roboto!important; [/newclass]
[newclass=.selkNotes] font:9px roboto; text-transform:uppercase; background-color:#C391CC; color:#FEFEFE; width:50%; padding:10px 10px; height:20px; overflow:hidden; display:flex; text-align:left; justify-content:center; align-items:center; [/newclass]
[newclass=.selkCredit] font:bold 7px roboto; width:50px; margin-left:400px; [/newclass]
[newclass=.selkCredit a] font:bold 7px roboto; [/newclass]

[break]

[nospaces][googlefont=Roboto:600,900][googlefont="Material+Icons"]

[newclass=.selkMusic] width:500px; display:flex; flex-direction:column; flex-wrap:wrap; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25);margin:10px; [/newclass]
[newclass=.selkAlbumCover] width:500px; height:500px; background-image:url(http://placehold.it/500x500.png); display:flex; flex-wrap:wrap; [/newclass]
[newclass=.selkTitle] font:900 36px Roboto; text-transform:uppercase; color:#fff; width:100%; height:200px; text-align:center; padding-top:25px; background: linear-gradient( to top, transparent, rgba(0,0,0,.5) ); [/newclass]
[newclass=.selkTitleCutout] color:#fff; text-fill-color: transparent; -webkit-text-fill-color: transparent; background:url(https://i.imgur.com/ZUOOKLT.png) 0px -25px; -webkit-background-clip: text; cursor:default; [/newclass]
[newclass=.selkPlayButtons] width:100%; align-self:flex-end; font-family:Material Icons; color:#fff; display:flex; flex-direction:row; align-items:center; justify-content:center; [/newclass]
[newclass=.selkBackForth] font-size:75px; text-shadow: 0px 0px 7px rgba(0,0,0,.33); cursor:pointer; width:75px; height:75px; [/newclass]
[newclass=.selkPlay] font-family: 'Material Icons';font-size:175px; text-shadow: 0px 0px 3px rgba(0,0,0,.33); margin:0px 25px; [/newclass]
[newclass=.selkPlay a] color:#fff; font:175px Material Icons; [/newclass]
[newclass=.selkCredit] position:absolute;width:490px;text-align:right;align-self:flex-end;color:#fff;font:bold 7px roboto;[/newclass]
[newclass=.selkCredit a] font:bold 7px roboto!important;color:#fff!important; [/newclass]
[newclass=.selkSongBG] background-color:#f6f6f6; [/newclass]
[newclass=.selkSong] background: linear-gradient( to right, #7DBABF, #56838A ); text-fill-color: transparent; -webkit-text-fill-color: transparent; -webkit-background-clip: text; background-color:#fafafa; height:50px; padding:5px; width:490px; display:flex; flex-direction:row; align-items:center; justify-content:space-between; [/newclass]
[newclass=.selkSongButton] width:50px; height:50px; font:36px Material Icons; display:flex; align-items:center; justify-content:center; margin-right:5px; color:#aaa; [/newclass]
[newclass=.selkSongButton a] font:36px Material Icons!important;color:#aaa; [/newclass]
[newclass=.selkSongTitle] color:#ccc; display:flex; align-items:center; text-align:left; font:600 15px/90% Roboto; letter-spacing:0px; text-transform:uppercase; margin-left:20px; cursor:default; [/newclass]
[newclass=.selkSongArtist] color:#ccc; margin-right:25px; background-color:rgba(255,255,255,0); -webkit-background-clip: text; [/newclass]