march eridan layout.

Tags: homestuck, march, eridan
Description:

4 march. uhm
Code:

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

<div id="profile">
<ul>

<center>
<h1> Hello User
<div id="profile">
<ul>

<center>
<h1> Hello user!</h1> 
<br/>
<p>This profile may contains:<br/>
&gt;</p><ul>
<li>possible flashig</li>
<li>loud music</li>

</ul>
<br/>

<h1>DNI</h1>
<ul>
<li>werdios n stuff, any1 who calls themselves probelnmatic unironically</li>
</ul>
<br/>
<br/>
<br/>Click below to go to my profile<br/>
<br/>
<br/>
<a href="#profile">Enter</a>
<br/>
<br/>
<a href="https://spacehey.com/home">Leave</a>

<style> 

#profile{
 position: fixed;
 background-image: url('https://i.pinimg.com/564x/3e/8d/57/3e8d578d838467eb8c141de9f92dd35c.jpg');
 background-repeat: no-repeat;
 background-attachment: fixed;
 background-size: cover;
 background-color: #ece9d8;
 color: black;
 z-index: 100;
 top: 0; 
 left: 0;
 width: 100vw;
 height: 100vh;
 padding: 50px 100px;
 font-size: 150%;
 overflow-y: scroll;
 opacity: 1;
 transition: .2s;
}

#profile > * {
 width: 100%;
 max-width: 700px!important;
 margin: 20px auto;
 display: block;
}

#profile:target {
 opacity: 0;
 visibility: hidden;
}

#profile > ul {
 padding: 10px 50px;
 border: 4px ridge #0353e6;
 background-color: #ece9d8;
}

</style>
</center></ul></div>
</h1><p><br/></p>

<style>
body, a, a:hover { cursor:url(https://i.pinimg.com/564x/3e/8d/57/3e8d578d838467eb8c141de9f92dd35c.jpg), auto }</style><a href=""></a><a href=""></a>
<div style="float:  ; max-height: 400px; position: fixed; right: 1px; top: 9px; z-index: 200;">
<img src="https://i.pinimg.com/564x/3e/8d/57/3e8d578d838467eb8c141de9f92dd35c.jpg" width="300" height="300"/></div>
<style>
  @import url('https://fonts.googleapis.com/css2?family=Pixelify+Sans&display=swap');
p{
  font-family: 'Pixelify Sans', sans-serif;
  font-size: 150%;
  color:indigo;
}
h1,h2,h3,h4,h5{
  font-family: 'Pixelify Sans', sans-serif;
  font-size: 150%;
  color:indigo;
</style>
<style>
body {
    background: url(https://i.pinimg.com/564x/3e/8d/57/3e8d578d838467eb8c141de9f92dd35c.jpg);
no-repeat center center;
background-size: cover;
}
.profile {
background-image:url(https://i.pinimg.com/564x/3e/8d/57/3e8d578d838467eb8c141de9f92dd35c.jpg);
no-repeat center center;
background-size: cover;
}
table.comments-table{
display: block;
height: 400px!important;
overflow-y: scroll;</style>
<style></style>
<style>
:root {
    --logo-blue: indigo;
    --darker-blue: black;
    --lighter-blue: purple;
    --even-lighter-blue: black;
    --lightest-blue: purple;
    --dark-orange: black;
    --light-orange: purple;
    --even-lighter-orange: black;
    --green: pink;
}
main {
background: url(https://i.pinimg.com/564x/3e/8d/57/3e8d578d838467eb8c141de9f92dd35c.jpg);
}
footer {
    border-radius: 15px;
    background-image: url(https://i.pinimg.com/564x/3e/8d/57/3e8d578d838467eb8c141de9f92dd35c.jpg);
    color: black;
}
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/564x/3e/8d/57/3e8d578d838467eb8c141de9f92dd35c.jpg');
	background-size: cover;
	background-repeat: no-repeat;
background-position:center;
	animation: yourAnimation 1s ease 1s 1 normal forwards;
	pointer-events: none;
}
@keyframes yourAnimation { 100%{ opacity: 1;} 100%{ opacity: 1; } 100%{ opacity: 0;} } 
<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>
<style>
img:hover {
  /* Start the shake animation and make the animation last for 0.5 seconds */
  animation: shake 0.5s;

  /* When the animation is finished, start again */
  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>
<div style="float:  ; max-height: 300px; position: fixed; left: 1px; top: 0px; z-index: 400;">
<img src="https://i.pinimg.com/564x/3e/8d/57/3e8d578d838467eb8c141de9f92dd35c.jpg"/></div>
<style>
    img{
          filter: sepia(100%) saturate(300%) brightness(70%) hue-rotate(220deg) contrast(150%);
    }
</style>
<style>
.general-about img , .profile .friends .person img{
  -webkit-mask-image: url(https://cdn-icons-png.flaticon.com/512/44/44672.png);-webkit-mask-size: 100%;-webkit-mask-repeat: no-repeat;-webkit-mask-position: center;
}
</style>
<style>
.online{content:url("https://i.pinimg.com/564x/3e/8d/57/3e8d578d838467eb8c141de9f92dd35c.jpg");
}
</style></center></ul></div>
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 2 of 2 comments ( View all | Add Comment )
christian!!
1709308145
IM GOING TO SOB
Report Comment