MY current layout :P

Tags: emo, black, dark, gifs

Description:

my layout that i have on my pfp

Preview:

click on the image for a larger preview

Code:

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

✮✮✮✮✮✮✮✮✮✮✮✮✮✮✮✮✮✮✮✮✮✮✮✮✮✮✮✮✮✮✮✮✮✮✮✮✮✮✮✮✮✮✮✮✮✮


<style>
body{
background:url(https://i.pinimg.com/564x/f3/db/40/f3db405a0c6d2b3fc3a6333ab337a3ca.jpg) no-repeat center
fixed;
-webkit-background-size: cover
}

font-family:uset;
color: red;
background-color: black;
border-color: red;
border-style: dashed;}
nav .top {
background: transparent;
}
nav .links {
  background: rgba(0, 0, 0, 0.9);
}

.general-about img { 
 -webkit-mask-image: url(https://i.postimg.cc/8CB1CTyG/heart.png); 
 -webkit-mask-size: 100%; 
 -webkit-mask-repeat: no-repeat; 
 -webkit-mask-position: center; 
}
main:before {
    width: auto;
    margin-bottom: 25px;
    border: 1px solid black;
    height: 150px;
    display: block;
    content: "";
    background-image: url(https://i.pinimg.com/originals/20/7d/f5/207df561c62d4d1dedaf56eba08b2767.gif);
    background-position: center center;
    background-size: cover;
}
#q, button {
color: #F55536;
background-color: black;
border: 1px solid grey;
font-family: inherit;
}
p, i, b, .count {
color: red!important;
}
a, .profile .friends .person p, .logout-btn {
color: red !important;
text-decoration: underline !important;
}
.container {
margin: 0 auto 0;
}
main {
background: black;
color: red;
}
.heading, .url-info {
color: red !important;
background: none;
background-color: black !important;
border: 2px solid grey !important;
}
.inner {
color: red !important;
border: 2px solid grey;
border-top: none;
}
.profile-info {
background-image: url(https://i.pinimg.com/564x/2c/66/64/2c66641f824cb0d3c1dd0941aefea945.jpg);
        background-position: center;
        background-size: cover;
	padding: 5px;
        border-radius: 8px;
        border: 2px solid #0307ff;
border: 2px solid grey;
}
.profile-info .inner {
border: none;
}
.friends .inner {
border-bottom: none;
}
#comments {
border-bottom: 2px solid grey;
}
.profile .contact, .profile .table-section, .home-actions {
border: none !important;
}
.profile .contact.f-row:first-of-type {
margin-top: 0px;
padding-top: 7px;
}
.contact {
  background-image: url(https://i.pinimg.com/564x/61/bb/25/61bb25c8bd949b1945659a447bf41944.jpg);
  background-repeat: no-repeat;
  background-attachment: scroll;
  Width: 300px;
  Height:120px;
}
.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 favorite */
content: "✭"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* send a message */
content: "✭"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* foward 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 2 group  */
content: "✭"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* report */
content: "✭"
}
.details-table {
margin: 2px;
}
.details-table, td {
border: 2px solid grey;
border-collapse: collapse;
}
td {
color: red!important;
background: none;
background-color: black !important;
} 
table.details-table {
max-width: 98%;
}
.profile h1 {
font-size: 20px;
}
footer p {
color red !important;
}
.comments-table {
color: #0307ff;
border: none;
border-radius: 8px;
}
footer {
    background-image: url(https://i.pinimg.com/564x/da/42/fe/da42fe301e45fef6471a740bc714c334.jpg);
    background-position: center;
background-size: cover;
    border-radius: 8px;
    border: 2px solid red;
}
.general-about {
   border-radius: 8px;
   background: url(https://i.pinimg.com/564x/c7/c7/3b/c7c73bc63cafa729eae0daa6d825b924.jpg);
   background-position: center;
   background-size: cover;
padding: 5px;
}
 body:before {
    content: " "; 
    height: 100vh;
    width: 100vw;
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    background-image: url(https://64.media.tumblr.com/fe9c352b40e39cb925a7dbf0f74aaafc/e8a95efd88bba4d8-6f/s400x600/d59ab7c55fc1bc45bf9c97a9284120f28d14ab8e.gifv);
    background-size: cover;
    background-repeat: no-repeat;
    animation: yourAnimation 4s ease 0s 1 normal forwards;
    pointer-events: none;
  }
  @keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} }

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

<div style="float:  ; max-height: 240px; position: fixed; left: 1px; bottom: 4px; z-index: 400;">
<img src="https://66.media.tumblr.com/tumblr_maiu8vLvJU1rfjowdo1_r1_500.gif" width="200" height="250"/></div>

<!-- (c) Layout created by Tobben Van Elric (xXjellyfishXx)  (https://layouts.spacehey.com/layout?id=100879) -->

<style>
.online {content:url('http://dl.glitter-graphics.net/pub/3058/3058251t4udpjlpsc.gif'); background-repeat: no-repeat; background-position: -15% 75%; z-index: 2; 
}
</style>



<style>
@keyframes spin{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(-360deg); }
}
.general-about .profile-pic img{
  border-radius: 50%;
  animation: spin 7s infinite linear;
}
</style>

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

<style>
@keyframes flying-santa{
from{ left:-400px; }
to{ left:calc(100% + 20px); }
}
#santa{
position: fixed;
left: -400px;
bottom: 1px;
width: 130px;
animation: flying-santa 5s infinite linear;
pointer-events: none;
}
</style>
<img id="santa" src="https://i.pinimg.com/originals/a5/d9/fe/a5d9fe6123930689196028c4f991f79c.gif"/>

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.