Kadavera | User Interfaces

Layout Details

This design was originally created by Kara † Kadavera as a personal layout, and she has kindly given me permission to share it with everyone.

I don't have much information regarding whether she made it from scratch or was inspired by another old layout. I only know that the background image was taken from pimp-my-profile.com, though I don't know the exact original layout it belonged to.

I made some minor adjustments to the design—mostly cleaning up the structure of the code, tweaking the colors, and setting up the typography—but it remains almost identical to her original work.

All credits for the original design belong to its creator.

Updated by N4TH4N43L_XP.

Karavera

Code :

Copy and paste to About Me

<style>

@font-face { 
    font-family: 'ReadableGothic'; 
    src: url('https://file.garden/aZQEtGMXd3dvbXg4/Font/BUFFIED_.TTF');
}
@font-face { 
    font-family: Moms;
    src: url('https://file.garden/aU5WiIV5_n1pLPxC/Mom%C2%ABt___.ttf');
}

/* Body */

body {
    background-color: #000000;
    background-image: url("https://file.garden/aZQEtGMXd3dvbXg4/IMG/kadavera-bg.png");
    background-attachment: fixed;
    background-repeat: repeat;
}
body::before {
    content: ""; 
    display: block;
    height: 320px;
    background-image: url("https://file.garden/aZQEtGMXd3dvbXg4/IMG/kadaver.gif");
    background-position: center;
    background-repeat: repeat;
    background-size: 100% 100%;
    position: fixed;
    bottom: 0%;
    left: 5%;
    width: 94px;
    height: 262px;
}

/* Container */

.container {
    background-color: transparent;
}

/* Nav */

nav .top, 
nav .links {
    background: linear-gradient(transparent, #000000);
}
nav .links {
    text-align: center;
}
nav .links li:first-child {
    display: none;
}
nav .links li a {
    color: #FFFFFF;
    font-family: Helvetica, sans-serif;
    font-weight: bold;
    text-decoration: none;
    text-shadow: none;
}
nav .links li a:hover {
    color: #808080;
    text-decoration: none;
}

/* Main */

main {
    background-color: rgba(0, 0, 0, 0.6);
}

/* Name */

.profile span[itemprop="name"] h1 {
    background-color: #000000;
    border: 2px dashed #FFFFFF;
    border-bottom: none;
    padding: 7px 10px;
    color: #FFFFFF;
    font-family: Helvetica, sans-serif;
    font-weight: bold; 
}
.profile .edit-link {
    display: none;
}

/* General About / PFP */

.profile .general-about {
    background-color: #000000;
    border-left: 2px dashed #FFFFFF;
    border-right: 2px dashed #FFFFFF;
    margin-top: -12px; 
    padding: 7px 10px;
} 
.profile .general-about .profile-pic img {
    width: 150px;
    height: 150px;
    max-width: 150px;
    max-height: 150px;
    object-fit: cover;
}
.profile .general-about .details {
    height: 180px;
    overflow: hidden auto;
}
.profile .general-about .details .icon {
    display: none;
}
.profile .general-about .details p,
.profile .general-about .details a {
    color: #FFFFFF;
    font-family: Helvetica, sans-serif;
    font-weight: bold;
}
.profile .general-about .details a:hover {
    color: #808080;
}
.profile .general-about .details .online {
    content: url("https://creepyboom.neocities.org/Img/Online/online-(127).gif");
}
.profile .general-about .details::-webkit-scrollbar {
    width: 0px;
    height: 0px;
}

/* Mood */

.profile .mood {
    background-color: #000000;
    border: 2px dashed #FFFFFF;
    border-top: none;
    padding: 7px 10px;
    margin-bottom: 10px;
}
.profile .mood p,
.profile .mood a { 
    color: #FFFFFF;
    font-family: Helvetica, sans-serif;
    font-weight: bold;
}
.profile .mood a:hover {
    color: #808080;
}
.profile .mood b {
    color: #808080;
    font-family: Moms;
    font-weight: bold;
}

/* Contacto */

.profile .contact {
    background-color: #000000;
    background-image: url("https://file.garden/aZQEtGMXd3dvbXg4/IMG/kadavera-contact.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    border: 2px dashed #FFFFFF;
    margin-top: 10px;
}
.profile .contact .heading,
.profile .contact .icon,
.profile .contact img {
    display: none;
}
.profile .contact .f-row .f-col a {
    display: inline-block;
    width: 100%;
    line-height: 1;
    margin: 2.50px -7px 2.50px;
    padding: 0px 10px;
    color: #FFFFFF;
    font-size: 0px;
    font-family: 'ReadableGothic', Helvetica, sans-serif;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
    text-shadow: 4px 2px 3px #808080;
}
.profile .contact .f-row .f-col a::before {
    display: block;
    font-size: 20px;
}
.profile .contact .f-row .f-col a:has(img[src*="add.png"])::before { 
    content:"Add Me";
    text-align: left;
}
.profile .contact .f-row .f-col a:has(img[src*="hourglass.png"])::before { 
    content:"Requests";
    text-align: left;
}
.profile .contact .f-row .f-col a:has(img[src*="delete.png"])::before { 
    content:"Remove";
    text-align: left;
}
.profile .contact .f-row .f-col a:has(img[src*="award_star_add.png"])::before { 
    content:"Love Me";
    text-align: right;
}
.profile .contact .f-row .f-col a:has(img[src*="comment.png"])::before {
    content:"Disturb Me";
    text-align: left;
}
.profile .contact .f-row .f-col a:has(img[src*="arrow_right.png"])::before {
    content:"Warn Them";
    text-align: right;
}
.profile .contact .f-row .f-col a:has(img[src*="email.png"])::before { 
    content:"Chit Chat";
    text-align: left;
}
.profile .contact .f-row .f-col a:has(img[src*="exclamation.png"])::before {
    content:"Hate Me";
    text-align: right;
}
.profile .contact .f-row .f-col a:has(img[src*="group_add.png"])::before {
    content:"Recruit";
    text-align: left;
}
.profile .contact .f-row .f-col a:has(img[src*="flag_red.png"])::before {
    content:"Obliterate";
    text-align: right;
}

/* Url Info */

.profile .url-info {
    background-color: #000000;
    border: 2px dashed #FFFFFF;
    margin-top: 10px;
}
.profile .url-info p,
.profile .url-info a {
    color: #FFFFFF;
    font-family: Helvetica, sans-serif;
    font-weight: bold;
}
.profile .url-info a:hover {
    color: #808080;
}
.profile .url-info b {
    color: #808080;
    font-family: Moms;
    font-weight: bold;
}

/* Interests & Links */

.profile .table-section {
    background-color: #000000;
    border: 2px dashed #FFFFFF;
    margin-top: 10px;
}
.profile .table-section .icon {
    display: none;
}
.profile .table-section .heading {
    background-color: #000000;
}
.profile .table-section .heading h4 {
    color: #FFFFFF;
    font-family: Helvetica, sans-serif;
    font-weight: bold;
}
.profile .table-section a { 
    color: #FFFFFF;
    font-family: Helvetica, sans-serif;
    font-weight: bold;
}
.profile .table-section a:hover {
    color: #808080;
}
.profile .table-section .details-table td:first-child {
    background-color: #000000;
}
.profile .table-section .details-table td:first-child p, 
.profile .table-section .details-table td:first-child a {
    color: #808080;
    font-family: Moms;
    font-weight: bold;
    text-decoration: none; 
}
.profile .table-section .details-table td:nth-child(2) { 
    background-color: #000000; 
}
.profile .table-section .details-table td:nth-child(2) p, 
.profile .table-section .details-table td:nth-child(2) a,
.profile .table-section .details-table td:nth-child(2) ul, 
.profile .table-section .details-table td:nth-child(2) li,
.profile .table-section .details-table td:nth-child(2) h1, 
.profile .table-section .details-table td:nth-child(2) h2, 
.profile .table-section .details-table td:nth-child(2) h3, 
.profile .table-section .details-table td:nth-child(2) h4, 
.profile .table-section .details-table td:nth-child(2) h5, 
.profile .table-section .details-table td:nth-child(2) h6 {
    color: #FFFFFF;
    font-family: Helvetica, sans-serif;
    font-weight: bold;
}
.profile .table-section .details-table td:nth-child(2) a:hover {
    color: #808080;
}
.profile .table-section .details-table td:nth-child(2) b {
    color: #808080;
    font-family: Moms;
    font-weight: bold;
}
.profile .table-section .details-table td:nth-child(2) i { 
    color: #FFFFFF;
    font: italic 13pt candara; 
    letter-spacing: -0.5px; 
}
.profile .table-section .details-table td:nth-child(2) u { 
    color: #FFFFFF; 
    font: bold 13pt candara;
    text-decoration: none; 
    border-bottom: 2px solid #808080;
}
.profile .table-section .details-table td:nth-child(2) img {
    width: 100%;
    height: auto;
}

/* Info */

.profile .profile-info {
    background-color: #000000;
    background-image: url("https://file.garden/aZQEtGMXd3dvbXg4/IMG/kadavera-bg.png");
    background-repeat: repeat;
    border: 2px dashed #FFFFFF;
}
.profile .profile-info h3,
.profile .profile-info h3 a {
    color: #FFFFFF;
    font-family: Helvetica, sans-serif;
    font-weight: bold;
}
.profile .profile-info h3 a:hover {
    color: #808080;
}

/* Blogs */

.profile .blog-preview {
    background-color: #000000;
    border: 2px dashed #FFFFFF;
    margin-top: 10px; 
    padding-bottom: 5px;
}
.profile .blog-preview .icon {
    display: none;
}
.profile .blog-preview h4 {
    background-color: #000000;
    margin: 0;
    padding: 1px 7px;
}
.profile .blog-preview h4,
.profile .blog-preview h4 a {
    color: #FFFFFF;
    font-family: Helvetica, sans-serif;
    font-weight: bold;
    text-decoration: none;
}
.profile .blog-preview h4 a:hover {
    color: #FFFFFF;
}
.profile .blog-preview p {
    margin: 0;
    padding: 5px 8px;
    display: block; 
    line-height: 1.2;
}
.profile .blog-preview a {
    display: inline;
}
.profile .blog-preview p {
    color: #808080;
    font-family: Moms;
    font-weight: bold;
}
.profile .blog-preview a { 
    color: #FFFFFF;
    font-family: Helvetica, sans-serif;
    font-weight: bold;
}
.profile .blog-preview a:hover {
    color: #808080;
}

/* Blurbs */

.profile .blurbs {
    background-color: #000000;
    border: 2px dashed #FFFFFF;
    margin-top: 10px; 
}
.profile .blurbs .heading {
    background-color: #000000;
}
.profile .blurbs .heading h4 {
    color: #FFFFFF;
    font-family: Helvetica, sans-serif;
    font-weight: bold;
}
.profile .blurbs a { 
    color: #FFFFFF;
    font-family: Helvetica, sans-serif;
    font-weight: bold;
}
.profile .blurbs a:hover {
    color: #808080;
}
.profile .blurbs .inner p, 
.profile .blurbs .inner a,
.profile .blurbs .inner ul, 
.profile .blurbs .inner li,
.profile .blurbs .inner h1, 
.profile .blurbs .inner h2, 
.profile .blurbs .inner h3, 
.profile .blurbs .inner h4, 
.profile .blurbs .inner h5, 
.profile .blurbs .inner h6 {
    color: #FFFFFF;
    font-family: Helvetica, sans-serif;
    font-weight: bold;
}
.profile .blurbs .inner a:hover {
    color: #808080;
}
.profile .blurbs .inner b {
    color: #808080;
    font-family: Moms;
    font-weight: bold;
}
.profile .blurbs .inner i { 
    color: #FFFFFF;
    font: italic 13pt candara; 
    letter-spacing: -0.5px; 
}
.profile .blurbs .inner u { 
    color: #FFFFFF; 
    font: bold 13pt candara;
    text-decoration: none; 
    border-bottom: 2px solid #808080;
}
.profile .blurbs .inner .section h4 {
    color: #808080;
    font-family: Moms;
    font-weight: bold;
    text-decoration: none; 
}

/* Friends */

.profile .friends {
    background-color: #000000;
    border: 2px dashed #FFFFFF;
    margin-top: -10px; 
}
.profile .friends .icon {
    display: none;
}
.profile .friends .heading {
    background-color: #000000;
}
.profile .friends .heading h4, 
.profile .friends .heading .more {
    color: #FFFFFF;
    font-family: Helvetica, sans-serif;
    font-weight: bold;
    text-decoration: none;
}
.profile .friends .heading .more:hover {
    color: #FFFFFF;
}
.profile .friends .inner p b {
    color: #808080;
    font-family: Moms;
    font-weight: bold;
}
.profile .friends .count {
    color: #FFFFFF;
    font-family: Helvetica, sans-serif;
    font-weight: bold;
}
.profile .friends .friends-grid {
    text-align: center;
}
.profile .friends .friends-grid .person a p {
    color: #FFFFFF;
    font-family: Helvetica, sans-serif;
    font-weight: bold;
}
.profile .friends .friends-grid .person a:hover p {
    color: #808080;
}
.profile .friends .friends-grid .person a, 
.profile .friends .friends-grid .person a p {
    text-decoration: none !important;
    border: none !important;
    outline: none !important;
}
.profile .friends .person:nth-child(n+1)::after {
    content: url("https://creepyboom.neocities.org/Img/Online/online-(127).gif");
}
.profile .friends .friends-grid .pfp-fallback {
    width: 100px;
    height: 100px;
    object-fit: cover;
}

/* Comments */

.profile #comments {
    background-color: #000000;
    border: 2px dashed #FFFFFF;
    margin-top: 10px;
}
.profile #comments .icon {
    display: none;
}
.profile #comments .heading {
    background-color: #000000;
}
.profile #comments .heading h4 {
    color: #FFFFFF;
    font-family: Helvetica, sans-serif;
    font-weight: bold;
}
.profile #comments a { 
    color: #FFFFFF;
    font-family: Helvetica, sans-serif;
    font-weight: bold;
}
.profile #comments a:hover {
    color: #808080;
}
.profile #comments .inner p b a {
    color: #FFFFFF;
    font-family: Helvetica, sans-serif;
    font-weight: bold;
}
.profile #comments .inner p b a:hover {
    color: #808080;
}
.profile #comments .count {
    color: #FFFFFF;
    font-family: Helvetica, sans-serif;
    font-weight: bold;
}
.profile #comments .comments-table, 
.profile #comments .comments-table td {
    border: none;
    background-color: #000000;
}
.profile #comments .comments-table td:first-child a p {
    color: #FFFFFF;
    font-family: Helvetica, sans-serif;
    font-weight: bold;
}
.profile #comments .comments-table td:first-child a:hover p {
    color: #808080;
}
.profile #comments .comments-table td:first-child a, 
.profile #comments .comments-table td:first-child a p {
    text-decoration: none !important;
    border: none !important;
    outline: none !important;
}
.profile #comments .comments-table td:first-child::after {
    content: url("https://creepyboom.neocities.org/Img/Online/online-(127).gif");
}
.profile #comments .comments-table td:first-child .pfp-fallback {
    width: 100px;
    height: 100px;
    object-fit: cover;
}
.profile #comments .comments-table td:nth-child(2) p, 
.profile #comments .comments-table td:nth-child(2) a,
.profile #comments .comments-table td:nth-child(2) ul, 
.profile #comments .comments-table td:nth-child(2) li,
.profile #comments .comments-table td:nth-child(2) h1, 
.profile #comments .comments-table td:nth-child(2) h2, 
.profile #comments .comments-table td:nth-child(2) h3, 
.profile #comments .comments-table td:nth-child(2) h4, 
.profile #comments .comments-table td:nth-child(2) h5, 
.profile #comments .comments-table td:nth-child(2) h6 {
    color: #FFFFFF;
    font-family: Helvetica, sans-serif;
    font-weight: bold;
}
.profile #comments .comments-table td:nth-child(2) a:hover {
    color: #808080;
}
.profile #comments .comments-table td:nth-child(2) b,
.profile #comments .comments-table td:nth-child(2) .ago {
    color: #808080;
    font-family: Moms;
    font-weight: bold;
}
.profile #comments .comments-table td:nth-child(2) i { 
    color: #FFFFFF;
    font: italic 13pt candara; 
    letter-spacing: -0.5px; 
}
.profile #comments .comments-table td:nth-child(2) u { 
    color: #FFFFFF; 
    font: bold 13pt candara;
    text-decoration: none; 
    border-bottom: 2px solid #808080;
}
.profile #comments .comments-table td:nth-child(2) .comment-replies {
    background-color: #000000;
    border: none;
}

/* Footer */

footer {
    background: linear-gradient(transparent, #000000);
}
footer p, 
footer a,
footer .links li a,
footer .links li i {
    color: #FFFFFF;
    font-family: Helvetica, sans-serif;
    font-weight: bold;
    text-decoration: none;
    text-shadow: none;
}
footer a:hover,
footer .links li a:hover {
    color: #808080;
    text-decoration: none;
}

/* Credit */

.credit {
   position: fixed; 
   top: 0; 
   left: 3px;
   width: 10%;
}

/* MOBILES (Max 600px) */

@media (max-width: 600px) {

/* Contacto */
    .profile .contact {
        background-size: 70% 100%;
    }

/* Friends */
    .profile .friends .person:nth-child(9) p {
        display: none;
    }

/* Credit */

.credit {
        display: none;
    }
}

</style>