Owl house layout

Tags: the owl house, toh, layout, music, cursor, silly, lumity, hooty

Description:

hoot hoot :3 comment using if you use

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by A nerdy artist (Rae Taylor irl)🍉  (https://layouts.spacehey.com/layout?id=85729) -->

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


<style>
li.active .icon { content:url('https://anewchanceanewday.neocities.org/hoothoot.png'); width: 20PX;height: 20px;}
nav .top , nav .links{

background: transparent;

text-align: center;

}

nav .links li:not(:last-child)::after {

content: url("https://anewchanceanewday.neocities.org/pixil-frame-0.png");

color: var(--text);

}
</style><div style="float:  ; max-height: 921px; max-width: 1068px; position: fixed; left: 1200px; bottom: 0px; z-index: 300;">
<img src="https://64.media.tumblr.com/00f98602e632464de939d9cdd3069db7/358ed16b37fbca8c-d2/s640x960/8b3bb2d6f136884e853c8f8de20f5a9491e01174.png" width="200" height="200"/></div>
<div style="float:  ; max-height: 350px; position: fixed; left: 50px; bottom: 6px; z-index: 300;">
<img src="https://media.tenor.com/tMkGgpWEj_IAAAAC/the-owl-toh-collector.gif" width="200" height="200"/></div>
<style>html:before {
  animation: grain 8s steps(10) infinite;
  background-image: url(https://i.pinimg.com/originals/17/6f/b5/176fb547189cbdb4f745d425e84167f3.gif);
  content: "";
  height: 300%;
  left: -50%;
  opacity:.4;
  position: fixed;
  top: -110%;
  width: 300%;
  pointer-events:none;
}
@keyframes grain 
  70% { transform:translate(0%, 15%) }
}</style><style>    
  /* Resting (normal cursor) */
  body {
    cursor: url("https://anewchanceanewday.neocities.org/the-owl-house-the-collector-pack1.png"), auto;
  }

  /* I-beam/caret/the little line that shows up when you highlight text */
  input {
    cursor: url("https://anewchanceanewday.neocities.org/the-owl-house-the-collector-pack1.png"), auto;
  }

   /* The rest of these are for the pointer (what shows up when you hover over a link) */
  a:hover,
  button:hover,
  .logout-btn:hover {
    cursor: url("https://anewchanceanewday.neocities.org/the-owl-house-the-collector-pack.png"), auto;
  }
</style>
<style>
  /* Resting (normal cursor) */
  body {
    cursor: url("https://anewchanceanewday.neocities.org/the-owl-house-the-collector-pack1.png"), auto;
  }

  /* I-beam/caret/the little line that shows up when you highlight text */
  input {
    cursor: url("https://anewchanceanewday.neocities.org/the-owl-house-the-collector-pack1.png"), auto;
  }

   /* The rest of these are for the pointer (what shows up when you hover over a link) */
  a:hover,
  button:hover,
  .logout-btn:hover {
    cursor: url("https://anewchanceanewday.neocities.org/the-owl-house-the-collector-pack.png"), auto;
  }
</style>


<style>
/*CONTACT 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 {content: "" url(https://anewchanceanewday.neocities.org/owlbert.png);}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {content: "" url(https://anewchanceanewday.neocities.org/pixil-frame-0.png);}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {content: "" url(https://anewchanceanewday.neocities.org/hoothoot.png);}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {content: "" url(https://anewchanceanewday.neocities.org/owlbert.png);}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {content: "" url(https://anewchanceanewday.neocities.org/pixil-frame-0.png);}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {content: "" url(https://anewchanceanewday.neocities.org/hoothoot.png);}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {content: "" url(https://anewchanceanewday.neocities.org/owlbert.png);}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {content: "" url(https://anewchanceanewday.neocities.org/pixil-frame-0.png);}
        </style>
        <style>
.profile .friends .person img:not(.icon) { -webkit-mask-image: url(https://images.emojiterra.com/google/noto-emoji/unicode-15/animated/1fac0.gif);-webkit-mask-size: 100%;-webkit-mask-repeat: no-repeat;-webkit-mask-position: center;}
</style>
<style>main:before {
	width: 100%;
	height: 300px ;
	display: block;
	content: ""; 
	background-image: url('https://anewchanceanewday.neocities.org/ezgif-4-41b1a25324.gif');
	background-position: center;
	background-size: cover;
}
@media only screen and (max-width: 100px) {
	main:before{
		height: 100px;
	}
}</style>
<style>
body:before {
content: " ";
height: 100vh;
width: 100vw;
display: block;
position: fixed; 
top: 0; 
left: 0; 
z-index: 100;
background-image: url("https://media.tenor.com/yRhfJNvt33IAAAAd/the-owl-house-eda-with-bells.gif");
background-size: cover;
background-repeat: no-repeat;
background-position:center;
animation: yourAnimation 3.1s ease 0s 1 normal forwards;
pointer-events: none;}
@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } 
</style>


<iframe width="0" height="0" src="https://www.youtube.com/embed/P7W2LaLAat8?controls=0//?&;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>
/* replace with cd image that has transparent background. must be 150px by 150px. */
:root {
--cd-image: url('https://anewchanceanewday.neocities.org/Hooty_Face.png');
}
.profile-pic {
position: relative;
width: 183px;
filter: drop-shadow(0 0 0.25rem gray);
}
.profile-pic:after {
content: "";
background: url('https://fluorescent-lights.neocities.org/f0rzNHe.png'), linear-gradient(150deg, rgba(255,255,255,0.4), rgba(255,255,255,0.2), 40%, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.6));
background-size: contain, cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.profile-pic:before {
content: "";
background: var(--cd-image);
position: absolute;
top: 5px;
left: -20px;
width: 150px;
height: 150px;
background-repeat: no-repeat;
z-index: -1;
animation-name: spin;
animation-duration: 5000ms;
animation-iteration-count: infinite;
animation-timing-function: linear; 
transition: left ease 0.5s;
}
.profile-pic:hover:before {
left: -75px;
}
@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}
.profile-pic .pfp-fallback {
float: right;
width: 163px;
height: 160px;
border: none;
}
.general-about .profile-pic img {
max-width: inherit;
}
</style>

<style>

.logo {

content:url("https://anewchanceanewday.neocities.org/OWLHOUSELOGOO.png");

}

</style>
<img src="https://anewchanceanewday.neocities.org/299.png"/>


<style>
body{
background: url(https://static.wikia.nocookie.net/the-owl-house/images/a/ab/The_Boiling_Isles.png/revision/latest?cb=20210813034948) center;
background-size: cover;
background-attachment: fixed;
}

main, nav .top, nav .links, footer{
background: rgb(120, 80, 100, 0.7);
border: 4px dotted white;
border-radius: 10px;
color: white;
text-transform: lowercase;
margin-top: 25px;
margin-bottom: 25px;
}

a, nav .top a, nav .links a, footer a{
color: white;
}
a:hover, nav .top a:hover, nav .links a:hover, footer a:hover, .friends a p:hover{
color: rgb(120, 38, 100) !important;
}

nav .links a{
text-shadow: none;
}


.general-about{
  background: rgb(120, 38, 100);
  border-radius: 8px;
}

.online {
        content: url("https://dl.glitter-graphics.com/pub/745/745455rvacxjsot2.gif ");
}

.heading{
  background: rgb(120, 38, 100) !important;
  color: white !important;
  text-align: center;
  border-radius: 8px;
}

.profile .url-info{
  text-align: center;
}

.profile-info{
  background: url(https://sportshub.cbsistatic.com/i/2023/01/19/d4a9598c-7b32-439c-ba7c-a1d22cda4441/the-owl-house-for-the-future.png?width=1200) center;
  background-size: cover;
  border: 3px dotted white;
  border-radius: 8px;
  height: 100px;
  font-size: 20px;
  font-style: italic;
}

.profile .mood, .friends, .blog-preview{
  text-align: center;
}

.comments-table td, .profile .contact{
  border: none;
}

.friends a p{
  color: white !important;
}

button{
  color: white !important;
  border: none;
  background: none;
}

button:hover{
  color: rgb(120, 38, 100) !important;
}

.count{
  color: white;
}


:root {
--logo-blue: white;
--darker-blue: white;
--lighter-blue: transparent;
--even-lighter-blue: transparent;
--lightest-blue: transparent;
--dark-orange: white;
--light-orange: transparent;
--even-lighter-orange: transparent;
--green: white;
}
</style>
<img src="https://static.wikia.nocookie.net/the-owl-house/images/2/26/Owl_House_banner.jpeg/revision/latest/scale-to-width-down/184?cb=20191214133600"/>

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 15 of 15 comments ( View all | Add Comment )

zuko༒	3 days ago o da estrelinha é qual gente? (pfv alguém me responde 🛐) Report Comment
LolCatStudiosX3	1 month ago Using on my friend's profile Report Comment
sashazitagoti13	2 months ago USINGGGGGGGGGGGGGGGGGGGGG Report Comment
Sss4mmu3l	2 months ago usando fondoo!! :3 Report Comment
marie :3	4 months ago USING 100 PERCENT THIS IIS SO SIGMA Report Comment
Aspen thornesbane	5 months ago I am going to use this 10 percent Report Comment
Aspen thornesbane	5 months ago I am going to use this 10 percent Report Comment
phrogrz	5 months ago grahh usingg!! Report Comment cool! hope you like it :3 by A nerdy artist (Rae Taylor irl)🍉; 5 months ago; Report
⧼『┃kyle┃』⧽	5 months ago Only using some stuff Report Comment
Ottilie <3	6 months ago Using part of the code! Report Comment
christopher.. ✴️	8 months ago LOVE IT AHHHHH, USEINGGGG!!! <3 Report Comment
marie :3	11 months ago IM SO USING AHHHHHHH THX!! Report Comment USING THIS IS EPIC by max >:3; 5 months ago; Report
STOP GORE ACCOUNTS!!	1 year ago using! Report Comment
♱ pibby	1 year ago awesome!!! using :3 Report Comment Awesome!! enjoy! by A nerdy artist (Rae Taylor irl)🍉; 1 year ago; Report
Laloo	1 year ago Really cool layout Report Comment tyysmmm :3 by A nerdy artist (Rae Taylor irl)🍉; 1 year ago; Report