my first layout

Tags: layout emo mcr
Description:

just saving this just in case if it starts tweaking again, credits: bat rain: vamp teef vampire lips cursor: .jose logo: HABIT contact scissors: victor comment if using !!
Code:

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

<style>
          main {
    background: black;
    color: white;
    padding: 6px 0px;
    font-size: 80%;
</style>
<style>
body {
     background-image: url("https://i.pinimg.com/564x/30/bb/d0/30bbd0455939f9c6037e5aa406739075.jpg") !important;
     background-color: black !important;
     background-attachment: fixed !important;
     margin: 0;
     padding: 0;
</style>


<style>

.logo {

content:url("https://cdn.discordapp.com/attachments/694037200857464864/1211821756151763004/Picsart_24-02-26_16-46-39-617.png?ex=65ef97f5&is=65dd22f5&hm=6aee45577d139f40c9347a80e0fbed44d0adcaa3c130d837c4e3649dadf49f7b&");

}

</style>



<style>
* {cursor: url(https://cursors4.totallyfreecursors.com/thumbnails/vampire-lips.gif), auto !important;}</style>
<a href="" target="_blank" style="position:absolute; top: 0px; right: 0px;"></a>
<style>
}
.contact .inner a img:before {
    font-size: 1em;
    display: block
}
</style>
<style>
.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: "✂"
</style>
<style>
.online { visibility: hidden; } .online img { content: url("https://ct.pimp-my-profile.com/online/26.gif"); animation-name: none; visibility: visible; height: 20px; width: 100px; }

.profile-info{
background: url(https://i.pinimg.com/originals/ca/cc/8e/cacc8e926d83bbac272f86ca30d7cfe1.gif);
no-repeat fixed;
    background-size: cover;
    height: 155px;
    border: white;
    font-size: 0;
    background-size: cover;
    height: 152px;
    border: white;
    font-size: 0;
    background-position-y: top;
}


.left .heading {
    background: linear-gradient(#535353 0%, #000 60%) !important;
    box-shadow: inset 0px 0px 5px 1px #535353;
    border-radius: 5px 5px 0px 0px;
    border-bottom: 1px solid #808080;
    color: #ffffff;
    text-shadow: 2px 1px 0px #000;
    font-size: 13px;
    padding: 3px !important;
}
.contact .heading {
    background: none !important;
    border: none !important;
    box-shadow: none;
    color: #ffffff;
    text-shadow: 2px 1px 0px #000;
    font-size: 13px;
}
.profile .table-section {
    border-radius: 5px 5px 0px 0px;
    border: 1px solid #808080;
}
.details-table td {
    background: linear-gradient(#535353 0%, #000 60%) !important;
    box-shadow: inset 0px 0px 0px 1px #808080, inset 0px 0px 5px 1px #535353, #000 1px 1px 10px 2px;;
    border-radius: 10px 0px;
    border: 0px;
    padding-left: 5px !important;
    color: #ffffff !important;
    text-shadow: 2px 1px 0px #000;
    font-size: 13px; 
}
.profile .contact {
    border-radius: 5px 5px 0px 0px;
    border: none;  
    background: linear-gradient(#535353 0%, #000 20%);
}
.right.col {
    background: linear-gradient(#535353 0%, #000 2%);
    border-radius: 5px 5px 0px 0px;
    border: 0px;
    padding: 5px;
    position: relative;
    left: 4px;
    margin-left: 5px;
    color: #ffffff;
    text-shadow: 2px 1px 0px #000;
    font-size: 13px;
}
main {
    border: none;
    border-radius: 5px;
    padding: 10px 15px 10px 15px;
    background: black;
    box-shadow: inset 0px 0px 0px 1px #808080, inset 0px 0px 10px 2px #535353;
}
nav .top {
    margin-top: 10px;
    border-radius: 5px;
    background: linear-gradient(#535353 0%, #000 69%);
    box-shadow: inset 0px 0px 0px 1px #808080, inset 0px 0px 10px 2px #535353;
    border: 0px;
    padding: 4px;
}
nav .links {
    background: linear-gradient(#535353 0%, #222 60%) !important;
    box-shadow: inset 0px 0px 0px 1px #808080, inset 0px 0px 5px 1px #535353, #000 1px 1px 10px 2px;
    margin-top: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
    border: 0px;
    padding-left: 10px !important;
    color: #ffffff !important;
    text-shadow: 2px 1px 0px #000;
    font-size: 13px;
    padding: 5px;
    position: relative;
    gap: 5px;
    justify-content: center;
}
nav .links a {
    text-shadow: 1px 1px 0px #000;
}
nav .links a:hover {
    color: #f00;
    text-decoration: none;
    text-shadow: 1px 1px 0px #000;
}



nav .top .left .logo {
    width: 165px;
    height: 42px;
    filter: drop-shadow(2px 4px 6px black);
}

button, input {
    overflow: visible;
    background: white;
    color: black;
    border: none;
    box-shadow: 0 0 5px white;
    border-radius: 5px;
}

nav .links {
    background-color: transparent;
    padding: 3.5px 16px;
    text-align: center;
    margin-top: 10px!important;
    margin-bottom: 10px!important;
}

nav .links a {
    text-decoration: none;
    color: white;
    text-shadow: 0 0 2px #5ab9c7, 0 0 2px #5ab9c7, 0 0 2px #5ab9c7, 0 0 2px #5ab9c7, 0 0 2px #5ab9c7, 0 0 2px #5ab9c7;
    font-size: max(0.98em, 12px);
}

nav .links .special a {
    color: white;
}

nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after {
    content: " | ";
    color: powderblue;
}


.profile .friends .inner b, .profile .friends .inner a{
color: white;
text-shadow: 3px darkred;
}


.profile h1{
color: white !important;
font-size: 14px;
}

.profile .blurbs .section p, .profile .friends p, .blog-entry .comments p, .bulletin .comments p {
font-size: 14px;
}


.friends p, .friends a {
color: white;
}


p{
font-size: 16px;
}


.details-table td a {
color: white;
}


.details-table td p {
color: white;
font-size: 14px;
}

.profile .table-section .heading{
background: transparent;
}


.profile .table-section .heading h4{
color: transparent;
background: transparent;
}

.profile .contact {
  font-family: Arial, sans-serif;
background: transparent;
border: 0px solid transparent;
}


.profile .contact a{
font-size: 12px;
}


.contact .inner a img {
font-size: 0;
}

.contact .inner a img:before {
font-size: 1em;
display: block
}


.profile .friends .person img:not(.icon) {
box-shadow: 0px 0px 19px 0px rgba(255,255,255,0.3);
border: 5px solid darkred;
}


.profile .friends .comments-table td {
background: black;
border: 2px solid darkred;
position: center;
}


.profile .friends .comments-table td:first-child {
background: url(https://i3.glitter-graphics.org/pub/2001/2001633sgs6k1j42e.gif);
}


.profile .comments-table .inner {
box-shadow: 0px 0px 19px 0px rgba(255,255,255,0.3);
}


.comments-table td:first-child img{
border: 1px solid darkred;

box-shadow: 0px 0px 19px 0px rgba(255,255,255,0.3);
}


.comment-replies{
border: 1px solid darkred;
color: white;
}


.general-about .details p:not(.online){
color: white !important;
font-size: 14px;
  font-family: Arial, sans-serif;
}


.general-about .details a{
  font-family: Arial, sans-serif;
color: white !important;
font-size: 14px;
}


.links{
width=810px;
}


nav .links {
background: transparent;
}


nav .links a:hover {
color: darkred;
}


nav .top label{
background: transparent;
}


nav .top label{
color: white;
}


  .search-wrapper input[type=text] {
    background: white;
  font-family: Arial, sans-serif;
    border: 3px solid white;   
  }

.profile .url-info {
border: 0px solid transparent;
color: transparent;
font-size: 0.1px;
box-shadow: 0px 0px 10px 0px darkred;
}

.profile .table-section {
border: none;
}


.profile .url-info {
border: 0px solid transparent;
color: transparent;
font-size: 0.1px;
box-shadow: 0px 0px 10px 0px darkred;
}

.profile .table-section {
border: none;
}


table.comments-table {
border: 0.5px solid darkred;
background: black;
}


footer p{
color: white;
font-size: 100%;
}


footer a{
color: white;
}


footer {
color: white;
box-shadow: 0px 0px 15px 6px darkred;
text-decoration: underline;
text-decoration-style: dotted;
background-color: darkred;
border: 3px solid white;
}   




    .table.comments-table:{
    border-color:darkred;}


body { 

font-family: Courier;
font-size: 15pt;
font-weight: bold;
-font-style: normal;
text-decoration: none;
}

.profile .blurbs .heading, .profile .friends .heading {
    background: #000000;
    background: #000000;
    color: #f3eaea;
    color: #ed0707;
    padding: 2px 7px;
}

:root {
    --light-gray: #f2f0f0;
    --gray: #e3e3e3;
    --dark-gray: #919191;
    --darker-gray: #545454;
    --logo-blue: #ffffff;
    --darker-blue: #ffffff;
    --lighter-blue: #60A5FA;
    --even-lighter-blue: #BFDBFE;
    --lightest-blue: #DBEAFE;
    --red: #FF0000;
    --dark-orange: #ED0707;
    --light-orange: #f9c56c;
    --even-lighter-orange: #fcdbb8;
    --strange-yellow: #dbae2e;
    /* --green: #34D399; */
    --light-green: #E6F8DD;
    --medium-green: #A0C99C;
    --dark-green: #059669;
    accent-color: #1D4ED8;
    accent-color: var(--logo-blue);
}
</style>

<style>
 
  </style>





<div class="snowflakes">
<div class="snowflake"><img src="https://64.media.tumblr.com/c976c1f0110dff524dead5bde74dd5df/09b0656ab042c182-ac/s75x75_c1/888d378a91f5776307c5c5633ed9c5c7e094b4e5.gifv"/></div>
<div class="snowflake"><img src="https://64.media.tumblr.com/c976c1f0110dff524dead5bde74dd5df/09b0656ab042c182-ac/s75x75_c1/888d378a91f5776307c5c5633ed9c5c7e094b4e5.gifv"/></div>
<div class="snowflake"><img src="https://64.media.tumblr.com/c976c1f0110dff524dead5bde74dd5df/09b0656ab042c182-ac/s75x75_c1/888d378a91f5776307c5c5633ed9c5c7e094b4e5.gifv"/></div>
<div class="snowflake"><img src="https://64.media.tumblr.com/c976c1f0110dff524dead5bde74dd5df/09b0656ab042c182-ac/s75x75_c1/888d378a91f5776307c5c5633ed9c5c7e094b4e5.gifv"/></div>
<div class="snowflake"><img src="https://64.media.tumblr.com/c976c1f0110dff524dead5bde74dd5df/09b0656ab042c182-ac/s75x75_c1/888d378a91f5776307c5c5633ed9c5c7e094b4e5.gifv"/></div>
<div class="snowflake"><img src="https://64.media.tumblr.com/c976c1f0110dff524dead5bde74dd5df/09b0656ab042c182-ac/s75x75_c1/888d378a91f5776307c5c5633ed9c5c7e094b4e5.gifv"/></div>
<div class="snowflake"><img src="https://64.media.tumblr.com/c976c1f0110dff524dead5bde74dd5df/09b0656ab042c182-ac/s75x75_c1/888d378a91f5776307c5c5633ed9c5c7e094b4e5.gifv"/></div>
<div class="snowflake"><img src="https://64.media.tumblr.com/c976c1f0110dff524dead5bde74dd5df/09b0656ab042c182-ac/s75x75_c1/888d378a91f5776307c5c5633ed9c5c7e094b4e5.gifv"/></div>
<div class="snowflake"><img src="https://64.media.tumblr.com/c976c1f0110dff524dead5bde74dd5df/09b0656ab042c182-ac/s75x75_c1/888d378a91f5776307c5c5633ed9c5c7e094b4e5.gifv"/></div>
<div class="snowflake"><img src="https://64.media.tumblr.com/c976c1f0110dff524dead5bde74dd5df/09b0656ab042c182-ac/s75x75_c1/888d378a91f5776307c5c5633ed9c5c7e094b4e5.gifv"/></div>
<div class="snowflake"><img src="https://64.media.tumblr.com/c976c1f0110dff524dead5bde74dd5df/09b0656ab042c182-ac/s75x75_c1/888d378a91f5776307c5c5633ed9c5c7e094b4e5.gifv"/></div>
<div class="snowflake"><img src="https://64.media.tumblr.com/c976c1f0110dff524dead5bde74dd5df/09b0656ab042c182-ac/s75x75_c1/888d378a91f5776307c5c5633ed9c5c7e094b4e5.gifv"/></div>
<div class="snowflake"><img src="https://64.media.tumblr.com/c976c1f0110dff524dead5bde74dd5df/09b0656ab042c182-ac/s75x75_c1/888d378a91f5776307c5c5633ed9c5c7e094b4e5.gifv"/></div>
<div class="snowflake"><img src="https://64.media.tumblr.com/c976c1f0110dff524dead5bde74dd5df/09b0656ab042c182-ac/s75x75_c1/888d378a91f5776307c5c5633ed9c5c7e094b4e5.gifv"/></div>
<div class="snowflake"><img src="https://64.media.tumblr.com/c976c1f0110dff524dead5bde74dd5df/09b0656ab042c182-ac/s75x75_c1/888d378a91f5776307c5c5633ed9c5c7e094b4e5.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>
body:before {
content: " ";
height: 100vh;
width: 100vw;
display: block;
position: fixed; 
top: 0; 
left: 0; 
z-index: 100;
background-image: url('https://i.makeagif.com/media/10-07-2015/2zCNLo.gif');
background-size: cover;
background-repeat: no-repeat;
background-position:center;
animation: yourAnimation 3s ease 0s 1 normal forwards;
pointer-events: none;}
@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } 
</style>

<iframe width="0" height="0" src="https://www.youtube.com/embed/h3fNRxGCSe0?si=mtgdyll5sj0X8tWP//?&;amp;;autoplay=1&;loop=1&;controls=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" loading="lazy">
</iframe>
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 0 of 0 comments ( View all | Add Comment )