sun theme

Tags: space, sun
Description:

made originally for
https://spacehey.com/profile?id=1495930
but free to use
Preview:

click on the image for a larger preview
Code:

<!-- (c) Layout created by max (＾་།＾)	 (https://layouts.spacehey.com/layout?id=24073) -->

<img src="https://blinkies.cafe/b/blinkiesCafe-Z1.gif"/> 

<div class="slay"></div>

<style>
.slay {
background: url('https://i.gifer.com/origin/b2/b243e74760b865e65015344ecf37d021_w200.gif') no-repeat;
background-size: 100%!important;
position: fixed;
right: 0px;
bottom: 0px;
height: 150px;
width: 150px;
z-index: 1000;
}
</style>


<style>
body {
     background-image: url("https://i.imgur.com/od6VNxF.png") !important;
     background-color: black !important;
     background-attachment: fixed !important;
     margin: 0;
     padding: 0;
}
</style>

<style>

.profile h1 { font-family: Silkscreen;
font-size: 49px;
color: #FF7500; }

</style>

<style>

.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: "☀️"

}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
	/* Add to Favorites */
	content: "🌞"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
	/* Send Message */
	content: "🌞"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
	/* Forward 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 to Group */
	content: "🌞"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
	/* Report Profile */
	content: "☀️"
}
</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>


/* customizable snowflake styling */


.snowflake {


  color: white;


  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=Montserrat:wght@100&display=swap');
</style>

<style>
.profile .friends .heading, .profile .contact .heading, .profile .table-section .heading, .home-actions .heading{
background: rgb(250,255,0);
background: radial-gradient(circle, rgba(250,255,0,1) 0%, rgba(255,175,0,1) 55%, rgba(211,215,196,1) 100%);
border-radius: 8px;
box-shadow: 1px 1px 1px #000;
color: #fff;
font-family: 'Montserrat', cursive;
font-size:20px;
text-transform; uppercase!important;
padding: 1px 1px;
}
</style>

<style>
main {
background: rgb(250,255,0);
background: radial-gradient(circle, rgba(250,255,0,1) 0%, rgba(255,175,0,1) 55%, rgba(0,0,0,1) 100%);
}
</style>


<style>
/*top header customisation*/
  nav{
    background-color:var(--box_color_and_seethru); !important;
    border-radius: 0px 0px var(--curve) var(--curve); !important;
  }
  nav ul{
    background:none !important;
    font-size: 10px;
  }
  nav ul a img, .mood a img{
    display:none !important;
  }
  .top{
    background-image:url("https://i.giphy.com/media/U3qYN8S0j3bpK/giphy.webp") !important;
    background-position:center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color:rgba(0, 0, 0, 0.8); !important;
  }
</style>

<style>
.online{content:url("https://www.myspacegens.com/images/online_now/109.gif");
}
</style>


<style>
/*Intro GIF Animation (fade out)*/
  body:before {
    content: " ";
    height: 100vh;
    width: 100vw;
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    background-image: url('https://i.giphy.com/media/3o7qE9Xk8iOherxUwU/giphy.webp'); /*gif link here*/
    background-size: cover;
    background-repeat: no-repeat;
    animation: yourAnimation 4s ease 0s 1 normal forwards;
    pointer-events: none;
  }
  @keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} }

</style>


<style>* {cursor: url(https://cur.cursors-4u.net/nature/nat-11/nat1006.cur), auto !important;}</style><a href="https://www.cursors-4u.com/cursor/2012/01/26/sun-41.html" target="_blank" title="Sun"><img src="https://cur.cursors-4u.net/cursor.png" alt="Sun" style="position:absolute; top: 0px; right: 0px;"/></a>


<style>
/* colors for table cell background (by default spacehey has a separate color for :first-child) */
.profile .table-section .details-table td {
  background: url('https://i.giphy.com/media/3og0IV7MOCfnm85iRa/giphy.webp');
  color: #d4d4d4;
}
</style>


<style>
html:before {
  animation: grain 8s steps(10) infinite;
  background-image: url(https://i.giphy.com/media/FlodpfQUBSp20/giphy.webp);
  content: "";
  height: 300%;
  left: -50%;
  opacity:.2;
  position: fixed;
  top: -110%;
  width: 300%;
  pointer-events:none;
}
@keyframes grain {
  0%, 100% { transform:translate(0, 0) }
  10% { transform:translate(-5%, -10%) }
  20% { transform:translate(-15%, 5%) }
  30% { transform:translate(7%, -25%) }
  40% { transform:translate(-5%, 25%) }
  50% { transform:translate(-15%, 10%) }
  60% { transform:translate(15%, 0%) }
  70% { transform:translate(0%, 15%) }
  80% { transform:translate(3%, 35%) }
  90% { transform:translate(-10%, 10%) }
}

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