Rougoshi Layout

Tags: beastars, anime, ship, rouis, legoshi, rougoshi, rougoshin8fever
Description:

My first layout in a while so I apologize if it's not as good as my past ones :[
Preview:

click on the image for a larger preview
Code:

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

<style>

/*PASTE SCROLLBAR CODE HERE*/

body{
background-image: url('https://i.ibb.co/zXGgxwD/MOSHED-2023-10-23-18-16-23.jpg');
background-repeat: repeat;
background-position:undefined;
background-attachment: fixed;
background-size: contain;
background-color: #ffffff;
}

main{
background-color: #000000;
border: 3px Solid #554535;
}

.contact, .url-info, .table-section, .blurbs, .friends, .comments {
background-color: #33251e;
border: 3px Solid #150d09!important;
}

span[itemprop='name'] {
color: #b89075;
font-family: Serif;
}

h4 {
color: #b89075;
font-family: Serif;
}

.section h4, .details-table td:first-child {
color: #b89075!important;
font-family: Serif;
}

a, .count {
color: #b89075;
font-family: Serif;
}

a:hover {
color: #725746;
font-family: Serif;
}

body,main {
color: #b89075;
font-family: Serif;
}

.details-table td, .details-table td:first-child{
background: none!important;
}
.heading{
background: none!important;
}
.comments-table td{
background: none!important;
}
</style>

<style>body { cursor: url('data:image/x-icon;base64,AAACAAEAICAQAAAAAADoAgAAFgAAACgAAAAgAAAAQAAAAAEABAAAAAAAAAIAAAAAAAAAAAAAEAAAAAAAAAAAAAAA7+/vAP///wDx8fEA6urqAPPz8wDs7OwA5eXlAPX19QD39/cA8vLyAPv7+wC2trYA7e3tAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADJAAAAAAAAAAAAAAAAAAAA2wAAAAAAAAAAAAAAAAAADFwAAAAAAAAAAAAAAAAAAASwAAAAAAAAAAAAAAAAAADBwAAAAAAAAAAAAAAADAAASAAAAAAAAAAAAAAAAAfADGwAAAAAAAAAAAAAAAAHrA0wAAAAAAAAAAAAAAAAByp0UAAAAAAAAAAAAAAAAAciIid3fAAAAAAAAAAAAAAHIiIiJcAAAAAAAAAAAAAAByIiIlwAAAAAAAAAAAAAAAciIiXAAAAAAAAAAAAAAAAHIiJcAAAAAAAAAAAAAAAAByIlwAAAAAAAAAAAAAAAAAciXAAAAAAAAAAAAAAAAAAHJcAAAAAAAAAAAAAAAAAAB1wAAAAAAAAAAAAAAAAAAAfAAAAAAAAAAAAAAAAAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/////////////////////////////////////////////////P////h////4f///8H///fD///zg///8Yf///AH///wD///8AB///AAf//wAP//8AH///AD///wB///8A////Af///wP///8H////D////x////8/////f////w=='), auto; }</style>

<style>
/* customizable snowflake styling */
.snowflake {
  color: white;
  font-size: 1em;
  font-family: Arial, sans-serif;
  text-shadow: 0 0 5px black;
}
@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;user-select:none;cursor:default;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%;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;animation-delay:3s,1.5s}.snowflake:nth-of-type(10){left:25%;animation-delay:2s,0s}.snowflake:nth-of-type(11){left:65%;animation-delay:4s,2.5s}
</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>

<img src="https://media2.giphy.com/media/v1.Y2lkPTc5MGI3NjExOGt4dmd5N3NkcmZwZDNxYWF1azczMjN1dnB5b2I4Z3Y0YmE4YWdpZSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/vfPEMNSKj9GYDD7Y8F/giphy.gif"/>

<iframe width="300" height="50" src="https://www.youtube.com/embed/bgo9dJB_icw//?&;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>
html:before {
  animation: grain 8s steps(10) infinite;
  background-image: url(https://i.imgur.com/QpnTsrV.jpg);
  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>

main:before {
	width: 100%;
	height: 300px;
	display: block;
	content: "";
	background-image: url('https://i.ibb.co/1mjq6vb/MOSHED-2023-10-23-18-5-46.jpg');
	background-position: center center;
	background-size: cover;
}
@media only screen and (max-width: 600px) {
	main:before{
		height: 200px;
	}
}
</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>

<style>



h1{

  animation: type 3s steps(27);

  color: #b89075;

  font-size: 10px;

  font-family: Serif;

  white-space: nowrap;

  overflow: hidden;

  }



@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>
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 )