Recent Posts

ᕕ( ᐛ )ᕗ
aliasthat bitch.
pronouns"that bitch" still works tbh (any OK!)
551written posts
selkieearned bits
offlinecurrently
selkie
Part of the Furniture
selkie Avatar
a verb in perfect view.
i spent an embarrassing amount of time thinking team fortress two was having some sort of renaissance before looking up what tft was
weeping omens advertisement

all my proboards templates require the style tags plugin!
ᕕ( ᐛ )ᕗ
aliasthat bitch.
pronouns"that bitch" still works tbh (any OK!)
551written posts
selkieearned bits
offlinecurrently
selkie
Part of the Furniture
selkie Avatar
a verb in perfect view.
tried my hand with these! hope they turned out all right, but no worries if not o/ i went ahead and pulled the art for these directly from the artist's deviantart here, so hopefully the quality's a bit better.

 
last edit on May 28, 2019 4:38:49 GMT by selkie
weeping omens advertisement

all my proboards templates require the style tags plugin!
ᕕ( ᐛ )ᕗ
aliasthat bitch.
pronouns"that bitch" still works tbh (any OK!)
551written posts
selkieearned bits
offlinecurrently
selkie
Part of the Furniture
selkie Avatar
a verb in perfect view.
me: hey can i please have any other coding pattern other than "feast or famine"
the goblin that lives in my brain: absolutely not
me: understandable have a nice day
weeping omens advertisement

all my proboards templates require the style tags plugin!
ᕕ( ᐛ )ᕗ
aliasthat bitch.
pronouns"that bitch" still works tbh (any OK!)
551written posts
selkieearned bits
offlinecurrently
selkie
Part of the Furniture
selkie Avatar
a verb in perfect view.
it's gonna snow 6+ inches tonight and if i have to go to class tomorrow i'm gonna *** ******* *************** *** **** ** * *** *****
weeping omens advertisement

all my proboards templates require the style tags plugin!
ᕕ( ᐛ )ᕗ
aliasthat bitch.
pronouns"that bitch" still works tbh (any OK!)
551written posts
selkieearned bits
offlinecurrently
selkie
Part of the Furniture
selkie Avatar
a verb in perfect view.
when u get called out in the drive thru for eating there too much 😭😭😭😭😭
weeping omens advertisement

all my proboards templates require the style tags plugin!
ᕕ( ᐛ )ᕗ
aliasthat bitch.
pronouns"that bitch" still works tbh (any OK!)
551written posts
selkieearned bits
offlinecurrently
selkie
Part of the Furniture
selkie Avatar
a verb in perfect view.
i frickin slipped on ice in the parking lot on monday and pulled both of my quads this is what i get for trying to get an education
last edit on Feb 7, 2019 5:06:25 GMT by selkie
weeping omens advertisement

all my proboards templates require the style tags plugin!
ᕕ( ᐛ )ᕗ
aliasthat bitch.
pronouns"that bitch" still works tbh (any OK!)
551written posts
selkieearned bits
offlinecurrently
selkie
Part of the Furniture
selkie Avatar
a verb in perfect view.
any line breaks within [newclass] and [/newclass] will break your code, so you need to put all of your styling on one line! so it'd be like this instead

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

[newclass=.rollover] display: block; width: 463px; height: 499px; background: url(https://i.imgur.com/DolOucZ.png?1) no-repeat; -webkit-transition: all .7s ease-in-out; -moz-transition: all .7s ease-in-out; -o-transition: all .7s ease-in-out; transition: all .7s ease-in-out; [/newclass]
[newclass=.rollover:hover] background: url(https://i.imgur.com/cehpM1U.png?1) [/newclass]
weeping omens advertisement

all my proboards templates require the style tags plugin!
ᕕ( ᐛ )ᕗ
aliasthat bitch.
pronouns"that bitch" still works tbh (any OK!)
551written posts
selkieearned bits
offlinecurrently
selkie
Part of the Furniture
selkie Avatar
a verb in perfect view.
omg this challenge fuked me up because until now i've always thought that this was my first ever template, but my webarchive excavation lead me to find this artifact that i have absolutely no memory of coding but is definitely one of mine i'd recognize 14 yr old me's georgia and courier new obsession anywhere. for funsies, i also found & recolored the original icon i used for this template. [break][break]

[nospaces][googlefont=Roboto:300i,400,700,900|Raleway:400,800]
[attr="class","selk-contain"]
[attr="class","selk-header"]
[attr="class","selk-img"]


[attr="class","selk-divider"]

[attr="class","selk-lyrics"]may your feet serve you well

[attr="class","selk-lyrics-small"]and the rest be sent to hell


[attr="class","selk-body"]
if i retreat, words, wars, and symphonies. make room! we're taking over here. you're the galantine, cold and alone, it suits you well. won't find me perching here again. may your feet serve you well, and the rest be sent to hell. where they always have belonged, cold hearts brew colder songs. fate will play us out, with a song of pure romance. stomp your feet and clap your hands. let's kill tonight! kill tonight! show them all you're not the ordinary type. [break][break]
let's kill tonight! kill tonight! show them all you're not the ordinary type. let's kill tonight! may your feet serve you well, and the rest be sent to hell. where they always have belonged, cold hearts brew colder songs. fate will play us out, with a song of pure romance. stomp your feet and clap your hands. let's kill tonight! kill tonight! show them all you're not the ordinary type. let's kill tonight! kill tonight! show them all you're not the ordinary type. let's kill tonight! kill tonight! show them all you're not the ordinary type. let's kill tonight! kill tonight! show them all you're not the ordinary type. let's kill tonight!

[attr="class","selk-details"]
[attr="class","selk-wordcount"] 000 words

[attr="class","selk-music"]let's kill tonight

[attr="class","selk-tags"] , you're up


[attr="class","selk-notes"]put'cha notes here. i really wanted to add an animation to this - entirely because 14 year old me would think that's literal magic - but i couldn't find a way to implement it that didn't look like shit. pepehands.



[newclass=.selk-contain] width: 500px; margin: auto; padding: 25px; --selk-accent-1: #c0434a; --selk-dark: #222; display: flex; flex-flow: column nowrap; background-color: #eaeaea; [/newclass]
[newclass=.selk-contain:hover .selk-img, .selk-contain:hover .selk-body b, .selk-contain:hover .selk-body i, .selk-contain:hover .selk-details div, .selk-contain:hover .selk-lyrics-small b] transition: 1s; --selk-accent-1: #22c0e7; [/newclass]
[newclass=.selk-header] width: 100%; display: flex; flex-flow: row nowrap; align-items: center; height: 175px; position: relative; [/newclass]
[newclass=.selk-divider] flex-shrink: 0; width: 204px; height: 6px; display: flex; flex-flow: column nowrap; justify-content: center; position: absolute; background: #222; display: flex; align-items: center; justify-content: center; [/newclass]
[newclass=.selk-img] width: 175px; height: 175px; background: var(--selk-accent-1); transition: 1s; display: flex; align-items: center; position: absolute; [/newclass]
[newclass=.selk-img img] display: block; border-radius: 100%; background: #eee; padding: 5px; border: 10px solid #222; position: relative; left: -65px; position: relative; z-index: 1; [/newclass]
[newclass=.selk-lyrics] width: calc(100% - 200px); font: 800 49px/100% raleway; text-transform: uppercase; text-align: left; margin-left: auto; color: #222; [/newclass]
[newclass=.selk-lyrics-small] width: calc(100% - 175px); height: 25px; font: 900 9px/25px roboto; text-align: center; text-transform: uppercase; background: #222; color: #8a8a8a; position: absolute; bottom: 0px; right: 0px; [/newclass]
[newclass=.selk-lyrics-small b] color: var(--selk-accent-1); transition: 1s; font: 900 9px/25px roboto; [/newclass]
[newclass=.selk-lyrics-small:after] content: "!"; font-style: italic; [/newclass]
[newclass=.selk-body] background: #f4f4f4; padding: 75px; font: 400 12px/15px helvetica; text-align: justify; color: #8a8a8a; margin-top: 25px; [/newclass]
[newclass=.selk-body b] font: 700 13px/15px roboto; color: var(--selk-accent-1); transition: 1s; [/newclass]
[newclass=.selk-body i] font: 300 12px/15px roboto; color: #aaa; font-style: italic; border-bottom: 1px solid var(--selk-accent-1); transition: 1s; [/newclass]
[newclass=.selk-details] display: flex; align-items: center; justify-content: space-between; [/newclass]
[newclass=.selk-details div] background: var(--selk-accent-1); transition: 1s; padding: 10px 15px; font: 700 10px/100% roboto; text-transform: uppercase; text-align: justify; color: #222; margin: 25px 25px 0px 0px; [/newclass]
[newclass=.selk-details div:hover] cursor: pointer; [/newclass]
[newclass=.selk-details div a] text-decoration: none !important; font: 700 10px/100% roboto !important; color: #222 !important; [/newclass]
[newclass=.selk-music] text-align-last: center; [/newclass]
[newclass=.selk-tags] flex-grow: 1; margin: 25px 0px 0px 0px!important; [/newclass]
[newclass=.selk-notes] margin: 25px 0px 0px; background: #f1f1f1; padding: 25px; color: #c6c6c6; font: 400 11px roboto; text-align: justify; [/newclass]
last edit on Feb 1, 2019 4:18:58 GMT by selkie
weeping omens advertisement

all my proboards templates require the style tags plugin!
ᕕ( ᐛ )ᕗ
aliasthat bitch.
pronouns"that bitch" still works tbh (any OK!)
551written posts
selkieearned bits
offlinecurrently
selkie
Part of the Furniture
selkie Avatar
a verb in perfect view.
i'm actually the worst person to ask about this subject bc i have been winging icon making this whole time, i've been exposed. brb gotta make a batch of icons to figure out what the hell my process is

1. adjustments i use, in order of importance: selective color, vibrance, brightness/contrast. gradient map or levels if i'm feeling adventurous. i usually stick with a significantly lower ( -25 & lower ) contrast, unless the original image is low-contrast to begin with. i really don't know curves/levels well enough to say anything about them atm & i usually pick one of the gradient maps at random and edit it as i go, b/c i am the Worst.

2. also, i really enjoy playing around w/ the luminosity layer setting on a layer filled w/ light gray ( in the #dddddd to #aaaaaa hex code range ) at various opacity levels. i think it does similar things as messing around with curves but it's easier to understand/quickly modify imo? i made a little thing demonstrating the differences between opacities here!

3. i have the WORST understanding of color theory so i really cannot be of much assistance in this area, other than saying that reds can v. easily overtake images, so be careful with them if they're not your focus. that's it. that's all i've learned about colors in like 4 years of making icons. oops. also, i irrationally avoid #000000 and #ffffff the same way i do in coding.

4. rule of thirds is your friend! i think most versions of photoshop have built-in grid lines that u can toggle ( the shortcut for me in cc 2017 is ctrl + ' ) that i use when initially positioning hovers. they work well for icons too but i'm too lazy to use 'em most of the time. as for how to line them up i uh. also just wing that tbh. i think i usually crop icons so that the middle of the forehead is at the top of the icon & the bottom is either the shoulders, the hips, or mid-thighs depending on how close-up i want the shot to be.

honestly tho the only quote unquote advice i can give to anyone wanting to improve with iconing is that if you make enough bad icons, they will eventually not be bad, and eventually after that they will be good. it's deffo not a very exciting tip and probably sounds fake / cheap / whatever but i will swear by it -- it may take you 1,000 or 10,000 or 100,000 icons to get into the 'good' category, but anyone can get there, i promise o:<





also seconding wanting to know more about mizo's gfx process b/c everything u make is fcking magical
weeping omens advertisement

all my proboards templates require the style tags plugin!
ᕕ( ᐛ )ᕗ
aliasthat bitch.
pronouns"that bitch" still works tbh (any OK!)
551written posts
selkieearned bits
offlinecurrently
selkie
Part of the Furniture
selkie Avatar
a verb in perfect view.
[googlefont=Roboto:400,600,700|Raleway:200|Roboto+Condensed:400,700]

[attr="class","selk-zinnia-up"]
[attr="class","abc-selk-contain"]

zinnia


[attr="class","abc-selk-rules"]




[attr="class","abc-selk-body"]
[attr="class","abc-selk-text"]

this template is not for public use![break][break]

also it's broken rn, i'll find another mp3 host later, i'm lazy
[break]

okay, the title of this song is technically "zinnia's theme", but i'm not going to call it that because it's prettier the other way, sue me. i struggled a lot to come up w/ an idea for this code, but decided that a playlist template would be a fitting end for the project! [break][break]

this playlist template is fully functional which is why it's a bit bare-bones aesthetically, wheezes -- toggle between songs using the tabs on the left, and play/pause songs using the play button in the center! (just make sure to pause songs when you're done listening to them, because you might create some unintended mashups otherwise.) [break][break]

i'd also like to take a minute and say thank you to everyone for supporting me throughout this project. the amount of support i got from everyone here was wonderful and it means more to me than i can ever express. happy holidays, pixel <3


[attr="class","abc-selk-hash"]
[HASH]abcsofcode





[newclass=.selk-zinnia-up .abc-selk-contain h1, .selk-zinnia-up .abc-selk-hash a, .selk-zinnia-up .abc-selk-rules h2]color:#DF6885!important;[/newclass]
[newclass=.selk-zinnia-up .abc-selk-link]background-color:#DF6885!important;[/newclass]
[newclass=.abc-selk-contain, .selk-code] --abc-selk-accent:#CCCCCC; [/newclass]
[newclass=.abc-selk-contain] width:500px; padding:25px; border-radius:5px; background-color:#eee; display:flex; flex-flow:row wrap; justify-content:space-between; position:relative; overflow:hidden; [/newclass]
[newclass=.abc-selk-contain h1] margin:0px; width:100%; display:flex; flex-flow:row wrap; align-items:center; font:200 32px/32px Raleway; color:var(--abc-selk-accent); [/newclass]
[newclass=.abc-selk-contain h1:after] content:''; width:10px; height:1px; background-color:#ccc; flex-grow:2; margin-left:25px; [/newclass]
[newclass=.abc-selk-contain h1:before] content:'A-B-'; color:#ccc; [/newclass]
[newclass=.abc-selk-body] width:350px; border-radius:5px; color:#aaa; font:400 11px roboto; text-align:justify; margin-top:25px; [/newclass]
[newclass=.abc-selk-text] background-color:#fafafa; padding:25px; border-radius:5px; [/newclass]
[newclass=.abc-selk-hash] margin:25px 0px; text-align:left; [/newclass]
[newclass=.abc-selk-hash a] display:inline-block; height:10px; padding:5px 7px; margin:0px 3px 5px 0px; color:var(--abc-selk-accent); background-color:#ddd; border-radius:2px; text-transform:uppercase; font:600 10px/10px roboto; [/newclass]
[newclass=.abc-selk-colorpickers] width:309px; display:flex; flex-flow:row wrap; align-items:flex-start; [/newclass]
[newclass=.abc-selk-color] display:flex; flex-flow:row nowrap; width:309px; [/newclass]
[newclass=.abc-selk-color div] height:10px; display:inline-block; margin-right:5px; background-color:#ccc; [/newclass]
[newclass=.abc-selk-color span] height:10px; width:0px; display:flex; font:600 9px/10px Roboto; color:#ccc; [/newclass]
[newclass=.abc-selk-var] width:340px; font:400 10px/13px roboto; margin-top:25px; padding-right:10px; height:25px; overflow:auto; [/newclass]
[newclass=.abc-selk-var::-webkit-scrollbar] width:5px; border:0px; [/newclass]
[newclass=.abc-selk-var::-webkit-scrollbar-thumb] background-color:#999; border:0px; [/newclass]
[newclass=.abc-selk-var::-webkit-scrollbar-track] background-color:#ddd; border:0px; [/newclass]
[newclass=.abc-selk-rules] margin:25px 0px 0px 0px; text-align:left; width:125px; display:flex; justify-content:flex-start; align-self:stretch; flex-flow:column nowrap; border-right:1px solid #ddd; [/newclass]
[newclass=.abc-selk-rules img] width:100px; height:100px; border-radius:5px; [/newclass]
[newclass=.selk-code] background-color:#eee; width:500px; padding:25px; -webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; margin-top:-25px; position:relative; overflow:hidden; [/newclass]
[newclass=.selk-code div] margin:0px!important; display:flex; flex-flow:row wrap; align-items:center; justify-content:center; [/newclass]
[newclass=.selk-code div span] display:inline-block; font:700 9px roboto; color:#333; text-transform:uppercase; background-color:#ddd; margin:0px 5px 25px 0px; padding:5px 8px; border-radius:3px; [/newclass]
[newclass=.selk-code code] display:block; width:400px!important; height:100px!important;overflow:auto!important; padding:25px!important; text-align:justify; border-radius:5px; font:11px roboto; color:#aaa; background-color:#f7f7f7; border:0px!important; [/newclass]
[newclass=.selk-code .code_tag_toggle]margin-top:25px; border:0px!important; color:#333!important; font:700 9px/9px roboto!important; padding:5px 10px!important; border-radius:3px!important;[/newclass]
[newclass=.abc-selk-link] position:absolute; bottom:0px; right:0px; height:45px; width:45px!important; background-color:var(--abc-selk-accent); display:flex!important; align-items:center!important; justify-content:center!important; border-radius:0px; [/newclass]
[newclass=.abc-selk-link i] font-size:20px; color:#fafafa; [/newclass][break][break]


[nospaces][googlefont=Open+Sans:400,700|Raleway:900|Montserrat:700|Maven+Pro:900]

[attr="class","selk-Contain"]
[PTabbedContent]

[PTab=
[attr="class","selk-Tab"]
angel on fire

3:16

]

[attr="class","selk-cover"][music]https://dl.dropboxusercontent.com/s/nti20k9bjvw3ryg/Halsey%20-%20Angel%20On%20Fire%20%28Audio%29.mp3[/music]
[attr="class","selk-big-img"]

[attr="class","selk-play-bg"]

[attr="class","selk-bottom"]

NOW PLAYING


angel on fire





[/PTab]

[PTab=
[attr="class","selk-Tab"]
buy the stars

4:48

]

[attr="class","selk-cover"][music]https://dl.dropboxusercontent.com/s/jgjwpxeoulaw7zy/MARINA%20AND%20THE%20DIAMONDS%20BUY%20THE%20STARS.mp3[/music]
[attr="class","selk-big-img"]

[attr="class","selk-play-bg"]

[attr="class","selk-bottom"]

NOW PLAYING


buy the stars





[/PTab]

[PTab=
[attr="class","selk-Tab"]
cosmic love

4:01

]


[attr="class","selk-cover"][music]https://dl.dropboxusercontent.com/s/a1wboen51m5454f/cosmiclove.mp3[/music]
[attr="class","selk-big-img"]

[attr="class","selk-play-bg"]

[attr="class","selk-bottom"]

NOW PLAYING


cosmic love





[/PTab]

[PTab=
[attr="class","selk-Tab"]
dracula

3:15

]

[attr="class","selk-cover"][music]https://dl.dropboxusercontent.com/s/w1qru3puvomb6lz/f%28x%29%20-%20Dracula%20%5B3%EC%A7%91%20Red%20Light%5D.mp3[/music]
[attr="class","selk-big-img"]

[attr="class","selk-play-bg"]

[attr="class","selk-bottom"]

NOW PLAYING


dracula





[/PTab={codes}]

[PTab=
[attr="class","selk-Tab"]
even in death

2:35

]

[attr="class","selk-cover"][music]https://dl.dropboxusercontent.com/s/ql24hvfjmfeczhd/At%20the%20Price%20of%20Oblivion%20-%2003%20Even%20in%20Death.mp3[/music]
[attr="class","selk-big-img"]

[attr="class","selk-play-bg"]

[attr="class","selk-bottom"]

NOW PLAYING


even in death





[/PTab={codes}]

[PTab=
[attr="class","selk-Tab"]
foreigner's god

3:39

]


[attr="class","selk-cover"][music]https://dl.dropboxusercontent.com/s/uuu997hr92ejzxt/foreignersgod.mp3[/music]
[attr="class","selk-big-img"]

[attr="class","selk-play-bg"]

[attr="class","selk-bottom"]

NOW PLAYING


foreigner's god





[/PTab={codes}]

[PTab=
[attr="class","selk-Tab"]
galaxy

3:10

]


[attr="class","selk-cover"][music]https://dl.dropboxusercontent.com/s/ybo7kpk73cpl6tz/galaxy.mp3[/music]
[attr="class","selk-big-img"]

[attr="class","selk-play-bg"]

[attr="class","selk-bottom"]

NOW PLAYING


galaxy





[/PTab={codes}]

[PTab=
[attr="class","selk-Tab"]
hello planet

5:04

]


[attr="class","selk-cover"][music]https://dl.dropboxusercontent.com/s/bo6r03ud5433l1f/hello_planet.mp3[/music]
[attr="class","selk-big-img"]

[attr="class","selk-play-bg"]

[attr="class","selk-bottom"]

NOW PLAYING


hello, planet





[/PTab={codes}]

[PTab=
[attr="class","selk-Tab"]
icarus

3:46

]


[attr="class","selk-cover"][music]https://dl.dropboxusercontent.com/s/2i3zybr5jmr7y3z/icarus.mp3[/music]
[attr="class","selk-big-img"]

[attr="class","selk-play-bg"]

[attr="class","selk-bottom"]

NOW PLAYING


icarus





[/PTab={codes}]

[PTab=
[attr="class","selk-Tab"]
jenny

3:51

]


[attr="class","selk-cover"][music]https://dl.dropboxusercontent.com/s/0ex91dqdnoa624e/jenny.mp3[/music]
[attr="class","selk-big-img"]

[attr="class","selk-play-bg"]

[attr="class","selk-bottom"]

NOW PLAYING


jenny





[/PTab={codes}]

[PTab=
[attr="class","selk-Tab"]
keep on doin'

3:11

]


[attr="class","selk-cover"][music]https://dl.dropboxusercontent.com/s/wous0y58p4r8xjc/keep%20on%20doin%27.mp3[/music]
[attr="class","selk-big-img"]

[attr="class","selk-play-bg"]

[attr="class","selk-bottom"]

NOW PLAYING


keep on doin'





[/PTab]

[PTab=
[attr="class","selk-Tab"]
leave the lights on

6:46

]


[attr="class","selk-cover"][music]https://dl.dropboxusercontent.com/s/xudie0qdioa1zw2/leavethelightson.mp3[/music]
[attr="class","selk-big-img"]

[attr="class","selk-play-bg"]

[attr="class","selk-bottom"]

NOW PLAYING


leave the lights on





[/PTab]

[PTab=
[attr="class","selk-Tab"]
monster

3:23

]


[attr="class","selk-cover"][music]https://dl.dropboxusercontent.com/s/nkbjhoeo2oj8ict/monster.mp3[/music]
[attr="class","selk-big-img"]

[attr="class","selk-play-bg"]

[attr="class","selk-bottom"]

NOW PLAYING


monster





[/PTab]

[PTab=
[attr="class","selk-Tab"]
nina cried power

3:47

]


[attr="class","selk-cover"][music]https://dl.dropboxusercontent.com/s/piltz9837q92409/nina_cried_power.mp3[/music]
[attr="class","selk-big-img"]

[attr="class","selk-play-bg"]

[attr="class","selk-bottom"]

NOW PLAYING


nina cried power





[/PTab]

[PTab=
[attr="class","selk-Tab"]
operation: mindcrime

4:46

]


[attr="class","selk-cover"][music]https://dl.dropboxusercontent.com/s/0kjdlf8n45ft1nn/operation_mindcrime.mp3[/music]
[attr="class","selk-big-img"]

[attr="class","selk-play-bg"]

[attr="class","selk-bottom"]

NOW PLAYING


operation: mindcrime





[/PTab]

[PTab=
[attr="class","selk-Tab"]
pop/stars

3:23

]


[attr="class","selk-cover"][music]https://dl.dropboxusercontent.com/s/rt1lcow29gpbzxm/popstars.mp3[/music]
[attr="class","selk-big-img"]

[attr="class","selk-play-bg"]

[attr="class","selk-bottom"]

NOW PLAYING


pop/stars





[/PTab]

[PTab=
[attr="class","selk-Tab"]
quaver

3:35

]


[attr="class","selk-cover"][music]https://dl.dropboxusercontent.com/s/o0022s8hus7f6uz/quaver.mp3[/music]
[attr="class","selk-big-img"]

[attr="class","selk-play-bg"]

[attr="class","selk-bottom"]

NOW PLAYING


quaver





[/PTab]

[PTab=
[attr="class","selk-Tab"]
reach for the moon

5:57

]


[attr="class","selk-cover"][music]https://dl.dropboxusercontent.com/s/kijnaotcc5dfowd/reachforthemoon.mp3[/music]
[attr="class","selk-big-img"]

[attr="class","selk-play-bg"]

[attr="class","selk-bottom"]

NOW PLAYING


reach for the moon





[/PTab]


[PTab=
[attr="class","selk-Tab"]
snake eyes

4:25

]


[attr="class","selk-cover"][music]https://dl.dropboxusercontent.com/s/12iuoucsliy9un0/snakeeyes.mp3[/music]
[attr="class","selk-big-img"]

[attr="class","selk-play-bg"]

[attr="class","selk-bottom"]

NOW PLAYING


snake eyes





[/PTab]

[PTab=
[attr="class","selk-Tab"]
two birds

3:16

]


[attr="class","selk-cover"][music]https://dl.dropboxusercontent.com/s/6z5znrjfkg9negi/twobirds.mp3[/music]
[attr="class","selk-big-img"]

[attr="class","selk-play-bg"]

[attr="class","selk-bottom"]

NOW PLAYING


two birds





[/PTab]

[PTab=
[attr="class","selk-Tab"]
unbelievable

3:25

]


[attr="class","selk-cover"][music]https://dl.dropboxusercontent.com/s/5firfsp62brxo40/unbelievable.mp3[/music]
[attr="class","selk-big-img"]

[attr="class","selk-play-bg"]

[attr="class","selk-bottom"]

NOW PLAYING


unbelievable





[/PTab]

[PTab=
[attr="class","selk-Tab"]
vagrant

3:43

]


[attr="class","selk-cover"][music]https://dl.dropboxusercontent.com/s/apmfrxafn09ssi8/vagrant.mp3[/music]
[attr="class","selk-big-img"]

[attr="class","selk-play-bg"]

[attr="class","selk-bottom"]

NOW PLAYING


vagrant





[/PTab]

[PTab=
[attr="class","selk-Tab"]
werewolf gimmick

3:43

]


[attr="class","selk-cover"][music]https://dl.dropboxusercontent.com/s/cnp44r222lik1r8/werewolf%20gimmick.mp3[/music]
[attr="class","selk-big-img"]

[attr="class","selk-play-bg"]

[attr="class","selk-bottom"]

NOW PLAYING


werewolf gimmick





[/PTab]

[PTab=
[attr="class","selk-Tab"]
xo

3:41

]


[attr="class","selk-cover"][music]https://dl.dropboxusercontent.com/s/fi3do2ac67nieyr/xo.mp3[/music]
[attr="class","selk-big-img"]

[attr="class","selk-play-bg"]

[attr="class","selk-bottom"]

NOW PLAYING


xo





[/PTab]

[PTab=
[attr="class","selk-Tab"]
young volcanoes

3:17

]


[attr="class","selk-cover"][music]https://dl.dropboxusercontent.com/s/k656549muuwc7f1/youngvolcanoes.mp3[/music]
[attr="class","selk-big-img"]

[attr="class","selk-play-bg"]

[attr="class","selk-bottom"]

NOW PLAYING


young volcanoes





[/PTab]

[PTab=
[attr="class","selk-Tab"]
zinnia

5:01

]


[attr="class","selk-cover"][music]https://dl.dropboxusercontent.com/s/zngivxb6vceqvg5/zinnia.mp3[/music]
[attr="class","selk-big-img"]

[attr="class","selk-play-bg"]

[attr="class","selk-bottom"]

NOW PLAYING


zinnia





[/PTab]

[/PTabbedContent={width:650px; height:400px;border-radius:5px; overflow:hidden; background-color:#fff; tabs:side; border:0px; position:relative; }]



[newclass=.selk-Contain] --selk-accent:#DF6885; width:650px; height:400px; position:relative;[/newclass]

[newclass=.selk-cover] width: 400px; height: 400px; background-color: #eee; position: relative; display: flex; flex-flow: row wrap; align-items: center; justify-content: center; [/newclass]
[newclass=.selk-big-img] position: absolute; width: 400px; height: 300px; background: url(https://i.imgur.com/FqUCpsL.png); background-position: center; align-self: flex-start; position: relative; filter: grayscale(100%); opacity: 0.75; [/newclass]
[newclass=.selk-big-img:after] content: ""; width: 400px; height: 300px; background: linear-gradient( to bottom, rgba(238, 238, 238, 0.1), rgba(238, 238, 238, 1) ); position: absolute; top: 0px; left: 0px; [/newclass]
[newclass=.selk-top] position: absolute; top: 25px; text-transform: lowercase; font: 400 35px maven pro; color: #fafafa; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25); [/newclass]
[newclass=.selk-play-bg] position: absolute; width: 200px; height: 200px; border-radius: 100%; background: url(https://i.ibb.co/1KZRJxc/image.png); background-size: cover; border: 10px solid #f8f8f8; display: flex; align-items: center; justify-content: center; z-index: 1; [/newclass]
[newclass=.selk-play-bg:after] content: ""; position: absolute; top: -10px; left: -10px; width: 220px; height: 220px; background-color: transparent; border-radius: 100%; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25); [/newclass]
[newclass=.selk-play-bg i] display: block; width: 150px; height: 150px; font-size: 150px; color: #eee; z-index: 1; border-radius: 100px; [/newclass]
[newclass=.selk-play-bg i:before] display: block; background: url(https://i.imgur.com/FqUCpsL.png); background-size: cover; background-position: center; -webkit-background-clip: text; color: #fafafa; text-shadow: 0px 0px 25px rgba(0, 0, 0, 0.25); [/newclass]
[newclass=.selk-bottom] position: absolute; bottom: 0px; width: 400px; height: 100px; background-color: #eee; z-index: 0; display: flex; flex-flow: column nowrap; align-items: center; justify-content: flex-end; [/newclass]
[newclass=.selk-bottom h1] margin: 5px 0px 0px 0px; font: 700 8px/100% Montserrat; text-transform: uppercase; color: #ccc; position: relative; z-index: 1; [/newclass]
[newclass=.selk-bottom h2] display: block; margin: 0px 0px 25px 0px; font: 900 36px/100% maven pro; color: #888; position: relative; text-transform: uppercase; z-index: 0; [/newclass]

[newclass=.selk-cover .music]background-color:transparent;color:transparent; width:150px; height:150px; position:absolute; z-index:99999; white-space:nowrap; padding:0px; [/newclass]
[newclass=.selk-cover .music .controls] color:#FDFDFD; text-shadow:0px 0px 10px rgba(0,0,0,.25); font-size:150px; line-height:150px; margin:0px; z-index:99999; cursor:pointer;[/newclass]
[newclass=.selk-cover .music .time]display:none;[/newclass]
[newclass=.selk-cover .music .scrubber]display:none;[/newclass]
[newclass=.selk-cover .music .fa-fw]width:150px;[/newclass]

[newclass=.selk-Tab] height:10px; width:200px; color:#eee; padding:15px 25px; display:flex; align-items:center; justify-content:space-between; text-align:left; font:700 10px/10px open sans; text-transform:uppercase; text-shadow:1px 1px rgba(0,0,0,.25); [/newclass]
[newclass=.selk-Extras] position:absolute; width:300px; padding:50px 50px; display:flex; align-items:center; justify-content:space-between; bottom:0px; right:0px; z-index:100; [/newclass]
[newclass=.selk-Extras span] font-size:25px; color:#fafafa; text-shadow:2px 2px rgba(0,0,0,.1); cursor:pointer; [/newclass]

[newclass=.selk-Contain table td]padding:0px!important; border:0px!important;[/newclass]
[newclass=.selk-Contain .PT_Tabs_holder]table-layout:none!important; height:400px!important; overflow-y:scroll!important; display:flex; flex-flow: row wrap; overflow-x:hidden!important; [/newclass]
[newclass=.selk-Contain .PT_Tabs_holder::-webkit-scrollbar]width:5px; border:0px;[/newclass]
[newclass=.selk-Contain .PT_Tabs_holder::-webkit-scrollbar-thumb]background-color:var(--selk-accent);border:1px solid #333;[/newclass]
[newclass=.selk-Contain .PT_Tabs_holder::-webkit-scrollbar-track]background-color:#333;[/newclass]
[newclass=.selk-Contain .PT_table .PT_tabs]background-color:#444;[/newclass]
[newclass=.selk-Contain .PT_table .PT_tabs_hover]background-color:var(--selk-accent); cursor:pointer;[/newclass]
[newclass=.selk-Contain .PT_table .PT_tabs_selected_hover]background-color:var(--selk-accent); cursor:pointer;[/newclass]
[newclass=.selk-Contain .PT_table .PT_tabs_selected]background-color:var(--selk-accent);[/newclass]
last edit on Dec 28, 2018 18:29:49 GMT by selkie
weeping omens advertisement

all my proboards templates require the style tags plugin!
ᕕ( ᐛ )ᕗ
aliasthat bitch.
pronouns"that bitch" still works tbh (any OK!)
551written posts
selkieearned bits
offlinecurrently
selkie
Part of the Furniture
selkie Avatar
a verb in perfect view.
i have a couple things for !! the first is some arjuna icons & 200x300 hovers, hope they turned out ok

second is a messaging template i coded while listening to thank u, next on repeat for 2 hours. gif preview below ( the typing effect plays on hover ) along w the html output. it shouldn't be too bad to edit, but lmk if you have any questions!



<head>
<link href="https://fonts.googleapis.com/css?family=Raleway:900|Open+Sans:400,700|Roboto:400,700,900" rel="stylesheet">
link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">
</head>

<div align="center">
<div class="ty-n-contain">
<div class="ty-n-top">
<img src="http://placehold.it/75x75/333/eee.png">
<notif>!</notif>
<div>
new messages from
<tagged>
firstname lastname
</tagged>
</div>
</div>
<div class="ty-n-svg"><svg viewBox="0 0 500 100" preserveAspectRatio="none" style="width: 100%;"><path d="M0.00,49.98 C149.99,150.00 271.49,-49.98 543.73,84.38 L500.00,0.00 L0.00,0.00 Z"></path></svg></div>
<div class="ty-n-msg">
<sent>
one taught me love
</sent>
<received>
one taught me patience
</received>
<sent>
and one taught me pain
</sent>
<received>
now i'm so amazing
</received>
<sent>
i've loved and i've lost, but that's not what i see, so look what i got, look what you taught me
</sent>
<sent>
thank u, next
</sent>
<received>
thank u, next
</received>
<sent>
i'm so f*ckin' grateful for my ex
</sent>
</div>
<div class="ty-n-txtbox">
<div class="ty-n-msg-deco">
<typing-ani>
ENTER YOUR MESSAGE
</typing-ani>
</div>
<span class="th th-chat-bubbles"></span>
</div>
</div>
</div>

<style>
 body {
--ty-n-accent: #b385ac;
--ty-n-icon-bg: #fefefe;
--ty-n-notif-bg: #ac2436;
--ty-n-txt: #7a7a7a;
--ty-n-scroll-bg: #ddd;
--ty-n-deco-bg: #f8f8f8;
}

@keyframes ty-n-notif-bounce {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-5px);
}
100% {
transform: translateY(0px);
}
}

@keyframes ty-n-typing {
from {
max-width: 0px;
}
to {
max-width: 300px;
}
}

@keyframes ty-n-typing-blink {
from,
to {
border-color: transparent;
}
50% {
border-color: var(--ty-n-accent);
}
}

.ty-n-contain {
transition: 0.1s ease;
width: 400px;
background-color: #eee;
border-radius: 10px;
overflow: hidden;
}

/* TOP STUFF */
.ty-n-top {
transition: 0.1s ease;
height: 110px;
padding: 25px 25px 0px 25px;
background-color: var(--ty-n-accent);
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
}
.ty-n-top img {
transition: 0.1s ease;
width: 75px;
border-radius: 100%;
padding: 5px;
box-shadow: 2px 1px rgba(0, 0, 0, 0.075);
background-color: var(--ty-n-icon-bg);
}
.ty-n-top notif {
width: 20px;
height: 20px;
position: absolute;
left: 90px;
top: 45px;
background-color: var(--ty-n-notif-bg);
border-radius: 100%;
box-shadow: 1px 1px rgba(0, 0, 0, 0.075);
color: #fafafa;
display: flex;
align-items: center;
justify-content: center;
font: 900 11px/100% roboto;
animation: 1.25s linear infinite ty-n-notif-bounce;
 cursor:default;
}
.ty-n-top div {
margin: 0px 0px 0px 25px;
text-align: left;
display: flex;
flex-flow: column nowrap;
flex-grow: 1;
font: 700 9px/100% open sans;
color: var(--ty-n-icon-bg);
text-shadow: 1px 1px rgba(0, 0, 0, 0.15);
text-transform: uppercase;
}
.ty-n-top tagged {
max-width:240px;
margin-top: 5px;
font: 900 20px/80% Raleway;
text-shadow: 1px 1px rgba(0, 0, 0, 0.1);
overflow-wrap: break-word;
}
.ty-n-top tagged a {
 color: var(--ty-n-icon-bg);
}

/* WAVY SVG */
.ty-n-svg {
height: 25px;
overflow: hidden;
}
.ty-n-svg svg {
fill: var(--ty-n-accent);
height: 30px;
stroke: none;
 position:relative;
 z-index:2;
}

/* MESSAGEBOX */
.ty-n-msg {
 padding: 0px 25px 0px 25px;
 width: 340px;
 margin-right: 10px;
 margin-top:5px;
 height: 325px;
 overflow: auto;
 display: flex;
 flex-flow: column nowrap;
 justify-content: flex-start;
 align-items: flex-end;
 text-align: left;
}

.ty-n-msg::-webkit-scrollbar {
width: 10px;
}
.ty-n-msg::-webkit-scrollbar-track {
background-color: var(--ty-n-scroll-bg);
border-radius: 10px;
}
.ty-n-msg::-webkit-scrollbar-thumb {
background-color: var(--ty-n-accent);
border-radius: 10px;
}

/* ACTUAL MESSAGES */
.ty-n-msg sent,
.ty-n-msg received {
background-color: var(--ty-n-icon-bg);
max-width: 66%;
overflow-wrap: break-word;
margin-bottom: 10px;
padding: 10px;
border-radius: 5px;
font: 400 12px/110% open sans;
color: var(--ty-n-txt);
flex-shrink: 0;
}

/* image styling */
.ty-n-msg sent img,
.ty-n-msg received img {
 border-radius:5px;
 max-width:200px;
 padding:1px;
 background-color:var(--ty-n-icon-bg);
 overflow:hidden;
}

.ty-n-msg sent {
margin-left: auto;
text-align: justify;
 text-align-last: right; /* doesn't display on safari */
 -moz-text-align-last: right;
background-color: var(--ty-n-accent);
color: var(--ty-n-icon-bg);
}
.ty-n-msg received {
margin-right: auto;
text-align: justify;
}

/* BOTTOM STUFF */
.ty-n-txtbox {
padding: 10px;
display: flex;
}

.ty-n-msg-deco {
padding: 10px 5px;
margin: 0px 10px 0px 0px;
background-color: var(--ty-n-deco-bg);
border-radius: 25px;
font: 700 10px/100% roboto;
color: #aaa;
flex-grow: 1;
cursor: text;
}

.ty-n-contain:hover .ty-n-msg-deco typing-ani {
animation: ty-n-typing 3.5s steps(50, end) forwards,
ty-n-typing-blink 1.5s 3.5s step-end infinite;
}

.ty-n-msg-deco typing-ani {
display: inline-block;
overflow: hidden;
border-right: 2px solid var(--ty-n-accent);
font: 400 10px/100% open sans;
white-space: nowrap;
max-width: 0px;
margin: 0 auto;
animation: ty-n-typing-blink 1s step-end infinite;
}

.ty-n-txtbox .th {
width: 20px;
height: 20px;
padding: 6px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 100%;
font-size: 20px;
color: var(--ty-n-deco-bg);
background-color: var(--ty-n-accent);
margin-left: auto;
cursor: pointer;
}
</style>
weeping omens advertisement

all my proboards templates require the style tags plugin!