Misa Amane black/cream/red theme

Tags: misa, misa amane, anime, death note, black, red, manga, cream, yellow

Description:

Just made some pretty cool changes to my layout, and cleaned up the code quite a bit!

It's a black/cream/red color scheme and a lot of accents of Misa!

I tried to make it sweet, flirty and evil at the same time to really get her essence!

I hope you like it!

Last updated to match my current profile: 1/23/24!!

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by 𝓜𝓮𝓭𝓮𝓾𝔁𝓼𝓪 (https://layouts.spacehey.com/layout?id=29518) -->

<!-- cursor stuff -->

<style>

* {
 cursor: url(https://cur.cursors-4u.net/anime/ani-6/ani547.cur), auto !important;

}

</style>

<!-- image before -->

<style>

  body:before {

    content: " ";
    height: 100vh;
    width: 100vw;
    display: block;
    position: fixed; 
    top: 0; 
    left: 0; 
    z-index: 100;
    background-image: url('https://i.ibb.co/hgQtjLG/misacute.gif');
    background-size: cover;
    background-repeat: no-repeat;
    background-position:center;
    animation: yourAnimation 2s ease 0s 1 normal forwards;
    pointer-events: none;

}

@keyframes yourAnimation { 0.0%{ opacity: 1;} 50%{ opacity: .75; } 75%{ opacity: .5; } 100%{ opacity: 0;} } 

</style>

<!-- main font -->

<style>

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500&display=swap');

p{ 
    font-family: 'Playfair Display', serif; 
    font-size: 21px;
    color:  #faf9bc;

}

.award a {
  color: #faf9bc;
  text-decoration: none;

}

.award a:hover{

    color:red;

}

a{
    font-family: 'Playfair Display', serif;

}

</style>

<!-- header code -->

<style>

.profile h1{

    font-size: 3em;

}

h1{

    font-family: 'Playfair Display', serif;
    font-size: 3em;
    color: #faf9bc;
    text-shadow: 2px 2px 5px red;

}

h2,h3,h5{
    font-family: 'Playfair Display', serif;
    font-size: 150%;
    color: #9f9e4b;
    text-shadow: 2px 2px 5px red;

}

h4{

 font-family: 'Playfair Display', serif;
    font-size: 150%;
    color: #faf9bc;
    text-shadow: 2px 2px 5px red;

}
</style>

<!-- friend's list -->

<style> 

.profile .friends .person p{
  color: maroon;

}



.profile .friends .person p:hover{
  color: #faf9bc;

}


.count {

    color: #9f9e4b;

}

</style>

<!-- navigation things -->

<style>

nav{

    font-family: 'Playfair Display', serif;
    font-size: 15px;
    text-align: center;
    text-shadow: 2px 2px red;

}

nav .links a{

  text-decoration: none;
  color: #faf9bc;
  text-shadow: 2px 2px 5px red;
  font-size: 0.98em;
  font-size: max(0.98em, 12px);
  background:black

}

nav .links {
    background: ;

}

</style>

<!-- names class -->

<style>
 
.nameofsection {

    font-size: 24px;
    font-weight: bold;
    color: #faf9bc;
    font-family: 'Playfair Display', serif;
    text-shadow: 2px 2px 5px red;

}

<!-- link codes -->

a:hover{
        
    color: #red !important;
        
}

a:visited{
        
    color: #red !important;
        
}

.top a:hover{

    color: red !important;

}
    
.top a:visited{

    color: #red !important;

}
    
    
.links a:hover{

    color: red !important;

    }
   
.links a:visited{

    color: #red !important;

}
    
   
footer .links a:hover{

    color: red !important;

}
    
footer .links a:visited{

    color: #red !important;

}

</style>

<!-- profile pic code -->

<style>

.profile-pic img {

    max-width: 300px;
    max-height: 300px;
    border-style: double;
    border-color: maroon;

}

</style>

<!-- online image code -->

<style>

.online{
    content: url(http://www.myspacegens.com/images/online_now/331.gif);
    font-weight: bold;
    font-size: 95%;
    animation-name: blink;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(1.0,0,0,1.0);
    animation-duration: 2s;

}

online img{
    
    height: 1.5em;
    margin-right: 5px;
    animation-name: blink;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(1.0,0,0,1.0);
    animation-duration: 2s;

}

</style>

<!-- body code -->

<style>
body{
    background: url(https://media.tenor.com/qF7O1dpwasoAAAAd/death-note-misa-amane.gif);

}

</style>

<!-- main code -->

<style>

main{

    background: black;
    border-radius: 5px;
    border: 10px double;    none,dotted,dashed,solid,double,groove,ridge,inset,outset
    padding: 15px;
    border-image: url(...) 30 stretch;
    border-color: maroon;

}

main:before {
	width: 100%;
	height: 300px;
	display: block;
	content: "";
	background-image: url(https://i.ibb.co/WvPYL7g/misagif.gif);
	background-position: center center;
	background-size: cover;

}

@media only screen and (max-width: 600px) {
	main:before{
		height: 200px;

}

</style>

<!-- color rules -->

<style>

:root{
    --logo-blue:black;
    --darker-blue: #9f9e4b;
    --lighter-blue:#black;
    --even-lighter-blue: black;
    --lightest-blue: black;
    --dark-orange: #9f9e4b;
    --light-orange: #9f9e4b;
    --even-lighter-orange: ;
    --green: #808080;

}

</style>

<!-- footer code -->

<style>

footer{
  text-align: center;
  font-size: 70%;
  margin: 10px 0 10px;
  padding: 10px 5px;
  background: black;
  text-shadow: 2px 2px 2px red;

}

footer:before{

content: url(https://i.ibb.co/zNffqvZ/misacrygif.gif);

}

</style>

<!-- header code -->

<style>

header{
  background: url(https://i.pinimg.com/originals/4d/9d/b6/4d9db6e913b17d6b2638b209c9067b4c.gif);

}

</style>

<!-- the blinkies after the comments section -->

<style>

main .right:after{
    
    max-width:300px;
    overflow-wrap: break-word;
    display: flex;
    position: relative;
    content: url(https://i.imgur.com/UUH6t0h.gif) url(https://external-media.spacehey.net/media/sxodtvr0rUycArmb3AHAXWd5Dv7DLO0_qmEann-rz0lo=/https://i.ibb.co/pfz7LfM/tumblr-otsg3n-YDjx1vep039o1-250.gif) url(https://collection.ju.mp/assets/images/gallery24/378c049a.gif?v=58a5bca8);

}

main .left:after{

    display: flex;
    position: relative;
    content: url("https://i.ibb.co/LpKDxzW/luckystars.gif") url("https://i.ibb.co/bbp08nv/bleedyoudry.gif");

}

</style>

<!-- these are the links bc sometimes the blinkies break url(https://i.imgur.com/UUH6t0h.gif) url(https://collection.ju.mp/assets/images/gallery24/378c049a.gif?v=58a5bca8) -->

<!-- contact area code -->

<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: url("https://i.ibb.co/tK50Xdq/key.gif")
}

.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
	/* Add to Favorites */
	content: url("https://i.ibb.co/5cRgdJn/spinstar.gif")
}

.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
	/* Send Message */
	content: url("https://i.ibb.co/G2QmyP8/bats.gif")
}

.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
	/* Forward to Friend */
	content: url("https://i.ibb.co/c1HJ2Hz/syringa.gif")
}

.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
	/* Instant Message */
	content: url("https://i.ibb.co/sW35w0k/coffin.gif")
}

.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
	/* Block User */
	content: url("https://i.ibb.co/1zScMRc/knife.gif")
}

.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
	/* Add to Group */
	content: url("https://i.ibb.co/0scTRjC/rose.gif")
}

.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
	/* Report Profile */
	content: url("https://i.ibb.co/8ryRmhH/redswirly.gif")
}

</style>

<!-- pinned blog icon -->

<style>

.blog-preview p .pinned .icon{
     content: url(https://i.ibb.co/sthNGQq/brstars.gif) !important;

}

</style>

<!-- details table code -->

<style>

.details-table td * {

    font-size:15px;

}

</style>

<!-- comments table code -->

<style>

  table.comments-table{
    
    display:block;
    max-height:1100px!important;
    overflow: scroll;
    border: 3px outset;
    border-color: maroon;

}

</style>

<!-- The link to the Misa cursor! -->

<a href="https://www.cursors-4u.com/cursor/2009/02/04/misa-amane-death-note.html" target="_blank" title="Misa Amane - Death Note"><img src="https://cur.cursors-4u.net/cursor.png" alt="Misa Amane - Death Note" style="position:absolute; top: 0px; right: 0px;"/></a>

<!-- the song that autoplays when you load the site! -->

<iframe width="0" height="0" src="https://www.youtube.com/embed/1I9cI53az7E//?&;amp;;autoplay=1&;loop=1&;controls=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture loop;" allowfullscreen="" loading="lazy">
</iframe>

<!-- code for the floating images, as well as how they are hidden on mobile -->

<style>

@media (max-width: 600px) {
.image{display:none;}
}

</style>

<div class="image"></div>

<div class="mobileHide">

<div id="botright1"> <img src="https://i.ibb.co/nfYMKBY/misayay.png" width="300"/>
<div id="botright2"> <img src="https://i.ibb.co/NVX4t9T/light-yagami-misa-amane-ryuk-death-note-l-e7ffc0bd8f47e8109bc9e38d50af456b.png" width="200"/>
<div id="topleft"> <img src="https://i.ibb.co/82TBYzW/pngegg.png" width="170"/>
<div id="botleft"> <img src="https://i.ibb.co/WcvwV6Y/pngegg-1.png"/>
<div id="topright"> <img src="https://i.ibb.co/KmvgXnD/pngegg-3.png" width="400"/> 

</div>


<style>

  #topleft{
  
    position:fixed;
    top:0px;
    left:30px;

}

  #botleft{
    
    position:fixed;
    bottom:-10;
    left:-80px;

}

  #botright1{
    
    position:fixed;
    bottom:-5px;
    right: -40px;

}

#botright2{
    
    position:fixed;
    bottom:-5px;
    right:250px;

}

  #topright{

    position:fixed;
    top:20px;
    right:0px;

}

.mobileHide { display: inline; }

  @media only screen
    and (min-device-width : 320px)
    and (max-device-width : 480px){
     .mobileHide { display: none;}
  }
      
      </style></div></div></div></div></div>

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

﹥:ꔫ:+ﾟ	1723927260 using !! Report Comment hope everything works well :) by 𝓜𝓮𝓭𝓮𝓾𝔁𝓼𝓪; 1723932539; Report
wendy	1723625193 using !! Report Comment hope you have fun with it! by 𝓜𝓮𝓭𝓮𝓾𝔁𝓼𝓪; 1723672068; Report
⋆⭒˚.⋆ Lily ⋆⭒˚.⋆	1718422770 Usinggg Report Comment Hope you enjoy! Let me know if anything isn't working for ya :) by 𝓜𝓮𝓭𝓮𝓾𝔁𝓼𝓪; 1718648227; Report
Leda☆	1710882621 It's soo pretty def using<3 Report Comment thanks for commenting! let me know if anything isn't working anymore! :) by 𝓜𝓮𝓭𝓮𝓾𝔁𝓼𝓪; 1710885798; Report
Sami	1703092939 omg im definitely using this, tysm!!!!!!!!! Report Comment hope you enjoy!! ^u^ by 𝓜𝓮𝓭𝓮𝓾𝔁𝓼𝓪; 1703216770; Report
kurt !!	1700944465 using!! Report Comment enjoy! let me know if you have any problems! by 𝓜𝓮𝓭𝓮𝓾𝔁𝓼𝓪; 1700956207; Report
sabri	1686923087 using! Report Comment omg I'm glad you like it! thanks for letting me know! 💕🥀🖤🌹💞 by 𝓜𝓮𝓭𝓮𝓾𝔁𝓼𝓪; 1686951062; Report