Baizhu themed layout ˚ ༘ .˚🌱୭ ˚. ᵎᵎ

Tags: green, baizhu, genshin, animated
Description:

layout for the best healer.
Code:

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

<style>/* Profile Design Info */
    :root {
        --logo-blue: #9ba978;
        --darker-blue: #9ba978;
        --lighter-blue: #9ba978;
        --even-lighter-blue: #FAF9F6;
        --lightest-blue: #FAF9F6;
        --dark-orange: #FAF9F6;
        --light-orange: #9ba978;
        --even-lighter-orange: #FAF9F6;
        --green: #FAF9F6;
	}

main:before {
      background-image: url(https://64.media.tumblr.com/401f528627ced775b5d0be92d79fa92c/f4cee71b34160672-2e/s500x750/b878b55238f4f4613df20415577bd2451fb75d62.gifv);
      background-position: center center;
      background-size: cover;
display: block;
content: "";
    width: 98%;
    height: 215px;
    border-radius: 10px;
    margin-bottom: 10px;
    margin-left: 8px;
  }

footer {
    border-radius: 15px;
    background-image: url(https://i.pinimg.com/564x/25/f8/c7/25f8c7b54e553fbbd71ea197055a8524.jpg);
    color: black;
}
</style>


<style>
.profile-pic > img { display:none; }
.profile-pic:after { background-image: url("https://64.media.tumblr.com/9dd195f10acea8e8f38ce7374bdce5ee/00fb4924234ab0cf-33/s400x600/ce48b5a04e63bd2eef55d351ddad28fcf73d8b7a.gifv"); display: inline-block; content:"" }
.blog-entry .profile-pic:after, .bulletin .profile-pic:after { background-size: cover; width: 110px; height: 110px; } /* blogs, bulletins */
.general-about .profile-pic:after { background-size: cover; width: 160px; height: 160px; } /* profile */ 
</style>


<style>

body {
 background: url('https://cdn.shopify.com/s/files/1/2071/5523/products/GREEN_a0841264-ba4e-42fd-b4d3-d31135bdfd94.jpg?v=1657144690');
 background-repeat: repeat;
 background-size: 50%;
 background-position: center;
} </style>

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

::-webkit-scrollbar:horizontal {
height: 17px
}

::-webkit-scrollbar-corner {
background: #eee
}

::-webkit-scrollbar-track:vertical {
background: linear-gradient(90deg, #e5e5e5, #f0f0f0 20%)
}

::-webkit-scrollbar-track:horizontal {
background: linear-gradient(180deg, #e5e5e5, #f0f0f0 20%)
}

::-webkit-scrollbar-thumb {
border: 1.5px solid #888;
border-radius: 3px;
box-shadow: inset 0 -1px 1px #fff, inset 0 1px 1px #fff;
background-color: #eee;
}

::-webkit-scrollbar-thumb:vertical {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAKCAIAAADpZ+PpAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAADrSURBVChTTc5LboJQGAXguyoCu4ERCzAGlRk7UOwGWIDh0s4M4kxb06RSq/jAB6AxJkJ4lTDrue3AnvyzP+fLId+/yfM8juP7PQmCCOf7B3e+ZD+O40RRVFW12VQUpd3r9U3T2m4OpKoqWZYNwzBZLEqfh0N7NnvfrPcEWlEUWZb9mWF4Ph6D0ylcLbfM5HkeJrhGA2hb15/QXnv+w7RYXsDatjOdvnmrHSnLEizMNE2v11sUXQBCnn98kbquBUGQJAlmq9WB2e3qg4HJdqKkaRql1HGc0WgMcDJ5dd0F24kediZJ8t/ELT69H+8py0CYSIO5AAAAAElFTkSuQmCC") no-repeat 50%, linear-gradient(90deg, #eee 45%, #ddd 0, #bbb)
}

::-webkit-scrollbar-thumb:horizontal {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAJCAYAAAALpr0TAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAADcSURBVChTNZBLqoUwEEQrURQUxZGCvy24ACfiityJi7tv8GauQoPxk5tquA2RQ9vVVYk6z9NZaxFFEe77htYazjk8z4MwDIVZ+rourOuKaZrwvi+WZcE8z1BKCbPPCjk4DAO2bRP1OI7wLiL6Mbd7J408z1GWpQwWRYGqqiQG+03TgMu0MacfUN4qANmn8UOv9MjW3sKaSm7iIdOSlziOQ3LScd93aPonSYK6riVLlmVo21aYfVqzND9pmqLrOlGT+76XbcxLZkb19/l3fEP+oF0cx8KMEASBsDEGX2/CgZCHkg+8AAAAAElFTkSuQmCC") no-repeat 50%, linear-gradient(180deg, #eee 45%, #ddd 0, #bbb)
}

::-webkit-scrollbar-button:horizontal:end:increment,
::-webkit-scrollbar-button:horizontal:start:decrement,
::-webkit-scrollbar-button:vertical:end:increment,
::-webkit-scrollbar-button:vertical:start:decrement {
display: block
}

::-webkit-scrollbar-button:vertical {
height: 17px
}

::-webkit-scrollbar-button:vertical:start:decrement {
background: white;
background-image: url("https://cdn.discordapp.com/attachments/904308736712138793/1001299199633141851/download.png");
background-repeat: no-repeat;
background-position: center;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

::-webkit-scrollbar-button:vertical:start:increment {
display: none;
}

::-webkit-scrollbar-button:vertical:end:decrement {
display: none;
}

::-webkit-scrollbar-button:vertical:end:increment {
background: white;
background-image: url("https://cdn.discordapp.com/attachments/904308736712138793/1001299200052576387/87ae92e1-3894-4469-b1b9-aedf5f04975c.png");
background-repeat: no-repeat;
background-position: center;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

</style>

<style>

.container {

animation: float 4s;

animation-iteration-count: infinite;

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

}



.container {

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>


.table-section {
    height: 130px;
    overflow-y: auto;
    border: none!important;
}

</style><style>
nav::before {
   content: "";
   background:  url(https://64.media.tumblr.com/bdb57d7a4996523caba57691827a7be8/c1829e3851c94970-75/s400x600/68edd539dde81dc95ce87150cb1b40fb4087e055.pnj);
background-size: 200px;
    position: fixed;
    float: right;
    display: inline;
    bottom: 0;
    right: 5px;
    height: 196px;
    width: 195px;
    margin-bottom: 10px;
    margin-right: 5px;
}


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



<div class="snowflakes">

  <div class="snowflake">

  ☘

  </div>

  <div class="snowflake">

  ☘

  </div>

  <div class="snowflake">

  ☘

  </div>

  <div class="snowflake">

  ☘

  </div>

  <div class="snowflake">

  ☘

  </div>

  <div class="snowflake">

  ☘

  </div>

  <div class="snowflake">

    ☘

  </div>

  <div class="snowflake">

    ☘

  </div>

  <div class="snowflake">

    ☘

  </div>

  <div class="snowflake">

    ☘

  </div>

  <div class="snowflake">

    ☘

  </div>

  <div class="snowflake">

    ☘

  </div>

</div>

<style>

/* customizable snowflake styling */

.snowflake {

  color: #fff;

  font-size: 1em;

  font-family: Arial, sans-serif;

  text-shadow: 0 0 5px rgba(0,0,0,0.7);

}



@-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@-webkit-keyframes snowflakes-shake{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}}@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@keyframes snowflakes-shake{0%,100%{transform:translateX(0)}50%{transform:translateX(80px)}}.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:10s,3s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(0){left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s}.snowflake:nth-of-type(10){left:25%;-webkit-animation-delay:2s,0s;animation-delay:2s,0s}.snowflake:nth-of-type(11){left:65%;-webkit-animation-delay:4s,2.5s;animation-delay:4s,2.5s}

</style>

<style>* {cursor: url(https://cur.cursors-4u.net/symbols/sym-7/sym633.ani), url(https://cur.cursors-4u.net/symbols/sym-7/sym633.png), auto !important;}</style><a href="https://www.cursors-4u.com/cursor/2011/11/26/shiny-green-star.html" target="_blank" title="Shiny Green Star"><img src="https://cur.cursors-4u.net/cursor.png" alt="Shiny Green Star" style="position:absolute; top: 0px; right: 0px;"/></a>
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.