Honkai Star Rail Dan Heng Layout

Tags: honkai star rail, star rail, green, teal, cute

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=90576) -->

<style>
main:before {
  width: 808px;
  margin-bottom: 10px;
  border: 1px solid black;
  height: 350px;
  display: block;
  content: "";
  background-image: url("https://upload-os-bbs.hoyolab.com/upload/2023/05/25/11391624/703745c60988be458fca19c22442fe3b_2776080404587091513.gif");
  background-position: center;
  background-size: cover;
  border-radius: 19px;
}


  body{
    background: url("https://i.pinimg.com/564x/59/d2/5e/59d25e9eb66261783e64e727f85c5f3e.jpg"); 
    background-size: 500px ;
        background-attachment: fixed;
}

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

nav .top {
       background: url("https://i.pinimg.com/564x/21/06/be/2106be9e038053fab8be3f8411f93c65.jpg");
  background-size:;
}



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


:root {
    --logo-blue: black;
    --darker-blue: black;
    --lighter-blue: #15B4B1;
    --even-lighter-blue: #BFF0DF;
    --lightest-blue: #BFF0DF;
    --dark-orange: #BFF0DF;
    --light-orange: #15B4B1;
    --even-lighter-orange: #BFF0DF;
    --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://pbs.twimg.com/media/F4qyIgUXEAE_WEw.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/tumblr_m230z8YSMN1qfamg6.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/tumblr_m230z8YSMN1qfamg6.gif')
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
	/* Send Message */
	content: url('https://64.media.tumblr.com/tumblr_m230z8YSMN1qfamg6.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/tumblr_m230z8YSMN1qfamg6.gif')
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
	/* Instant Message */
	content: url('https://64.media.tumblr.com/tumblr_m230z8YSMN1qfamg6.gif')
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
	/* Block User */
	content: url('https://64.media.tumblr.com/tumblr_m230z8YSMN1qfamg6.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/tumblr_m230z8YSMN1qfamg6.gif')
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
	/* Report Profile */
	content: url('https://64.media.tumblr.com/tumblr_m230z8YSMN1qfamg6.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>


<style>* {cursor: url(https://cur.cursors-4u.net/nature/nat-11/nat1022.cur), auto !important;}</style><a href="https://www.cursors-4u.com/cursor/2012/01/27/clouds-10.html" target="_blank" title="Clouds"><img src="https://cur.cursors-4u.net/cursor.png" alt="Clouds" 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.

Comments

Displaying 4 of 4 comments ( View all | Add Comment )

♡ASTRA!!☆	1714759973 using X3 Report Comment
Avry	1712784858 using Report Comment
kazou	1705113607 using!! Report Comment
☆samu{huo huo}☆	1702353505 using!! :D Report Comment