avenue4strangerz's profile picture

Published by

published
updated

Category: Web, HTML, Tech

moment | scemo spacehey layout

[flashing layout warning!!]

soooooooooo apparently we aren't able to submit layouts and its been that way for months.. anyways new layout!!!!


layout includes...

✪ color changing borders

✪ online and offline icons

✪ rainbow hover links

custom notification, navi, and contact icons

▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰

𓆩♡𓆪 credit if u use

𓆩♡𓆪 change if up if u want

𓆩♡𓆪 if you need help, i'll try my best but ultimately, im not an expert

▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰

preview tester profile! | code down below [you MUST put code between style tags or it will not work]

@font-face {
font-family: 'UNDECAPPEDvinyl';
src: url('https://files.catbox.moe/8nypvf.ttf');
}

@font-face {
font-family: 'riseup';
src: url('https://files.catbox.moe/oqidwx.ttf');
}

.w-40 h1{
font-family: 'UNDECAPPEDvinyl';
font-size: 30px;
color: #bfbfbf;}

p{
  font-family: 'riseup';
  color: #bfbfbf;
}
h1,h2,h3,h4,h5{
  font-family: 'riseup';
  color: #bfbfbf;
}
.links a, .top a, a, .blog-preview h4 a, .more, .mood a, .contact a, .blog-preview a, .friends a, .logout-btn{
  font-family: 'riseup';
}

    .top{
    background-image: url('https://files.catbox.moe/2ow3mc.jpg') !important;
    border: 2px double;
    color: white;
    }
    
  body {
   background-image: url(https://files.catbox.moe/9199uc.png);
}

.comments-table button:hover {
animation:myRainbowPan 1s infinite;
background-color: #bfbfbf !important;
border: transparent;
}

    nav .links{
    border: 2px double;
}
    
    .top input{
    background-color: #bfbfbf !important;
    }

    button{
    background-color: #bfbfbf !important;
    }

    main{
      background-color: transparent;
  }

    main .right,
    main .left{
      background-color: black;
      border: 2px double;
      height: 60px;
}

.blog-preview h4{
    height: 20px !important;
    padding: 4px;
}

.online{content:url("https://iili.io/2Qi4YZX.gif");
}

.details time::after {content: url('https://iili.io/2Qi49Eb.gif');}

table.comments-table{
border: 2px double;
display: block;
height: 200px!important;
overflow-y: scroll;
}


.friends th, tr, th, .comments-table{
outline: none !important;
}

footer{
    background-image: url('https://files.catbox.moe/2ow3mc.jpg') !important;
    border: 2px double;
    color: white;
}

footer p{
    color: white;
}

nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after{
content: URL("https://files.catbox.moe/rjbu0y.gif") !important;
padding-left: 4px !important;

}


table.comments-table{
    color: ;
        border: 2px double;
        }



    a{
    color: #bfbfbf !important;
    }

    a:visited{
    color: COLOR !important;
    }

    .top a{
    color: white !important;
    }

    .links a{
    color:  !important;
    }

    .friends-grid p{
    color: #bfbfbf !important;
    }

    .comments-table p{
    color: #bfbfbf;
    }

    footer .links a{
    color: white !important;
   }

h1, .count{
     color: #59f8e5;
} 

:root {
    --lighter-blue: black;
    --even-lighter-blue: transparent;
    --lightest-blue: transparent;
    --dark-orange: #bfbfbf;
    --light-orange: transparent;
    --even-lighter-orange: transparent;
    --green: ;
}

/* contact icons */
.contact .inner a img {
    font-size: 0;
}
.contact .inner a img:before {
    font-size: 1em;
    display: block;
 }
    .contact .inner a img {
        font-size: 0;
    }
    .contact .inner a img:before {
        font-size: 1em;
        display: block
    }
    .contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {
	    /* add to friends */
	    content: url("https://files.catbox.moe/zrgn4i.gif");
    }
    .contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
	    /* add to favorites */
	    content: url("https://files.catbox.moe/1y8x8v.gif");
    }
    .contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
	    /* send message */
	    content: url("https://iili.io/JBUjCLx.gif");
    }
    .contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
	    /* forward to friend */
	    content: url("https://iili.io/2Qi158l.gif");
    }
    .contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
	    /* instant message */
	    content: url("https://iili.io/2QiEJNS.gif");
    }
    .contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
	    /* block user */
	    content: url("https://iili.io/JBUj7Ia.gif");
    }
    .contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
	    /* add to group */
	    content: url("https://iili.io/2QiGqXt.gif");
    }
    .contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
	    /* report user */
	    content: url("https://iili.io/2QiGVpV.gif");
    }


/*notification bell*/
li.active .icon { content:url('https://files.catbox.moe/gfy6ou.gif');}

   main, main .right, main .left, footer,
    .top, nav .links, table.comments-table{
        border-color: black;
        animation-name: flash_border;
        animation-duration: 3s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        -webkit-animation-name: flash_border;
        -webkit-animation-duration: 3s;
        -webkit-animation-timing-function: linear;
        -webkit-animation-iteration-count: infinite;
        -moz-animation-name: flash_border;
        -moz-animation-duration: 3s;
        -moz-animation-timing-function: linear;
        -moz-animation-iteration-count: infinite;
    }

@keyframes flash_border {
  0% {
    border-color: #000304;
  }
  50% {
    border-color: #59F8E5;
  }
  100% {
    border-color: #000304;
  }
}
a:hover, .top a:hover, .links a:hover, .friends-grid p:hover, .comments-table p:hover, footer .links a:hover {animation:myRainbowPan 1s infinite;} :root { --color1: #DA4AD8; --color2: #8769FB; --color3: #05B499; --color4: #ff5959; } .rainbowPan{animation:myRainbowPan 1s infinite} @keyframes myRainbowPan{ 0%{ background:-webkit-linear-gradient(45deg, #DA4AD8, #8769FB, #05B499, #ff5959);-webkit-background-clip:text;-webkit-text-fill-color:transparent} 25%{ background:-webkit-linear-gradient(45deg, #8769FB, #05B499, #ff5959, #DA4AD8);-webkit-background-clip:text;-webkit-text-fill-color:transparent} 50%{ background:-webkit-linear-gradient(45deg, #05B499, #ff5959, #DA4AD8, #8769FB);-webkit-background-clip:text;-webkit-text-fill-color:transparent} 75%{ background:-webkit-linear-gradient(45deg, #ff5959, #DA4AD8, #8769FB, #05B499);-webkit-background-clip:text;-webkit-text-fill-color:transparent} 100%{ background:-webkit-linear-gradient(45deg, #DA4AD8, #8769FB, #05B499, #ff5959);-webkit-background-clip:text;-webkit-text-fill-color:transparent} }


check out these!!

graphics and resources masterlist

my other layouts

how to use a music player


4 Kudos

Comments

Displaying 1 of 1 comments ( View all | Add Comment )

z0mbalex [X....x]

z0mbalex [X....x]'s profile picture

luv ittt! hoping this comment helps push it 2 more ppl :]]


Report Comment



tysm gangyy,, 💥

by avenue4strangerz; ; Report