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 43 comments ( View all | Add Comment )

laine	1746707917 using !! Report Comment
saylor	1743467402 using Report Comment
Kat	1741969034 Usinggg :) Report Comment
sa5m	1738639657 using!! Report Comment
duru	1737818010 using Report Comment
nat(HTM)	1737239368 Using Report Comment
dani	1735661920 using! xd Report Comment
Moonly.Night	1725141580 using Report Comment
YuiKek	1722422470 how do i use only da pic of her hugging the animal??? Report Comment
Alicia	1717927639 usinggg Report Comment
JESSICKA ★	1717279178 Using!!!! Report Comment
kittie	1711649468 using Report Comment
y4hto	1706315156 Using! :D Report Comment
𝒸𝓁𝒶𝓊𝒹𝒾𝒶 🧟	1702045416 LOVE EMILY THE STRANGE USINGG Report Comment
reece	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