Simple black and white Cat Woman layout!

Tags: cvpid444, simple, black, gif

Description:

Hello! here's my first layout :) please comment or tag me on your account if you're going to use this layout!

Preview:

click on the image for a larger preview

Code:

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

<style>
    html:before {
    animation: grain 8s steps(10) infinite;
    background-image: url(https://i.imgur.com/QpnTsrV.jpg);
    content: "";
    height: 300%;
    left: -50%;
    opacity:.2;
    position: fixed;
    top: -110%;
    width: 300%;
    pointer-events:none;
    z-index:-9;"
}
@keyframes grain {
    0%, 100% { transform:translate(0, 0) }
    10% { transform:translate(-5%, -10%) }
    20% { transform:translate(-15%, 5%) }
    30% { transform:translate(7%, -25%) }
    40% { transform:translate(-5%, 25%) }
    50% { transform:translate(-15%, 10%) }
    60% { transform:translate(15%, 0%) }
    70% { transform:translate(0%, 15%) }
    80% { transform:translate(3%, 35%) }
    90% { transform:translate(-10%, 10%) }
}
</style>
<div class="catwoman"></div>
<style>
div.catwoman {
background: url(https://www.pngall.com/wp-content/uploads/2016/05/Catwoman-Free-PNG-Image.png);
       background-size: 100%!important;
       position: fixed;
    left: 900px;
    bottom: 0.5px;
    height: 550px;
    width: 370px;
    z-index: 100;
    opacity: 100%;
background-blend-mode: overlay;
}
li.active .icon { content:url('url'); 
    width: 20px;
    height:20px;
    }
.pinned {visability: hidden;}
.pinned img {content: url(https://upload.wikimedia.org/wikipedia/commons/4/4d/Ruby-Diamond-88757.gif); animation-name: 
none; visibility: visible;width="350" height="350"/>;
}
.logo {
content:url("https://static.wikia.nocookie.net/logopedia/images/2/20/MySpace_logo.svg");
filter: invert(100%);
}
.online { visibility: hidden; } .online img { content: 
url("https://upload.wikimedia.org/wikipedia/commons/4/4d/Ruby-Diamond-88757.gif"); animation-name: none; visibility: 
visible; height: 20px; width: 25px; 
}
    :root {
        --logo-blue: #121212;
        --darker-blue: black;
        --lighter-blue: #181818;
        --even-lighter-blue: #181818;
        --lightest-blue: #000;
        --dark-orange: #fff;
        --light-orange: #000;
        --even-lighter-orange: #000;
        --green: #fff;
    }
    * {
        font-family: monaco;
    }
     body{
    background-image: url('https://media.discordapp.net/attachments/643994912202817556/1074445242276790322/68b6fc91244777888b476f9ef55b10f1.jpg') !important;
    no-repeat scroll; background-size:cover;
    }  
    .blog-preview p {
        background-color: transparent;
        padding: 5px 10px;
        border-radius: 10px;
        color: black;
    }
    .blog-preview p a{
        color: #ea9999!important;
    }
    .blog-preview p a:hover,
    .blog-preview p a:active,
    .blog-preview p a:focus{
        color: transparent!important;
    }
    nav {
        border-radius: 15px 15px 0 0;
        overflow: hidden;
    }
    .profile .contact,
    .profile .table-section,
    .home-actions {
        border: none;
    }
    .url-info{display: none !important;}    
    }
    table.details-table {
        border-collapse: collapse;
    }
    table.details-table td {
        background-color: transparent !important;
   hidden;
    }
    .heading {
        padding: 5px 0 !important;
        margin-top: 15px;
        margin-bottom: 10px;
        background-color: transparent !important;
        color: #2a2a2a !important;
        border-bottom: 2px solid;
    }
    main {
        border-radius: 0 0 15px 15px;
        background: rgba( ) !important;
    }
    .container {
        border-radius: 15px 15px 0 0;
        overflow: hidden;
        margin-top: 30px;
        padding: 10px;
    }
    footer {
        border-radius: 15px;
        background: rgba(255, 255, 255, 0.94) !important;
        display: block !important;
    }
    table.comments-table td {
        background-color: transparent !important;
    }
    .comments-table td:first-child img {
        width: 80px;
        border-radius: 500px;
    }
    .friends-grid{
  text-align:center;
  padding:0px!important;
}
.profile .friends .person img:not(.icon) {
    filter: grayscale(100%);
}
.friends .person{
    background-color: white;
    width:80px!important;
    display: inline-flex!important;
    flex-direction: column-reverse;
    margin:10px;
    vertical-align: top;
    padding-left:5px!important;
    padding-top:5px!important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .7);
}
.friends .person p{
    text-align: center;
    word-wrap: break-word;
}
.profile .friends .person img:not(.icon){
  max-width:70px!important;
}
.profile .friends .person:nth-of-type(1){
    transform: rotate(-4deg);
}
.profile .friends .person:nth-of-type(2){
    transform: rotate(5deg);
}
.profile .friends .person:nth-of-type(3){
    transform: rotate(-2deg);
}
.profile .friends .person:nth-of-type(4){
    transform: rotate(6deg);
}
.profile .friends .person:nth-of-type(5){
    transform: rotate(6deg);}
.profile .friends .person:nth-of-type(6){
    transform: rotate(-1deg);
}
.profile .friends .person:nth-of-type(7){
    transform: rotate(3deg);
}
.profile .friends .person:nth-of-type(8){
    transform: rotate(-3deg);
    }
    .blog-preview p {
        font-size: 0.95rem;
    }
    a.addme {
        font-size: 2rem;
        font-weight: bold;
        margin-bottom: 15px;
        display: block;
    }
        .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: ""
}
.contact .inner a img {
    font-size: 0;
}
.contact .inner a img:before {
    font-size: 1em;
    display: block;
}
   .profile-pic {
        border-radius: 500px;
        overflow: hidden;
}
.profile-pic img {
animation: brrr 0.5s infinite;
} 
@keyframes brrr {
0% {
transform: rotate(5deg);
} 
50% {
transform: rotate(5deg);
} 
51% {
transform: rotate(10deg);
}
100% {
transform: rotate(10deg);
}
</style>
<style>
.comments-table{display: none !important;} 
</style>

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

ce ୨୧˖°.	1738961941 using :] Report Comment
b4tling	1732719083 Using, thanks pookie <333 Report Comment
Devyankee	1732288926 Using <3 Report Comment
Safi Starie	1729957867 using Report Comment
⋆♱Evo♱⋆	1722243430 Using Report Comment
star	1711334739 using Report Comment
elle	1702692345 usingg Report Comment
clara☆	1689477732 this is so cute, using Report Comment
Sammy Johnson	1679671806 Using im just changing catwomen to Juno Steel, love it tho <3 Report Comment
clarkazoid	1676475672 AW THATS SO SICK DUDE I LOVE CATWOMAN Report Comment TYsm!!! by cvpid444; 1676478894; Report
.·:¨𝘗𝘦𝘢𝘯𝘶𝘵¨:·.	1676245468 Thats so cool Report Comment Thank u <3 by cvpid444; 1676247796; Report