write a reply

08. a-b-c-'s of code

options
quote
08. a-b-c-'s of code written Sept 5, 2018 4:51:58 GMT
frog on the floor
aliasfreiheit, microwaved burrito
pronounsany
1,544written posts
pharaoh leapearned bits
offlinecurrently
pharaoh leap
Administrator
pharaoh leap Avatar
i've been having some pretty dark thoughts.
[nospaces]

[attr="class","lppromised"]
[attr="class","lppromised1"]
[attr="class","lppromised2"]
[attr="class","lppromisedtitle"]A-B-C'S[break]OF CODE

[attr="class","lppromisedblurb"]



TEMPLATE TYPE any and all[break]
COLOR + PALETTES none[break]
CHALLENGE TYPE create templates based on a alphabetical songs[break][break]

This is 100% self-indulgent, but my family and I were playing this game where we had to sing a a song who's title or artist's name started with each letter of the alphabet (so, like, A Junkie's Blues or Alien Ant Farm for A, Barracuda or Bonnie Tyler for B, and so on), and since most of my templates have a specific “theme song”, anyway, I thought it would be fun to do a similar challenge... with the added inclusion of code![break][break]

For each letter of the alphabet, choose one song whose title or artist begins with that letter. Please choose one pattern or the other to stick to: either all song titles or all artist titles. Create a template inspired by the song, or any song by that artist, whether that be taking visual inspiration from the music video or simply using lyrics from it as your dummy text. Reply to this thread with a “tracker”, rather than the templates in question, listing what song or artist you chose for each letter and providing a link to the template you made, whether that be hosted in a testing thread/pre-made thread on-site, a tester off-site, a screenshot of the template, or anything else you can think of to show off that template.[break][break]

To encourage some variety across the 26 templates you'll be making, you must include at least 5 posting templates, 5 plotter templates, 5 tracking templates, 2 site necessities templates, and 2 technology templates.




[googlefont=Roboto Condensed:300,400,700][googlefont=Roboto:400,700,800][googlefont=Rajdhani:400,700]
[newclass=.lppromised]padding:9px;border:solid 1px #e5e5e5;background-color:#f9f9f9;width:380px;[/newclass]
[newclass=.lppromised1]padding:20px;background-image:url(https://image.ibb.co/cijxkS/dark_spots2.png);[/newclass]
[newclass=.lppromised2]padding:25px;background-color:#f9f9f9;color:#5f5f5f;text-align:justify;font:11px Roboto;text-transform:uppercase;[/newclass]
[newclass=.lppromisedtitle]padding-right:10px;display:inline-block;font:35px Roboto Condensed;font-weight:700!important;letter-spacing:-.5px;color:#e5e5e5;line-height:30px;padding-bottom:25px;border-bottom:solid 5px #eeeeee;margin-bottom:25px;[/newclass]
[newclass=.lppromisedblurb]padding-bottom:30px;text-transform:lowercase;[/newclass]
[newclass=.lppromisedblurb b]color:#111111;[/newclass]
[newclass=.lppromisedblurb a]font:bold 11px Roboto;color:#999999;border-bottom:solid 1px #111111;[/newclass]
[newclass=.lppromisedleft]font:bold 10px Rajdhani;line-height:10px;text-align:left;color:#bbbbbb;padding:0px!important;width:30%;vertical-align:top;[/newclass]
[newclass=.lppromisedleft a]font:bold 10px Rajdhani;color:#111111;line-height:10px;[/newclass]
[newclass=.lppromisedright]padding:0px 0px 10px 15px!important;vertical-align:top;font:bold 10px Rajdhani;line-height:10px;text-align:left;color:#bbbbbb;[/newclass]
options
quote
08. a-b-c-'s of code written Dec 1, 2018 0:11:40 GMT
ᕕ( ᐛ )ᕗ
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.
[nospaces][googlefont=Raleway:100,200,300|Roboto:400,700|Open+Sans+Condensed:700|Open+Sans:400]

[attr="class","sel-abc-tr-contain"]

a(dvent calendar)-b-c's of code


[attr="class","sel-abc-tr-body"]

okay, so after *checks watch* six hundred thousand years of letting all of this stuff gather dust, i'm finally going to get this show on the road O:< this was probably one of the most ambitious creative projects i've ever attempted, but i had a lot of fun with it & i think it helped me make a lot of stylistic improvements! (it also forced me to finally fukin' learn toggles & ptabs, so that alone was worth it tbfh.) [break][break]

anyways (and more importantly) i've decided to only upload one template from this challenge per day between today, november 30th and december 25th, because a) i'd rather not nuke the recent posts tab, b) i put a lot of work into every code & it'd make me sad if any of them got lost in the flood yes i'm vain sue me and, c) doing so almost perfectly lines up with the advent calendar! so instead of getting candy each day (or, uh, whatever is actually in an advent calendar) y'all will get a new code. i know it's a very drawn-out way to upload everything, but i hope everyone can be patient with me & will enjoy it regardless! happy holidays, pixel <3


[attr="class","sel-abc-tr-list"]


angel on fire


post template





buy the stars


tracker template





cosmic love


plotter template





dracula


plotter template





even in death


plotter reply





foreigner's god


post template





galaxy


phone template





hello, planet


im template





icarus


plotter template





jenny


plotter reply





keep on doin'


post template





leave the lights on


tracker template





monster


site necessity





nina cried power


application





operation: mindcrime


tracker template





pop/stars


post template





quaver


livestream template





reach for the moon


member directory





snake eyes


post template





two birds


plotter template





unbelievable


singleplotter





vagrant


post template





werewolf gimmick


tracker template





xo


moodboard





young volcanoes


relationship tracker





zinna


playlist template













[newclass=.sel-abc-tr-contain] --sel-abc-tr-accent:#346CA4; width:600px; height:calc(943px + 75px); background-color:#f0f0f0; border-radius:5px; position:relative; [/newclass]
[newclass=.sel-abc-tr-contain h1] margin:0px 0px 0px 0px; padding:25px 25px 0px; display:flex; height:32px; align-items:center; flex-grow:1; font:100 34px raleway; color:#aaa; position:relative; z-index:1; text-shadow: -1px -1px 0 #fafafa, 1px -1px 0 #fafafa, -1px 1px 0 #fafafa, 1px 1px 0 #fafafa; text-transform:lowercase; [/newclass]
[newclass=.sel-abc-tr-contain h1:after] content:''; flex-grow:2; height:1px; border:1px solid #fafafa; background-color:#ccc; margin:0px 0px 0px 25px; position:relative; z-index:1; [/newclass]
[newclass=.sel-abc-tr-body] padding:50px; margin:25px; background-color:#f9f9f9; font:400 12px roboto; text-align:justify; color:#aaa; border-radius:5px; position:relative; z-index:1; [/newclass]
[newclass=.sel-abc-tr-body b]font:700 12px roboto; color:#777;[/newclass]
[newclass=.sel-abc-tr-list] width:calc(600px - 20px); height:400px; padding:0px 25px 25px 25px; display:flex; flex-flow:row wrap; position:relative; z-index:1; [/newclass]
[newclass=.sel-abc-tr-list div] width:calc(33% - 25px); height:40px; margin:0px 25px 25px 0px; display:flex; flex-flow:column nowrap; justify-content:center; position:relative; text-align:left; color:#aaa; text-shadow: -1px -1px 0 #fafafa, 1px -1px 0 #fafafa, -1px 1px 0 #fafafa, 1px 1px 0 #fafafa; [/newclass]
[newclass=.sel-abc-tr-list div h2] margin:0px; font:700 15px/15px open sans condensed; text-transform:uppercase; [/newclass]
[newclass=.sel-abc-tr-list div h3] margin:0px; font:400 11px/11px open sans; color:#bbb; [/newclass]
[newclass=.sel-abc-tr-list div a] position:absolute; top:0px; right:0px; color:#ccc!important; [/newclass]
[newclass=.sel-abc-tr-list div a:before] content:'\eb1f'; font-family:'Honeybee'; font-size:39px; [/newclass]
last edit on Jan 22, 2019 5:16:41 GMT by selkie
weeping omens advertisement

all my proboards templates require the style tags plugin!
options
quote
08. a-b-c-'s of code written Apr 25, 2019 14:23:29 GMT
Elemental Enthusiast
aliasMari
pronounsthey/she
983written posts
Mariearned bits
offlinecurrently
Mari
Part of the Furniture
Mari Avatar
eternally tired
[nospaces]
[attr="class","ABCcont"]
[attr="class","ABCtitle"]Tick's A-B-C-'s of Code

[attr="class","ABCfield"]I'm gonna do this, heck yeah! Not sure if I'll ever finish it but I'm definitely gonna try. [break]UPDATE:I did it?? I completed the challenge? This was a lot of fun to do because I learned and experimented with a bunch of new things for some of these codes[break](also here's a playlist thingy with all the songs)
[attr="class","ABCfield1"]
[attr="class","ABClist"]
[break]Template total: 26/26[break]
Posting Templates: 7/5 // Tracker Templates: 6/5 // Plotter Templates: 5/5 // Site Necessities: 3/2 // Technology Templates: 2/2 // Misc. Templates: 3

[break]




[googlefont=Fredericka the Great|Give You Glory]
[newclass=".ABCcont"]margin:0 auto;background-color:#293831;width:500px;height:350px;padding:10px;border:10px groove #8f7454;[/newclass][newclass=".ABCtitle"]font-family:Fredericka the great;font-size:45px;text-align:center;width:500px;color:white;[/newclass][newclass=".ABCfield"]text-align:justify;font-family: give you glory;color:white;font-size:16px;[/newclass][newclass=".ABCfield1"]height:150px;width:500px;margin: 0 auto;overflow:auto;[/newclass][newclass=".ABCfield1::-webkit-scrollbar"]width:4px;[/newclass][newclass=".ABCfield1::-webkit-scrollbar-thumb"]background-color:white;border-radius:3px;[/newclass][newclass=".ABCfield1::-webkit-scrollbar-track"]background-color:#293831;[/newclass][newclass=".ABCfield a"]font-family: give you glory;color:#d5a5a5;text-decoration:none;[/newclass][newclass=".ABCfield b"]color:#a5ccd5;font-weight:normal;[/newclass][newclass=".ABClist ul"]list-style-type:none;[/newclass][newclass=".ABClist li:before"]font-family:'honeybee';content:'\eb68';margin-right:5px;[/newclass]
last edit on Oct 25, 2019 10:11:58 GMT by Mari
options
quote
08. a-b-c-'s of code written May 18, 2019 20:24:06 GMT
the endless hunt
aliasleto, blobert, crow
pronounshe / they
1,587written posts
ullaearned bits
onlinecurrently
ulla
Administrator
ulla Avatar
in turning divine, we tangle endlessly
[nospaces]

[attr="class","ullaBG"]
[attr="class","ullaBGIn"]
[attr="class","ullaTitle"]ulla's a-b-c's of code

[attr="class","ullaUpdates"]
may 18 after telling myself to do this challenge ever since leap posted it, i'm finally putting my foot in the door with this template to hopefully force myself to actually do it. it'll probably be incredibly slow going, but nothing ventured nothing gained B )

[attr="class","ullaBarBG"]
[attr="class","ullaBar"]
posting 1/5

[attr="class","ullaBarBG"]
[attr="class","ullaBar"]
plotting 1/5

[attr="class","ullaBarBG"]
[attr="class","ullaBar"]
tracking 0/5

[attr="class","ullaBarBG"]
[attr="class","ullaBar"]
necessity 0/2

[attr="class","ullaBarBG"]
[attr="class","ullaBar"]
technology 0/2

[attr="class","ullaBarBG"]
[attr="class","ullaBar"]
total 2/26



[attr="class","ullaBody"]

[attr="class","ullaCode"][attr="class","ra ra-raven"]all ends well
multiplotter


[attr="class","ullaCode"][attr="class","ra ra-raven"]bitches broken hearts
posting template


[attr="class","ullaCode"][attr="class","ra ra-raven"]code name
code type


[attr="class","ullaCode"][attr="class","ra ra-raven"]code name
code type


[attr="class","ullaCode"][attr="class","ra ra-raven"]code name
code type


[attr="class","ullaCode"][attr="class","ra ra-raven"]code name
code type


[attr="class","ullaCode"][attr="class","ra ra-raven"]code name
code type


[attr="class","ullaCode"][attr="class","ra ra-raven"]code name
code type


[attr="class","ullaCode"][attr="class","ra ra-raven"]code name
code type


[attr="class","ullaCode"][attr="class","ra ra-raven"]code name
code type



[attr="class","ullaFoot"][attr="class","th th-spotify"]listen to the entire playlist on spotify




[newclass=.ullaBG]background:#fff;height:590px;padding:5px;width:550px;border:#ccc 1px solid;margin:15px;[/newclass]

[newclass=.ullaBGIn]height:550px;width:550px;background:#e8ebe8;background-image:url(https://k.nickpic.host/biRIrN.png);background-position:right bottom;background-repeat: no-repeat;overflow:hidden;[/newclass]

[newclass=.ullaTitle]font-family:roboto;font-size:40px;text-align:left;line-height:80px;margin-left:20px;color:#6787af;text-shadow:#fff 1px 0,#fff 0 1px,#fff -1px 0,#fff 0 -1px;font-style:italic;[/newclass]

[newclass=.ullaBody]float:left;margin:20px;margin-top:-10px;width:280px;height:480px;overflow:auto;[/newclass]

[newclass=.ullaUpdates]float:right;background-color:rgba(255,255,255,.7);margin:20px;padding:10px 15px;width:180px;margin-bottom:-100%;border-radius:5px;font-family:trebuchet ms;font-size:9px;text-transform:uppercase;color:#3a3a3a;text-shadow:#fff 1px 0,#fff 0 1px,#fff -1px 0,#fff 0 -1px;line-height:11px;text-align:justify;opacity:0;margin-top:40px;transition:.5s;[/newclass]

[newclass=.ullaUpdates b]color:#6787af;[/newclass]

[newclass=.ullaUpdates b:after]content:' » ';[/newclass]

[newclass=.ullaBG:hover .ullaUpdates]margin-top:0px;opacity:.99999;transition:.5s;[/newclass]

[newclass=.ullaCode]font-family:roboto;text-shadow:#fff 1px 0,#fff 0 1px,#fff -1px 0,#fff 0 -1px;font-size:18px;text-transform:uppercase;color:#aaa;text-align:left;margin:10px;margin-bottom:20px;margin-left:30px;[/newclass]

[newclass=.ullaCode div:nth-child(2)]font-family:trebuchet ms;font-size:10px;[/newclass]

[newclass=.ullaCode div:nth-child(3)]font-family:trebuchet ms;font-size:10px;[/newclass]

[newclass=.ullaCode span]float:left;margin-right:-100%;font-size:43px;margin-left:-35px;margin-top:-5px;color:#6787af;opacity:.5;[/newclass]

[newclass=.ullaCode a]text-decoration:none;color:#aaa;[/newclass]

[newclass=.ullaCode::first-letter]color:#6787af;[/newclass]

[newclass=.ullaFoot]background-color:#6787af;height:40px;line-height:40px;color:#e8ebe8;font-family:roboto;text-transform:uppercase;font-size:11px;letter-spacing:1px;text-decoration:none;overflow:hidden;width:100%;[/newclass]

[newclass=.ullaFoot a]text-decoration:none;color:#e8ebe8;[/newclass]

[newclass=.ullaFoot span]float:left;font-size:50px;margin-right:-100%;margin-left:85px;margin-top:-5px;opacity:.3;[/newclass]

[newclass=.ullaBody::-webkit-scrollbar]width:0[/newclass]

[newclass=.ullaBarBG]background-color:rgba(204, 204, 204, .5);border-radius:10px;margin:10px 0 5px 0;padding:3px 5px;text-align:right;overflow:hidden;line-height:12px;height:13px;[/newclass]

[newclass=.ullaBar]width:5%;margin:-5px;background-color:rgba(103, 135, 175, .7);float:left;height:20px;margin-bottom:-100%;[/newclass]
[googlefont=Roboto][googlefont=Sacramento]
last edit on May 31, 2019 12:11:06 GMT by ulla
options
quote
08. a-b-c-'s of code written May 22, 2019 6:24:26 GMT
praise the cats!
aliasthomas, breezescodes
pronounshe/him
899written posts
bcearned bits
offlinecurrently
bc
Summer '19 Bingo Completionist
bc Avatar
this is my murder mittens ^-^
oh boy yup i'm doing this thing aren't i. maybe some of them will be pb too if i have enough patience to deal with the weirdness that is proboards bbcode/style tag rip.
posting 0/5
plotting 0/5
tracking 0/5
necessities 0/5
technology 0/5

options
quote
08. a-b-c-'s of code written Jul 3, 2019 17:36:54 GMT
0written posts
Deletedearned bits
offlinecurrently
Deleted
Deleted Avatar
an attempt will be made[break]
1/5 posting[break]
0/5 tracking[break]
0/5 plotting[break]
0/2 technology[break]
0/2 site necessity 

[break]

[attr="class","codeBorder"]
[attr="class","codeSpotify"][attr="class","th th-spotify"]listen on spotify

[attr="class","codeBG"]
[attr="class","codeBox"]

[attr="class","codeABC"]angry seas
[attr="class","codeType"]» code type

[attr="class","ra ra-spider-face"]


[attr="class","codeABC"]blue monday
[attr="class","codeType"]» code type

[attr="class","ra ra-spider-face"]


[attr="class","codeABC"]compass
[attr="class","codeType"]» code type

[attr="class","ra ra-spider-face"]


[attr="class","codeABC"]do i wanna know
[attr="class","codeType"]» code type

[attr="class","ra ra-spider-face"]


[attr="class","codeABC"]electric eye
[attr="class","codeType"]» code type

[attr="class","ra ra-spider-face"]


[attr="class","codeABC"]fake plastic trees
[attr="class","codeType"]» code type

[attr="class","ra ra-spider-face"]


[attr="class","codeABC"]ghost story
[attr="class","codeType"]» code type

[attr="class","ra ra-spider-face"]


[attr="class","codeABC"]handmade heaven
[attr="class","codeType"]» code type

[attr="class","ra ra-spider-face"]


[attr="class","codeABC"]in the next life
[attr="class","codeType"]» expanding post

[attr="class","ra ra-spider-face"]


[attr="class","codeABC"]joan of arc
[attr="class","codeType"]» code type

[attr="class","ra ra-spider-face"]


[attr="class","codeABC"]karma police
[attr="class","codeType"]» code type

[attr="class","ra ra-spider-face"]


[attr="class","codeABC"]laura
[attr="class","codeType"]» code type

[attr="class","ra ra-spider-face"]


[attr="class","codeABC"]monsters
[attr="class","codeType"]» code type

[attr="class","ra ra-spider-face"]


[attr="class","codeABC"]night reconnaissance
[attr="class","codeType"]» code type

[attr="class","ra ra-spider-face"]


[attr="class","codeABC"]oleander
[attr="class","codeType"]» code type

[attr="class","ra ra-spider-face"]


[attr="class","codeABC"]pop/stars
[attr="class","codeType"]» code type

[attr="class","ra ra-spider-face"]


[attr="class","codeABC"]queen
[attr="class","codeType"]» code type

[attr="class","ra ra-spider-face"]


[attr="class","codeABC"]running up that hill
[attr="class","codeType"]» code type

[attr="class","ra ra-spider-face"]


[attr="class","codeABC"]sound of silence
[attr="class","codeType"]» code type

[attr="class","ra ra-spider-face"]


[attr="class","codeABC"]the ghost who walks
[attr="class","codeType"]» code type

[attr="class","ra ra-spider-face"]


[attr="class","codeABC"]untouched
[attr="class","codeType"]» code type

[attr="class","ra ra-spider-face"]


[attr="class","codeABC"]vampire smile
[attr="class","codeType"]» code type

[attr="class","ra ra-spider-face"]


[attr="class","codeABC"]wolf & i
[attr="class","codeType"]» code type

[attr="class","ra ra-spider-face"]


[attr="class","codeABC"]xo
[attr="class","codeType"]» code type

[attr="class","ra ra-spider-face"]


[attr="class","codeABC"]you ruin me
[attr="class","codeType"]» code type

[attr="class","ra ra-spider-face"]


[attr="class","codeABC"]zombie
[attr="class","codeType"]» code type

[attr="class","ra ra-spider-face"]




[attr="class","codeCred"]art by tesslyn




[Googlefont=Roboto][Googlefont=Josefin+Sans][Googlefont=Quicksand]
[nospaces]

[newclass=.codeBorder] border:1px solid #ccc;padding:5px;width:520px;background-color:#fff; [/newclass]

[newclass=.codeBG] background-image:url('https://i.imgur.com/9bBVzV9.png');height:679px;width:500px;padding:10px;[/newclass]

[newclass=.codeSpotify] letter-spacing:1px;overflow:hidden;text-align:left;background-color:#1a253b;color:#7183a9;height:50px;font-family:Josefin Sans;font-size:12px;line-height:55px;text-transform:uppercase; [/newclass]
[newclass=.codeSpotify a] color:#62759e!important;text-decoration:none; [/newclass]
[newclass=.codeSpotify .th] float:left;font-size:55px;opacity:.4; [/newclass]

[newclass=.codeBox] height:370px;padding-top:3px;text-align:justify;overflow:auto; [/newclass]

[newclass=.codeBox::-webkit-scrollbar] width:0px; [/newclass]

[newclass=.codeABC] font-family:Roboto;background-color:rgba(255,255,255,0.2);font-size:13px;height:30px;overflow:hidden;display:inline-block;min-width:140px;color:#1a253b;margin:5px 8px 5px 8px;padding:5px;border-radius:5px;line-height:20px;text-shadow: #98a3b7 1px 0, #98a3b7 0 1px, #98a3b7 -1px 0, #98a3b7 0 -1px; [/newclass]

[newclass=.codeABC a] color:#23355b!important;text-decoration:none; [/newclass]

[newclass=.codeType] font-size:10px;line-height:10px;font-family:Josefin Sans;text-shadow:none;color:#212121;font-style:italic; [/newclass]

[newclass=.codeABC .ra] z-index:1;transition:.5s;text-shadow:none;opacity:.5;margin-right:-10px;margin-top:-43px;font-size:35px;float:right;padding:3; [/newclass]
[newclass=.ra:hover] opacity:1;transition:.5s;color:#1a253b; [/newclass]

[newclass=.codeCred] float:right;margin-top:299px; [/newclass]
[newclass=.codeCred a] color:#fff!important;text-decoration:none;font-style:italic;font-family:Quicksand;text-transform:uppercase;font-size:8px;letter-spacing:1px;opacity:.4;transition:.5s; [/newclass]
[newclass=.codeCred a:hover] opacity:1;transition:.5s; [/newclass]
last edit on Jul 5, 2019 2:55:16 GMT by Deleted
options
quote
08. a-b-c-'s of code written Aug 4, 2019 3:52:13 GMT
aliasiceguin
pronounsshe (doesn't mind)
31written posts
iceguinearned bits
offlinecurrently
iceguin
New Member
iceguin Avatar
[nospaces][googlefont="Barlow|Unica+One"]
[attr="class","harmonious"]
[attr="class","glitch"]
[attr="class","album"]
[attr="class","album"]
[attr="class","album"]
[attr="class","album"]
[attr="class","album"]


[attr="class","albumoverlay"](Art by Rafaarseb)


[attr="class","rightpannel"]

ABCs of Code




  1. Becoming Harmonious
    [attr="class","artist"]by the glitch mob

    Harmonious - a music template

  2. Hearts are Open Graves
    [attr="class","artist"]by elysian fields

    Open Graves - a posting template

  3. Xanadu
    [attr="class","artist"]by rush

    [Coming soon] - a map template
❄


[newclass=.harmonious .album] background: url('https://i.imgur.com/WdB39VV.png') no-repeat 50% 0; [/newclass]

[newclass=.harmonious] position: relative; box-sizing: border-box; width: 100%; margin:auto; padding: 15px; color: #e2dad6; text-align:right; border-radius: 10px; -moz-box-shadow: 5px 5px 13px rgba(30, 30, 30, 0.5); -webkit-box-shadow: 5px 5px 13px rgba(30, 30, 30, 0.5); box-shadow: 5px 5px 13px rgba(30, 30, 30, 0.5); font: 14px / 14px Barlow, Calibri, Gill Sans, Myriad Pro, Myriad, Tahoma, Geneva, Helvetica, Arial, sans-serif; overflow:hidden; background-color: #2d2d2d;[/newclass]
[newclass=.harmonious .rightpannel] position: absolute; top: 0px; right: 0px; left: 270px; bottom: 0px; overflow: auto; [/newclass]
[newclass=.harmonious h1] margin: 0px; margin-top: 15px; margin-right: 15px; font: 20px / 20px Unica One, Calibri, Gill Sans, Myriad Pro, Myriad, Tahoma, Geneva, Helvetica, Arial, sans-serif; text-align: right; [/newclass]
[newclass=.harmonious ol] margin:0px; padding: 0px; margin-right: 7px; margin-left: 5px; counter-reset: songs; list-style-type: none; padding-bottom: 10px; [/newclass]
[newclass=.harmonious li] position: relative; padding: 11px 0px; counter-increment: songs; transition: all 0.5s; border-bottom: 1px solid rgba(226, 218, 214, 0.3); [/newclass]
[newclass=.harmonious li marquee] color: transparent; [/newclass]
[newclass=.harmonious li .artist, .harmonious li marquee] position: absolute; bottom: 0px; right: 0px; opacity: 0.7; font-size: 10px; text-transform: uppercase; transition: all 1s; [/newclass]
[newclass=.harmonious li:hover marquee] color: inherit; [/newclass]
[newclass=.harmonious li:hover .artist] color: transparent; [/newclass]
[newclass=.harmonious li::before] content: counter(songs); float:left; font-size: 10px; margin-right: 20px; [/newclass]
[newclass=.harmonious li a, .harmonious li b] position: relative; display: inline-block; max-width: 85%; font-family: Barlow, Calibri, Gill Sans, Myriad Pro, Myriad, Tahoma, Geneva, Helvetica, Arial, sans-serif; font-size: 12px; [/newclass]
[newclass=.harmonious a, .harmonious b] color: #ffa489; text-decoration: none; [/newclass]
[newclass=.harmonious li a:hover, .harmonious li b:hover] display:inline-block; animation-name: glitch-anim-text; animation-duration: 4s; animation-timing-function: linear; animation-iteration-count: infinite; animation-delay: 0.2s; [/newclass]
[newclass=.harmonious h1::after] content: ''; display: block; height: 2px; width: 60%; background-color: #ffa489; position: absolute; right: 0; [/newclass]
[newclass=.harmonious .glitch] position: relative; width: 250px; height: 250px; overflow: hidden; border-radius: 5px; [/newclass]
[newclass=.harmonious .glitch .albumoverlay] opacity: 0; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(45, 45, 45, 0.7); text-align:center; padding-top: 200px; font-size: 10px; text-transform: uppercase; z-index: 5; transition: 1s all; color: #e2dad6;[/newclass]
[newclass=.harmonious .glitch .albumoverlay::before] content: ''; opacity: 0.8; display: block; border: 15px solid #ffa489; box-sizing: border-box; width: 150px; height: 150px; position: absolute; top: 50%; margin-top: -75px; left: 50%; margin-left: -75px; border-radius: 75px; [/newclass]
[newclass=.harmonious .glitch .albumoverlay::after] content: ''; opacity: 0.8; display: block; box-sizing: border-box; width: 0; height: 0; border-top: 35px solid transparent; border-bottom: 35px solid transparent; border-left: 60px solid #ffa489; position: absolute; top: 50%; margin-top: -35px; left: 50%; margin-left: -25px; [/newclass]
[newclass=.harmonious .glitch:hover .albumoverlay] opacity: 1; [/newclass]
[newclass=.harmonious .album] position: absolute; width: calc(100% + 4px); height: calc(100% + 40px); background-color: transparent; background-size: cover; transform: translate3d(0,0,0); background-blend-mode: none; -moz-box-shadow: inset 0 0 25px #1e1e1e; -webkit-box-shadow: inset 0 0 25px #1e1e1e; box-shadow: inset 0 0 25px #1e1e1e; z-index: 4; [/newclass]
[newclass=.harmonious .glitch .album:nth-child(2)] transform: translate3d(0, 2px, 0); animation: glitch-anim-1 2.25s infinite linear alternate; [/newclass]
[newclass=.harmonious .glitch .album:nth-child(3)] transform: translate3d(0, -2px, 0); animation: glitch-anim-2 2.25s infinite linear alternate; [/newclass]
[newclass=.harmonious .glitch .album:nth-child(4)] transform: translate3d(-20px, 0, 0) scale3d(-1,-1,1); animation: glitch-anim-3 2.25s infinite linear alternate; [/newclass]
[newclass=.harmonious .glitch .album:nth-child(5)] animation: glitch-anim-flash 1.5s steps(1,end) infinite; [/newclass]
[newclass=.harmonious .album:nth-child(3)] background-color: #af4563; background-blend-mode: multiply; [/newclass]
[newclass=.harmonious ::-webkit-scrollbar] width: 0px; [/newclass]
[newclass=.keyframehellscape] }@keyframes glitch-anim-1 { 0% { -webkit-clip-path: polygon(2% 0, 5% 0, 5% 100%, 2% 100%); clip-path: polygon(2% 0, 5% 0, 5% 100%, 2% 100%); } 10% { -webkit-clip-path: polygon(15% 0, 15% 0, 15% 100%, 15% 100%); clip-path: polygon(15% 0, 15% 0, 15% 100%, 15% 100%); } 20% { -webkit-clip-path: polygon(10% 0, 20% 0, 20% 100%, 10% 100%); clip-path: polygon(10% 0, 20% 0, 20% 100%, 10% 100%); } 30% { -webkit-clip-path: polygon(1% 0, 2% 0, 2% 100%, 1% 100%); clip-path: polygon(1% 0, 2% 0, 2% 100%, 1% 100%); } 40% { -webkit-clip-path: polygon(33% 0, 33% 0, 33% 100%, 33% 100%); clip-path: polygon(33% 0, 33% 0, 33% 100%, 33% 100%); } 50% { -webkit-clip-path: polygon(44% 0, 44% 0, 44% 100%, 44% 100%); clip-path: polygon(44% 0, 44% 0, 44% 100%, 44% 100%); } 60% { -webkit-clip-path: polygon(50% 0, 20% 0, 20% 100%, 50% 100%); clip-path: polygon(50% 0, 20% 0, 20% 100%, 50% 100%); } 70% { -webkit-clip-path: polygon(70% 0, 70% 0, 70% 100% 70%, 70% 100%); clip-path: polygon(70% 0, 70% 0, 70% 100% 70%, 70% 100%); } 80% { -webkit-clip-path: polygon(80% 0, 80% 0, 80% 100% 80%, 80% 100%); clip-path: polygon(80% 0, 80% 0, 80% 100% 80%, 80% 100%); } 90% { -webkit-clip-path: polygon(50% 0, 55% 0, 55% 100%, 50% 100%); clip-path: polygon(50% 0, 55% 0, 55% 100%, 50% 100%); } 100% { -webkit-clip-path: polygon(70% 0, 80% 0, 80% 100%, 70% 100%); clip-path: polygon(70% 0, 80% 0, 80% 100%, 70% 100%); } } @keyframes glitch-anim-2 { 0% { -webkit-clip-path: polygon(25% 0, 30% 0, 30% 100%, 25% 100%); clip-path: polygon(25% 0, 30% 0, 30% 100%, 25% 100%); } 15% { -webkit-clip-path: polygon(3% 0, 3% 0, 3% 100%, 3% 100%); clip-path: polygon(3% 0, 3% 0, 3% 100%, 3% 100%); } 22% { -webkit-clip-path: polygon(5% 0, 20% 0, 20% 100%, 5% 100%); clip-path: polygon(5% 0, 20% 0, 20% 100%, 5% 100%); } 31% { -webkit-clip-path: polygon(20% 0, 20% 0, 20% 100%, 20% 100%); clip-path: polygon(20% 0, 20% 0, 20% 100%, 20% 100%); } 45% { -webkit-clip-path: polygon(40% 0, 40% 0, 40% 100%, 40% 100%); clip-path: polygon(40% 0, 40% 0, 40% 100%, 40% 100%); } 51% { -webkit-clip-path: polygon(52% 0, 59% 0, 59% 100%, 52% 100%); clip-path: polygon(52% 0, 59% 0, 59% 100%, 52% 100%); } 63% { -webkit-clip-path: polygon(60% 0, 60% 0, 60% 100%, 60% 100%); clip-path: polygon(60% 0, 60% 0, 60% 100%, 60% 100%); } 76% { -webkit-clip-path: polygon(75% 0, 75% 0, 75% 100%, 75% 100%); clip-path: polygon(75% 0, 75% 0, 75% 100%, 75% 100%); } 81% { -webkit-clip-path: polygon(65% 0, 40% 0, 40% 100%, 65% 100%); clip-path: polygon(65% 0, 40% 0, 40% 100%, 65% 100%); } 94% { -webkit-clip-path: polygon(45% 0, 50% 0, 50% 100%, 45% 100%); clip-path: polygon(45% 0, 50% 0, 50% 100%, 45% 100%); } 100% { -webkit-clip-path: polygon(14% 0, 33% 0, 33% 100%, 14% 100%); clip-path: polygon(14% 0, 33% 0, 33% 100%, 14% 100%); } } @keyframes glitch-anim-3 { 0% { -webkit-clip-path: polygon(1% 0, 3% 0, 3% 100%, 1% 100%); clip-path: polygon(1% 0, 3% 0, 3% 100%, 1% 100%); } 5% { -webkit-clip-path: polygon(10% 0, 9% 0, 9% 100%, 10% 100%); clip-path: polygon(10% 0, 9% 0, 9% 100%, 10% 100%); } 10% { -webkit-clip-path: polygon(5% 0, 6% 0 6% 100%, 5% 100%); clip-path: polygon(5% 0, 6% 0 6% 100%, 5% 100%); } 25% { -webkit-clip-path: polygon(20% 0, 20% 0, 20% 100%, 20% 100%); clip-path: polygon(20% 0, 20% 0, 20% 100%, 20% 100%); } 27% { -webkit-clip-path: polygon(10% 0, 10% 0, 10% 100%, 10% 100%); clip-path: polygon(10% 0, 10% 0, 10% 100%, 10% 100%); } 30% { -webkit-clip-path: polygon(30% 0, 25% 0, 25% 100%, 30% 100%); clip-path: polygon(30% 0, 25% 0, 25% 100%, 30% 100%); } 33% { -webkit-clip-path: polygon(15% 0, 16% 0, 16% 100%, 15% 100%);; clip-path: polygon(15% 0, 16% 0, 16% 100%, 15% 100%); } 37% { -webkit-clip-path: polygon(40% 0, 39% 0, 39% 100%, 40% 100%);; clip-path: polygon(40% 0, 39% 0, 39% 100%, 40% 100%); } 40% { -webkit-clip-path: polygon(20% 0, 21% 0, 21% 100%, 20% 100%); clip-path: polygon(20% 0, 21% 0, 21% 100%, 20% 100%); } 45% { -webkit-clip-path: polygon(60% 0, 55% 0, 55% 100%, 60% 100%); clip-path: polygon(60% 0, 55% 0, 55% 100%, 60% 100%); } 50% { -webkit-clip-path: polygon(30% 0, 31% 0, 31% 100%, 30% 100%); clip-path: polygon(30% 0, 31% 0, 31% 100%, 30% 100%); } 53% { -webkit-clip-path: polygon(70% 0, 69% 0, 69% 100%, 70% 100%); clip-path: polygon(70% 0, 69% 0, 69% 100%, 70% 100%); } 57% { -webkit-clip-path: polygon(40% 0, 41% 0, 41% 100%, 40% 100%); clip-path: polygon(40% 0, 41% 0, 41% 100%, 40% 100%); } 60% { -webkit-clip-path: polygon(80% 0, 75% 0, 75% 100%, 80% 100%); clip-path: polygon(80% 0, 75% 0, 75% 100%, 80% 100%); } 65% { -webkit-clip-path: polygon(50% 0, 51% 0, 51% 100%, 50% 100%); clip-path: polygon(50% 0, 51% 0, 51% 100%, 50% 100%); } 70% { -webkit-clip-path: polygon(90% 0, 90% 0, 90% 100%, 90% 100%); clip-path: polygon(90% 0, 90% 0, 90% 100%, 90% 100%); } 73% { -webkit-clip-path: polygon(60% 0, 60% 0, 60% 100%, 60% 100%); clip-path: polygon(60% 0, 60% 0, 60% 100%, 60% 100%); } 80% { -webkit-clip-path: polygon(100% 0, 99% 0, 99% 100%, 100% 100%); clip-path: polygon(100% 0, 99% 0, 99% 100%, 100% 100%); } 100% { -webkit-clip-path: polygon(70% 0, 71% 0, 71% 100%, 70% 100%); clip-path: polygon(70% 0, 71% 0, 71% 100%, 70% 100%); } } @keyframes glitch-anim-flash { 0% { opacity: 0.2; transform: translate3d(20px, 2px, 0); } 15%, 100% { opacity: 0; transform: translate3d(0,0,0); } } @keyframes glitch-anim-text { 0% { transform: translate3d(-20px,0,0) scale3d(-1,-1,1); -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%); clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%); } 2% { -webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%); clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%); } 4% { -webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%); clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%); } 5% { -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%); clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%); } 6% { -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%); clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%); } 7% { -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%); clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%); } 8% { -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%); clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%); } 9% { -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%); clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%); } 9.9% { transform: translate3d(-20px,0,0) scale3d(-1,-1,1); } 10%, 100% { transform: translate3d(0,0,0) scale3d(1,1,1); -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); } [/newclass]
last edit on Mar 27, 2020 3:25:37 GMT by iceguin
options
quote
08. a-b-c-'s of code written Mar 1, 2020 5:08:23 GMT
frog on the floor
aliasfreiheit, microwaved burrito
pronounsany
1,544written posts
pharaoh leapearned bits
offlinecurrently
pharaoh leap
Administrator
pharaoh leap Avatar
i've been having some pretty dark thoughts.
[nospaces]
[attr="class","murderby"]
[attr="class","murderby-img"]
[attr="class","murderby-bar"]


MURDER BY NUMBERS

a-b-c's of code challenge

[attr="class","murderby-bulk"]
[attr="class","murderby-left"]

[attr="class","murderby-left-1"]

POSTING: 2 / 5


[attr="class","murderby-left-1"]

PLOTTING: 1 / 5


[attr="class","murderby-left-1"]

TRACKING: 2 / 5


[attr="class","murderby-left-1"]

NECESSITIES: 0 / 2


[attr="class","murderby-left-1"]

TECHNOLOGY: 0 / 2


[attr="class","murderby-left-1"]

TOTAL: 7 / 26



[attr="class","murderby-left-2"]At the time of writing this, I've already finished about 85% of these templates... about a year ago. To celebrate Leap Day, though, I figured it was time to finally get around to officially starting this. Maybe the time constraint will give me the necessary motivation to, uh, actually finish these templates, huh? We'll see! You can listen to the playlist by following the link.


[attr="class","murderby-right"]
[attr="class","murderby-right-1"]


[attr="class","c"][attr="class","th th-music-o"]

all guns blazing


CSS ART + ANIMATION


[attr="class","c"][attr="class","th th-music-o"]

big talk


POSTING TEMPLATE


[attr="class","c"][attr="class","th th-music-o"]

change


PLOTTER TEMPLATE


[attr="class","c"][attr="class","th th-music-o"]

do you believe in love?


RELATIONSHIP TRACKER


[attr="class","c"][attr="class","th th-music-o"]

eat me up alive


THREAD TRACKER


[attr="class","c"][attr="class","th th-music-o"]

1492


TIMELINE TEMPLATE


[attr="class","c"][attr="class","th th-music-o"]

get the funk out


POSTING TEMPLATE


[attr="class","th th-music-o"]

hang on, lucy


MULTI-PLOTTER TEMPLATE


[attr="class","th th-music-o"]

i knew it


PLOTTER TEMPLATE


[attr="class","th th-music-o"]

jump


DEVELOPMENT TEMPLATE


[attr="class","th th-music-o"]

kickstart my heart


POSTING TEMPLATE


[attr="class","th th-music-o"]

living dead girl


TECHNOLOGY TEMPLATE


[attr="class","th th-music-o"]

modern day cowboy


POSTING TEMPLATE


[attr="class","th th-music-o"]

no more angels


THREAD TRACKER


[attr="class","th th-music-o"]

on top of the world


NECESSITIES TEMPLATE


[attr="class","th th-music-o"]

paranoid


DEVELOPMENT TEMPLATE


[attr="class","th th-music-o"]

queen of the reich


POSTING TEMPLATE


[attr="class","th th-music-o"]

rebel yell


MULTI-PLOTTER TEMPLATE


[attr="class","th th-music-o"]

shadowgraph


TECHNOLOGY TEMPLATE


[attr="class","th th-music-o"]

the hourglass


APPLICATION TEMPLATE


[attr="class","th th-music-o"]

unlucky mr. lucky


MEMBER DIRECTORY TEMPLATE


[attr="class","th th-music-o"]

victory


MULTI-PLOTTER TEMPLATE


[attr="class","th th-music-o"]

with a head full of steam


APPLICATION TEMPLATE


[attr="class","th th-music-o"]

x-t-c


CHARACTER TRACKER


[attr="class","th th-music-o"]

you're the boss


THREAD TRACKER


[attr="class","th th-music-o"]

zetsubou billy


PLAYLIST TEMPLATE





[googlefont=Roboto:400,700]
[googlefont=Poppins:400,800]
[newclass=.murderby]margin:25px 0px;border:solid 1px #e3e3e3;padding:24px;background-color:#e9e9e9;width:600px;color:#222222;[/newclass]
[newclass=.murderby-img]width:600px;height:150px;[/newclass]
[newclass=.murderby-img img]height:150px;width:600px;[/newclass]
[newclass=.murderby-bar]background-color:#c43f3f;position:relative;overflow:hidden;[/newclass]
[newclass=.murderby-bar h1]position:absolute;height:106px;width:750px;background-repeat:no-repeat;background-image:url(https://i.ibb.co/qmQk1h7/Flower-Power-Tower.png);background-position:center center;mix-blend-mode:multiply;opacity:.1;margin:0px;[/newclass]
[newclass=.murderby-bar h2]position:relative;margin:0px;border-top:solid 3px rgba(33,33,33,.1);border-bottom:solid 3px rgba(33,33,33,.1);font:bold 10px Roboto;text-transform:uppercase;line-height:10px;text-align:left;padding:30px;[/newclass]
[newclass=.murderby-bar h2 div]font:800 30px Poppins;line-height:25px;padding-bottom:5px;color:#eeeeee;text-shadow:.75px .75px 0px rgba(33,33,33,.15), -.75px .75px 0px rgba(33,33,33,.15), .75px -.75px 0px rgba(33,33,33,.15), -.75px -.75px 0px rgba(33,33,33,.15);[/newclass]
[newclass=.murderby-left]background-color:#222222;float:left;padding:30px;width:150px;color:#eeeeee;font:10px Roboto;text-transform:uppwercase;text-align:justify;[/newclass]
[newclass=.murderby-left-1]background-color:#292929;padding:5px;margin-bottom:5px;[/newclass]
[newclass=.murderby-left-1 h1]position:absolute;width:137px;text-align:right;margin:0px;font:bold 10px Roboto;line-height:10px;padding:3px 0px;z-index:1;text-shadow:.75px .75px #292929,-.75px .75px 0px #292929,-.75px -.75px 0px #292929,.75px -.75px 0px #292929;[/newclass]
[newclass=.murderby-left-1 h2]position:relative;margin:0px;height:16px;background-color:#c43f3f;[/newclass]
[newclass=.murderby-left-2]margin-top:25px;font-size:11px;line-height:14px;letter-spacing:.15px;height:179px;[/newclass]
[newclass=.murderby-left-2 a]font:bold 11px Roboto;line-height:14px;color:#c43f3f!important;[/newclass]
[newclass=.murderby-right]margin-left:210px;padding:25px;background-color:#eeeeee;border-bottom:solid 5px #c43f3f;[/newclass]
[newclass=.murderby-right-1]height:390px;overflow:auto;padding-right:15px;[/newclass]
[newclass=.murderby-right-1::-webkit-scrollbar-thumb:vertical]border:solid 1px #e3e3e3;background-color:#e9e9e9;border-radius:0px;[/newclass]
[newclass=.murderby-right-1::-webkit-scrollbar]border:none!important;background-color:transparent!important;border-radius:0px;width:5px;[/newclass]
[newclass=.murderby a]text-decoration:none!important;[/newclass]
[newclass=.murderby-right-1 div]border:solid 1px #e3e3e3;overflow:hidden;background-color:#e9e9e9;padding:19px;text-align:left;color:#bbbbbb;margin-bottom:10px;font:bold 10px Roboto;line-height:10px;cursor:default; }.murderby-right-1 .c { color:#222222!important;border-right:solid 2px #c43f3f!important;cursor:pointer!important; }.murderby-right-1 div i { float:left;color:#bbbbbb;margin-right:15px; }.murderby-right-1 .c i { color:#c43f3f!important;[/newclass]
[newclass=.murderby-right-1 div i::before]display:block;font-size:30px;line-height:30px;[/newclass]
[newclass=.murderby-right-1 div h1]margin:0px;font:bold 20px Roboto;line-height:15px;padding-bottom:5px;white-space:nowrap;letter-spacing:-.35px;[/newclass]
last edit on Feb 11, 2024 10:28:23 GMT by pharaoh leap
options
quote
08. a-b-c-'s of code written Mar 16, 2021 6:23:33 GMT
86written posts
cinearned bits
offlinecurrently
cin
Junior Member
cin Avatar
If this is not love, what should we call it?
i code everything for jcink and im v bad at converting to pb so...have a github link bc i also coded a code tracker that can't be used on pb. the webpage should be ok (but i coded it up real quick so it might be ugly and broken someone pls tell me if it is ty) to navigate around even if it was v hastily done.

i've been doing this challenge off and on for ages bc i keep on forgetting it exists so here's 6 templates (also the code tracker is actually a relationship so i'm going to count it as a tracker??? pls..) & a bonus one because i'm so disorganised i forgot i used a letter.

link to github!

4/5 posting templates
2/5 tracking templates
0/2 site necessities
0/2 technology

Reply