Clay Puppington|Moral Orel layout

Tags: clay puppington, moral orel
Description:

Comment before use
Preview:

click on the image for a larger preview
Code:

<!-- (c) Layout created by Alex the bat (https://layouts.spacehey.com/layout?id=86379) -->

<style>
body:before {

content: " ";
height: 100vh;
width: 100vw;
display: block;
position: fixed; 
top: 0; 
left: 0; 
z-index: 100;
background-image: url(' https://64.media.tumblr.com/75a588678aad8b1a3acf86f2515ed9cb/afdf32ea1ac7d281-79/s1280x1920/0fb056001374b07eeae2937917b1bbb78f426cc1.gifv ');
background-size: cover;
background-repeat: no-repeat;
background-position:center;
animation: yourAnimation 3s ease 0s 1 normal forwards;
pointer-events: none;

}
@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } 
</style>


<style>
main:before {
width: 100%;
height: 300px;
display: block;
content: "";
background-image: url(' https://64.media.tumblr.com/4f3f7f0fb15b44d12f515cb85ce91572/6b83e9fb1d7476f8-9c/s1280x1920/308c161eb096cb44cc8f1b3e79428bf698342b5b.jpg ');
background-position: center center;
background-size: cover;
}
@media only screen and (max-width: 600px) {
main:before{
height: 200px;
}
}
</style>


<style>
    .heading{
        
    Background-color: brown !important; 
        
    }
</style>

<style>
    body{
        
    background-image: url(' https://64.media.tumblr.com/0d824659aff5e958faaa6030754ad64f/c26ba739549a3ef8-35/s2048x3072/61695d4cf98d173a8be98f5a12aa4f1b051e2742.pnj ') !important;
    background-attachment: FIXED OR SCROLL !important;
    background-repeat: REPEAT OR NO-REPEAT !important;
    background-position:  RIGHT !important;
        
    }
</style>

<style>
    main{
     
    background-color: COLOR !important;
    background-image: url(' https://64.media.tumblr.com/92eca63efe354036be423423c54c1ccb/aeb3c2aed274eb13-21/s2048x3072/cec6de6a23870a2251937817260a922388f70f48.jpg ') !important;
    background-attachment: SCROLL !important;
    background-repeat: REPEAT OR NO-REPEAT !important;
    background-position: left !important;
        
    }
</style>


<style>
    .top{
        
    background-image: url( 'https://64.media.tumblr.com/80de8a481aeb7d71f15948e824d40be2/afdf32ea1ac7d281-d9/s1280x1920/71b6e9dd890e896ba060dc27b3aa532b02d76203.gifv' ) !important;
    
    }
</style>

<style>
    .links{
        
    background-color: black !important;
    
    }
</style>

<style>
    .mood{
        
    color: brown !important;
    
    }
</style>

<style>
    .contact{
        
    background-image: url(' https://64.media.tumblr.com/55e99a14d9b2191617c3fa2660fc1f12/fb23749f687d44dc-c1/s2048x3072/938403e41449ba339b17ca388e7c7bfc401d2c02.pnj ') !important;
    background-attachment: FIXED OR SCROLL !important;
    background-repeat: REPEAT OR NO-REPEAT !important;
    background-position:  CENTER !important;
        
    }
</style>


<style>
    table.details-table{
        
    background-color: brown !important;
    background-image: url('URL') !important;
    background-attachment: FIXED OR SCROLL !important;
    background-repeat: REPEAT OR NO-REPEAT !important;
    background-position: CENTER / LEFT / RIGHT / TOP / BOTTOM !important;
        
    }
    .profile .details-table td{
        
    background-color: brown !important;
    background-image: url(' https://64.media.tumblr.com/45279b193013c8c97274f00b0fb5ac7d/4763b2451fc1d6e5-39/s1280x1920/0bb5f9440fd7dc95b68b4c5a9d669f8e28e19c9a.pnj ') !important;
    background-attachment: FIXED OR SCROLL !important;
    background-repeat: REPEAT OR NO-REPEAT !important;
    background-position: left !important;
        
    }
</style>


<style>
    .blog-preview{
        
    border: 3px solid black !important;
        
    }
</style>



<style>
    .blurbs{

    color: white !important;
    background-color:  !important;
    background-image: url('  ') !important;
    background-attachment: FIXED OR SCROLL !important;
    background-repeat: REPEAT OR NO-REPEAT !important;
    background-position: CENTER!important;
        
    }
</style>

<style>.online{content: url(" https://64.media.tumblr.com/c5d136eaa72190d09fb99a0636698bbc/a8eecdfc2af1ae56-90/s100x200/419dadd47a010e3e06345550f3dd278aaa6b7f54.gifv ") !important;}</style>

<style>h4{color: white !important;}</style>

<style>h1{color: white !important;}</style>

<style>blog-preview{color: white !important;}</style>

<style>.contact img.icon { 
 display: none; 
}

.contact{background-color:  !important;}

.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a::before{ 
 /* add to friends */
 content: " "; 
 display: inline-block; 
 width: 10px; 
 height: 10px; 
 background-image: url(' https://64.media.tumblr.com/41bfc69750574fc0305159fbc2e37648/2c26ab6ddd76e331-8a/s75x75_c1/08f7bd4aeb5559f3ca4794845d1d3101bc4cbd11.gifv '); 
 background-size: 100% 100%;
} 
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a::before{ 
 /* add to favorites */
 content: " "; 
 display: inline-block; 
 width: 10px; 
 height: 10px; 
 background-image: url(' https://64.media.tumblr.com/41bfc69750574fc0305159fbc2e37648/2c26ab6ddd76e331-8a/s75x75_c1/08f7bd4aeb5559f3ca4794845d1d3101bc4cbd11.gifv '); 
 background-size: 100% 100%;
} 
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before{ 
 /* send message */
 content: " "; 
 display: inline-block; 
 width: 10px; 
 height: 10px; 
 background-image: url(' https://64.media.tumblr.com/41bfc69750574fc0305159fbc2e37648/2c26ab6ddd76e331-8a/s75x75_c1/08f7bd4aeb5559f3ca4794845d1d3101bc4cbd11.gifv '); 
 background-size: 100% 100%;
} 
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before{
 /* forward to friend */
 content: " "; 
 display: inline-block; 
 width: 10px; 
 height: 10px;  
 background-image: url(' https://64.media.tumblr.com/41bfc69750574fc0305159fbc2e37648/2c26ab6ddd76e331-8a/s75x75_c1/08f7bd4aeb5559f3ca4794845d1d3101bc4cbd11.gifv '); 
 background-size: 100% 100%;
} 
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before{
    /* instant message */
 content: " "; 
 display: inline-block; 
 width: 10px; 
 height: 10px; 
 background-image: url(' https://64.media.tumblr.com/41bfc69750574fc0305159fbc2e37648/2c26ab6ddd76e331-8a/s75x75_c1/08f7bd4aeb5559f3ca4794845d1d3101bc4cbd11.gifv '); 
 background-size: 100% 100%;
} 
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
    /* block user */
 content: " "; 
 display: inline-block; 
 width: 10px; 
 height: 10px; 
 background-image: url(' https://64.media.tumblr.com/41bfc69750574fc0305159fbc2e37648/2c26ab6ddd76e331-8a/s75x75_c1/08f7bd4aeb5559f3ca4794845d1d3101bc4cbd11.gifv '); 
 background-size: 100% 100%;
} 
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
    /* add to group */
 content: " "; 
 display: inline-block; 
 width: 10px; 
 height: 10px; 
 background-image: url(' https://64.media.tumblr.com/41bfc69750574fc0305159fbc2e37648/2c26ab6ddd76e331-8a/s75x75_c1/08f7bd4aeb5559f3ca4794845d1d3101bc4cbd11.gifv '); 
 background-size: 100% 100%;
} 
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
    /* report user */
 content: " "; 
 display: inline-block; 
 width: 10px; 
 height: 10px; 
 background-image: url(' https://64.media.tumblr.com/41bfc69750574fc0305159fbc2e37648/2c26ab6ddd76e331-8a/s75x75_c1/08f7bd4aeb5559f3ca4794845d1d3101bc4cbd11.gifv '); 
 background-size: 100% 100%;
} 
</style>

<style>.logo{content: url(https://64.media.tumblr.com/423c4953c52f1951928c4015a194f348/e1d41674b540a28d-90/s400x600/fefca97f6a25f599c473d70b0bcb47666e65f34c.pnj);width: 165px !important;height: 42px !important;}</style>

<style>.profile{
        
    direction: rtl;
    
    }
    .blurbs{
    
    direction: ltr;
        
    }
    .blog-preview{
        
    direction: ltr;
        
    }
    .friends{
    
    direction: ltr;
        
    }
    .general-info{
        
    direction: ltr;
        
    }
    .contact{
        
    direction: ltr;
    
    }
    .url-info{
        
    direction: ltr;
        
    }
    .details-table{
        
    direction: ltr;
        
    }
    .profile .table-section .heading{
    
    direction: ltr;
        
    }
    .details p{

    direction: ltr;

   }
   .mood{

       direction: ltr;

   }
</style>

<style>
.details-table tr td:first-of-type p {
    color: white;
}
</style>

<style>
    .blog-preview{
        
    background-color: brown !important;
        
    }
</style>

<style>
    .comments-table td{
        
    background-color: COLOR !important;
    background-image: url(' https://64.media.tumblr.com/ab82560a19b7008438af0a01c931b651/e6b0820c875d4638-d7/s500x750/e52b3fc8014a6752944baccdb286067df61658bc.pnj ') !important;
    background-attachment: FIXED OR SCROLL !important;
    background-repeat: REPEAT OR NO-REPEAT !important;
    background-position: CENTER  !important;
        
    }
</style>

<style>
    .friends{
        
border: 1px solid white !important;   
        
    }
</style>

<style>
/* background of the page (i.e. left and right of your profile) */
body {
  background-color: white;
}

/* your profile itself. main does not encompass the header/footer, which I prefer to leave alone */
main {
  background-color: #333;
  color: white;
}

/* links within main. --green is a variable from spacehey's own CSS */
main a {
  color: var(--green);
}

/* color/style of borders around tables on the left */
.profile .contact, .profile .table-section, .profile .url-info {
  border: 1px solid white;
}

/* colors for the table headings on the left */
.profile .contact .heading, .profile .table-section .heading, .home-actions .heading {
  background-color: #444;
  color: white;
}

/* colors for table cell background (by default spacehey has a separate color for :first-child) */
.profile .table-section .details-table td {
  background-color: #333;
  color: white;
}

/* headings on the right */
.profile .blurbs .heading, .profile .friends .heading {
  background-color: #444;
  color: white;
}
</style>

<style>
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,300;0,700;1,300;1,700&display=swap');
</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 0 of 0 comments ( View all | Add Comment )