Layout published by OMORI

published 1685747595
updated 1685747944

Add to Favorites

View Layouts

View Profile

Report Layout

OMORI Whitespace Themed Layout

Tags: omori, mewo, whitespace, black and white, monochrome, video game

Description:

!!Contains no spoilers!!

This layout is inspired by OMORI's Whitespace. No credit is needed but I would recommend linking back to this page so others can find this layout!

- Autoplays the Whitespace theme

- Customized Mewo spacehey logo (by OPAL.NIGHT, check them out!)

- Loading screen

- Custom cursor

- Round, rotating pfp... pfps with a white background work best

- Animated name with animated texture

- Changed font

- Changed contact icons

- Interests renamed to mirror game's settings + has a scroll bar

- Borders along headers designed to emulate the game's text boxes

- Monochromatic filter on images

- A little guy in the corner

- Wider than most other layouts

- All code is labeled for easy changes to be made!

I AM NOT A CODER!! I use code already made by other creators and tweak it from there to see if it works. Links below list where I've found and taken code

Resources used:

https://layouts.spacehey.com/layout?id=31237

https://blog.spacehey.com/entry?id=659451

https://blog.spacehey.com/entry?id=548485

https://blog.spacehey.com/entry?id=539631

https://blog.spacehey.com/entry?id=20549

- and perhaps more that I have lost, if you recognize your code here and wish for credit lmk!

Preview:

click on the image for a larger preview

Code:

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

<style>
/*LOGO*/
 .logo {
  
  content:url("https://cdn.discordapp.com/attachments/746614420599472240/1109733119092854944/Untitled213_20230521144524.png")
</style>

<style>
body { cursor: url(http://www.rw-designer.com/cursor-view/119445.png), auto !important; }
</style>
<style>
/*LOADING SCREEN*/
body::before {
content: "";
display: block;
position: fixed;
left: -32px;
top: 0;
width: calc(100% + 32px);
height: calc(100% + 32px);
background-image: url(https://media.tenor.com/FQNi9YXkxz0AAAAC/omori-white-space.gif);
background-size: cover;
background-position: center;
background-repeat: repeat;
z-index: 10000000;
animation: ScanlineAnimationRight 0.2s linear infinite;
pointer-events: none;
opacity: 1;
animation: hide 1.9s linear 1s 1 forwards;
}

@keyframes hide {
to {
opacity: 0;
}
}


</style>
<style> 


/*FONTS*/
@import url('https://fonts.googleapis.com/css2?family=Reenie+Beanie&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Shadows+Into+Light&display=swap');
p{
font-family: 'Shadows Into Light', cursive;
font-size: 175%;
color: black;
}
h2,h3,h4,h5{
font-family: 'Reenie Beanie', cursive;
font-size: 275%;
color: white;
}


/*HEADER*/
main:before {
    width: auto;
    margin-bottom: 25px;
    border: 0px white;
    height: 500px;
    display: block;
    content: "WELCOME TO WHITE SPACE.";
    background-image: url(https://media.discordapp.net/attachments/1107858901958938624/1113996162433822850/Untitled100_20230601210211.png?width=1440&height=480);  
    background-position: center center;
    background-size: cover;
}

/*BACKG COLOR*/
body {
background-color: #ffffff;
 }

/*FOOTER*/
footer {
border-radius: 15px; background-color: white;
 color: black;
}

/*WIDTH*/
.container {
width: 90%;
max-width: 1000px;
}

/*COLORS*/
:root {
    --logo-blue: black;
    --darker-blue: black;
    --lighter-blue: black;
    --even-lighter-blue: white;
    --lightest-blue: ;
    --dark-orange: black;
    --light-orange: black;
    --even-lighter-orange: ;
    --green:  ;
}

/*INTEREST SECTION SCROLL BAR*/
	.profile .table-section {
    	display: block;
    	height: 300px;
    	width: AUTO;
    	overflow-y: scroll;
    	font-size: 12px;
    	border: dotted 0px!important;
    	border-right: none!important
}


/*CUSTOMIZE INTERESTS LABELS*/
table, th, td {


  border: 0px solid;


 	}


:root {


  --topic1: "???";

  --topic2: "EQUIP";

  --topic3: "POCKET";

  --topic4: "SKILLS";

  --topic5: "OPTIONS";

  --topic6: "Meow? (Waiting for something to happen?)";


 }


.table-section:not(:last-child) .details-table tr td:first-child p{color:transparent !important;text-shadow: none !important;letter-spacing: -100px;}


.details-table tr td:first-child p::after{

    

    

color:var(--links) !important;

letter-spacing:normal !important;

text-shadow: 2px 2px black !important;

filter: brightness(95%) !important;

   

   

}

.table-section:not(:last-child) .details-table tr:nth-child(1) td:first-child p::after{

  content: var(--topic1);

}

.table-section:not(:last-child) .details-table tr:nth-child(2) td:first-child p::after{

  content: var(--topic2);

}

.table-section:not(:last-child) .details-table tr:nth-child(3) td:first-child p::after{

  content: var(--topic3);

}

.table-section:not(:last-child) .details-table tr:nth-child(4) td:first-child p::after{

  content: var(--topic4);

}

.table-section:not(:last-child) .details-table tr:nth-child(5) td:first-child p::after{

  content: var(--topic5);

}

.table-section:not(:last-child) .details-table tr:nth-child(6) td:first-child p::after{

  content: var(--topic6);

}


/*ROUND PFP + IT SPINS!!*/
@keyframes spin{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(-360deg); }
}
.general-about .profile-pic img{
  border-radius: 50%;
  animation: spin 14s infinite linear;
}

/*CIRCULAR FRIENDS PFP*/
.friends-grid img{
   border-radius: 500px;
   overflow: hidden;
}



/*CUSTOM ONLINE ICON*/
.online { visibility: hidden; } .online img { content: url("https://i3.glitter-graphics.org/pub/2084/2084843xkhl9frorw.gif"); animation-name: none; visibility: visible; height: 25px; width: 100px; }

/*HIDE URL BOX*/
.url-info{display:none !important;}

/*HIDE WHO ID LIKE TO MEET HEADING*/
.blurbs .inner .section:nth-child(2) h4{ font-size:0; }
.blurbs .inner .section:nth-child(2) h4:before{ content: ""; font-size:.8rem; }


/* CHANGE COLOR OF THE NUMBER OF FRIENDS/COMMENTS YOU HAVE */
.count {
    color: black;
}

/*HEADING BORDER + UPPERCASE LOCK*/
.profile .blurbs .heading, .profile .friends .heading, .profile .contact .heading, .profile .table-section .heading {
color: white;
background-color:rgba(0, 0, 0, 1);
text-transform:uppercase !important;
color: white;
border: 3px double rgba(255, 255, 255, 1)
}

/*USER*/
.profile h1 {

font-size: 100px;

font-family: 'Reenie Beanie', cursive;

font-weight: normal;

background: url(https://i.makeagif.com/media/11-25-2015/wPR0vZ.gif);

-webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

animation: myAnim 20s ease 0s infinite normal forwards;

z-index: 100;

}
@keyframes myAnim {
	0% {
		transform: translate(0);
	}

	10% {
		transform: translate(-2px, -2px);
	}

	20% {
		transform: translate(2px, -2px);
	}

	30% {
		transform: translate(-2px, 2px);
	}

	40% {
		transform: translate(2px, 2px);
	}

	50% {
		transform: translate(-2px, -2px);
	}

	60% {
		transform: translate(2px, -2px);
	}

	70% {
		transform: translate(-2px, 2px);
	}

	80% {
		transform: translate(-2px, -2px);
	}

	90% {
		transform: translate(2px, -2px);
	}

	100% {
		transform: translate(0);
	}
}

/*IMAGE ICONS*/
.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://pixelbank.neocities.org/decome/decorative/78158d3e.gif)}


.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {

/* ADD TO FAVOURITE */

content: url(https://pixelbank.neocities.org/decome/decorative/294c90a1.gif)}


.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {

/*SEND A MESSAGE */

content: url(https://pixelbank.neocities.org/decome/decorative/0828d47b.gif)}


.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {

/*FORWARD TO FRIEND*/

content: url(https://pixelbank.neocities.org/decome/decorative/34005733.gif)}


.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {

/*INSTANT MESSAGE*/

content: url(https://pixelbank.neocities.org/decome/decorative/4f452168.png)}


.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {

/*BLOCK USER*/

content: url(https://pixelbank.neocities.org/decome/decorative/6056feab.gif)}


.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {

/*ADD 2 GROUP*/

content: url(https://pixelbank.neocities.org/decome/swirlys/374c77e1.gif)}


.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {

/*REPORT*/

content: url(https://pixelbank.neocities.org/decome/decorative/74e7410d.gif)}


/*GREYSCALE*/
img {
    border-style: none;
    filter: grayscale(1);

    }

/*COMMENTS SCROLL BAR*/
.comments-table{
display: block;
height: 400px;
overflow-y: scroll;

/*MUSIC AUTOPLAY BELOW*/
</style>


<iframe width="0" height="0" src="https://www.youtube.com/embed/AXUX_h4YNaY//?&;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>
/*LIL CORNER GUY*/
.image {
    background: url('https://static.wikia.nocookie.net/omori/images/c/c3/Omori_and_Mewo_Sticker.png/revision/latest/scale-to-width-down/120?cb=20210720080011&format=original') no-repeat;
    background-size: 100%!important;
    position: fixed;
    right: 10px;
    bottom: 10px;
height: 100px;
width: 100px;
    z-index: 1000;
    opacity: 50;
}
@media (max-width: 600px) {
.image{display:none;}
}
</style>
<div class="image"></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 20 of 28 comments ( View all | Add Comment )

rogelio!1!	1715533642 using! Report Comment
SU1C1D3#WH0R3	1713901829 Def using Report Comment
Lunny,, ♡	1711746061 using!! Report Comment
wave to sins	1711671929 using!! Report Comment
Alex 🔅⭐	1710457721 using:3 Report Comment
Martintilin	1709124676 usandoo:33 Report Comment
Lila	1707852531 using <3 Report Comment
Shiro/Sunny	1706527009 usinggg Report Comment
Muhi	1704407455 usingggg Report Comment
kenken :3	1703830065 this is sooo cute! using :3 Report Comment
Omori	1703638069 using thank u Report Comment
headspacer	1701700742 USSIINGGG :3 Report Comment
⤷ Mynta / My !	1699464971 using this Report Comment
OMORI	1695521110 usin Report Comment
Boris :3	1694250035 USING!!!! Report Comment
𝜗𓏲 wesley	1693499872 using :3 Report Comment
biscuit :3	1690899724 Will use! :D Report Comment
D3n!z	1690557375 USING PROBABLY !!^⁠_⁠^ Report Comment
⸝⸝ ꒰ zai ✧	1689974378 using ! :3 Report Comment
rez ☆	1689974047 USING 8424242DAODADKA TY Report Comment