emily the strange layout

Tags: emo, goth, black, red, rexlayouts

Description:

black and red layout inspired by emily the strange. if u use pls credit by putting my profile link in ur bio!

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by rex (https://layouts.spacehey.com/layout?id=24318) -->

<div class="emily"></div>
<div class="hug"></div>
<style>
@font-face {
font-family: 'gothik steel';
src: url(https://dl.dropbox.com/s/q85sqq5r38eahmn/Gothik%20Steel.ttf);
}
nav img.logo {
    filter: brightness(0) saturate(0%) invert(10%) sepia(00%) hue-rotate(282deg) saturate(0);
}
.hug{
    background: url(https://stickershop.line-scdn.net/stickershop/v1/product/17258494/LINEStorePC/main.png;compress=true) no-repeat;
    background-size: 70%!important;
    position: fixed;
    left: -5px;
    bottom: -70px;
    height: 300px;
    width: 300px;
    z-index: 1000;
    opacity: 100%;
}

.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: "🐈‍⬛"
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
	/* Add to Favorites */
	content: "🐈‍⬛"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
	/* Send Message */
	content: "🐈‍⬛"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
	/* Forward to Friend */
	content: "🐈‍⬛"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
	/* Instant Message */
	content: "🐈‍⬛"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
	/* Block User */
	content: "🐈‍⬛"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
	/* Add to Group */
	content: "🐈‍⬛"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
	/* Report Profile */
	content: "🐈‍⬛"
}
.profile .left h1:before {
    background-image: url(https://i.pinimg.com/originals/86/84/9d/86849db126d892e74ac494722ab5ad14.png);
    background-repeat: no-repeat;
    background-position: center;
    display: block;
    background-size: 100px;
    height: 100px;
    width: 100px;
    content: " ";
    transform: rotate(316deg) scale(2.7) translateX(-4.9em) translateY(2em);
    position: absolute;
    z-index: -1;
}

#q, button {
color: crimson;
background-color: white;
border: 1px solid crimson;
font-family: inherit;
font-size: 11px;
}
top, nav .top, details-table
{
    background: crimson !important;
}
nav .top{
    font-size: 12px;
 color: white;
    border: 1px solid crimson;
    border-radius: 12px 12px 0px 0px;
}
 .emily {
    background: url(https://stickers.vidio.com/packs/1180-etstrange/Sticker5.png) no-repeat;
    background-size: 100%!important;
    position: fixed;
    right: 100px;
    bottom: -50px;
    height: 350px;
    width: 300px;
  opacity: 100%;
}

nav .links{
  background: crimson;
    border: 1px solid crimson;
text-shadow: crimson;
    border-radius: 0px 0px 12px 12px;
}
    body{
        background-color: black;
font-family: "Century Gothic";
        color: white;
font-size: 17px;
    }
.count{
    color: crimson;
}

    h1{
        animation: changeColor 5s linear infinite;
font-family: 'gothik steel';
font-weight: normal;
	text-shadow: 1px 1px black;
	text-transform: uppercase;
	
}
h1:hover{
      animation:shake 1s;
      animation-iteration-count:infinite;
}
@keyframes changeColor{
    0%{color:red;}
    25%{color: white;}
    50%{color: red;}
    75%{color: white;}
    100%{color:red;}
}
  .profile .table-section{
    border:2px solid crimson;
    border-radius: 15px;
  }
  .profile .table-section .heading{
    border: 1px solid crimson;
    border-radius: 12px 12px 0px 0px;
    text-align: center;
    background-color: crimson;
  }
  .profile .table-section .heading h4{
    color:white;
    text-shadow: 1px 1px 2px black;


}
.details-table tr td:first-child p{
    color: crimson;
    !important: ;
    letter-spacing: normal !important;
    filter: brightness(100%) !important;
}
.contact {
  border: 1px solid crimson;
    border-radius: 8px;
Width: 310px;
  text-shadow: .3px .3px .3px red, 0 0 25px red, 0 0 3px red; 
}
.profile .contact, .profile .url-info, .profile .table-section, .home-actions{
   border: 1.5px solid crimson;
}
.url-info{
    display: none;
}
  .profile .friends .heading{
      background-color: crimson;
    border: 1px solid crimson;
    border-radius: 12px 12px 12px 12px;
    color: white;
    text-shadow: 1px 1px 2px black;
    text-align: center;
  }
  .profile .friends .heading h4{
    text-align: center;
    color: white;
    text-shadow: 1px 1px 2px black

  }
main {
    background: black;
    padding: 0;
font-family: "Century Gothic"
    font-size: 15px;
    color: white;
text color: white;

}
.comments-table{
height: 500px;
overflow-y: scroll;
background-color: black;
color: crimson;
border: 0px;
}
table.comments-table{
display: block;
height: 400px!important;
overflow-y: scroll;
border: 0px;
}

:root 
{
	--logo-blue: ;
	links: crimson;
 	--darker-blue: ;
	--lighter-blue: ;
	--even-lighter-blue: ;
	--lightest-blue: ;
	--dark-orange:crimson ;
	--light-orange: ;
	--even-lighter-orange: ;
	--turquoise: ;

            --table-header:crimson;
	--link-text: white;
	--main-text: white;
    

    }   
    nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after {
    content: " ★ ";
    color: var(--headers);
 }
footer{
background-color: black;
}
    a{
        color: red;
    }
a:hover{
    color: white;
    text-decoration: underline wavy;
}
.icon, .award img {
    content: url(https://iconape.com/wp-content/files/xe/155408/svg/155408.svg);
filter: grayscale(0%);
    display: inline-block;
    height: 2.0em;
    width: 2.0em;
    margin: 0 .05em 0 .1em;
    vertical-align: -0.3em;
    color: rgba(0,0,0,0);
    
}
.count, .friends a p{
    color: red !important;
}
.contact .inner a img {
  font-size: 0;
}
.profile-pic img {
  display: inline-block;
  width:100%;
  height:auto;
filter: grayscale(0%);
  animation: pop 1s ease-in-out infinite alternate;
  overflow: hidden;          
}

@keyframes
pop {
from { transform:scale(0.95) }
50% { transform:scale(1) }
to { transform:scale(0.95) }
    
}
::-webkit-scrollbar {
width: 9px;
height: 9px;
}
 
::-webkit-scrollbar-track {
background: black;
border-radius: 3px;
}
 
::-webkit-scrollbar-thumb {
border-radius: 4px;
background: red; 
}
 
::-webkit-scrollbar-thumb:hover {
background: crimson;
}
 .online { 
visibility: hidden; 
size: 0px;
color: transparent;
} 
.online img { 
content: url("https://www.myspacegens.com/images/online_now/21.gif"); animation-name: none; visibility: visible; height: 20px; width: 80px; filter: none; 
}
.friends-grid img:hover, img:hover{
      animation:shake 1s;
      animation-iteration-count:infinite;
filter: grayscale(0%) blur(4px);
}
img{
filter: grayscale(100%);
}
@keyframes shake{
    0% {
        transform:translate(1px,1px) rotate(0deg);
    }
 
    10% {
        transform:translate(-1px,-2px) rotate(-1deg);
    }
 
    20% {
        transform:translate(-3px,0px) rotate(1deg);
    }
 
    30% {
        transform:translate(3px,2px) rotate(0deg);
    }
 
    40% {
        transform:translate(1px,-1px) rotate(1deg);
    }
 
    50% {
        transform:translate(-1px,2px) rotate(-1deg);
    }
 
    60% {
        transform:translate(-3px,1px) rotate(0deg);
    }
 
    70% {
        transform:translate(3px,1px) rotate(-1deg);
    }
 
    80% {
        transform:translate(-1px,-1px) rotate(1deg);
    }
 
    90% {
        transform:translate(1px,2px) rotate(0deg);
    }
 
    100% {
        transform:translate(1px,1px) rotate(0deg);
    }
 
}

</style>
<a href="https://spacehey.com/hibikiwataru">
         <img alt="credit" src="https://files.catbox.moe/2x4f43.gif" width="150&quot;" height="20"/></a>
<style>* {cursor: url(https://cur.cursors-4u.net/nature/nat-3/nat258.cur), auto !important;}</style><a href="https://www.cursors-4u.com/cursor/2006/05/01/nat258.html" target="_blank" title="White Cat"><img src="https://cur.cursors-4u.net/cursor.png" alt="White Cat" style="position:absolute; top: 0px; right: 0px;"/></a>

Copy and paste this code into the "About me" section of your Profile to use it.

Caution: This Layout was not inspected by SpaceHey — use it at your own risk.

Comments

Displaying 20 of 33 comments ( View all | Add Comment )

silly	1686074372 this is my fav layout I love it smmm x) Report Comment whwh tysm!! :DD by rex; 1686078499; Report
vivi ✭	1682359602 whats the code for the still photo in the corner of your profile? Report Comment <div class="name"></div> `.name { background: url(img url) no-repeat; background-size: 100%!important; position: fixed; right: 100px; bottom: -50px; height: 350px; width: 300px; opacity: 100%; }` the width and height will change depending on ur img, and u can change bottom to top/right to left by rex; 1682366279; Report tysm!! by vivi ✭; 1682368092; Report
tess ☆	1681858590 using, tysm! awesome layout dude Report Comment tysmm!! and yw :DD by rex; 1681868322; Report
☆ Vinztakular ✮	1679958320 totally usin this , awesome layout dawg Report Comment tysmm :D by rex; 1679967566; Report
emma	1679906359 using!!! <3 Report Comment tytyy :D by rex; 1679913898; Report
Vilomah	1679721052 I guess it's polite to tell you this is gonna be my profile as well. I have a very special connection with Emily thanks for making this! Report Comment tyty and np!! emily is the coolest everr :D by rex; 1679743784; Report
★Katie Rose★	1679417690 Love emily strange! Gonna use this one :3 Ty! Report Comment yaa she is the best tytyyy :3 by rex; 1679430458; Report
very scary kittie!!!	1678809668 uuuuusing :3 Report Comment tytyy by rex; 1678811527; Report
Casey ⦻	1678440453 using! Report Comment tyy by rex; 1678450205; Report
nana	1677722902 so cute! using :3 Report Comment tysm!! by rex; 1677723934; Report
Xx_luxxcy_xX	1677619880 Using ! Report Comment ty!! by rex; 1677629911; Report
C♡LI	1677464710 using Report Comment tyy by rex; 1677467279; Report
nisa ☆	1676593739 using! this is so cute Report Comment tysm!! by rex; 1676598246; Report
jirtini	1675817952 using Report Comment ty! by rex; 1675818496; Report
vampyrebytez	1675653472 using!! ty Report Comment np and ty! by rex; 1675686450; Report
hong meiling	1674527765 Using, thanks! Report Comment np and ty! by rex; 1674561761; Report
Queen Roxifer!	1674518695 using ^q^ Report Comment ty!! by rex; 1674561752; Report
animalcrackerX3	1674260291 using!! XD Report Comment tyy by rex; 1674264859; Report
roxy!!	1671711589 :33 Going 2 uze, thiz iz zo cool!! xP Report Comment tyy :D by rex; 1671711948; Report