Side order inspired layout (my layout as of 9/16/23)

Tags: splatoon, side order, white
Description:

Hello again! I made another layout yay. Feel free to change it cuz honestly I gave up lmao
Code:

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

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

<div id="profile">
<ul>
<img src="https://gifs4crds.carrd.co/assets/images/image01.gif?vca07fc73a"/>

<center>
<h1> HOLT! WHO GOES THERE! <br/>

</h1><p>This profile contains:<br/>

<img src="https://pagedeco.carrd.co/assets/images/gallery17/043560d9.gif?v=1cb5da6d" style="float:right; width:5%;"/>
<img src="https://pagedeco.carrd.co/assets/images/gallery26/559fbd94.gif?v=1cb5da6d" style="float:left; width:5%"/>

<br/>Some blinkies and stamps flash!!
<br/>
<br/>Bright colors (eyestrain)
<br/> 
<br/>Total epicness
<br/>

<br/>DNI
<br/>Homophobes, transphobes, Racist, Terfs, NSFW pfps/ artist, comshippers, proshippers, <br/>
<br/><br/><br/>ᶜˡᶦᶜᵏ ᵇᵉˡᵒʷ ᵗᵒ ᵍᵉᵗ ᵗᵒ ᵐʸ ᵖʳᵒᶠᶦˡᵉ<br/>

<a href="#profile"><img src="https://64.media.tumblr.com/9f79d78f03143a4b1639d95b500b056a/f14ab322afa3f75d-32/s250x400/849ceeca0482b22d1e75c929c2dadea4315cbb45.gif"/>
</a><a href="https://spacehey.com/home"><img src="https://64.media.tumblr.com/191381a126c9e85214c4b7391da20c78/b9513168638b75be-aa/s75x75_c1/1019d062ae1db01ee855692758af88b322955760.gif"/></a>
<br/><br/>

<img src="https://gifs4crds.carrd.co/assets/images/image01.gif?vca07fc73a"/>

</p><center><img src="https://pagedeco.carrd.co/assets/images/gallery13/6636755a.gif?v=1cb5da6d"/><p> Bye bye!</p>
<br/>

<style> 

#profile{
 position: fixed;
 background-image: url('https://cdn.discordapp.com/attachments/824397338117537842/1152660104559198248/IMG_4374.jpg');
 background-color: white;
 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: 5px double red;
 background-color: black;
}

</style></center></center></ul></div>




<!-- (c) Layout created by ♡ ꒰ঌ C.A CUPID !! ໒꒱ (https://layouts.spacehey.com/layout?id=30380) --> <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>




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



<style>
 


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



<style>
body:before {
	content: " ";
	height: 100vh;
	width: 100vw;
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	background-image: url('https://cdn.discordapp.com/attachments/824397338117537842/1147178156193742888/A8BBBA87-648F-48F0-B0DF-99D1E1D1AF86.gif');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	animation: yourAnimation 3s ease 0s 1 normal forwards;
	pointer-events: none;
}
@keyframes yourAnimation { 0.0% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; } }
nav, footer {
	margin: 1em;
	position: relative;
	box-shadow: 5px 8px 10px #0006;
}
</style>

<style>
main:before {
    width: 810px;
    margin-bottom: 25px;
    border: 0px solid black;
    height: 180px;
    display: block;
    content: "";
    background-image: url();
    background-position: center center;
    background-size: cover;
    border-radius: 30px;




}
body{
   background-image: url(https://cdn.discordapp.com/attachments/824397338117537842/1152660106090123344/IMG_4370.jpg) 
!important;
 height: 100%;
   background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}


/*the username glow and shadow*/
h1
{
	color: /*the username glow and shadow*/
h1
{         color: brown; 
	//text-shadow: 1px 1px #ff87c3;
};
	text-shadow: 2px 2px 3px  #ead1dc, 0 0 25px #ead1dc, 0 0 5px black;
}
main {
  background:url("https://44.media.tumblr.com/7244384f77b8a2cd88c0990f400b9731/649082e05215fb29-02/s400x600_f1/0a59753d84d3afc67947fedee6e71c665cebca95.gif");
  color: black;
  
}
.profile .contact, .profile .table-section, .profile .url-info, .profile .friends, .profile .blurbs, table.comments-table, DIV.blog-preview {background:url("https://cdn.discordapp.com/attachments/824397338117537842/1152660105775562773/IMG_4371.jpg");
}

.profile-info {
    background-image:url("https://cdn.discordapp.com/attachments/824397338117537842/1152660105775562773/IMG_4371.jpg") !important;
       border: var(--borders) !important;
    border-radius: var(--curve) !important;
}

.count {
  color:  #ff87c3;
}
.online{
  color: black!important;  
}


.blurbs .inner{
  text-align: center !important;
}
:root {
  --logo-blue: url("https://cdn.discordapp.com/attachments/824397338117537842/1149367425213665320/IMG_4255.jpg");
  --darker-blue: transparent;
  --lighter-blue: transparent;
  --even-lighter-blue: transparent;
  --lightest-blue: transparent;
  --light-purple: #999999;
  --light-purple: #c27ba0;
  --even-lighter-purple: transparent;
  --green: transparent;
  --table-header:#262626;
  --table-color: #262626;
  --link-text: #262626;
  --main-text: #262626;
}
<style>
a:hover {
  
   /* Chrome, Safari, Opera */
  -webkit-animation: rainbow 0.7s infinite; 
  
  /* Internet Explorer */
  -ms-animation: rainbow 0.7s infinite;
  
  /* Standar Syntax */
  animation: rainbow 0.7s infinite; 
}
/* Chrome, Safari, Opera */
@-webkit-keyframes rainbow{
  0%{color: red;}
  10%{color: orange;}
20%{color: yellow;}
  30%{color: lime;}
40%{color: deepskyblue;}
  50%{color: darkviolet;}
60%{color: deepskyblue;}
  70%{color: lime;}
  80%{color: yellow;}
  90%{color: orange;}
100%{color: red;}
}
/* Internet Explorer */
@-ms-keyframes rainbow{
  0%{color: red;}
  10%{color: orange;}
20%{color: yellow;}
  30%{color: lime;}
40%{color: deepskyblue;}
  50%{color: darkviolet;}
60%{color: deepskyblue;}
  70%{color: lime;}
  80%{color: yellow;}
  90%{color: orange;}
100%{color: red;}
}
/* Standar Syntax */
@keyframes rainbow{
  0%{color: red;}
  10%{color: orange;}
20%{color: yellow;}
  30%{color: lime;}
40%{color: deepskyblue;}
  50%{color: darkviolet;}
60%{color: deepskyblue;}
  70%{color: lime;}
  80%{color: yellow;}
  90%{color: orange;}
100%{color: red;}
}
</style>
<style>
a:hover {
  
   /* Chrome, Safari, Opera */
  -webkit-animation: rainbow 0.7s infinite; 
  
  /* Internet Explorer */
  -ms-animation: rainbow 0.7s infinite;
  
  /* Standar Syntax */
  animation: rainbow 0.7s infinite; 
}
/* Chrome, Safari, Opera */
@-webkit-keyframes rainbow{
  0%{color: red;}
  10%{color: orange;}
20%{color: yellow;}
  30%{color: lime;}
40%{color: deepskyblue;}
  50%{color: darkviolet;}
60%{color: deepskyblue;}
  70%{color: lime;}
  80%{color: yellow;}
  90%{color: orange;}
100%{color: red;}
}
/* Internet Explorer */
@-ms-keyframes rainbow{
  0%{color: red;}
  10%{color: orange;}
20%{color: yellow;}
  30%{color: lime;}
40%{color: deepskyblue;}
  50%{color: darkviolet;}
60%{color: deepskyblue;}
  70%{color: lime;}
  80%{color: yellow;}
  90%{color: orange;}
100%{color: red;}
}
/* Standar Syntax */
@keyframes rainbow{
  0%{color: red;}
  10%{color: orange;}
20%{color: yellow;}
  30%{color: lime;}
40%{color: deepskyblue;}
  50%{color: darkviolet;}
60%{color: deepskyblue;}
  70%{color: lime;}
  80%{color: yellow;}
  90%{color: orange;}
100%{color: red;}
}
</style>
<style>
.profile-info {
border-color #180833
}
.profile-info .inner {
border: none;</style>
<style>
.profile-pic img{
 clip-path: polygon(50% 0%, 67% 29%, 98% 35%, 75% 58%, 79% 91%, 50% 75%, 21% 91%, 25% 58%, 2% 35%, 33% 29%)
}
overflow: hidden;
}
.profile .friends .person img {
border-radius: 500px;
}
</style>
<style>
.details:after {
content: "hOi :3";
}
</style>
<style>
footer{background:none !important; line-height:0px !important;}
footer ul li a {color: #000000 !important;}
}
</style>
  

<style>
table{background:colour !important; line-height:15px !important;}
table ul li a {color: #f953d2 !important;}
}
</style>
<style>


.online{content:url("https://caterpie.crd.co/assets/images/gallery30/b91a5db7.gif?v=8cec5808");}


</style>


<style>
h1, h2, h3, h4,h5,a, p, nav label, .section {color: #ffffff;}
h1, h2, h3, h4, h5, a, p, nav label, .section{ text-transform:lowerercase !important;
}
.online{
  color: white!important;  
}
</style>

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

<div style="float:  ; max-height: 400px; position: fixed; left: 1px; bottom: 9px; z-index: 200;">
<img src="https://64.media.tumblr.com/eba5737888db6efc44ed0aafabfd98d0/d71fc548332ab874-66/s500x750/a2177114c311b1fd850c3f990920d6bb9561cac1.png" width="200" height="200"/></div>

<div style="float:  ; max-height: 400px; position: fixed; right: 1px; bottom: 9px; z-index: 200;">
<img src="https://64.media.tumblr.com/2f359accbd44370d9fd2783182c47143/d71fc548332ab874-5a/s1280x1920/f7eaf4b3d9dbf28aee34d8dc41b05a1e311d8c43.png" width="200" height="200"/></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 0 of 0 comments ( View all | Add Comment )