My layout

Tags: welcome home
Description:

I'm just doing this so that when I want to use it again, I can just come here and get it, but if you want, you can take it
Code:

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

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


/* customizable snowflake styling */


.snowflake {


  color: purple;


  font-size: 1em;


  font-family: Arial, sans-serif;


  text-shadow: 0 0 5px rgba(0,0,0,0.7);


}





@-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@-webkit-keyframes snowflakes-shake{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}}@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;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:10s,3s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;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%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s}.snowflake:nth-of-type(10){left:25%;-webkit-animation-delay:2s,0s;animation-delay:2s,0s}.snowflake:nth-of-type(11){left:65%;-webkit-animation-delay:4s,2.5s;animation-delay:4s,2.5s}


</style>


<style>
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
.profile .left h1{ font-family: 'Press Start 2P', cursive; }
</style>

<style>

.profile h1{

font-size: 60px

font-family: 'Press Start 2P', cursive;

background: url(https://i.pinimg.com/originals/57/81/7b/57817bbb316060f95709f5fce3d64d2e.gif) ;

-webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

animation: myAnimation 10s ease 0s infinite normal forwards;

z-index: 100;

}

@keyframes myAnimation {
	0%,
	100% {
		transform: rotate(0deg);
		transform-origin: 50% 50%;
	}

	10% {
		transform: rotate(8deg);
	}

	20%,
	40%,
	60% {
		transform: rotate(-10deg);
	}

	30%,
	50%,
	70% {
		transform: rotate(10deg);
	}

	80% {
		transform: rotate(-8deg);
	}

	90% {
		transform: rotate(8deg);
	}
}

</style>

<style>
/* contact icons */
.contact .inner a img {
font-size: 0;
}
.contact .inner a img:before {
font-size: 8em;
display: block
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {
/* add to friends */
content: "🐛"
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
/* add to favorite */
content: "🐛"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* send a message */
content: "🐛"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* foward to friend*/
content: "🐛"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
/* instant message */
content: "🐛"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
/* block user */
content: "🐛"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
/* add 2 group  */
content: "🐛"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* report */
content: "🐛"
}   
</style>

<img style="display: block;-webkit-user-select: none;margin: auto;background-color: hsl(0, 0%, 90%);" src="https://static.wixstatic.com/media/69154f_7c353c32219544f8bc7edbf7be641f56~mv2.gif"/>

—“Howdy Pillar is Welcome Home’s friendliest and happiest shopkeeper! This colorful caterpillar knows his store like the back of his hands, which is impressive considering how many hands he has. Charismatic, quick-witted, and remarkably jolly, Howdy always seems to have whatever his neighbors need with a price that just can’t be beat!"
<img style="display: block;-webkit-user-select: none;margin: auto;cursor: zoom-in;background-color: hsl(0, 0%, 90%);transition: background-color 300ms;" src="https://static.wixstatic.com/media/69154f_22e74302994f486981da74c1a08ef394~mv2.png/v1/fill/w_925,h_42,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/Colorbar.png" width="811" height="36"/>

<style>* {cursor: url(https://cur.cursors-4u.net/food/foo-3/foo259.ani), url(https://cur.cursors-4u.net/food/foo-3/foo259.png), auto !important;}</style><a href="https://www.cursors-4u.com/cursor/2011/11/15/boucing-red-apple.html" target="_blank" title="Boucing Red Apple"><img src="https://cur.cursors-4u.net/cursor.png" alt="Boucing Red Apple" style="position:absolute; top: 0px; right: 0px;"/></a>

<img style="display: block;-webkit-user-select: none;margin: auto;background-color: hsl(0, 0%, 90%);" src="https://static.wixstatic.com/media/69154f_ba29326ffcdc4854b2a8cdab6efea805~mv2.gif"/>

<style>
	:root{
		/* here's where you put your image URLs and how long you want the entire slideshow to be (make sure you add the s for seconds!) */
		--image1: url(https://i.pinimg.com/564x/b3/65/1d/b3651dd59fa4ae2e0abfddfde17e23d0.jpg);
		--image2: url(https://i.pinimg.com/564x/b0/e9/85/b0e9850fa92c371e8967db6e4cee366a.jpg);
		--image3: url(https://i.pinimg.com/564x/2f/ee/ad/2feead6d8b8a5d793218793ebcb3e059.jpg);
		--image4: url(https://i.pinimg.com/564x/a1/35/1b/a1351b225afd598774f3a152ffd53973.jpg);
		--time: 30s;
	}
	.pdg_slideshow{ width:100%; height:500px; position:relative; }
	@media only screen and (max-width: 768px) { .pdg_slideshow{ height:300px; } }
	.pdg_slideshow_image { background-size:contain;background-repeat:no-repeat;background-position:center; width:100%; height:100%; position:absolute;}
	.pdg_slideshow_image#image1 {background-image:var(--image1); animation: slide1 var(--time) ease 0s infinite normal none; }
	.pdg_slideshow_image#image2 {background-image:var(--image2); animation: slide2 var(--time) ease 0s infinite normal none; }
	.pdg_slideshow_image#image3 {background-image:var(--image3); animation: slide3 var(--time) ease 0s infinite normal none; }
	.pdg_slideshow_image#image4 {background-image:var(--image4); animation: slide4 var(--time) ease 0s infinite normal none; }

	@keyframes slide1 { 0%, 25%, 100% { opacity: 0; } 1%, 24% { opacity: 1; } } 
	@keyframes slide2 { 0%, 25%, 50%, 100% { opacity: 0; } 26%, 49% { opacity: 1; } } 
	@keyframes slide3 { 0%, 50%, 75%, 100% { opacity: 0; } 51%, 74% { opacity: 1; } } 
	@keyframes slide4 { 0%, 75%, 100% { opacity: 0; } 76%, 99% { opacity: 1; } } 
</style>
<div class="pdg_slideshow">
<div class="pdg_slideshow_image" id="image1"></div>
<div class="pdg_slideshow_image" id="image2"></div>
<div class="pdg_slideshow_image" id="image3"></div>
<div class="pdg_slideshow_image" id="image4"></div>
</div>

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

<!-- credit! PLEASE do not remove, thank you!  -->
<br/><a href="https://spacehey.com/yipeepsycho"><img src="https://i.ibb.co/8NVQ6x6/blinkies-Cafe-i1.gif"/></a>

<a href="https://www.clownillustration.com/welcome-home">
<img src="https://i.ibb.co/t2GJnb2/funnylogofile.webp" alt="&#x201D;welcomehome&quot;" style="&#x201D;"/>  
</a>  

<div style="float:  ; max-height: 582px; position: fixed; right: -153px; bottom: -230px; z-index: 200;"><img src="https://static.wikia.nocookie.net/welcomehome/images/7/78/Howdy_edited.webp/revision/latest?cb=20230324080321" width="500" height="718"/></div>

<style>
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
body{
        font-family: 'VT323', monospace;
        font-size: 150%;
</style>

<style>

.online{content:url("https://i.ibb.co/nc24BTY/imageedit-20-9849327322.gif");
}
</style>

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

<style>

/* Gen Body Settings */

.container {
  border: 1px solid #5c9ff7;
box-shadow: 0px 0px 15px #61f75c;
background-color: #5c9ff7;
}

main {
	color: #394b9e;
background-color: #eae6da;
}

body {
 background: url(https://i.pinimg.com/236x/b0/0f/07/b00f07a639355b209579b55b3f66e176.jpg);
}

.icon {
	height: 1em;
	width: 1em;
}
/* Profile Settings */

.details-table td {
  background-color: #eae6da;
  color: #394b9e;
}

.profile .contact, .profile .table-section, .profile .url-info {
	border: 0;
}

.profile .contact .inner, .profile .table-section .inner {
	border: #fcd9bf 0px solid;
box-shadow: #e5dbce 0px 1px 5px 5px;
    
}

.profile-info {
  border: 0;
  margin: 0;
  padding: 0;
}

 .general-about .profile-pic {
 display: block;
    float: left;
    height: 150px;
width: 150px;
    box-shadow: 0px 0px 15px #8ac156;
    border: #42b390 double 5px;

}

.general-about .profile-pic img {
 height: 140px;
 width: 140px;
}

/* Nav Bar */

nav .links {
 background: linear-gradient(#ffc647 15%, #f2b945, #f19f3c);
 box-shadow: white 0 1px 1px 1px inset;
 padding: 0;
 text-align: center;
}

nav .links a {
  color: #eae7da;
  text-shadow:#cb3d5a 0px 2px 4px;
  padding: 1px
}

nav .links a:hover {
  color: #eae7da;
  background: linear-gradient(#ffc647 15%, #f2b945, #f19f3c);
  text-decoration: none;
  padding-top: 0;
}

nav .links li.active a {
  color: #eae7da;
  font-weight: normal;
}

nav .links li:not(:last-child)::after {
  color: #eae7da;
  text-shadow: #cb3d5a 1px 0px 1px;
}

/* Nav Top */

nav .top {
 background: linear-gradient(#f2a03d , #ea413c 40%, #f74c92);
 box-shadow: #fff6 0px 0px 2px 3px inset;
}

.profile .blurbs .heading, .profile .friends .heading, .profile .contact .heading, .profile .table-section .heading {
  background: linear-gradient(#ffc647 15%, #f2b945, #f19f3c);
  box-shadow: white 0 1px 1px 1px inset;
  color: #c23d5e;
 font-size: 11px;
  font-weight: normal;
  text-shadow: white 0px 2px 5px;
  border: 0px solid #91cfe3;
  border-bottom: 0;
  border-radius: 2px;
}

.profile .friends .heading h4,  .blurbs .heading h4{
 font-weight: normal;
}

/* Friends */
.profile .friends .person img:not(.icon){
  width: 50px;
  height: 50px;
}

.profile .inner span.count {
 color:#155c9e;
}

.comments-table .icon{
	display: none;
}
.comments-table{
	background-color: #eae6da;
}
.comments-table td:nth-child(odd) {
background-color: white !important;
}
.comments-table td:nth-child(odd) p {
background-color: white !important;
}
.comments-table td:nth-child(even) {
background-color: white !important;
}
.comment-replies {
border: 0px;
margin: 2px;
}
nav .info {
background: none;
}

button:not(.logout-btn) {
 background: linear-gradient(#eefbee 15%, #91cfe3, #d0eff9);
 box-shadow: white 0 1px 1px 1px inset;
 color: #394b9e;
 font-size: 11px;
 font-weight: normal;
 text-shadow: white 0px 2px 5px;
 border: 1px solid #91cfe3;
 border-radius: 2px;
 padding: 2px;
}

button:not(.logout-btn):hover {
 background: linear-gradient(#eefbee 15%, #91cfe3, #d0eff9);
 box-shadow: white 0 1px 1px 1px inset;
 color: #394b9e;
 font-size: 11px;
 font-weight: normal;
 text-shadow: white 0px 2px 5px;
 border: 1px solid #91cfe3;
 border-radius: 2px;
 padding: 2px;
}

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