Seele Layout

Tags: seele, honkai star rail, hsr, purple
Description:

A plain layout that is based on character Seele from HSR. Hope y'all like it! (i really gotta try some new elements on layouts...;-;)
Preview:

click on the image for a larger preview
Code:

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

<iframe width="0" height="0" src="https://www.youtube.com/embed/UmDeAydid7o//?&;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>
.online{

content: url("https://pixelbank.neocities.org/decome/insects/d90b9e20.gif") !important;

}
</style>

<style>
main:before {
width: 100%;
height: 300px;
display: block;
content: "";
background-image: url('https://64.media.tumblr.com/90eea23571615d03e242ff766a8f517d/ba9cac3103e04349-23/s540x810/97f81f8bbc043ffab03ddf558b5befb451991db1.gifv');
background-position: center center;
background-size: cover;
}
@media only screen and (max-width: 600px) {
main:before{
height: 200px;
}
}
</style>
<style>
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/c0/bb/75/c0bb75e2dd8aa72174381a8db0eee2a0.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;} } 
</style>
<style>
    body
        {background: url("https://64.media.tumblr.com/1c7b7860a27a8e3136a073f76ebfe4ee/ba9cac3103e04349-f9/s540x810/66aa057df121f65d7180dd709c787f7ca8b24c5d.gifv")
        no-repeat fixed; background-size:cover;
}
</style>
<style>
:root {
--light-gray: #bbb;
--gray: #e3e3e3;
--dark-gray: #919191;
--darker-gray: #545454;
--logo-blue: #3A0E66;
--darker-blue: #671CA6;
--lighter-blue: #6830AC;
--even-lighter-blue: #9060B0;
--lightest-blue: #CAB0E3;
--red: #8137b3;
--dark-orange: #6b0388;
--light-orange: #aa74c8;
--even-lighter-orange: #edb8fc;
--strange-yellow: #dbae2e;
--green: #34D399;
--light-green: #E6F8DD;
--medium-green: #A0C99C;
--dark-green: #059669;
}
</style>
<style>
h1{
  color: #8d36e3;
}
</style>
<style>
.profile-pic {
    background: #fff;
    padding: 5px 5px 196px;
    box-shadow: 3px 3px 10px silver;
    height: ;
    transform: rotate(deg); 
    filter: grayscale(8%);
}
</style>

<style>
table.comments-table{

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

}
</style>
<style>
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond&display=swap');
p{
  font-family: 'EB Garamond', serif;
  font-size: 110%;
}
h1,h2,h3,h4,h5{
  font-family: 'EB Garamond', serif;
  font-size: 110%;  
}
</style>
<style>
body {
  font-family: 'EB Garamond', serif;
}
</style>
<style>

    .blog-preview p {
        background-color: none;
        padding: 5px 10px;
        border-radius: 10px;
        color: black;
    }
    }

    .heading {
        padding: 5px 0 !important;
        margin-top: 15px;
        margin-bottom: 10px;
        background-color: transparent !important;
        color: #2a2a2a !important;
        border-bottom: 2px solid;
    }

    main {
        border-radius: 0 0 15px 15px;
        background: rgba(44, 21, 77, 0.94) !important;
    }

    .container {
        border-radius: 15px 15px 0 0;
        overflow: hidden;
        margin-top: 30px;
        padding: 10px;
    }

    footer {
        border-radius: 15px;
        background: rgba(44, 21, 77, 0.94) !important;
        display: block !important;
    }

    table.comments-table td {
        background-color: white !important;
    }

    .comments-table td:first-child img {
        width: 80px;
        border-radius: 500px;
    }

    a.addme {
        font-size: 2rem;
        font-weight: bold;
        margin-bottom: 15px;
        display: block;
    }
 nav {
        border-radius: 15px 15px 0 0;
        overflow: hidden;
    }
.profile .friends .person img {
        border-radius: 25px 25 px 0 0 !important;
}
.contact .inner a img {
font-size: 0;
}
.contact .inner a img:before {
font-size: 1em;
display: block
}
</style>
<style>
nav::before {
   content: "";
   background:  url(https://static.wikia.nocookie.net/houkai-star-rail/images/1/17/Character_Seele_Eidolon_4.png);
   background-size: 200px;
   position: fixed;
   float: right;
   display: inline;
   bottom: 0;
   right: 5px;
   height: 200px;
   width: 200px;
margin-bottom: 10px;
}

.col, main, footer, nav::before{
animation: float 3s;
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>
.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>
 .profile .friends .person img {
        border-radius: 500px;
    }
</style>
<style>
table.comments-table td {
  background-color: rgba(44, 21, 77, 0.94) !important;
}
</style>


<style>
html:before {
  animation: grain 8s steps(10) infinite;
  background-image: url(https://i.ibb.co/d2Np1d2/static.gif);
  background-size: 200px !important;
  content: "";
  height: 300%;
  left: -50%;
  opacity:.2;
  position: fixed;
  top: -110%;
  width: 300%;
  pointer-events:none;
}
@keyframes grain {
  0%, 100% { transform:translate(0, 0) }
  10% { transform:translate(-5%, -10%) }
  20% { transform:translate(-15%, 5%) }
  30% { transform:translate(7%, -25%) }
  40% { transform:translate(-5%, 25%) }
  50% { transform:translate(-15%, 10%) }
  60% { transform:translate(15%, 0%) }
  70% { transform:translate(0%, 15%) }
  80% { transform:translate(3%, 35%) }
  90% { transform:translate(-10%, 10%) }
}
</style>
<style>
    .logo{
        
content: url(https://static.wikia.nocookie.net/logopedia/images/2/29/Honkai_Star_Rail.png/revision/latest?cb=20230507231300);

width: 200px !important;

height: 65px !important;
        
    }
</style>
<style>body { cursor: url('data:image/x-icon;base64,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AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPmyuhQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA//7+CPzQvQUAAAAA/lejsgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA////////w////4P///8B///wAP//4AAn/8AAC/+AAH//AAB//gAAf/4AAH/8AAA/+AAAf/gAAH/4AAD/8AAD//AAAf/wAAD/8AAA//AAAf/wAAH/8A4H//AfB//wP8//8H////j////5///////////////9//////////////8='), auto; }</style>
<style>
main {
  color: #6719a8;
  font-size: 80%;
}
.blog-preview p {
  background-color: none;
  padding: 5px 10px;
  border-radius: 10px;
  color: #633af4;
}
</style>
<style>
li.active .icon { 
    content:url('https://pixelbank.neocities.org/decome/insects/3442c3c4.gif'); 
    width: 16.8px;
    height: 16.8px;
    }
</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 )