Draculaura Layout

Tags: monster high, draculaura, pink, white, black
Description:

hey, this is Draculaura's layout, a part of my monster high series. i hope you like it! :)
Preview:

click on the image for a larger preview
Code:

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

<style>
@import url('https://fonts.googleapis.com/css2?family=UnifrakturMaguntia&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');

body {
  background:
   url(https://i.pinimg.com/originals/69/07/bd/6907bd70db595d8222dac84aab91b6a7.gif);
    background-size: 100%;

}
.profile {
  background-image:
   url(https://wallpapercave.com/wp/wp10577961.jpg);
    background-repeat: repeat;
     background-size: 100%;
      border-radius: 10px;
       border-style: dashed;
        border-width: 2px;
         border-color: deeppink;

}
nav {
  color: black;

}
nav .links {
  background-color: transparent;

}
nav .top {
  background-image:
   url(https://wallpapercave.com/wp/wp10577961.jpg);
    background-size: 100%;
     border-style: dashed;
      border-width: 2px;
       border-color: deeppink;
        border-radius: 10px;

}
.contact, .url-info, .table-section {
  background: black;

}
h1 {
  background-color: transparent;
   color: black;
    font-family: 'UnifrakturMaguntia', cursive;

}
a {
  color: white;

}
.details {
  background-color: black;
   background-size: width: 10px; height: 160px;
    border-style: dashed;
     border-width: 2px;
      border-color: deeppink;
       border-radius: 10px;
        color: white;
         font-family: 'Great Vibes', cursive;
          font-size: 22px;

}
.profile .mood p {
  color: black;
   font-family: 'UnifrakturMaguntia', cursive;
    font-size: 20px;

}
.profile .contact {
  border-style: dashed;
   border-width: 2px;
    border-color: deeppink;
     border-radius: 10px;

}
main {
  background: transparent;

}
.profile .contact .heading {
  background: black;
   color: deeppink;
    font-family: 'UnifrakturMaguntia', cursive;
     font-size: 18px;
      border-style: dashed;
       border-width: 1px;
        border-color: white;
         border-radius: 10px;

}
.profile .url-info {
  border-style: dashed;
   border-width: 2px;
    border-color: deeppink;
     border-radius: 10px;
      color: white;
       font-family: 'Great Vibes', cursive;
        font-size: 18px;

}
.profile .table-section {
  border-style: dashed;
   border-width: 2px;
    border-color: deeppink;
     border-radius: 10px;

}
.profile .table-section .heading {
  background: black;
   color: white;
    font-family: 'UnifrakturMaguntia', cursive;
     font-size: 18px;

}
.details-table td:first-child {
  background: black;
   color: white;
    font-family: 'UnifrakturMaguntia', cursive;
     font-size: 18px;
      border-style: dashed;
       border-width: 1px;
        border-color: white;
         border-radius: 10px;

}
.details-table td {
  background: black;
   color: deeppink;
    font-family: 'Great Vibes', cursive;
     font-size: 23px;
      border-style: dashed;
       border-width: 1px;
        border-color: white;
         border-radius: 10px;

}
.online {
  font-size: 13px;
   color: deeppink;

}
.online img {
  content: url('https://i.imgur.com/OMnWzFc.png');

}
.profile-info {
  border-style: dashed;
   border-width: 2px;
    border-color: deeppink;
     border-radius: 10px;
      font-family: 'UnifrakturMaguntia', cursive;
       font-size: 25px;

}
.blog-preview {
  border-style: dashed;
   border-size: 1px;
    border-color: deeppink;
     border-radius: 10px;
      background: black;

}
.blog-preview h4 {
  color: deeppink;
   font-family: 'UnifrakturMaguntia', cursive;
    font-size: 20px;
     text-align: center;
      border-style: dashed;
       border-width: 1px;
        border-color: white;
         border-radius: 10px;

}
.blog-preview p {
  color: deeppink;
   font-family: 'Great Vibes', cursive;
    font-size: 20px;
     text-align: center;
      border-style: dashed;
       border-width: 1px;
        border-color: white;
         border-radius: 10px;

}
.contact .inner .f-row {
  font-family: 'Great Vibes', cursive;
   font-size: 15px;

}
.url-info b {
  font-family: 'UnifrakturMaguntia', cursive;
   color: deeppink;

}
.profile .blurbs .heading {
  background: black;
   font-family: 'UnifrakturMaguntia', cursive;
    font-size: 18px;
     color: white;
      border-style: dashed;
       border-width: 2px;
        border-radius: 10px;
         border-color: deeppink;

}
.profile .blurbs .inner {
  background: black;
   font-family: 'UnifrakturMaguntia', cursive;
    font-size: 15px;
     border-style: dashed;
      border-width: 2px;
       border-radius: 10px;
        border-color: deeppink;

}
.profile .blurbs .section {
  font-family: 'Great Vibes', cursive;
   font-size: 15px;

}
.profile .friends .heading {
  background: black;
   font-family: 'UnifrakturMaguntia', cursive;
    font-size: 18px;
     color: white;
      border-style: dashed;
       border-width: 2px;
        border-radius: 10px;
         border-color: deeppink;

}
.profile .friends p {
  background: black;
   font-family: 'Great Vibes', cursive;
    color: white;
     font-size: 20px;
      border-style: dashed;
       border-width: 2px;
        border-radius: 10px;
         border-color: deeppink;

}
table.comments-table {
  border-top-color: deeppink;
   border-top-style: dashed;
    border-top-left-radius: 10px;
     border-top-right-radius: 10px;
      border-top-width: 2px;
       border-right-color: deeppink;
        border-right-style: dashed;
         border-right-width: 2px;
          border-left-color: deeppink;
           border-left-style: dashed;
            border-left-width: 2px;
             border-bottom-color: deeppink;
              border-bottom-style: dashed;
               border-bottom-left-radius: 10px;
                border-bottom-right-radius: 10px;
                 border-bottom-width: 2px;

}
footer {
  background: transparent;
   color: white;

}
:root {
--light-gray: #f2f0f0;
    --gray: #e3e3e3;
    --dark-gray: #919191;
    --darker-gray: #545454;
    --logo-blue: #1D4ED8;
    --darker-blue: #1E40AF;
    --lighter-blue: #60A5FA;
    --even-lighter-blue: #BFDBFE;
    --lightest-blue: #DBEAFE;
    --red: #FF0000;
    --dark-orange: white;
    --light-orange: transparent;
    --even-lighter-orange: transparent;
    --strange-yellow: #dbae2e;
    --green: #34D399;
    --light-green: #E6F8DD;
    --medium-green: #A0C99C;
    --dark-green: #059669;
    accent-color: #1D4ED8;
    accent-color: var(--logo-blue);

}
.profile-pic {
  border-style: dashed;
   border-color: deeppink;
    border-radius: 10px;
     border-width: 1px; 

}
.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: "💖"

}

.count {
  color: deeppink;
}

</style>

<style>
.url-info{display:none !important;}
</style>

<div class="snowflakes">
  <div class="snowflake">
  <img alt="Draculaura" src="https://media2.giphy.com/media/E4Hbn7SdSatQpob0EN/giphy.gif?cid=ecf05e473rrddx1gul07c5l3dxtjrwaop42zzzfrx08d0hfj&rid=giphy.gif&ct=s" style="width:50px;"/>
  </div>
  <div class="snowflake">
  <img src="https://media0.giphy.com/media/v1.Y2lkPTc5MGI3NjExMDk3NjY1YTZmNjEzNWI3ZTA3ZDM5MTZkNDIzYTY5OTZmNzFiMThiOCZjdD1z/BnYRq3IIv1RvMrhWl6/giphy.gif" alt="Monster High Crest" style="width: 50px;"/>
  </div>
  <div class="snowflake">
  <img alt="Draculaura" src="https://media2.giphy.com/media/E4Hbn7SdSatQpob0EN/giphy.gif?cid=ecf05e473rrddx1gul07c5l3dxtjrwaop42zzzfrx08d0hfj&rid=giphy.gif&ct=s" style="width:50px;"/>
  </div>
  </div>
  <div class="snowflake">
  <img alt="Draculaura" src="https://media2.giphy.com/media/E4Hbn7SdSatQpob0EN/giphy.gif?cid=ecf05e473rrddx1gul07c5l3dxtjrwaop42zzzfrx08d0hfj&rid=giphy.gif&ct=s" style="width:50px;"/>
  </div>
 
  <div class="snowflake">
 <img alt="Draculaura" src="https://media2.giphy.com/media/E4Hbn7SdSatQpob0EN/giphy.gif?cid=ecf05e473rrddx1gul07c5l3dxtjrwaop42zzzfrx08d0hfj&rid=giphy.gif&ct=s" style="width:50px;"/>
  </div>
 
  <div class="snowflake">
  <img alt="Draculaura" src="https://media2.giphy.com/media/E4Hbn7SdSatQpob0EN/giphy.gif?cid=ecf05e473rrddx1gul07c5l3dxtjrwaop42zzzfrx08d0hfj&rid=giphy.gif&ct=s" style="width:50px;"/>
  </div>
 
  <div class="snowflake">
    <img alt="Draculaura" src="https://media2.giphy.com/media/E4Hbn7SdSatQpob0EN/giphy.gif?cid=ecf05e473rrddx1gul07c5l3dxtjrwaop42zzzfrx08d0hfj&rid=giphy.gif&ct=s" style="width:50px;"/>
  </div>
 
  <div class="snowflake">
    <img alt="Draculaura" src="https://media2.giphy.com/media/E4Hbn7SdSatQpob0EN/giphy.gif?cid=ecf05e473rrddx1gul07c5l3dxtjrwaop42zzzfrx08d0hfj&rid=giphy.gif&ct=s" style="width:50px;"/>
  </div>
 
  <div class="snowflake">
    <img src="https://media0.giphy.com/media/v1.Y2lkPTc5MGI3NjExMDk3NjY1YTZmNjEzNWI3ZTA3ZDM5MTZkNDIzYTY5OTZmNzFiMThiOCZjdD1z/BnYRq3IIv1RvMrhWl6/giphy.gif" alt="Monster High Crest" style="width: 50px;"/>
  </div>
  <div class="snowflake">
    <img src="https://media0.giphy.com/media/v1.Y2lkPTc5MGI3NjExMDk3NjY1YTZmNjEzNWI3ZTA3ZDM5MTZkNDIzYTY5OTZmNzFiMThiOCZjdD1z/BnYRq3IIv1RvMrhWl6/giphy.gif" alt="Monster High Crest" style="width: 50px;"/>
  </div>
  <div class="snowflake">
    <img src="https://media0.giphy.com/media/v1.Y2lkPTc5MGI3NjExMDk3NjY1YTZmNjEzNWI3ZTA3ZDM5MTZkNDIzYTY5OTZmNzFiMThiOCZjdD1z/BnYRq3IIv1RvMrhWl6/giphy.gif" alt="Monster High Crest" style="width: 50px;"/>
  </div>
 
  <div class="snowflake">
    <img src="https://media0.giphy.com/media/v1.Y2lkPTc5MGI3NjExMDk3NjY1YTZmNjEzNWI3ZTA3ZDM5MTZkNDIzYTY5OTZmNzFiMThiOCZjdD1z/BnYRq3IIv1RvMrhWl6/giphy.gif" alt="Monster High Crest" style="width: 50px;"/>
  </div>

<style>
/* customizable snowflake styling */
.snowflake {
  color: #fff;
  font-size: 1em;
  font-family: Arial, sans-serif;
  text-shadow: 0 0 5px rgba(0,0,0,0.7);
}

@-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>* {cursor: url(https://ani.cursors-4u.net/symbols/sym-8/sym749.cur), auto !important;}
</style>

<a href="https://www.cursors-4u.com/cursor/2013/02/13/transparent-sexy-pink-heart.html" target="_blank" title="Transparent Sexy Pink Heart"><img src="https://cur.cursors-4u.net/cursor.png" alt="Transparent Sexy Pink Heart" style="position:absolute; top: 0px; right: 0px;"/></a>

<style>
.profile-pic > img { display:none; }
.profile-pic:after { background-image: url("https://i.imgur.com/BL3IsFQ.gif"); display: inline-block; content:"" }
.blog-entry .profile-pic:after, .bulletin .profile-pic:after { background-size: cover; width: 110px; height: 110px; } /* blogs, bulletins */
.general-about .profile-pic:after { background-size: cover; width: 160px; height: 160px; } /* profile */ 
</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 1 of 1 comments ( View all | Add Comment )
Frankie
1698265533
Using!!! so cute!
Report Comment