index.

Thank you all! Do you mean where to paste the CSS? if so, you need to activate the "Advanced mode" and paste the css in the first field. Check this screenshot: http://prntscr.com/fbb3kf/direct Next time try searching it online, or ask on the Help xat. wow, Danneh praised me, I can happily die now

At the time I didn't know I was going to share it, but it was supposed to make it harder for thieves to change stuff

@SlOom nope.png (at least not right now)

welp, maybe I should dump everything I've made so far, before I delete it without knowing. Most of them are partially completed (because I'm lazy) and also hard to edit because of the verbose css, but it may be useful to just crop out a few chunks of css and paste on your own xatspaces. You're free to do anything you want with it after all. Before asking questions about how to edit stuff, make sure to right click > inspect on the element you want to change, and try to figure it out by yourself. ----------------------------------------------------------------------------------------------------- Requires (me) power! Don't forget to remove the 'body{' at the beginning of each css file! ------------------------------------------------------------------------------------------------------ Old stuff: 1. one of my first xatspaces => https://codepen.io/anon/pen/pPpmEd 2. facebook => https://codepen.io/anon/pen/xdpvLp 3. navigation tabs (incomplete) => https://codepen.io/anon/pen/JNMQXY 4. login page => https://codepen.io/anon/pen/KmQPPm 5. phone (incomplete) => https://codepen.io/anon/pen/NjORwj Advanced stuff (verbose css): 6. was used on a xs contest (change --scheme for different accent color) => https://codepen.io/anon/pen/MmrdRz 7. tumblr-ish xatspace (updated 28/07) => https://codepen.io/anon/pen/YxyMLm 8. friends list => https://codepen.io/anon/pen/xdpvMz 9. futuristic clock (inspired by David Majdandzic) => https://codepen.io/anon/pen/BZOGOw Misc. (old stuff I won't touch again) homepage => https://codepen.io/anon/pen/JJaxma ??? => https://codepen.io/anon/pen/WOgPov material xatspace => https://codepen.io/anon/pen/QgVYRp page navigator => https://codepen.io/anon/pen/RgYvWe I may update this post in the future in case I find more stuff I made in the past. ps: I appreciate all the compliments, thank you https://codepen.io/anon/pen/BRYBVR

let the memes begin

I hope you like circles. LIVE PREVIEW CSS: background:var(--bg)}/* ❮/❯ with ❤ by index - iiiiiiii (409914266) */:root{--bg:#000;--scheme:#5f55de;--icon:url("\68\74\74\70\3a\2f\2f\69\36\37\2e\74\69\6e\79\70\69\63\2e\63\6f\6d\2f\39\6b\6f\77\65\76\2e\70\6e\67");--pos:18px;--border:3px;--time:4s;--tr:20,80px;--delay:0ms;--x:10px;display:table;margin:auto;overflow:hidden}:root:after{content:'';position:absolute;background:linear-gradient(0deg,var(--scheme)-500%,transparent);width:100%;height:50%;bottom:0;left:0}_:-ms-lang(x),:root{background:#000 url("\68\74\74\70\3a\2f\2f\69\36\33\2e\74\69\6e\79\70\69\63\2e\63\6f\6d\2f\39\6a\66\76\36\39\2e\70\6e\67")no-repeat center}_:-ms-lang(x),#xatstyme:not(iframe){display:none}::selection{background:#000}*{margin:0;padding:0;outline:0;text-decoration:none;-webkit-user-select:none;-ms-user-select:none;-moz-user-select:none;user-select:none;-webkit-user-drag:none;user-drag:none;-webkit-font-smoothing:subpixel-antialiased;text-rendering:optimizeLegibility;box-sizing:border-box;list-style:none}:root,body{height:100%}body{display:table-cell;vertical-align:middle}[class^="\26"],[id^="\26"]{display:flex;justify-content:center;align-items:center}[class$="\2d"],#_- li a{position:relative}[id$="\26"],[id="\26_\26"] li{position:fixed}._{width:calc(var(--x)*38);height:calc(var(--x)*38);background:url("\68\74\74\70\3a\2f\2f\69\36\33\2e\74\69\6e\79\70\69\63\2e\63\6f\6d\2f\39\6a\66\76\36\39\2e\70\6e\67")no-repeat center;margin:calc(var(--x)*3)}._{box-shadow:inset 0 0 0 var(--border) #fff}[id="\26_\26"],[id="\26_\26"] li{top:0;right:0;left:0;bottom:0}[id="\26_\26"]{z-index:-1;width:100%;height:100%}[id="\26_\26"] li{border:3px solid #000;margin:auto;width:calc(var(--x)*30);height:calc(var(--x)*30);box-shadow:inset 0 0 0 10px rgb(29, 27, 33),inset 0 0 0 15px rgb(4, 4, 4),inset 0 0 0 20px var(--scheme),inset 0 0 0 25px #fff}[id="\26_\26"] li:nth-child(n){animation:_ var(--time) infinite linear;-moz-animation:_ var(--time) infinite linear}[id="\26_\26"] li:nth-child(0){--time:4s}[id="\26_\26"] li:nth-child(1){--time:3s}[id="\26_\26"] li:nth-child(2){--time:2s}@keyframes _{from{transform:scale(0)}to{transform:scale(6);filter:opacity(0)}}@-moz-keyframes _{from{transform:scale(0)}to{transform:scale(6);filter:opacity(0)}}#_-{width:calc(var(--x)*15);height:calc(var(--x)*15);margin:-30px 0 0 -220px}#_-,#_- > a,#_- li,[id="\26m"],[id="\26m"] a{position:absolute}#_- > a{opacity:0;z-index:-1;width:calc(var(--x)*6);height:calc(var(--x)*6);margin:-75px 0 0 -75px;border-radius:500px;background:url("\68\74\74\70\3a\2f\2f\69\36\36\2e\74\69\6e\79\70\69\63\2e\63\6f\6d\2f\66\78\67\6b\30\36\2e\6a\70\67")no-repeat center,var(--bg);overflow:hidden;box-shadow:inset 0 0 0 var(--border) #fff}#_-:target > a{--border:0;background:url("\68\74\74\70\3a\2f\2f\69\36\33\2e\74\69\6e\79\70\69\63\2e\63\6f\6d\2f\73\71\69\31\71\66\2e\70\6e\67")no-repeat center,#fff}[id="\26\61\64\64"],#_- li,#_- a,#_- > a,._,[id="\26_\26"] li{border-radius:50%}#_-:not(:target) > a:first-of-type,#_-:target > a:last-of-type{opacity:1;z-index:2}#_- li,#_- > a,#_-{left:50%;top:50%}#_- li{width:55px;height:55px;margin:-72px 0 0 -72px;transition:transform 500ms;z-index:1}#_- li:hover:not(:last-child) a{filter:invert(1);box-shadow:none;}#_- li:active{}#_-:target > li:nth-child(n){transition-delay:var(--delay);transform:translate(var(--tr))}#_-:target > li:nth-child(3){--delay:150ms;--tr:20px,80px}#_-:target > li:nth-child(4){--delay:75ms;--tr:60px,135px}#_-:target > li:nth-child(5){--delay:75ms;--tr:40px,-100px}#_- li a{transition:all .2s;box-shadow:inset 0 0 0 var(--border) #fff;display:block;width:100%;height:100%}#_- > a:hover{box-shadow:inset 0 0 0 var(--border) var(--scheme)}#_- li:nth-child(n) a{background:#000 var(--icon)no-repeat center var(--pos)}[id="\26m"]{width:80%;height:80%;top:-100%;transition:all .8s ease-in-out;left:0;right:0;margin:auto;z-index:3}[id="\26m"]:target{top:10%}[id="\26m"] a{top:calc(50% - 270px);right:calc(50% - 420px)}[id="\26m"] a:active{transform:scale(.9)}iframe{border:1px solid #fff}#_- > li:nth-child(5) a{background-color:var(--scheme);box-shadow:none;width:calc(var(--x)*4);height:calc(var(--x)*4);--pos:-70px}#_- > li:nth-child(5):hover a{background-color:#000;box-shadow:inset 0 0 0 3px var(--scheme);}[id="\26\61\64\64"]{width:100%;height:100%;background:#000;border:2px solid var(--scheme);opacity:0;transition:all .8s}[id="\26\61\64\64"] div{font:500 13px 'Arial',sans-serif}[id="\26\61\64\64"]:target{opacity:1}#_-> li:nth-child(4){--pos:-26px; HTML: <div class="_"> <ul id="_-"> <a href="#_-"></a> <a href="#"></a> <li><a href="#&m"></a></li> <li><a href="http://xat.com/web_gear/chat/editprofile.php"></a></li> <li><a href="#&add"></a></li> </ul> <div id="&add"> <div style="color:#fff;"> <h1>Anar</h1> <p>Type <span style="border-radius:30px;background:var(--scheme);color:#fff;-webkit-user-select:all;user-select:all;padding:.2em.8em">/f1313</span> to add me on xat.</p> </div> </div> </div> <div id="&m"> <a href="#"><img src="http://i68.tinypic.com/l9tg6.png"></a> [youtube:853:480:-mfcHxuP6jI:autoplay=1&loop=1&controls=0&disablekb=1&showinfo=0&start=0] </div> <ul id="&_&"> <li></li> <li></li> <li></li> </ul> If you don't like purple then change the variable "--scheme" to whatever color you like A lot of the features aren't supported by MS Edge nor Internet Explorer, so it'll only show the logo on the middle (you can change it if you want) and the music playing. I'll probably add more stuff until the deadline

LINK: http://i.imgur.com/lEjcPIG.png

Hello! LIVE PREVIEW INNER: BUTTON: #5C0CFF OUTER-CSS: :root{background:var(--y),var(--x)}/*CSS by iiiiiiii (409914266) - [ɪɴᴅᴇx]*/*{outline:0}*{text-decoration:none !important}:root{--x:url("\68\74\74\70\3a\2f\2f\69\2e\69\6d\67\75\72\2e\63\6f\6d\2f\58\5a\57\46\31\55\4a\2e\6a\70\67") top center / cover fixed}:root{--y:url("\68\74\74\70\3a\2f\2f\69\36\33\2e\74\69\6e\79\70\69\63\2e\63\6f\6d\2f\32\31\79\34\32\30\2e\70\6e\67") center repeat-y}:root{--p:url("\68\74\74\70\3a\2f\2f\69\36\34\2e\74\69\6e\79\70\69\63\2e\63\6f\6d\2f\72\6d\34\76\30\6e\2e\70\6e\67")no-repeat center top}table:nth-of-type(3) tr td:nth-child(even):not(:last-of-type),div[style="height: 16px"],table:nth-of-type(3) td:last-child,.btext2 img,[class*="_c"] img,tr[height="10"],[style="padding-top:24px"],table[height="10"],#twitter-widget-0,iframe[style^="border:none"],table:nth-of-type(4) td[width^="10"], td:empty{display:none !important}td[width='40'] img,td[width="2%"] img{opacity:0 !important}td[width="2%"] img,td[width="2%"] a{width:57px}td[width="2%"] img{height:57px}td[width="2%"] a{display:inline-block}td[width="2%"] a:nth-child(1){background:var(--p) -2px}td[width="2%"] a:nth-of-type(2){background:var(--p) -60px}td[width="2%"] a:nth-of-type(3){background:var(--p) -120px}td[width="2%"] a:nth-of-type(4){background:var(--p) -188px}td[width="2%"] a:nth-of-type(5){background:var(--p) -257px}td[width="2%"] a:nth-of-type(6){background:var(--p) -319px}td[width="2%"] a:nth-of-type(7){background:var(--p) -379px}td[width="2%"] a:nth-child(n):hover{box-shadow:inset 0 0 0 3px #fff}#chat embed{background:url("\68\74\74\70\3a\2f\2f\69\36\33\2e\74\69\6e\79\70\69\63\2e\63\6f\6d\2f\66\66\34\74\39\78\2e\70\6e\67")}td[width="2%"][rowspan]{position:absolute}td[width="2%"] a{transition:all .3s ease-in-out}.btext2,table[height="24"]{background:rgba(0,0,0,0.3)}.btext,.btext2{text-transform:uppercase}[class*="_c"],table[height="51"]{background:none !important}[class*="_c"]{border:none !important}:root:after,:root:before{content:''}:root:after,:root:before{z-index:-1}:root:after,:root:before{position:fixed}:root:after,:root:before{width:1px}:root:after,:root:before{top:0}:root:after,:root:before{height:100vh}:root:after,:root:before{background:#fff}:root:after{right:calc(50% + 365px)}:root:before{right:calc(50% - 366px)}td[width="2%"] a{border-radius:50%}td[width="2%"] a{background-color:rgba(255,255,255,0.3) !important}:root:after,:root:before{mix-blend-mode:overlay}table:nth-of-type(3) td[align="center"]:nth-of-type(3),.btext{position:relative}table:nth-of-type(3) td[align="center"]:nth-of-type(3){left:50px}td[width="2%"][rowspan]{left:5px}td[width="2%"][rowspan]{top:100px}table[height="51"]{padding:0.7em}.btext{bottom:15px}.btext{margin:0 10px 0 0}.btext{padding:0.5em 1em}.btext{border-radius:50px}.btext{background:#7745f1}.btext:hover{background:#5c3da9}.btext{cursor:pointer}.btext2{display:flex}.btext2{align-items:center}.btext2{justify-content:center}.btext2 td:nth-child(18) a img{display:block !important;} NOTE: Enable the chat box transparency

Hello! INNER: Button: #FFFFFF OUTER: :root{background:var(--y), var(--x)}/*by iiiiiiii (409914266) - [ɪɴᴅᴇx]*/:root{--x:url("\68\74\74\70\3a\2f\2f\69\2e\69\6d\67\75\72\2e\63\6f\6d\2f\58\71\46\71\43\4f\7a\2e\6a\70\67") top center fixed / cover}:root{--y:url("\68\74\74\70\3a\2f\2f\69\36\33\2e\74\69\6e\79\70\69\63\2e\63\6f\6d\2f\32\31\79\34\32\30\2e\70\6e\67") center fixed repeat-y}table:nth-of-type(3) tr td:nth-child(even):not(:last-of-type){display:none !important}div[style="height: 16px"]:first-of-type{border-top:1px solid rgba(255, 255, 255, 0.3);}

http://pastebin.com/9WtcRPU0

of course! you can change as much as you want

thank you!!

I'll be sharing a few xatspaces I've made, feel free to use/modify them. Enjoy! LINK LINK LINK LINK >>>>PART 2<<<<