Xxx.v4mp1r3du3t.xxX's profile picture

Published by

published
updated

Category: Web, HTML, Tech

draculaura/monster high themed layout

*hi! the layout section is closed rn but i want to post this and move on to other things, so i'm going to put it on a blog and upload it there later*


Draculaura/monster high layout with music and cursor
- monster high logo cursor in base 64
- autoplay music set to "girlfriend" by avril lavigne. change it by sending your mp3 in a discord server or chat, right-clicking and selecting "get link", and replacing the link already there with the one you got from that.
- add the code for a spotify playlist in the "who i'd like to meet" section. you can change it by going to your playlist and clicking the three dots next to the play button, selecting the share option and then "embed playlist". Copy and paste the code in place of what is already there, it should show up.
- Thank you to Stone (Im_not_even_emo_) for the advice about the playlist, it really helped!!
-if you use this layout, please just leave a comment down below!
code for your "who I'd like to meet box"
<iframe src="https://open.spotify.com/embed/playlist/4fMNfzZuxgnVjpHoJl0sa0?utm_source=generator" width="100%" height="380" frameborder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"></iframe>

code for your "about me" box
<style>
    body {
        background:url(https://cdn.discordapp.com/attachments/891321043619311666/906785288955756574/monster_high_spacehey_wallpaper.png)
</style>
<style>
    .profile {
        background:black;
    }
</style>
<style>
    .profile .blurbs .heading,
    .profile .friends .heading {
        background-color:#D4027F;
    }
</style>
<style>
 .profile .contact .heading,
 .profile .table-section .heading {
     background-color:black;
 }
</style>
<style>
 .profile .contact,
 .profile .table-section {
     border-color:black;
 }
</style>
<style>
main .left {
    background-color:#D4027F ;
}
</style>
<style>
.profile .url-info{
    border-color: black;
}
</style>
<style>
.profile .contact {
    border-color: black;
}
</style>
<style>
nav .top {
    background-color:black;
}
</style>
<style>
    ..profile .table-section .heading {
        border-color:red;
    }
</style>
<style>
.details-table td * {
        background:white;
    }
</style>
<style>
    .profile .friends .heading h4 {
        color:black;
    }
</style>
<style>
    nav .links {
        background-color:#D4027F;
    }
</style>
<style>
    .profile .blurbs .heading h4 {
        color:black;
    }
</style>
<style>
    .details-table td {
        background:white;
    }
</style>
<style>
    .details-table td * {
        border-color: white;
    }
</style>
<style>
    .details-table td * {
        color: black;
    }
</style>
<style>
    .profile .friends .inner {
        color:#E4007B;
    }
</style>
<style>
    .profile .blurbs .inner {
        color:#D4027F;
    }
</style>
<style>
  
</style>
<style>
    .profile .blurbs .inner {
        color:#D4027F;
    }
</style>
<style>
    h4 {
        color:;
    }
</style>
<style>
    div .blog-preview {
        background:#D4027F;
    }
</style>
<style>
    a {
        color:white;
    }
</style>
<style>
    .profile .contact .heading {
        color:#D4027F;
    }
</style>
<style>
    .profile .table-section .heading {
        color:#D4027F;
    }
</style>
<style>
    .comments-table td:first-child {
        background:url();
    }
</style>
<style>
    .comments-table td {
        background:black;
    }
</style>
<style>
    .comments-table td {
        border-color:#D4027F;
    }
</style>
<style>
    table.comments-table {
        border-color:#D4027F;
    }
</style>
<style>
    footer {
        background:black;
    }
</style>
<style>
    footer {
        color:#D4027F;
</style>
<style> 
.blurbs .inner .section:nth-child(2) h4{ font-size:0; }
.blurbs .inner .section:nth-child(2) h4:before{ content: "my muzic taste"; font-size:.8rem; } 
</style>
<style>
.friends .heading{ font-size:0; }
.friends .heading:before{ content: "my fangtastic friendz"; font-size:.8rem; font-weight:bold; color:black; }
</style>
<style>
.friends#comments .heading{ font-size:0; }
.friends#comments .heading:before{ content: "creeperific commentz"; font-size:.8rem; font-weight:bold; } </style>
<style>
    .details-table td:first-child {
        background-color:white;
    }
</style>
<style>
   .profile .table-section .heading h4 { font-size:0; }
.profile .table-section .heading h4:before{ content: "the ghoulish detailz"; font-size:.8rem; font-weight:bold; } </style>

<style>
    .contact .heading{ font-size:0; }
.contact .heading:before{ content: "say hi! i dont bite"; font-size:.8rem; font-weight:bold; }
</style>
<style> 
.profile .table-section:nth-child(2) h4{ font-size:0; }
.blurbs .inner .section:nth-child(2) h4:before{ content: "my spooktackular music taste"; font-size:.8rem; color:#D4027F; } 
</style>
<style>
  .blurbs .heading{ font-size:0; }
.blurbs .heading:before{ content: "meet the ghoul"; font-size:.8rem; font-weight:bold; color:black; }
</style>
<style>
  .profile .blurbs .section h4{ font-size:0; }
.profile .blurbs .section h4:before{ content: "i'm scary cool, i promise"; font-size:.8rem; font-weight:bold; color:#D4027F; }
</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>
    #music {
        position: fixed;
        bottom: 10px;
        left: 10px;
        width: 0px;
        transition: 0.5s width;
    }

    #music:hover {
        width: 0px;
    }
</style>
<audio controls="controls" id="music" loop="loop"><audio controls autoplay>
    <source src="https://cdn.discordapp.com/attachments/891321043619311666/906785237944651826/Girlfriend_-_Avril_Lavigne.mp3"/>
</audio>

<style>

body {cursor: url('data:image/x-icon;base64, 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'),auto; }
</style>
<style> .count {color:white}</style>
<style>
.general-about .profile-pic img {
border: 5px solid ;
border-color: white } </style>





4 Kudos

Comments

Displaying 1 of 1 comments ( View all | Add Comment )

mordecai

mordecai's profile picture

this is so cute


Report Comment