nature blog layout

Tags: blog, nature, gif, animation, blue, 2000s, music, lofi
Description:

autoplays "we've run out of water" ladybug skull animated background :3c pls comment if using
Code:

<!-- (c) Layout created by harley ༘⋆ (https://layouts.spacehey.com/layout?id=32860) -->

<style>
@font-face {
font-family: 'monospace';
}
 
.monospace {
font-family: monospace;
font-size: 40px;
}
</style>
<style>

 
</style>
 
<div id="monospace">
<div class="monospace"> 
<style>
@import url('https://static.tumblr.com/p6yopnt/Qkiqnu0r5/theheart.ttf');
body{font-family: 'monospace';}
</style>
<style>
    main{
    background-image: url('https://i.pinimg.com/564x/6c/4c/6b/6c4c6bfd0a53fecaa35472240d71e08e.jpg') !important;
    background-attachment: scroll !important;
    background-repeat: no-repeat !important;
    background-position: center !important; 
    background-size: cover !important;
    background-opacity: 50%;
    margin: 0px 15px 15px 15px !important;
    margin-color: white;
    }
</style>
<style>
body{

font family: monospace !important;
font-size: 23px !important;

}
</style>
<style>
a{

font-family: monospace !important;
color: white;


}
a:hover{

font-family: monospace !important;
color: white;

}
a:visited{

font-family: monospace !important;
color: white;

}
a:hover, a:active, a, p, nav label, .section {
    font-family: var(--monospace) !important;
}
h2, h3, h4, h5, DIV.mood > P:nth-child(1) > B, P:nth-child(2) > B {
    font-family: "monospace"
    color: white !important;

}
:root { --mainfont: "monospace" }
</style>
<style>

h1{

font-family: monospace !important;

}
</style>
</div></div>

<style>
.friends-grid img, img.pfp-fallback{
border-radius: 180px !important;
}
</style>
<style>

    body{
        
    background-image: url('https://64.media.tumblr.com/e272147677536b80758434e7acc938bc/451f93bdeb48746e-ee/s1280x1920/101a32afd96a5f8f21c84ccf78181ec24f2c6599.gifv') !important;
    background-attachment: fixed !important;
    
    background-position: center !important;      
    background-size: 1800px;  
    }


<style>
table.comments-table{

display: block;
height: 250px!important;
overflow-y: scroll;

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

    ::-webkit-scrollbar-thumb {
    background: rgba(165, 202, 144, 1);
    }

    ::-webkit-scrollbar-track {
    background: rgba(233, 208, 191, 1);
    }
</style>
<style>
    .top{
        
    color: white;
        
    }    
    main{

    color: white !important;
        
    }
    footer{
        
    color: white;
        
    }
</style>
<style>
    .contact .heading, .table-section .heading, .blog-preview h4, .blurbs .heading, .friends .heading{
        
    background-color: rgba(82, 69, 58, 1) !important;

    }
</style>
<style>
    .profile-info{
        
    background-image: url('https://i.pinimg.com/564x/af/44/41/af44415a12b12435f959b7183af4b980.jpg') !important;
    background-attachment: scroll !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: cover !important;       
    }
</style>
<style>
.logo {
content:url("https://media.discordapp.net/attachments/902167790918729728/1117962197180620930/Untitled1979_20230612194156.png?width=1440&height=367");
}

</style>
<style>

li.active .icon { 
    content:url('https://i.imgur.com/OAWUVTD.png'); 
    width: 31px;
    height: 25px;
    }
.online img { 
content: url("https://i.imgur.com/OAWUVTD.png"); animation-name: none; visibility: visible; height: 20px; width: 20px; filter: none;
}
</style>
<style>
    .blurbs, .friends-grid, .contact{
        
    background-color: rgba(42,77,125,255);
    border-radius: 12px 12px 12px 12px;

    }
</style>

<style>

.table-section td{
background-color: rgba(42,77,125,255) !important;
background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/8/89/HD_transparent_picture.png/1200px-HD_transparent_picture.png') !important;
background-attachment: scroll !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: cover !important;
}
h4{
color: white;
}
.table-section, .url-info, .contact{
border: transparent !important;
}
   .lightbluetext8, .blacktext10, .redbtext,.btext  {

  color: white !important;

 }
 table, tr, td, li, p, div,.text,.redtext, .blacktext12  {

  color: white !important;

 }

   .whitetext12, .orangetext15 {

  color: white !important;

 }
h4{
color: white !important;
}
.top{
background-color: rgba(42,77,125,255) !important;
background-image: url('https://i.pinimg.com/564x/26/fb/ba/26fbba32c74741d8de981a6b0fc5b844.jpg') !important;
background-attachment: scroll !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: cover !important;
border-radius: 12px 12px 12px 12px;
margin: 0px 0px 15px !important;
}
.links{
background-color: transparent !important;
border-radius: 12px 12px 12px 12px;
margin: 0px 0px 15px !important;
}
footer{
background-color: rgba(82, 69, 58, 0.5) !important;
background-image: url('https://i.pinimg.com/564x/4b/24/cf/4b24cf8c6d71f69004500c7cbe48c7f3.jpg') !important;
background-attachment: scroll !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: cover !important;
border-radius: 12px 12px 12px 12px;
}
</style>

<style>* {cursor: url(https://cur.cursors-4u.net/nature/nat-9/nat838.cur), auto !important;}</style><a href="https://www.cursors-4u.com/cursor/2009/11/23/big-lady-bug.html" target="_blank" title="Big Lady Bug"><img src="https://cur.cursors-4u.net/cursor.png" alt="Big Lady Bug" style="position:absolute; top: 0px; right: 0px;"/></a>


<div style="float:  ; max-height: 800px; position: fixed; right: 1px; bottom: 10px; z-index: 200;"><img src="https://i.imgur.com/RQk3mS9.png" width="350" height="550"/></div>

<div style="float:  ; max-height: 800px; position: fixed; left: 1px; top: 10px; z-index: 200;"><img src="https://i.imgur.com/vSjSYFk.png" width="350" height="550"/></div>

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

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

<style>
}



@keyframes type{

  0%{

    width:0ch;

  }

  

  100%{

    width:27ch;

  }

}



@keyframes blink{

  0%{opacity:1;}

  50%{opacity:0;}

  100%{opacity:1;}

}



.col, main, footer, nav::before, .online, nav .links, nav .top {

animation: float 4s;

animation-iteration-count: infinite;

animation-timing-function: ease-in-out;

}



.col, main, footer, nav::before, .online, nav .links, nav .top {

animation: float 4s;

animation-iteration-count: infinite;

animation-timing-function: ease-in-out;

}

@keyframes float {

0% { transform: translate(0, 0px);

}

50% {

transform: translate(0, 8px);

}

100% {

transform: translate(0, -0px);

}



</style>


<style>

img:hover , .url-info:hover , .online:hover {

  animation: shake 1s;

  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></iframe>



<img src="https://i.pinimg.com/564x/34/38/20/34382003790b831e99ad93852306226f.jpg" alt=""/><br/>

</iframe>
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.