Draculaura Layout

Tags: black, pink, monsterhigh, cute, draculaura, dark, gothic, hearts, gremlin

Description:

☆ Feel free to edit to your liking.
☆ Copy and paste the layout into your "About Me".
☆ To preview the layout, copy and paste the code HERE.
☆ For a video preview, HERE.
☆ Comments are appreciated! The box-shadow on the search bar may look weird, I am terribly sorry, I tried to fix it but nothing worked.

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by 𝐆𝐑𝐄𝐌𝐋𝐈𝐍 (https://layouts.spacehey.com/layout?id=24457) -->

/*EDIT YOUR ABOUT ME HERE, ADD EMBEDS/GIF HERE IF YOU LIKE*/
<style>
/*===============Cursor===============*/
a:hover {
    cursor: url('https://cur.cursors-4u.net/symbols/sym-6/sym597.cur'), auto;
}

* {
    cursor: url('https://cur.cursors-4u.net/symbols/sym-6/sym596.cur'), auto;
}
body{
    background-image: url('https://i.pinimg.com/564x/c6/6b/ce/c66bce8aba79b8cefe4c08bb279d4784.jpg');
    background-size: 550px;
}
nav .links{
    color: #e73895;
    background-color: black;
    border-right: solid 1px;
    border-left: solid 1px;
    border-bottom: solid 1px;
    background-color: #000;
    text-shadow: 2px 2px 5px #e73895;
    font-weight: bold;
    font-family: italic;
    text-align: center;
    box-shadow: calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) #e73895;
}
nav .top{
    background-color: black;
    border-top: solid 1px;
    border-left: solid 1px;
    border-right: solid 1px;
    background-color: #000;
    color: #e73895;
    text-shadow: 2px 2px 5px #e73895;
    font-weight: bold;
    font-family: italic;
    font-size: 15px;
    box-shadow: calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) #e73895;
}
nav img.logo{
    filter: brightness(0) saturate(100%) invert(23%) sepia(83%) saturate(5779%) hue-rotate(305deg) brightness(104%) contrast(105%);
}
a:hover{
    color: white;
}
main {
    background: transparent;
    padding: 20px 0px;
}
main .left{
    background-image: url('https://i.pinimg.com/564x/c6/6b/ce/c66bce8aba79b8cefe4c08bb279d4784.jpg');
    background-size: 550px;
    padding: 20px;
}
main .right{
    background: transparent!important;
}
.general-about .profile-pic {
    border: solid 1px #e73895;
    box-shadow: calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) #e73895;
    margin-bottom: 30px;
    animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    margin-left: 0px;
    margin-top: 0px;
}
@keyframes floating {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 5px); }
    100%   { transform: translate(0, -0px); }
}
/*===============you can change the link to anything else===============*/
.profile-pic > img { display:none; }
.profile-pic:after { background-image: url("https://64.media.tumblr.com/954ad8f9d6d2350af943f0a866b7e56f/f62e777bf4ee89fc-0d/s400x600/0adbf5e0a9edbf42b984b81c78e58ec73ad01877.gif"); display: inline-block; content:"" }
.general-about .profile-pic:after { background-size: cover; width: 160px; height: 150px; } 
.profile-pic:after{ 
  border: 4px solid  rgba(255, 161, 207, 1);  
  box-shadow: 1px 0px 10px 2px rgba(254, 120, 180, 0.46);
} 
.profile.person img:not(.icon){ 
    animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    margin-left: 0px;
    margin-top: 0px;
} 
.profile .mood{
    background-color: black;
    border: solid 1px #e73895;
    margin-bottom: 30px;
    box-shadow: calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) #e73895;
    text-align: center;
    color: #e73895;
    font-family: italic;
    text-shadow: 2px 2px 5px;
}
.profile .contact{
    background-color: black;
    border: solid 1px #e73895;
    margin-bottom: 30px;
    box-shadow: calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) #e73895;
    text-align: center;
    color: #e73895;
    font-family: italic;
}
.profile .url-info{
    background-color: black;
    margin-top: 30px;
    border: solid 1px #e73895;
    box-shadow: calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) #e73895;
    color: #e73895;
    font-family: italic;
    text-align: center;
}
.profile .contact .heading{
    color: #ff5cc0;
    font-family: italic;
    background-color: black;
    text-shadow: 2px -1px 5px;
    font-size: 15px;
}
.profile .table-section{
    margin-top: 30px;
    font-family: italic;
    border: solid 1px #e73895;
    box-shadow: calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) #e73895;
    background-color: black;
    text-align: center;
}
.profile .blog-preview{
    border: solid 1px #e73895;
    margin-bottom: 30px;
    box-shadow: calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) #e73895;
    text-align: center;
    color: #ff5cc0;
    font-family: italic;
    text-shadow: 2px 2px 5px;
    background-color: black;
    font-size: 15px;
}
.profile .blurbs .inner{
    border-bottom: solid 1px #e73895;
    border-left: solid 1px #e73895;
    border-right: solid 1px #e73895;
    margin-bottom: 30px;
    box-shadow: calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) #e73895;
    text-align: center;
    color: #e73895;
    font-family: italic;
    text-shadow: 2px 2px 5px;
    background-color: black;
}
.profile .friends .inner{
    background-color: black;
    border-bottom: solid 1px #e73895;
    border-left: solid 1px #e73895;
    border-right: solid 1px #e73895;
    margin-bottom: 30px;
    box-shadow: calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) #e73895;
    text-align: center;
    color: #e73895;
    font-family: italic;
    font-size: 15px;
    text-shadow: 2px 2px 5px;
}
table.comments-table{
    background-color: black;
    color: #e73895;
    text-align: center;
    font-family: italic;
    font-size: 13px;
}
.profile .table-section .heading{
    background-color: black;
    color: #ff5cc0;
    font-family: italic;
    text-shadow: 2px 2px 5px;
    font-size: 15px;
}
.details-table td{
    background-color: black;
    border-bottom: solid 1px #e73895;
    color: #e73895;
    font-family: italic;
}
.details-table td *{
    background-color: black;
    color: #ff5cc0;
    font-family: italic;
    text-shadow: 2px 2px 5px;
    font-size: 12px;
}
.details-table td{
    color: #ff5cc0;
    background-color: transparent!important;
}
.profile .blurbs .heading{
    background-color: transparent;
    border-top: solid 1px #e73895;
    border-left: solid 1px #e73895;
    border-right: solid 1px #e73895;
    box-shadow: calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) #e73895;
    text-align: center;
    color: #e73895;
    font-family: italic;
    text-shadow: 2px 2px 5px;
    font-size: 15px;
}
.profile .friends .heading{
    background-color: black;
    border-top: solid 1px #e73895;
    border-left: solid 1px #e73895;
    border-right: solid 1px #e73895;
    box-shadow: calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) #e73895;
    text-align: center;
    font-family: italic;
    font-size: 15px;
    color: #e73895;
    text-shadow: 2px 2px 5px;
}
.comments-table td{
    background-color: transparent;
    border: solid 1px #ff5cc0!important;
    outline: none!important;
    background-size: cover;
}
.comments-table td:first-child{
    background-color: transparent;
    border: solid 1px #ff5cc0!important;
    outline: none!important;
}
.comments-table{
    border: solid 1px #ff5cc0!important;
}
.comments-table td *{
    color: #ff5cc0;
}
/*===============Replace Icons on comments, remove/edit===============*/
.comments-table td * > img { display:none; }
.comments-table td:first-child{
    background-image: url('https://media2.giphy.com/media/fuJqgXw62Gp9QtLV3D/200.gif?cid=95b279446dfcf5252cbbe3af2c57bd947837d6882337e606&rid=200.gif&ct=s');
    background-size: cover; height: 150px; width: 169px;
}
.profile h1{
    color: #ff5cc0;
    font-family: 'Yu Gothic';
    font-size: 30px;
    text-align: center;
    text-shadow: -1px 3px 10px #e73895;
}
/*===============Online===============*/
.online {
    content: url('https://dl.glitter-graphics.com/pub/272/272679lz7b9hcea1.gif');
}
.details p:last-child{
    color: #ff5cc0;
    text-shadow: 2px 2px 5px #e73895;
}
.url-info {display: none !important;} /* to hide the url */
.blurbs .heading{display: none !important;} /* to hide the blurbs heading */

a {color: var(--links) !important;} /* color of links */
a:hover {color: var(white) !important;} /* color of links on hover */
p, h2 {color: var(--text) !important;} /* color of text */
.friends a p {color: var(--names) !important;} /* color of names, and friends counter */
.friends a:hover p {color: var(--hover) !important;} /* color of names on hover */
nav label {color: var(--links) !important;} /* color of search */
.section h4 {color: var(--headers) !important; text-align: center;} /* aboutme & want2meet headings */
.comment-reply:not(:first-child) {border-top: 3px double hotpink;} /* line in between comment replies*/
.count {color: #f3d7d7;}

a:hover, a:active, .blog-entry .kudos-btn:hover, .blog-entry .kudos-btn:active {
    text-decoration: underline;
    text-decoration-style: wavy;
}
nav .links a:hover {
    text-decoration: underline;
    text-decoration-style: wavy;
}
.logout-btn:hover, .logout-btn:active {
    text-decoration: underline;
    text-decoration-style: wavy;
}
.blurbs{
    border-top: solid 1px #e73895;
}
.comments-table {
    display: block;
    height: 500px!important;
    overflow-y: scroll;
    border: var(--borders) !important;
    outline: none !important;
    border: none!important;
}
.profile-info{
    margin-bottom: 30px;
    background-color: black;
    border: solid 1px #e73895;
    box-shadow: calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) #e73895;
    color: #e73895;
}
.general-about .details{
    color: #ff5cc0;
    font-family: italic, bold;
    font-size: 13px;
}
footer {
    background-color: transparent;
    color: white;
    text-shadow: 2px 2px 5px #e73895;
}
</style>

<style>
/* Force scrollbars onto browser window */

::-webkit-scrollbar {
    width: 5px;
    height: 12px;
}

::-webkit-scrollbar-track {
    border-radius: 0px;
    width: 2px;
    border: 1px solid hotpink;
}

::-webkit-scrollbar-thumb {
    background: hotpink;
    border-radius: 0px;
}

::-webkit-scrollbar-thumb:hover {
    background: hotpink;
}

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

Ximena!	1717276545 Using! :) Report Comment
Swett_Cherry	1708294481 Using!!<3 Report Comment
luci ☆ ≧▽≦	1703300811 using!!!:3 Report Comment
Loki	1691976808 Using! Report Comment
nokia ♡	1686261151 using :3 Report Comment
❀✧𝑨𝒕𝒛𝒊✧❀	1683868328 Using this!!! Report Comment
☆:.｡. otis .｡.:☆	1679883866 using this ☆ Report Comment
kachouzu	1678066757 using!! Report Comment
✿Anna✿	1676932202 Using it! Tyy Report Comment
Em (─‿‿─)♡.✧⭒	1674836480 Using it as my first layout ever! it's so pretty <3333 Report Comment
Laís	1674659201 It looks cute, thanks! I'm using it :) Report Comment Have been for a couple days but forgot to comment by Laís; 1674659254; Report
jayda	1673786705 thank uuuu Report Comment
celsooo	1672128165 te quedo muy lindo!!!! lo usare Report Comment
quackk1th	1670657534 4got to comment but i used this as a base for my layout ! thank u !! Report Comment
prettycorpse	1669834004 using it Report Comment
Lu	1666822753 Using it, thankss :) Report Comment by 𝐆𝐑𝐄𝐌𝐋𝐈𝐍; 1666846846; Report