Red Emo Layout

Tags: red, black, dark, emo, layout

Description:

My First Full Layout!!!! Comes with cursor & autoplay!!!! Pls Comment If using :3 Requests Open <3

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by ✨ Ava :3 ✨ (https://layouts.spacehey.com/layout?id=40427) -->

<style>

@import url('https://fonts.googleapis.com/css2?family=New+Rocker&display=swap');
body{
font-family: 'new rocker', cursive;
font-size: 120%;
}

body {
  background-image: url('https://thumbs.gfycat.com/MisguidedElementaryAngora-max-1mb.gif');
  background-color: black;
  border: 1px solid black;
}

nav img.logo {
  filter: brightness(0) saturate(100%) invert(100%) sepia(94%) saturate(0%) hue-rotate(167deg) brightness(95%) contrast(105%) !important;
}
.logo {
   content: url(https://files.catbox.moe/wmxqdm.png);
}
.online{
  content: url(https://64.media.tumblr.com/ae35fd353a96a6a23d50dc8ac936844e/9eb53e8f39046587-c1/s75x75_c1/8a5f37259c66c791ffab7d94cf20d4ea406f0211.gifv);
  padding: 5px 0px;
}

a, .profile .friends .person p, p, h2, h3, h4, .count, nav .links a{
  color: white!important;
}
h1{
   border: 5px solid transparent;
   padding:5px;
}

button {
  background-color: transparent!important;
  border: none;
  color: black;
  font-weight: bold;
}
.general-about .details {
  border: 5px solid transparent;
  padding-bottom: 70px;
}
.mood {
  background-color: transparent;
  border: 5px solid transparent;
  padding: 3px;
  margin-bottom: 10px;
}
.url-info, .table-section, .blog-preview, .blurbs, .friends {
  background: url(https://64.media.tumblr.com/c262f5030ff7e1b2120baa94632e36dd/a5aaf7e1a930de29-03/s250x400/32525b536f6f2ec51da3effbc78ed8ece8722bec.jpg);
  border: 5px solid white!important;
}
.comments-table td {
  border: 3px solid gray;
}
.table-section td {
  border: 1px none;
}
.url-info{display:none !important;}

main:before {
    width: 100%;
    height: 200px;
    display: block;
    content: "";
    background-image: url(https://64.media.tumblr.com/96e04788b551be28fea6567e8160fe53/c1aa3dd84a1a2f8f-b2/s400x600/02e6715ec27b82e6b636e14ef833951236e75c08.pnj);
    background-position: center;
    background-size: repeat;
}
@media only screen and (max-width: 600px) {
    main:before{
        height: 200px;
    }
}
.comment-reply:not(:first-child) {
    border-top: 2px solid gray;
}
.comment-replies {
    border: 3px solid white;
}
nav .top, nav .links {
  background-color: transparent;
  color: black;
  font-weight: bold;
}
.profile-info{
background:url(https://64.media.tumblr.com/cb91892cdace4c3a1e48402bd63fa807/904160ae6cda4a7e-d6/s250x400/92308182f99beee33264f200f75cbc41375a5ad0.jpg);
  border: 5px none;
}
main, footer {
  background-color: transparent;
}

.contact .inner a img{
  font-size: 0;
}
.contact .inner a img:before{
  font-size: 1em;
  display: block
}
/*ADD TO FRIENDS*/
.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before{
  content: "🌹"
}
/*ADD TO FAVS*/
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before{
  content: "🌹"
}
/*SEND MESSAGE*/
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before{
  content: "🌹"
}
/*FORWARD TO FRIEND*/
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before{
  content: "🌹"
}
/*INSTANT MESSAGE*/
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before{
  content: "🌹"
}
/*BLOCK USER*/
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before{
  content: "🌹"
}
/*ADD TO GROUP*/
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before{
  content: "🌹"
}
/*REPORT USER*/
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before{
  content: "🌹"
}
.contact {
  border: 1px black!important;
  background-image: url(https://64.media.tumblr.com/cb91892cdace4c3a1e48402bd63fa807/904160ae6cda4a7e-d6/s250x400/92308182f99beee33264f200f75cbc41375a5ad0.jpg);
  background-position: center;
  background-repeat: repeat;
background-attachment: scroll;
Width: 300px;
Height:180px;

color: white;
  text-shadow: 1px 1px 2px black, 0 0 25px red, 0 0 3px Darkred; }

.friends:not(#comments) {
  margin-bottom: 10px;
}
:root{
  --red: #AB0C0C;
  --orange: #AB0C0C;
  --yellow: #AB0C0C;
  --green: #AB0C0C;
  --cyan: #AB0C0C;
  --purple: #AB0C0C;
  --pink: #AB0C0C;

}

@keyframes glowrainbow{
  0%{
    box-shadow: 0 0 5em 2em var(--red);
  }
  16%{
    box-shadow:0 0 5em 2em var(--orange);
  }
  32%{
    box-shadow: 0 0 5em 2em var(--yellow);
  }
  48%{
    box-shadow: 0 0 5em 2em var(--green);
  }
  64%{
    box-shadow: 0 0 5em 2em var(--cyan);
  }
  80%{
    box-shadow: 0 0 5em 2em var(--purple);
  }
  90%{
    box-shadow: 0 0 5em 2em var(--pink);
  }
  100%{
    box-shadow:0 0 5em 2em var(--red);
  }
}


body > .container{
  animation:30s glowrainbow infinite;
}
.comments-table td {
  background:url(https://64.media.tumblr.com/ee1007b4b3aac7be6f8e79114eec90ab/349666432a599ee1-13/s250x400/6a247d6ace2ed467029b8e6313087c436a535103.jpg);
  border: 1px none;
}
.comments-table {
  border: none;
  border-spacing: 5px;
}
.profile-pic {
  padding: 15px;
}
h1{

  animation: type 3s steps(27);

  color: white;

  font-size: 10px;

  font-family: courier;

  white-space: nowrap;

  overflow: hidden;

  }



@keyframes type{

  0%{

    width:0ch;

  }

  

  100%{

    width:27ch;

  }

}



@keyframes blink{

  0%{opacity:1;}

  50%{opacity:0;}

  100%{opacity:1;}

}



.col, main, footer, nav::before, .online, nav .links, nav .top {

animation: float 4s;

animation-iteration-count: infinite;

animation-timing-function: ease-in-out;

}



.col, main, footer, nav::before, .online, nav .links, nav .top {

animation: float 4s;

animation-iteration-count: infinite;

animation-timing-function: ease-in-out;

}

@keyframes float {

0% { transform: translate(0, 0px);

}

50% {

transform: translate(0, 8px);

}

100% {

transform: translate(0, -0px);

}



</style>


<style>

img:hover , .url-info:hover , .online:hover {

  animation: shake 1s;

  animation-iteration-count: infinite;

}
.heading {
  background-color: transparent!important;
}
td {
  background-color: transparent!important;
}
</style>
<iframe width="0" height="0" src="https://www.youtube.com/embed/FRjYlcPA5bk//?&;amp;;autoplay=1&;loop=1&;controls=1" title="KICKBACK(Chainsaw Man OP)" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" loading="quick">
at the end</iframe>

<div class="snowflakes">
<div class="snowflake"><img src="https://64.media.tumblr.com/23729aea3e09cd03c3cd554eb3d5566e/4149a1d35ab9816c-f2/s75x75_c1/b1b0907541fa8edf6538a2e557a5bd20981938d0.gifv"/></div>
<div class="snowflake"><img src="https://64.media.tumblr.com/b7445b530b84661d4ec4046f6322e580/4149a1d35ab9816c-b7/s75x75_c1/f56d932cbf150a4539683093d5240ff992e2d356.gifv"/></div>
<div class="snowflake"><img src="https://64.media.tumblr.com/23729aea3e09cd03c3cd554eb3d5566e/4149a1d35ab9816c-f2/s75x75_c1/b1b0907541fa8edf6538a2e557a5bd20981938d0.gifv"/></div>
<div class="snowflake"><img src="https://64.media.tumblr.com/b7445b530b84661d4ec4046f6322e580/4149a1d35ab9816c-b7/s75x75_c1/f56d932cbf150a4539683093d5240ff992e2d356.gifv"/></div>
<div class="snowflake"><img src="https://64.media.tumblr.com/23729aea3e09cd03c3cd554eb3d5566e/4149a1d35ab9816c-f2/s75x75_c1/b1b0907541fa8edf6538a2e557a5bd20981938d0.gifv"/></div>
<div class="snowflake"><img src="https://64.media.tumblr.com/b7445b530b84661d4ec4046f6322e580/4149a1d35ab9816c-b7/s75x75_c1/f56d932cbf150a4539683093d5240ff992e2d356.gifv"/></div>
<div class="snowflake"><img src="https://64.media.tumblr.com/23729aea3e09cd03c3cd554eb3d5566e/4149a1d35ab9816c-f2/s75x75_c1/b1b0907541fa8edf6538a2e557a5bd20981938d0.gifv"/></div>
</div>

<style>
    @-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@-webkit-keyframes snowflakes-shake{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}}@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@keyframes snowflakes-shake{0%,100%{transform:translateX(0)}50%{transform:translateX(80px)}}.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:10s,3s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(0){left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s}.snowflake:nth-of-type(10){left:25%;-webkit-animation-delay:2s,0s;animation-delay:2s,0s}.snowflake:nth-of-type(11){left:65%;-webkit-animation-delay:4s,2.5s;animation-delay:4s,2.5s}



</style>

<style>* {cursor: url(https://64.media.tumblr.com/8bfd1ef50233ff80861afd417b6b95fa/e530cedacf80aa8e-f9/s75x75_c1/f49c8d92952fa8b992498e83f17d3f3377d34e63.gifv), auto;}</style><a href="https://64.media.tumblr.com/8bfd1ef50233ff80861afd417b6b95fa/e530cedacf80aa8e-f9/s75x75_c1/f49c8d92952fa8b992498e83f17d3f3377d34e63.gifv" target="_blank" title="Coffin"><img src=""/></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 34 comments ( View all | Add Comment )

Gesha	4 months ago Using Report Comment
eli ( ´ཀ` )	4 months ago might use!!! Report Comment
waffles!! >_<	5 months ago Using!! :3 Report Comment
Spiderb3n10	7 months ago using! :D Report Comment
xx_shatt3r3dkiss	7 months ago Using!! ^w^ Report Comment
Lewisa	9 months ago using !! Report Comment
Lewisa	9 months ago using !! Report Comment
GraveRobb3r	11 months ago using !! Report Comment
Sebastian	1 year ago Using!! Report Comment
lee	1 year ago using Report Comment
✮Ann✮	1 year ago Using! ^^ Report Comment
3xpl0d¡ng_gutz	1 year ago Using!!! Report Comment
ﮩ٨ـﮩﮩ٨ـ♡ﮩ٨ـﮩﮩ٨ـ	1 year ago Using. Report Comment
𖤐 Elias 𖤐	1 year ago using :3 Report Comment
Aiiko	1 year ago Using !! :) Report Comment
Seer / Lars 🦇	1 year ago Using‼️‼️ c: Report Comment
Mikey mayhem	1 year ago using :D Report Comment
✰ Valentino ✰	1 year ago Using :33 Report Comment
ครՇгคɭ Ŧคєгเє	1 year ago Using! Thanks Report Comment
Olliver ฅ⁠^⁠•⁠ﻌ⁠•⁠^⁠ฅ	1 year ago Using tyyy!!!! (⁠≧⁠▽⁠≦⁠) Report Comment