Animator vs. Animation layout(still working on it)

Tags: animator vs. animation, ava, alan becker, gifs, glassy, cursor
Description:

Includes glassy look, custom cursor and logo, round pfp, image hover shake and a very cute AvA gif!!!
Code:

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

<style>
/* contact icons */
.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 favorite */
content: "✧"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* send a message */
content: "✧"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* foward 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 2 group  */
content: "✧"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* report */
content: "✧"
}   
</style>




<style>
img:hover {
  /* Start the shake animation and make the animation last for 0.5 seconds */
  animation: shake 0.5s;

  /* When the animation is finished, start again */
  animation-iteration-count: infinite;
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
} </style>





<style>
body { cursor: url('https://i.postimg.cc/RCt2sjsk/cursor.png'), auto; }
   </style>



<style>
nav img.logo {


content:url("https://static.wikia.nocookie.net/738e7a18-93da-4a28-bcb1-6c6b47733955/scale-to-width/250") ;
   }
</style>
















<style>

    body {
        background-image: url(https://cdn.comic.studio/images/alanbecker/backgrounds/f99f59fc5ca83dc994a2f574558b70a9/The_Dark_Lords_private_lake.png);
        background-size: 1349px;
        background-attachment: fixed;
        background-position: center;
        }
        
        
    main {
        background: transparent;
    }
     .col.w-40.left h1{
        margin-bottom: 0;
    }
     .profile h1 {
        /*padding-left: 5px;*/
        /*font-size: 12px;*/
         color: black;
        text-shadow: 0 0 5px #fff;
        box-shadow: 0 15px 20px rgba(129, 124, 124, 0.2);
    backdrop-filter: blur(14px);
    background-color: rgba(255, 255, 255, 0.2);
    
    border-radius: 6px 6px 0px 0px;
     border-style: outset;
        border-width: 1px;
        border-color: #eef #ddd rgba(129, 124, 124, 0) #eef;
        margin-bottom: 20px;
        box-shadow: 0px 1px 3px 3px rgba(70,70,70,0.25);
        
    }
    
    .profile .mood p{
         color: black;
        text-shadow: 0 0 5px #fff;
    }
    .profile .mood{
    padding-top: 5px;
    padding-left:5px;
    box-shadow: 0 15px 20px rgba(129, 124, 124, 0.2);
    backdrop-filter: blur(14px);
    background-color: rgba(255, 255, 255, 0.2);
    
    border-radius: 6px;
     border-style: outset;
        border-width: 1px;
        border-color: #eef #ddd #ddd #eef;
        margin-bottom: 20px;
        box-shadow: 0px 1px 3px 3px rgba(70,70,70,0.25);
    }
    
     .general-about .profile-pic img {
         padding-left:15px;
        padding-top:15px;
        height: 140px;
    }

    .general-about {
    height: 152px;
    box-shadow: 0 15px 20px rgba(129, 124, 124, 0.25);
    backdrop-filter: blur(14px);
    background-color: rgba(255, 255, 255, 0.25);
    
    border-radius: 0px 0px 6px 6px;
     border-style: outset;
        border-width: 1px;
        border-color: rgba(129, 124, 124, 0) #ddd #ddd #eef;
        margin-bottom: 20px;
        box-shadow: 0px 1px 3px 3px rgba(70,70,70, 0.25);
}
    .general-about .details {
        height: 145px;
        background:#f2f2f2;
        margin-right: 3px;
        margin-left: 3px;
        margin-top:;
        padding-top: 4px;
        border-style: outset;
        border-width: 1px;
        border-color: #eef #ddd #ddd #eef;
        
    }
    
.profile .contact, .profile .url-info,.profile .table-section {
    box-shadow: 0 15px 20px rgba(129, 124, 124, 0.2);
    backdrop-filter: blur(14px);
    background-color: rgba(255, 255, 255, 0.2);
    
    border-radius: 6px;
     border-style: outset;
        border-width: 1px;
        border-color: #eef #ddd #ddd #eef;
        margin-bottom: 20px;
        box-shadow: 0px 1px 3px 3px rgba(70,70,70,0.25);
}

.profile .contact .heading{
    background: transparent;
    text-align: left;
}
.profile .contact .heading h4, DIV.url-info > P:nth-child(1) > B, DIV.blog-preview > H4{
    color: black;
    text-shadow: 0 0 5px #fff;
}


    .blog-preview {
    box-shadow: 0 15px 20px rgba(129, 124, 124, 0.2);
    backdrop-filter: blur(14px);
    background-color: rgba(255, 255, 255, 0.2);
    padding: 6px;
    border-radius: 6px;
     border-style: outset;
        border-width: 1px;
        border-color: #eef #ddd #ddd #eef;
        margin-bottom: 20px;
        box-shadow: 0px 1px 3px 3px rgba(70,70,70,0.25);
    }
    
    .profile .table-section{
         box-shadow: 0 15px 20px rgba(129, 124, 124, 0.2);
    backdrop-filter: blur(14px);
    background-color: rgba(255, 255, 255, 0.2);
    padding: 6px;
    border-radius: 6px;
     border-style: outset;
        border-width: 1px;
        border-color: #eef #ddd #ddd #eef;
        margin-bottom: 20px;
        box-shadow: 0px 1px 3px 3px rgba(70,70,70,0.25);
    }
    
    .profile .table-section .heading{
        background:transparent;
          color: black;
    text-shadow: 0 0 5px #fff;
        
    }
    table.details-table{
         background:#f2f2f2;
        margin-right: 3px;
        margin-left: 3px;
        margin-top:;
        padding-top: 4px;
        border-style: outset;
        border-width: 1px;
        border-color: #eef #ddd #ddd #eef;
        
    }
    .table-section td:first-child, td:first-child a:not(.comments-table td a) {
   background: ;
   color: black;
}
    
    .profile .blurbs{
        box-shadow: 0 15px 20px rgba(129, 124, 124, 0.2);
    backdrop-filter: blur(14px);
    background-color: rgba(255, 255, 255, 0.2);
    
    border-radius: 6px;
     border-style: outset;
        border-width: 1px;
        border-color: #eef #ddd rgba(129, 124, 124, 0) #eef;
        padding-bottom: 3px;
        box-shadow: 0px 1px 3px 3px rgba(70,70,70, 0.25);
        
    }
    .profile .blurbs .heading{
        background:transparent;
         color: black;
    text-shadow: 0 0 5px #fff;
        
    }
    .profile .blurbs .section h4{
         color:blue;
    }
    .profile .blurbs .inner{
         background:#f2f2f2;
        margin-right: 3px;
        margin-left: 3px;
        padding-top: 4px;
        border-style: outset;
        border-width: 1px;
        border-color: #eef #ddd #ddd #eef;
        
    }
    
    .profile .friends{
        box-shadow: 0 15px 20px rgba(129, 124, 124, 0.2);
    backdrop-filter: blur(14px);
    background-color: rgba(255, 255, 255, 0.1);
    
    border-radius: 6px;
     border-style: outset;
        border-width: 1px;
        border-color: #eef #ddd rgba(129, 124, 124, 0) #eef;
        box-shadow: 0px 1px 3px 3px rgba(70,70,70,0.25);
        padding-bottom:3px;
        margin-bottom:20px;
    }
    .profile .friends .heading{
        background:transparent;
         color: black;
    text-shadow: 0 0 5px #fff;
        
    }
    .profile .friends .inner{
        background:#f2f2f2;
        margin-right: 3px;
        margin-left: 3px;
        padding-top: 4px;
        border-style: outset;
        border-width: 1px;
        border-color: #eef #ddd #ddd #eef;
    }
    .count{
        color:blue;
    }
.comments-table td{
    background:transparent !important;
      border-style: outset;
        border-width: 1px;
        border-color: #eef #ddd #ddd #eef;
        
}

    footer {
        box-shadow: 0 15px 20px rgba(129, 124, 124, 0.2);
    backdrop-filter: blur(14px);
    background-color: rgba(255, 255, 255, 0.2);
    
    border-radius: 6px;
     border-style: outset;
        border-width: 1px;
        border-color: #eef #ddd rgba(129, 124, 124, 0) #eef;
        box-shadow: 0px 1px 3px 3px rgba(70,70,70,0.25);
        padding-bottom:3px;
    }
   .table-section td:first-child, td:first-child {
   background: #ddd;
   color: black;
}
.table-section td {
   background-color: transparent;
     border-style: outset;
        border-width: 1px;
        border-color: #eef #ccc #ccc #eef;
        
}

nav .top{
    background: (rgba(0, 255, 255, 1), rgb(6, 5, 5);
   box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
}

nav .links {
   background: #a9a9a9;
   padding: 1px;
   box-shadow: box-shadow: 0 2px 6px rgba(0,0,0,0.5),;
}

nav .links a {
   color: black;
   font-size: 12px;
   margin:4px;
}

</style>







<style>
@keyframes spin{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(0deg); }
}
.general-about .profile-pic img{
  border-radius: 50%;
  animation: spin 7s infinite linear;
}

</style>

<style>

:root {
 
    --logo-blue: rgba(255, 255, 255 0.2);
    --light-orange: transparent;
    --dark-orange: blue;
    font-size-adjust: .6; /* slightly bigger/better font */

}

<style>

<style>
*{
  border-radius: 9px;
}
.profile .contact .heading, .profile .table-section .heading, .home-actions .heading{
  border-radius: 6px 6px 9px 9px;
}
</style>

<style>

nav .links {
    background-color: rgba(255, 255, 255, 0.2); /* navbar transparency */
    
}

<style>

<style>

#q {
    border: 0;
    outline: 0;
    border-bottom: 1px solid #000; /* better search bar */
}

<style>








<style>

.friends img:hover{
  webkit-filter: blur(5px);
  filter: blur(3px);

}

</style>


<img src="https://i.pinimg.com/originals/21/22/a5/2122a524c71c96a340a0b41eeabca6af.gif"/>

<img src="https://c.tenor.com/igKq0XvL4vEAAAAC/tenor.&lt;/tag673be&gt"/>
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 0 of 0 comments ( View all | Add Comment )