Honkai Star Rail Blade Layout

Tags: honkai star rail, star rail, red, black, grey, simple

Description:

photos found on Pinterest and Tumblr, I do not own any of the images. credit is always appreciated if used :] please comment or message me if something doesn't work

Preview:

click on the image for a larger preview

Code:

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

<style>
main:before {
  width: 808px;
  margin-bottom: 10px;
  border: 1px solid black;
  height: 350px;
  display: block;
  content: "";
  background-image: url("https://64.media.tumblr.com/436e42b4e8d4c2b4b89574e02c2379c2/d175b0d7e7a8fa27-ac/s540x810/6d65c4befa066192040b136399429d889a1ee362.gifv");
  background-position: center;
  background-size: cover;
  border-radius: 19px;
}


  body{
    background: url("https://i.pinimg.com/564x/e9/82/09/e98209b4f2e4479372202937d4c68765.jpg"); 
    background-size: 500px ;
        background-attachment: fixed;
}

.profile {
background-color: #3C4950;
  background-attachment: fixed;
}

nav .top {
       background: url("https://i.pinimg.com/564x/16/a6/6f/16a66ff45aabc130afeda6925c8ca26e.jpg");
  background-size:;
}



.profile .contact, .profile .table-section, .profile .url-info, .profile .friends, .profile .blurbs, table.comments-table, DIV.blog-preview { 
background: #5A6C75;
}


:root {
    --logo-blue: black;
    --darker-blue: black;
    --lighter-blue: #AF2D2D;
    --even-lighter-blue: #768288;
    --lightest-blue: #768288;
    --dark-orange: black;
    --light-orange: #AF2D2D;
    --even-lighter-orange: #768288;
    --green:;
}

table.comments-table{
display: block;
height: 400px!important;
overflow-y: scroll;
}

img:hover {
  animation: shake 0.5s; 

  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); }
}

.image {
    background: url("https://64.media.tumblr.com/aa5b657de7578934611fd7d2b7b3ac34/e3d0380765d47cba-26/s540x810/3c2dc612617a56c571d1cf72e60aab0531e3f7c5.png") no-repeat;
    background-size: 100%!important;
    position: fixed;
    right: 10px;
    bottom: 10px;
height: 300px;
width: 300px;
    z-index: 1000;
    opacity: 100;
}
@media (max-width: 600px) {
.image{display:none;}
}
</style>
<div class="image"></div>

<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: url('https://64.media.tumblr.com/cb5cc4790e0beb1d25da0946592d76ce/686656cc0816ee5e-08/s75x75_c1/af739a33759f3a750c053e4c9e1ba91393ebb244.gif')
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
	/* Add to Favorites */
	content: url('https://64.media.tumblr.com/cb5cc4790e0beb1d25da0946592d76ce/686656cc0816ee5e-08/s75x75_c1/af739a33759f3a750c053e4c9e1ba91393ebb244.gif')
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
	/* Send Message */
	content: url('https://64.media.tumblr.com/cb5cc4790e0beb1d25da0946592d76ce/686656cc0816ee5e-08/s75x75_c1/af739a33759f3a750c053e4c9e1ba91393ebb244.gif')
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
	/* Forward to Friend */
	content: url('https://64.media.tumblr.com/cb5cc4790e0beb1d25da0946592d76ce/686656cc0816ee5e-08/s75x75_c1/af739a33759f3a750c053e4c9e1ba91393ebb244.gif')
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
	/* Instant Message */
	content: url('https://64.media.tumblr.com/cb5cc4790e0beb1d25da0946592d76ce/686656cc0816ee5e-08/s75x75_c1/af739a33759f3a750c053e4c9e1ba91393ebb244.gif')
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
	/* Block User */
	content: url('https://64.media.tumblr.com/cb5cc4790e0beb1d25da0946592d76ce/686656cc0816ee5e-08/s75x75_c1/af739a33759f3a750c053e4c9e1ba91393ebb244.gif')
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
	/* Add to Group */
	content: url('https://64.media.tumblr.com/cb5cc4790e0beb1d25da0946592d76ce/686656cc0816ee5e-08/s75x75_c1/af739a33759f3a750c053e4c9e1ba91393ebb244.gif')
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
	/* Report Profile */
	content: url('https://64.media.tumblr.com/cb5cc4790e0beb1d25da0946592d76ce/686656cc0816ee5e-08/s75x75_c1/af739a33759f3a750c053e4c9e1ba91393ebb244.gif')
}

@keyframes spin{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(-360deg); }
}
.general-about .profile-pic img{
  border-radius: 50%;
  animation: spin 7s infinite linear;
}
</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 10 of 10 comments ( View all | Add Comment )

s3renzity	1742504863 I ate it tysm Report Comment
haikvshvih	1739928555 usinggg Report Comment
Emryn	1738577578 Using!! Report Comment
Didela	1721448029 using :v Report Comment
willow	1719806925 Using! Report Comment
Safi Starie	1719624161 using!! looks pretty omg!! Report Comment
riku / sky !!	1719001481 usiignggg thank u smsm Report Comment
Dray	1716959471 using!! Report Comment
velvet☄. *. ⋆	1707986902 will be using deffo! thanks so much :D Report Comment
Hotaru_Taru!	1705626820 using! so pretty :)<3 Report Comment