ᕕ( ᐛ )ᕗ

376 posts

bits

any

its tough out here being a girlboss

selkie

Senior Member

hic sunt dracones Jul 2, 2018 21:47:11 GMT pharaoh leap, valka, and 5 more like this

Quote

Post by selkie on Jul 2, 2018 21:47:11 GMT

[nospaces][googlefont=Raleway:300,400,700|Inconsolata:400,700|Montserrat+Alternates:400,700]

[attr="class","s-contain"]

[attr="class","s-side"]

[attr="class","s-side-ani"]

[attr="class","s-body"]

[attr="class","s-body-content"]

[attr="class","s-head"]$('.selkie-coding-gallery')

[PTabbedContent]

[PTab=

[attr="class","s-tabs"]introduction

]

[attr="class","s-stats"]

[attr="class","s-stats-txt"]
hi, i'm selkie! i'm 21 and a biology major currently in my third year of college. aside from writing as a hobby, i've been working with HTML/CSS for something shy of a decade, and have been dabbling in JS as of late! i consider myself a web developer over a web designer and love conceptualizing whacky ideas and figuring out how to manipulate html/css to make them a reality. please note that templates posted in this thread are not free for use unless they are posted elsewhere on site. however, feel free to use, edit, or modify the demos as you wish!

[attr="class","s-stats-body"]

[attr="class","s-stat-entry"]
posting

17

templates

[attr="class","s-stat-entry"]
plotting

11

templates

[attr="class","s-stat-entry"]
tracking

08

templates

[attr="class","s-stat-entry"]
miscellaneous

14

templates

[/PTab={codes}]

[PTab=

[attr="class","s-tabs"]templates

]

[/PTab={codes}]

[PTab=

[attr="class","s-tabs"]challenges

]

</challenge class="abcs-of-code">

</challenge class="solo-challenges">

[attr="class","s-challenges"]
.color-splash { template-type:posting; }
.gradual-repetition { template-type:posting; }
.kuler-than-me { template-type:posting; }
.nightcall { template-type:posting; }
.out-with-the-old { template-type:posting; }
.problematic-fav { template-type:plotting; }
.this-is-for-music { template-type:playlist; }

[/PTab={height:calc(545px - 25px); display:grid;}]

[/PTabbedContent={margin-top:25px;}]

$accent:#df6885; $sidepattern:url(https://image.ibb.co/h5t3vf/pixel-pattern.png); $bodypattern:url(https://image.ibb.co/hREb3o/08.png); [newclass=.s-contain] width:686px; height:686px; background:#fafafa; display:flex; flex-flow:row wrap; border-radius:10px; overflow:hidden; [/newclass]
[newclass=.s-side] position:relative; height:100%; width:33%; overflow:hidden; background-color: #fc5296; background-image: linear-gradient(315deg, #fc5296 0%, #f67062 74%); [/newclass]
[newclass=.s-side::before] content:''; position:absolute; bottom:-110px; right:-20px; width:200px; height:200px; transform:rotate(45deg); border-radius:20px; background-color:#fff; opacity:.5; z-index:0; [/newclass]
[newclass=.s-side::after] content:''; position:absolute; height:100%; width:100%; background:url(https://i.ibb.co/SJrqSrh/5px-grid.png); top:0px; left:0px; filter:invert(1); opacity:0.066; z-index:0; [/newclass]
[newclass=.s-side img] height:900px; position:absolute; top:-50px; left:-70px; filter:grayscale(50%) contrast(50%); opacity:.92; z-index:1; [/newclass]
[newclass=.s-side-ani] width:500px; height:500px; border-radius:100%; border:10px dotted #fafafa; opacity:.25; position:absolute; left:-5px; animation:60s s-side-ani linear infinite; } @keyframes s-side-ani { from { transform:rotate(0deg); } to { transform:rotate(-360deg); }[/newclass]
[newclass=.s-head] height:35px; font:700 30px/120% montserrat alternates; padding:25px 10px 0px 10px; color:$accent; background-image: linear-gradient(90deg, #fc5296 0%, #f67062 74%); background-clip: text; -webkit-background-clip: text; color: transparent; position:relative; [/newclass]
[newclass=.s-body] width:67%; display:flex; flex-flow:column nowrap; justify-content:flex-start; align-items:center; position:relative; z-index:0; overflow:hidden; [/newclass]
[newclass=.s-body:before] content:''; position:absolute; width:100%; height:100%; top:0px; left:0px; background:$bodypattern; opacity:0.0125; [/newclass]
[newclass=.s-body-content] z-index:1; [/newclass]
[newclass=.s-buttons] height:auto; width:calc(100% - 50px); display:flex; padding:25px; display:flex; justify-content:space-between; [/newclass]
[newclass=.s-tabs] height:11px; font:700 11px/100% roboto; text-transform:uppercase; background:#fefefe; color:#f67062; padding:10px 30px; border-radius:20px; box-shadow:2px 2px 5px rgba(0,0,0,.050); transition:.25s; cursor:pointer; } @keyframes s-tabs-ani { 0% { transform:translateY(0px); } 50% { transform:translateY(-3px); } 100% { transform:translateY(0px); }[/newclass]
[newclass=.s-tabs:hover] background:rgba(255,255,255,0.8); transform:translateY(-3px); transition:.25s; [/newclass]
[newclass=.s-stats] flex-grow:1; [/newclass]
[newclass=.s-stats-txt] background-color:#fefefe; padding:20px; margin:0px 25px; border-radius:10px; box-shadow:0px 0px 10px rgba(0,0,0,.05); font:12px/140% inconsolata; color:#555; text-align:justify; [/newclass]
[newclass=.s-stats-txt b] font:700 12px inconsolata; color:transparent; background-image: linear-gradient(90deg, #fc5296 0%, #f67062 74%); background-clip: text; -webkit-background-clip: text; [/newclass]
[newclass=.s-stats-txt:before] content:"/* "; color:#ccc; [/newclass]
[newclass=.s-stats-txt:after] content:" */"; color:#ccc; [/newclass]
[newclass=.s-stats-body] display:flex; height:325px; padding:10px 50px; flex-flow:row wrap; align-items:center; justify-content:space-between; [/newclass]
[newclass=.s-stat-entry] width:150px; height:150px; background:#fefefe; border-radius:100%; box-shadow:0px 0px 10px rgba(0,0,0,.05); display:flex; flex-flow:column nowrap; align-items:center; justify-content:center; text-transform:uppercase; position:relative; overflow:hidden; transition:.25s; cursor:default;[/newclass]
[newclass=.s-stat-entry:hover] transform:translateY(-5px); transition:.25s; [/newclass]
[newclass=.s-stat-entry div] display:block; font:700 75px/100% montserrat alternates; color:transparent; background: linear-gradient(90deg, #fc5296 0%, #f67062 74%); background-clip: text; -webkit-background-clip: text; [/newclass]
[newclass=.s-stat-entry span] bottom:30px; color:#ddd; font:700 10px/100% roboto; [/newclass]

[newclass=.s-templates] max-height:calc(510px - 40px); overflow:auto; background-color:#fefefe; margin:0px 25px; border-radius:10px; border:25px solid #fefefe; box-shadow:0px 0px 10px rgba(0,0,0,.05); font:13px/140% roboto; color:#555; text-align:justify; [/newclass]
[newclass=.s-templates a] display:block; height:13px; padding:10px 0px; border-top:1px solid #eee; color:transparent!important; font:12px/13px Inconsolata; background: linear-gradient(90deg, #fc5296 0%, #f67062 74%); background-clip: text; -webkit-background-clip: text; text-decoration:none; text-transform:lowercase; [/newclass]
[newclass=.s-templates a:first-child] padding-top:0px; border:0px; [/newclass]
[newclass=.s-templates i] color:#aaa; font-style:normal; [/newclass]
[newclass=.s-templates::-webkit-scrollbar] width:15px; [/newclass]
[newclass=.s-templates::-webkit-scrollbar-thumb] width:5px; background: linear-gradient(0deg, #fc5296 0%, #f67062 74%); border-radius:7px; border:7px solid #fefefe;[/newclass]

[newclass=.s-templates::-webkit-scrollbar-track] background:#e3e3e3; border:7px solid #fefefe;[/newclass]
[newclass=.s-body h1] width:100%; margin:0px 0px 4px 0px; position:relative; z-index:2; font:300 19px/100% raleway; color: #aaa; text-align:center; display:flex; flex-flow:row wrap; align-items:center; justify-content:center; text-shadow: -1px -1px 0 #fefefe, 1px -1px 0 #fefefe, -1px 1px 0 #fefefe, 1px 1px 0 #fefefe; [/newclass]
[newclass=.s-body h1::after] content:''; width:66%; position:relative; z-index:0; height:7px; top:-10px; [/newclass]
[newclass=.s-challenges, .s-challenges-2] overflow:auto; background-color:#fefefe; margin:0px 25px; border-radius:10px; border:25px solid #fefefe; box-shadow:0px 0px 10px rgba(0,0,0,.05); font:13px/140% roboto; color:#555; text-align:justify; padding:0px 15px; [/newclass]
[newclass=.s-challenges a, .s-challenges-2 a] display:block; height:13px; padding:10px 0px; border-top:1px solid #eee; color:transparent!important; font:12px/13px Inconsolata; background: linear-gradient(90deg, #fc5296 0%, #f67062 74%); background-clip: text; -webkit-background-clip: text; text-decoration:none; text-transform:lowercase; [/newclass]
[newclass=.s-challenges a:first-child, .s-challenges-2 a:first-child] padding-top:0px; border:0px; [/newclass]
[newclass=.s-challenges i, .s-challenges-2 i] color:#aaa; font-style:normal; [/newclass]
[newclass=.s-challenges::-webkit-scrollbar, .s-challenges-2::-webkit-scrollbar] width:15px; [/newclass]
[newclass=.s-challenges::-webkit-scrollbar-thumb, .s-challenges-2::-webkit-scrollbar-thumb] width:5px; background: linear-gradient(0deg, #fc5296 0%, #f67062 74%); border-radius:7px; border:7px solid #fefefe;[/newclass]
[newclass=.s-challenges::-webkit-scrollbar-track, .s-challenges-2::-webkit-scrollbar-track] background:#e3e3e3; border:7px solid #fefefe;[/newclass]
[newclass=.s-challenges-2]grid-row-end: span 3[/newclass]

[newclass=.s-contain table.PT_table]border:0px!important;[/newclass]
[newclass=.s-contain table td]padding:0px!important;[/newclass]
[newclass=.s-contain .PT_Tabs_holder]padding:0px!important; display:flex; [/newclass]
[newclass=.s-contain .PT_table .PT_Tabs]padding:0px!important; width:100px!important;[/newclass]
[newclass=.s-contain .PT_tabs_selected]background:transparent;[/newclass]

[newclass=.s-contain .PT_tabs_selected .s-tabs]color:#fc5296; background-color:#fff; transform:translateY(-3px)[/newclass]
[newclass=.s-contain .PT_tabs_selected_hover .s-tabs]color:#fc5296; background-color:#fff; transform:translateY(-3px);[/newclass]

[newclass=.s-contain .PT_tabs_hover]background:transparent;[/newclass]
[newclass=.s-contain .PT_tabs_selected_hover]background:transparent;[/newclass]
[newclass=.s-contain .PT_Tabs_holder tbody tr]width: 410px; margin:0px 25px; display: flex; flex-flow: row wrap; justify-content: space-between;[/newclass]
[newclass=.s-contain .PT_spots]margin-top:25px;background-color:transparent;[/newclass]

Last Edit: Apr 5, 2021 4:52:40 GMT by selkie

coming soon.

all my proboards templates require the style tags plugin!

ᕕ( ᐛ )ᕗ

376 posts

bits

any

its tough out here being a girlboss

selkie

Senior Member

hic sunt dracones Jul 11, 2018 17:45:33 GMT pharaoh leap, spica, and 9 more like this

Quote

Post by selkie on Jul 11, 2018 17:45:33 GMT

[nospaces][googlefont=Inconsolata:400,700|Roboto:400,900]

[attr="class","s-ch-contain"]

[attr="class","s-ch-side"]

changelog

[attr="class","s-ch-body"]

v1.0.0

look at that! after a SOLID two and a half years since pixel lauched, i finally fricken' got around to coding a gallery code. i think it's nifty! it's also uh....unnamed, bc i can't think of a good song title for it orz. let's just call it v1.0 for now! [break][break]

ngl, using selkie as a sidebar is cute, but at the same time like.....it's important that people know that i was first ok. intsys owes me royalties >:[

[newclass=.s-ch-contain] width:400px; background:#fcfcfc; border-radius:10px; overflow:hidden; box-shadow:0px 0px 10px rgba(0,0,0,.075); margin:10px; [/newclass]
[newclass=.s-ch-contain] display:flex; flex-flow:row-reverse wrap; [/newclass]
[newclass=.s-ch-side] width:25%; background-image:linear-gradient(315deg, #fc5296 0%, #f67062 74%); display:grid; position:relative; grid-template-columns: 1fr 1fr 1fr 1fr; [/newclass]
[newclass=.s-ch-side::after] content: ''; position: absolute; height: 100%; width: 100%; background: url(https://i.ibb.co/SJrqSrh/5px-grid.png); top: 0px; left: 0px; filter: invert(1); opacity: 0.066; z-index: 0; [/newclass]
[newclass=.s-ch-side h1] margin:0px; font:900 30px/42px roboto; text-transform:uppercase; color:#fefefe; writing-mode: vertical-rl; grid-row-start:10; text-shadow:1px 1px rgba(0,0,0,.2); [/newclass]
[newclass=.s-ch-body] padding:50px; width:calc(75% - 100px); font:12px Inconsolata; color:#555; text-align:left; [/newclass]
[newclass=.s-ch-body h2] margin:0px 0px 10px; font:700 20px montserrat alternates; text-align:right; background-image: linear-gradient(90deg, #fc5296 0%, #f67062 74%); background-clip: text; -webkit-background-clip: text; color: transparent; [/newclass]

Last Edit: Feb 6, 2020 4:26:54 GMT by selkie

coming soon.

all my proboards templates require the style tags plugin!

ᕕ( ᐛ )ᕗ

376 posts

bits

any

its tough out here being a girlboss

selkie

Senior Member

hic sunt dracones Jul 12, 2018 18:53:04 GMT Dolten♦, Sharp Dressed Man, and 2 more like this

Quote

Post by selkie on Jul 12, 2018 18:53:04 GMT

[nospaces]

ANIMATION DEMO: [break][break]

[attr="class","animationTesting"]

[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]

[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]

CUSTOM FONT DEMO:

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

[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]

PSEUDO SVG IN PROBOARDS RUNDOWN

[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

Last Edit: Oct 22, 2020 15:37:57 GMT by selkie

coming soon.

all my proboards templates require the style tags plugin!

ᕕ( ᐛ )ᕗ

376 posts

bits

any

its tough out here being a girlboss

selkie

Senior Member

hic sunt dracones Nov 27, 2018 5:17:46 GMT pharaoh leap, valka, and 9 more like this

Quote

Post by selkie on Nov 27, 2018 5:17:46 GMT

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

[attr="class","CaFBorder"]

[attr="class","CaFBody"]

[attr="class","CaFHeader"]

[attr="class","CaFIcon"]

[attr="class","CaFAni"]

[attr="class","CaFLyric"]

[attr="class","CaFLyric1"]why can't i see

[attr="class","CaFLyric1"]all the colors

[attr="class","CaFLyric2"]that you see

[attr="class","CaFPost"]

lorem ipsum dolor sit amet, consectetur adipiscing elit. vivamus nec orci aliquam, sodales nibh at, interdum ante. integer luctus elementum libero quis aliquet. cras non diam ut diam porttitor bibendum. sed eu risus vitae urna viverra pulvinar vel eget ipsum. mauris et maximus tortor, sit amet tristique purus. ut mattis non dolor ut pharetra. aliquam erat volutpat. donec id neque arcu. sed metus diam, iaculis at efficitur ac, maximus quis lacus. aenean luctus, nibh at euismod aliquet, leo ex lobortis orci, et consectetur ex nibh volutpat sem. suspendisse in purus lacus. curabitur posuere ipsum et placerat euismod. praesent tincidunt nibh orci, nec gravida leo consequat a. cras mattis tincidunt mi, non maximus orci mattis in. nunc in lacus non sapien hendrerit venenatis interdum vitae dui. [break][break]

orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. proin pellentesque est ac arcu commodo, vel commodo turpis egestas. mauris in lectus vitae metus convallis feugiat. donec porta lorem a fringilla convallis. donec eleifend tellus sed magna tempus pellentesque. curabitur tempor diam sed nibh condimentum, sed hendrerit purus molestie. proin at malesuada dui. maecenas auctor porta nisl, dictum faucibus dolor egestas eu. sed scelerisque ligula et purus fermentum, et molestie velit rutrum. [break][break]

interdum et malesuada fames ac ante ipsum primis in faucibus. donec varius consequat tortor, vitae lobortis eros bibendum in. suspendisse potenti. duis eu ex eros. aliquam erat volutpat. cras mattis nulla mollis varius lobortis. donec pellentesque elit lorem, eget aliquet leo volutpat nec. proin ultricies tincidunt condimentum. nullam bibendum neque a mattis tempus. quisque ac purus placerat augue ornare imperdiet eget eget turpis. nunc diam nisi, tincidunt non mattis vel, pharetra eget libero. donec nunc dui, bibendum consequat convallis vel, rhoncus vel est. curabitur volutpat cursus augue et imperdiet.

[attr="class","CaFFooter"]

[attr="class","CaFNotes"]

put your notes here!

[attr="class","CaFTag"]

@tagged

[attr="class","CaFCredit"]SELKIE

[newclass=.CaFBorder] border:10px solid #efefef; outline:1px solid #ddd; width:452px; margin:1px; [/newclass]
[newclass=.CaFBody] border:1px solid #ddd; background-color:#fefefe; [/newclass]
[newclass=.CaFHeader] display:flex; justify-content:space-between; align-items:center; background-color:#fafafa; border-bottom:1px solid #ddd; padding:20px; [/newclass]
[newclass=.CaFIcon] padding:10px; width:100px; height:100px; border:2px solid #ddd; display:flex; align-items:center; justify-content:center; border-radius:100%; [/newclass]
[newclass=.CaFAni] border:2px solid transparent; border-right:2px solid #B84244; height:120px; width:120px; border-radius:100%; position:absolute; -ms-animation: spinner 2.5s linear infinite; -moz-animation: spinner 2.5s linear infinite; -webkit-animation: spinner 2.5s linear infinite; -o-animation: spinner 2.5s linear infinite; animation: spinner 2.5s linear infinite; z-index:1; } @keyframes spinner { 0% { -ms-transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -ms-transform: rotate(-360deg); -moz-transform: rotate(-360deg); -webkit-transform: rotate(-360deg); -o-transform: rotate(-360deg); transform: rotate(-360deg); } }[/newclass]
[newclass=.CaFLyric] display:flex; flex-direction:column; cursor:default [/newclass]
[newclass=.CaFLyric1] font:700 31px/100% Montserrat; color:#ddd; text-transform:uppercase; text-align:right; [/newclass]
[newclass=.CaFLyric2] 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(//dl.dropbox.com/s/o5tlpkcxt7qwgj1/Signerica_Fat.ttf) format('truetype'); [/newclass]
[newclass=.CaFPost] font:11px roboto; color:#7a7a7a; padding:50px; text-align:justify; [/newclass]
[newclass=.CaFPost b] color:#57ADBD; font:700 11px Montserrat; [/newclass]
[newclass=.CaFFooter] display:flex; height:40px; [/newclass]
[newclass=.CaFTag] width:33%; 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=.CaFTag a] font:9px roboto!important; [/newclass]
[newclass=.CaFNotes] font:9px roboto; text-transform:uppercase; background-color:#C391CC; color:#FEFEFE; width:66%; padding:10px 10px; height:20px; overflow:hidden; display:flex; text-align:left; justify-content:center; align-items:center; [/newclass]
[newclass=.CaFCredit] font:700 7px roboto; width:50px; margin-left:400px; [/newclass]
[newclass=.CaFCredit a] font:700 7px roboto; [/newclass]

Last Edit: Feb 6, 2020 4:29:01 GMT by selkie

coming soon.

all my proboards templates require the style tags plugin!

ᕕ( ᐛ )ᕗ

376 posts

bits

any

its tough out here being a girlboss

selkie

Senior Member

hic sunt dracones Dec 15, 2018 19:49:58 GMT pharaoh leap, valka, and 24 more like this

Quote

Post by selkie on Dec 15, 2018 19:49:58 GMT

[googlefont=Roboto:400,600,700|Raleway:200|Roboto+Condensed:400,700]

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

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

pop/stars

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

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

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

this template is not for public use!

[break]

i originally coded this for another song but recoded this at the beginning of december because i listen to this song wayyyyyyy too much. i'm really glad i did, because this version is a million percent cooler. i think i'm finally getting a handle on animations, so i really need to use more flashy (snrk) effects O:<[break][break]

also, (and this is a very belated edit, whoops) i would like to give a HUGE thank you to windami for the two amazing pieces of art used here -- please check out her work & support this amazing artist![break][break]

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

[newclass=.selk-popstars .abc-selk-contain h1, .selk-popstars .abc-selk-hash a, .selk-popstars .abc-selk-rules h2]color:#AD334D!important;[/newclass]
[newclass=.selk-popstars .abc-selk-link]background-color:#AD334D!important;[/newclass]
[newclass=.abc-selk-contain, .selk-code] --abc-selk-accent:#CCCCCC; [/newclass]
[newclass=.abc-selk-contain] width:500px; padding:25px; -webkit-border-top-left-radius: 5px;-webkit-border-top-right-radius: 5px;border-top-left-radius: 5px;border-top-right-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][break][break]

[nospaces][googlefont=Montserrat:400,700|Montserrat+Alternates:400,700|Roboto:400,400i,700]

[attr="class","kdaPost"]

[attr="class","kdaRender"]

[attr="class","kdaIMG1"]

[attr="class","kdaIMGhover"]

[attr="class","kdaBodyContain"]

[attr="class","kdaBody"]

you know who it is, coming 'round again, you want a dose of this right now it's k/da! i'm a goddess with a blade, sori chyuh bwa nae eereum, itchi moht ha geh loud, loud, loud, loud. i could take it to the top, juhl dae mum choo ji moht hae, nae ga kkeut nae joo neun bad gal, gal, gal. and when i start to talk like that, oh, you won't know how to react. i'm a picture-perfect face, with that wild in my veins, you can hear it in my growl, growl, growl, growl. [break][break]

so keep your eyes on me now, mu uhtseul bo dun joah hal guh ya. dahl sooup neun level, na wa dae gyul won han nuhl hwak shin hae. we got it all in our hands now, so can you handle what we're all about? we're so tough, not scared to show you up, can you feel the rush now? ain't nobody bringing us down, down, down, down, down, down, they could try it but we're gonna wear the crown. you could go another round, round, round, round, round, round, round. wish you luck, but you're not bringing us down. we go hard, 'til we get it, get it, we go hard, we so in it, in it, we pop stars, only winning, winning now, ain't nobody bringing us down, down, down, down. [break][break] hey! you ready for this? see, uhn jae deunji nae mo seup magic, dan han bun eh naega jab uh, juhl dae gi jook ji ahn chi uh! pow pow ni ga mwol ahruh, gyun dil soo up ssuh won hae do, won ha neun gae uhl gool ae boyuh, i’m trouble and you’re wanting it. i'm so cold, when i move that way, you gon' be so blown, i'm the realest in the game, uh! said i'm on fire with a blade, you're about to hear my name, ringing in your head like, whoa.

[attr="class","kdaDeco"]

[attr="class","kdaCredit"]SELKIE

[newclass=.kdaPost] --kda-l-bg:#fcfcfc; --kda-l-text:#9c9c9c; --kda-l-text-bg:#fefefe; --kda-l-sidebarbg:#FFE8E6; --kda-l-accent:#AD334D; --kda-l-bold:#AD334D; transition:.25s; [/newclass]
[newclass=.kdaPost:hover, .kdaPost:hover .kdaBody, .kdaPost:hover .kdaDeco, .kdaPost:hover .kdaRender::after, .kdaPost:hover .kdaBody b, .kdaPost:hover .kdaBody i] transition:.25s; transition-delay:1s!important; --kda-l-bg:#333; --kda-l-text:#9c9c9c; --kda-l-text-bg:#414141; --kda-l-sidebarbg:#9CF4FC; --kda-l-accent:#7446F4; --kda-l-bold:#E927F3; [/newclass]

[newclass=.kdaPost]width:550px; height:500px; border-radius:10px; background-color:var(--kda-l-bg); overflow:hidden; display:flex; justify-content:center; align-items:flex-start;[/newclass]
[newclass=.kdaPost::after]content:''; width:550px; height:500px;border-radius:10px; position:absolute; background-image:url(https://image.ibb.co/b6UFw8/5.png); filter:invert(0%); opacity:.05; z-index:0; transition:.25s;[/newclass]
[newclass=.kdaPost:hover::after]filter: invert(100%); opacity:.05; transition:.25s; transition-delay:1s;[/newclass]
[newclass=.kdaRender]width:0px; height:500px; position:relative; margin-right:auto; z-index:2; align-self:flex-end;[/newclass]
[newclass=.kdaRender::after]content:''; position:absolute; z-index:0; margin-top:-500px; width:550px; height:500px; background-color:var(--kda-l-sidebarbg); transition:.25s; -webkit-clip-path: polygon(0 0, 25% 0, 50% 100%, 0% 100%); clip-path: polygon(0 0, 25% 0, 50% 100%, 0% 100%); [/newclass]
[newclass=.kdaIMG1]height:500px;[/newclass]
[newclass=.kdaIMG1 img]height:500px; margin-left:-125px; position:relative; z-index:2; [/newclass]
[newclass=.kdaIMGhover]position:absolute; top:0px; left:-1px;[/newclass]
[newclass=.kdaPost:hover .kdaIMGhover img] animation: kda-blink-in 1s normal forwards; opacity:1; transition:.25s; } @keyframes kda-out { 0% { opacity:1; } 100% { opacity:0; }[/newclass]
[newclass=.kdaIMGhover img]height:500px; margin-left:-125px; position:relative; z-index:2; animation: kda-out .25s normal forwards; opacity:0; transition:.25s;} @keyframes kda-blink-in { 0% { opacity:0; } 25% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; }[/newclass]
[newclass=.kdaBodyContain]height:500px; display:flex; align-items:center;[/newclass]
[newclass=.kdaBody]height:calc(378px + 50px); transition:.25s; width:275px; border-radius:10px; position:relative; margin-right:35px; z-index:3; background-color:var(--kda-l-text-bg); font:11px/160% roboto; text-align:justify; color:var(--kda-l-text); display:inline-block;[/newclass]
[newclass=.kdaBody div]height:378px; overflow:auto; margin:25px;[/newclass]
[newclass=.kdaBody b]font:700 12px/11px Montserrat Alternates; color:var(--kda-l-bold); transition:.25s;[/newclass]
[newclass=.kdaBody i]color:#cacaca; border-bottom:1px solid var(--kda-l-sidebarbg); transition:.25s;[/newclass]
[newclass=.kdaBody a]font:12px/11px Montserrat Alternates; color:var(--kda-l-accent); text-align:center; display: block; margin-top:25px; [/newclass]
[newclass=.kdaDeco]align-self:center; position:absolute; height:450px; width:450px; border:10px dotted var(--kda-l-accent); transition:.25s; border-radius:100%; animation:kda-spinner 15s linear infinite; animation-play-state:paused; z-index:1; [/newclass]
[newclass=.kdaPost:hover .kdaDeco]animation-play-state:running; } @keyframes kda-spinner { 0% { transform: rotate(0deg); } 100% { transform: rotate(-360deg); }[/newclass]
[newclass=.kdaCredit]font:800 7px roboto; margin-left:500px;[/newclass]
[newclass=.kdaCredit a]font:800 7px roboto;[/newclass]
[newclass=.kdaBody div::-webkit-scrollbar]width:0px;[/newclass]

Last Edit: Jan 2, 2019 0:18:52 GMT by selkie

coming soon.

all my proboards templates require the style tags plugin!

ᕕ( ᐛ )ᕗ

376 posts

bits

any

its tough out here being a girlboss

selkie

Senior Member

hic sunt dracones Dec 26, 2018 1:45:21 GMT pharaoh leap, valka, and 15 more like this

Quote

Post by selkie on Dec 26, 2018 1:45:21 GMT

[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]

[/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: Dec 28, 2018 18:29:49 GMT by selkie

coming soon.

all my proboards templates require the style tags plugin!

ᕕ( ᐛ )ᕗ

376 posts

bits

any

its tough out here being a girlboss

selkie

Senior Member

hic sunt dracones Feb 6, 2020 4:32:47 GMT pharaoh leap, valka, and 4 more like this

Quote

Post by selkie on Feb 6, 2020 4:32:47 GMT

[nospaces][googlefont=Pacifico|Montserrat:700|Montserrat+Alternates:700]

my uploading code for over at iconic! this was posted here previously, but i'm reposting it b/c of the revamp to this thread due to my ~*~*~*new gallery code*~*~*~ (feel free to check it out.) otherwise, plz don't mind me o/.[break][break][break]

[attr="class","selk-iconic-b-dar"]

[attr="class","selk-iconic-b-li"]

[attr="class","selk-iconic-icons"]

[attr="class","selk-iconic-head"]

[attr="class","selk-iconic-img"]

[attr="class","selk-iconic-spin"]

[attr="class","selk-iconic-orbit"]

[attr="class","selk-iconic-name"]

name mcname

from series title

## iconsand other info

[attr="class","selk-iconic-tags"]

#loremipsum
#dolor
#sit
#amet
#donotuse
#inspiredbyiconic
#xoxoxo

[attr="class","th th-planet-1-o"]

[newclass=.selk-iconic-b-li] border: 5px solid #f1f1f1; outline: 1px solid #dadada; width: calc(500px + 2px); [/newclass]
[newclass=.selk-iconic-b-dar] border: 10px solid #e2e2e2; outline: 1px solid #dadada; width: calc(500px + 2px + 10px); margin:1px; [/newclass]
[newclass=.selk-iconic-icons] width: 500px; border: 1px solid #dadada; background-color: #eaeaea; --selk-iconic-1: #FC5C9C; --selk-iconic-2: #4E8FBD; [/newclass]
[newclass=.selk-iconic-head] display: flex; flex-flow: row wrap; align-items: center; height: 124px; padding: 25px; position: relative; overflow: hidden; border: 1px solid #f6f6f6; background-image: linear-gradient( 340deg, var(--selk-iconic-1) 0%, var(--selk-iconic-2) 75% ); [/newclass]
[newclass=.selk-iconic-img] margin: 0px 25px 0px 0px; transition: 0.25s ease; position: relative; [/newclass]
[newclass=.selk-iconic-img img] display: block; border-radius: 100%; animation: 3s selk-iconic-pulse linear infinite; padding: 10px; background-color: rgba(255, 255, 255, 0.33); border: 2px solid #fff; transition: 0.25s ease; [/newclass]
[newclass=.selk-iconic-img:hover] transform: scale(0.95); transition: 0.25s ease; [/newclass]
[newclass=.selk-iconic-name] display: flex; width: 295px; height: 124px; flex-flow: column wrap; justify-content: center; align-items: center; position: relative; [/newclass]
[newclass=.selk-iconic-name h1] margin: 0px; position: absolute; top: 0px; font: 36px/36px Pacifico; color: #fafafa; overflow: visible; letter-spacing: -2px; text-shadow: 2px 2px rgba(0, 0, 0, 0.05); [/newclass]
[newclass=.selk-iconic-name h1 a] color: #fafafa!important; font: 36px/36px Pacifico!important;[/newclass]
[newclass=.selk-iconic-name h2] position: absolute; font: 700 12px montserrat; padding: 5px 7px; margin: -3px 0px 5px 0px; border-radius: 5px; color: #fdfdfd; background-color: rgba(255, 255, 255, 0.15); text-shadow: 1px 1px rgba(0, 0, 0, 0.1); cursor: default; [/newclass]
[newclass=.selk-iconic-name h2 a] color: #fafafa!important; font: 700 12px montserrat!important;[/newclass]
[newclass=.selk-iconic-name div] display: flex; flex-flow: row wrap; justify-content: center; position: absolute; top: 82px; [/newclass]
[newclass=.selk-iconic-name span] font: 700 12px montserrat; padding: 5px 7px; margin: 0px 5px 5px 5px; border-radius: 5px; color: #fdfdfd; background-color: rgba(255, 255, 255, 0.15); text-shadow: 1px 1px rgba(0, 0, 0, 0.1); cursor: default; [/newclass]
[newclass=.selk-iconic-spin] position: absolute; top: 0px; left: 0px; width: 124px; height: 124px; border-radius: 100%; animation: 3s theworldrevolving infinite; animation-play-state: paused; [/newclass]
[newclass=.selk-iconic-icons:hover .selk-iconic-spin] animation-play-state: running; } @keyframes theworldrevolving { 0% { transform: rotate(90deg); } 100% { transform: rotate(450deg); }[/newclass]
[newclass=.selk-iconic-orbit] width: 10px; height: 10px; background-color: #fff; position: relative; top: -4px; border-radius: 100%; } @keyframes selk-iconic-pulse { 0% { -moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5); } 25% { -moz-box-shadow: 0 0 0 20px rgba(255, 255, 255, 0); box-shadow: 0 0 0 20px rgba(255, 255, 255, 0); } 100% { -moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }[/newclass]
[newclass=.selk-iconic-tags] display: flex; flex-flow: row wrap; padding: 50px; position: relative; overflow: hidden; border-top: 1px solid #dadada; [/newclass]
[newclass=.selk-iconic-tags a] font: 700 13px montserrat alternates; background-color: rgba(255, 255, 255, 0.5); margin: 0px 10px 10px 0px; padding: 10px 10px; color: #7a7a7a; z-index: 1; transition: 0.25s ease; border-radius: 20px; cursor: pointer; box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1); text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff; [/newclass]
[newclass=.selk-iconic-tags a:nth-child(odd):hover] background-color: rgba(255, 255, 255, 0.75); color: var(--selk-iconic-2); [/newclass]
[newclass=.selk-iconic-tags a:nth-child(even):hover] background-color: rgba(255, 255, 255, 0.75); color: var(--selk-iconic-1); [/newclass]
[newclass=.selk-iconic-tags i] font-size:200px; position:absolute; bottom:-20px; right:-20px; z-index:0; background-image: linear-gradient(to top left, var(--selk-iconic-1), var(--selk-iconic-2) 66%); color: transparent; background-clip: text; -webkit-background-clip: text; opacity:.5; [/newclass]

Last Edit: Feb 6, 2020 4:38:13 GMT by selkie

coming soon.

all my proboards templates require the style tags plugin!

ᕕ( ᐛ )ᕗ

376 posts

bits

any

its tough out here being a girlboss

selkie

Senior Member

hic sunt dracones Nov 30, 2020 23:15:05 GMT pharaoh leap, 𝚖𝚘𝚛𝚒, and 7 more like this

Quote

Post by selkie on Nov 30, 2020 23:15:05 GMT

i finally finished the skin 4 my testing site and i'm posting preview here cuz i spent too long on it and no one will ever see it besides me fite me

admin view:

guest view:

live preview is here if anyone wants to poke around thassit bai

Last Edit: Nov 30, 2020 23:15:46 GMT by selkie

coming soon.

all my proboards templates require the style tags plugin!