aesthetic animated dark green layout !

Tags: aesthetic; layout

Description:

if you use this please remember to comment so that i know you used my layout ! also please don't remove creds !! edit: also also yes, you may change how it looks too, the code is quite messy so beware of that

Preview:

click on the image for a larger preview

Code:

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

<style>
    body{
        
    background-color: COLOR;
    background-image: url('https://64.media.tumblr.com/1ff339b03f478384b5b47c9b6bf07372/681aa92d9daf7f11-63/s1280x1920/4e24b602639df6d7185f35c6a09cf73dfe8b80a1.jpg');
    background-repeat: repeat;
    background-position: center center;

    body:before {
content: " ";
height: 100vh;
width: 100vw;
display: block;
position: fixed; 
top: 0; 
left: 0; 
z-index: 100;
background-image: url('https://i.pinimg.com/originals/8f/0d/01/8f0d01f9fb35de498e26a06be6908596.gif');
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;} } 
    }
    .container{
        
    
        
    }
     main{
     
    background-color: COLOR;   
    background-image: url('https://64.media.tumblr.com/33c973006d15b470ce7e5a9c1b0e3a8a/tumblr_pwr1l52TBQ1vhpaeyo1_500.gifv');
    background-repeat: repeat;
    background-position: stretch;
    
     

    }
    .profile{


    }
    a{
        
        
    }
    a:hover{
        
        
    }
    a:visited{
        
        
    }
    button{


    }
    h4{


    }
    .top{
        
        
    }
    .logo{
        
        
    }
    .top label{
        
        
    }
    .top input{
        
        
    }
    .top button{
        
        
    }
    .top a{
        
        
    }
    .top a:hover{
        
        
    }
    .top a:visited{
        
        
    }
    .links{
        
        
    }
    .links a{
        
        
    }
    .links a:hover{
        
        
    }
    .links a:visited{
        
        
    }
    h1{
        
        
    }
    .profile-pic{
        
        
    }
    .profile-pic img{
        
        
    }
    .general-about{
        
        
    }
    .mood{
        
        
    }
    .mood a{
        
        
    }
    .mood a:hover{
        
        
    }
    .mood a:visited{
        
        
    }
    .mood b{
        
        
    }
    .mood p{
        
        
    }
    .contact .heading{
    font-size:0; }
.contact .heading:before{ content: "HELLO"; font-size:.8rem; font-weight:bold; }    
        
    }
    .contact{
        
        
    }
    .contact a{
        
        
    }
    .contact a:hover{
        
        
    }
    .contact a:visited{
        
        
    }
    .url-info{
        
        
    }
    .url-info b{
        
        
    }
    .url-info p{
        
        
    }
    .table-section{


    }
    .table-section .heading{
        
        
    }
    table.details-table{
        
        
    }
    .profile .details-table td{


    }
    .profile-info{
        
        
    }
    .blog-preview{
        
        
    }
    .blog-preview h4{
     font-size:0; }
.blog-preview h4 a{font-size:.8rem;margin-left:5px; }
.blog-preview h4:before{ content: "BLOGS"; font-size:.8rem; }

    }
    .blog-preview a{
        
        
    }
    .blog-preview a:hover{
        
        
    }
    .blog-preview a:visited{
        
        
    }
    .blog-preview p{


    }
    .blurbs{


    }
    .blurbs .heading{
    font-size:0; }
.blurbs .heading:before{ content: "BLURBS"; font-size:.8rem; font-weight:bold; }    
        
    }
    .blurbs .section h4{ 
    font-size:0; }
.blurbs .inner .section:nth-child(2) h4:before{ content: ""; font-size:.8rem; }
     
     
        
    }
    .friends .heading{ font-size:0; }
.friends .heading:before{ content: ""; font-size:.8rem; font-weight:bold; }   
        
    }
    .friends{ 
        
        
    }
    .friends-grid{
        
        
    }
    .friends a{
        
        
    }
    .friends a:hover{
        
        
    }
    .friends a:visited{
        
        
    }
    .friends b{
        
        
    }
    .friends p{
        
        
    }
    .friends .person p{
        
        
    }
    .count{


    }
    .more{


    }
    .comments-table td{
        
        
    }
    .pagination{

    
    }
    footer{
        
        
    }
    footer a{
        
        
    }
    footer a:hover{
        

    }
    footer a:visited{
        

    }
    footer .links{


    }
    footer .links a{


    }
    footer .links a:hover{


    }
    footer .links a:visited{


    }
</style>

<div class="music">
<iframe width="100%" frameborder="no" src="https://w.soundcloud.com/player/?url=https://soundcloud.com/leylandkirby/01-all-you-are-going-to-want&amp;auto_play=true&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;show_teaser=true"></iframe>
</div>

<style>
.music {
  position: fixed;
  width: 60px;
  height: 20px;
  bottom: 5%;
  right: 0%;  
  opacity: .5;
    -webkit-filter: ;
    filter: ;
}
</style>

<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: "🩹"
}
.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: "🚩"
}
</style>

<style>
             ::-webkit-scrollbar {
    width: 7px;
    height: 10px;
    }

    ::-webkit-scrollbar-thumb {
    background: rgba(80, 80, 80);
    }

    ::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    }
</style>

<style>
    .friends .heading{
        
    background-color: BLACK !important;
    background-image: url('URL');
    background-repeat: repeat;
    background-position: center;

    }
</style>

<style>
    .friends{
        
    background-color: none;
    background-image: url('URL');
    background-repeat: repeat;
    background-position: center;
        
    }
</style>



<style>
    .top{
        border-radius: 25px 25px 0 0 !important;
    }
    main{
        border-radius: 0 0 25px 25px !important;
    }
</style>

<style>
    .logo{
        
    background-color: BLACK !important;
    background-image: url('URL');
    background-repeat: repeat;
    background-position: center;
        
    }
</style>

<style>
    .top{
        
    background-color:black !important;
    background-image: url('URL');
    background-repeat: repeat;
    background-position: center;
        
    }
</style>

<style>
    .links{
        
    background-color: black !important;
    background-image: url('URL');
    background-repeat: repeat;
    background-position: center;
        
    }
</style>

<style>
    .blurbs .heading{
        
    background-color: BLACK !important;
    background-image: url('URL');
    background-repeat: repeat;
    background-position: center;

    }
</style>

<style>
    table.details-table{
        
    background-color: none;
    background-image: url('');
    background-repeat: no-repeat;
    background-position: center;
        
    }
    .profile .details-table td{
        
    background-color: transparent;
    background-image: url('');
    background-repeat: no-repeat;
    background-position: center;
        
    }
</style>

<style>
    .contact{
        
    background-color: none !important;
    background-image: url('https://64.media.tumblr.com/3602e5009cee5d3fb59ad403f7d86a88/27ab18b81c91bc47-f7/s640x960/1dd8507db7a2cc19678762f4343d6ab3fe8cb1d7.jpg');
    background-repeat: repeat;
    background-position: center;
        
    }
</style>

<style>

.body{ {cursor: url(https://cur.cursors-4u.net/mechanics/mec-5/mec411.ani), url(https://cur.cursors-4u.net/mechanics/mec-5/mec411.png), auto !important;}

</style>

<style>
    .top{
        
    color: darkgreen;
        
    }    
    main{

    color: darkgreen !important;
        
    }
    footer{
        
    color: darkgreen;
        
    }
</style>


<style>
.profile .table-section .heading{ color: darkgreen;
</style>

<style>
    
.profile .table-section{ color: darkgreen;

.profile .url-info{ color: darkgreen;
    
</style>

<style>

h1{

font-family: @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@300&display=swap'); !important;

}
</style>

<style>
.body{

font family: @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@300&display=swap'); !important;

}
</style>

<style>
    table.details-table{
        
border: 1px solid black !important;   
        
    }
    .profile .details-table td{

border: 1px solid black !important;   

    }
</style>

<style>
    
    .profile .table-section{ color: darkgreen;

    
</style>

<style>
    .table-section .heading{
        
    background-color: black !important;
    
    }
</style>


<style>
    table.details-table{
        
border: 3px solid black !important;   
        
    }
    .profile .details-table td{

border: 1px darkgreen !important;   

    }
</style>


<style>

    .contact{
        
border: 1px solid black !important;   
        
    }
</style>



<style>
    .contact .heading{
        
    background-color: black !important;
    background-image: url('');
    background-repeat: repeat;
    background-position: center;

    }
</style>


<style>
table-details.table{display: none !important;}
</style>

<style>
    .comments-table td{
        
    background-color: COLOR !important;
    background-image: url('https://i.pinimg.com/564x/06/c3/43/06c343e3376f4fac646a46a3ec6cfcf1.jpg');
    background-repeat: repeat;
    background-position: center;
        
    }
</style>

<style>
    .friends .heading{
        
    background-color: none !important;
    background-image: url('');
    background-repeat: repeat;
    background-position: center;

    }
</style>


<style>
    
  .comments-table td{  
    background-color: black; !important;
    background-image: url('URL');
    background-repeat: repeat;
    background-position: center;
  }
</style>

<style>
    
    .profile .table-section{
    
        
    border: 1px solid black !important;    
    }
    
</style>

<style>
    
    .profile .url-info{ 
        
        
    border: 2px solid black !important;    
    }
</style>

<style>
    
    
    .footer{
        
    background-color: black; !important;
    background-image: url('URL');
    background-repeat: repeat;
    background-position: center;    
    }   

</style>


<style>
    
    footer p{ 
        
     background-color: black; !important;
    background-image: url('URL');
    background-repeat: repeat;
    background-position: center;      
    }
    
</style>


<style>
    
    footer{
        
     background-color: black; !important;
    background-image: url('URL');
    background-repeat: repeat;
    background-position: center;    
    }
    
<style>


style>
    table.details-table{
        
border: 1px solid black !important;   
        
    }
    .profile .details-table td{

border: 1px solid black !important;   

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

lillian	1737446611 usng Report Comment
⁺‧₊˚ ཐི⋆♱ivansito♱⋆ཋྀ ˚₊‧⁺	1736556122 using<3 Report Comment
ZMK1	1736277957 using Report Comment
insanity	1731340730 using Report Comment
luci xx	1731218817 using Report Comment
korkee	1730902751 using!!! Report Comment
dvdz	1729359800 maybe using!! Report Comment
passport-kun	1727627948 usinggg!! Report Comment
Silly Goose	1722873418 using:) Report Comment
Kiki	1721097138 USINGG!! Report Comment
Felix⁠☆	1709887721 usinnnggg tysmmm Report Comment
💿🎧☄️キリアン☄️🎧💿	1709376412 Super gnarly layout using it (⁠◠⁠‿⁠・⁠)⁠—⁠☆ Report Comment
mateo	1704657710 using !! Report Comment
mattbellamyswife	1704269023 yippee Report Comment
milo (⌒_⌒;)	1697345323 using Report Comment
rottenhumanskin	1691340958 using this!! Report Comment
Ariswyrm	1684799463 using this!! :3 Report Comment
gamz	1673724026 soo goonna use thiis !!!! thhank uu!! Report Comment
(Autoplay) Lorran	1662745191 ill use thisss ty Report Comment
☆°•Snail_Senator•°☆	1637054836 Good stuff good stuff :D Report Comment