spacehey layout

Layout CSS

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

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

<style>
body:before {

content: " ";
height: 100vh;
width: 100vw;
display: block;
position: fixed; 
top: 0; 
left: 0; 
z-index: 100;
background-image: url('https://i.ibb.co/nc81FqY/4-C4-B4-C55-F249-41-CC-8-DEE-6-D7-DA6-FD6-CD5.gif');
background-size: cover;
background-repeat: no-repeat;
background-position:center;
animation: yourAnimation 3s ease 0s 1 normal forwards;
pointer-events: none;

}
@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } 
</style>


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

<style>
/* profile background/the image behind the profile box */
body { 
background: url(https://i.gifer.com/76YS.gif);
}
</style>

<style>
/* this is the color of any text that you input */ 
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@700&family=Roboto:wght@700&display=swap');
.profile .blurbs .section h4{
font-family: 'Josefin Sans', sans-serif;
text-transform:lowercase !important;
color: white;
}
</style>

<style> 
/* these are the colors for headers */
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@700&family=Roboto:wght@700&display=swap');
p{
font-family: 'Josefin Sans', sans-serif;
text-transform:lowercase !important;
color:#fbd6ef;
}
</style>

<style>
/* this adjusts the size/font of your name */
@import url('https://fonts.googleapis.com/css2?family=Patrick+Hand&family=Paytone+One&display=swap');
h1{
font-size: 30px !important;
font-family: 'Paytone One', sans-serif;	
text-transform:uppercase !important;
padding-left: 2px !important;
}
</style> 

<style> 
/* this changes the color of your name */
.profile h1{
background: -webkit-linear-gradient(#ec2bad, #ff88c5);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>

<style>
/* this changes the color of your headers */
@import url('https://fonts.googleapis.com/css2?family=Patrick+Hand&family=Paytone+One&display=swap');
h4{
font-size: 16px !important;
font-family: 'Paytone One', sans-serif;	
text-transform:uppercase !important;
padding-left: 2px !important;
/* gradient text, you can replace existing colors with whatever ones you want */
background: -webkit-linear-gradient(#ec2bad, #ff88c5);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

}
</style> 

<style>
/* this is what makes the text bold/look bigger */
p{
font-size: 14px !important;
font-weight: bold;
 text-transform:none !important;
}
</style> 

<style>
/* links in the navigation bar @ the top */
nav{ 
font-size: 13px !important;
font-family: 'Paytone One', sans-serif;
text-shadow: 1px 1px black;
text-transform:none;
padding-left:3px;
text-align: center;
}
</style>

<style>
/* this centers your friend space */
    .profile .friends .inner, .profile .blurbs .section h4{
    text-align: center;
    }
</style>

<style>
/* the color of the number of your friends */
    .count {
        color: #ec2bad;
    }
</style>

<style>
/* link colors when you hover over links */
   a:hover {
     color: white; 
   } 
   a{
     color: #ec2bad; 
   }
</style>

<style>
/* cursors: top URL is the cursor that shows when you hover over links, bottom URL is the main or "resting" cursor */
/* https://cursors-4u.net */
a:hover {    
 cursor: url('https://cur.cursors-4u.net/games/images4/gam308.png'), auto;
}
* {
 cursor: url('https://cur.cursors-4u.net/symbols/sym-2/sym189.png'), auto;
}
</style>


<style>
/* main profile background/the box that has all your text */
/* use https://rgbacolorpicker.com/ to pick a different color and adjust it's opacity */
main {
background: rgba(255, 74, 142, 0.8);
border-radius:15px;
border: 2px dotted rgba(255, 225, 236, 0.8)
}
</style>


<style>
/* this is the background color for the headings of your blurbs, friend space + comments */
.profile .blurbs .heading, .profile .friends .heading {
color: white;
background-color: rgba(255, 74, 142, 0.8);
text-transform:lowercase !important;
color: white;
border-radius:15px;
border: 0px dotted rgba(255, 225, 236, 0.8)
}
</style>

<style>
/* links to your friends' profiles */
.profile .friends .person p {
color: #ff75d1;  
}
.profile .friends .person p:hover {
color: #ffd6f1;  
}
</style>

<style> 
/* this is the box that says "_'s latest blog entries" */
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@700&family=Roboto:wght@700&display=swap');
DIV.blog-preview{
text-align: center;
font-family: 'Josefin Sans', sans-serif;
background-color: rgba(255, 74, 142, 0.8);
text-transform:lowercase !important;
color: white;
border-radius:15px;
border: 0px dotted rgba(253, 229, 248, 0.8)
}
</style>

<style>
/* this edits your friends' icons */
.profile .friends .person img:not(.icon) {
border-radius:15px;
box-shadow: 1px 0px 7px 2px rgba(254, 120, 180, 0.71);
border: 0px dotted rgba(255, 221, 241, 1)
}
</style>


<style>
/* these are the colors for the table headings on the left */
.profile .contact .heading, .profile .table-section .heading, .home-actions .heading {
background-color: rgba(244, 196, 234, 0.8);
}
</style>

<style>
/* contacting "_" */
.profile .contact {
background-color: rgba(244, 196, 234, 0.8);
}
</style>

<style>
/* friend comments */
.profile .friends .comments-table td {
background-color: rgba(244, 196, 234, 0.8);
border: 1px solid rgba(255, 148, 239, 0.8);  
}
.comments-table td*{
    
    
}
</style>


<style>
/* colors for interest section */
.profile .table-section .details-table td {
background-color: rgba(244, 196, 234, 0.8);
}
</style>

<style>
/* navigation bar at the top/the bar that has navigation links */
nav .links {
background-color: transparent;
}
nav .links a:hover {
color: rgba(255, 199, 226, 1);
}
</style>

<style>
nav .top{
/* navigation bar at the top/the bar that has the search and spacehey logo */
background-color: pink;
}
</style>

<style>

@keyframes floating {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 5px); }
    100%   { transform: translate(0, -0px); }   
}
/* gif profile picture */
.profile-pic > img { display:none; }
.profile-pic:after { background-image: url("https://i.ibb.co/6r1rJTp/5-A94-A226-23-B3-4-BB4-8-FB2-9-F0065507-E6-B.gif"); display: inline-block; content:"" }
.general-about .profile-pic:after { background-size: cover; width: 160px; height: 150px; } 
.profile-pic:after{ 
  border: 0px dashed  rgba(255, 161, 207, 1);  
  box-shadow: 1px 0px 10px 2px rgba(254, 120, 180, 0.46);
 }   
</style>


<style>
/* floating animations */
.profile-pic, .profile .friends .person img:not(.icon), .profile .friends .person p, .profile h1{ 
    animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    margin-left: 0px;
    margin-top: 0px;
}    
</style>


<style>
/* pink dashed borders */
.profile .url-info {
border: 0px dashed  rgba(255, 161, 207, 1);    
}
.profile .contact {
border: 0px dashed  rgba(255, 161, 207, 1);     
}
.profile .table-section {
border: 0px dashed  rgba(255, 161, 207, 1);     
}

</style>

<style>
/* border inside of comments */
table.comments-table {
border: 0px dashed rgba(255, 161, 207, 1);      
}    
</style>

<style>

/* spacehey logo */
nav img.logo{filter: brightness(0) saturate(100%) invert(99%) sepia(73%) saturate(7472%) hue-rotate(280deg) brightness(101%) contrast(100%); !important;}

</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 {
/* add to friends */
content: url("https://i.ibb.co/4ggwpYv/617844-E7-EC0-F-428-E-AB57-9034-B0-C22-D2-A.gif")
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
/* add to favorite */
content: url("https://i.ibb.co/1YVdL4J/26871233-79-F6-49-C3-8-E00-C6-D937105-F8-E.gif")
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* send a message */
content: url("https://i.ibb.co/VmxwzMq/7-A7-DBD09-915-C-4-A16-A5-F7-A91-ACC5400-E0.gif")
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* foward to friend*/
content: url("https://i.ibb.co/svLK51d/9-A007-B1-E-70-EB-4-F35-B035-52-E4-A450-BEA2.gif")
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
/* instant message */
content: url("https://i.ibb.co/mqQMtkt/BE8-DA4-CC-DDBB-442-F-828-D-E12028-E4-C2-C0.gif")
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
/* block user */
content: url("https://i.ibb.co/zxN94sY/D1-BFF346-15-B5-4758-AA3-E-7404-A13-D2818.gif")
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
/* add 2 group  */
content: url("https://i.ibb.co/YdJJG9c/8413023-E-C773-4-A86-B912-8-FE594-E97048.gif")
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* report */
content: url("https://i.ibb.co/4ggwpYv/617844-E7-EC0-F-428-E-AB57-9034-B0-C22-D2-A.gif")
}  
</style>
}
<style>
. profile h1 {
font-size: 40px;
font-family: 'cutive moto' ;
color: #ffd6f1;
text-align: center;
text-shadow: lightpink 2px 3px 3px;
}


<style>
    .top{
border: 10px inset white !important;        

    }
</style>

<style>
a:link {
  color: white;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: pink;
  background-color: transparent;
  text-decoration: underline;

</style>

<style>

    .links{
        
border: 8px outset white !important;   
border-radius: 10px;
        
    }
</style>

<style>
    .profile-pic img{
        
border: 0px dashed #f59ed8 !important;  
margin-left: 115px;
box-shadow: lightpink 10px 10px 10px;
border-radius: 60px;
        
    }
</style>

<style>

    .url-info{
        
border: 10px outset #f59ed8 !important;   
box-shadow: lightgray 10px 10px 10px;
border-radius: 10px;
        
    }
</style>

<style>
    table.details-table{
        
border: 8px inset pink !important;   
border-radius:10px;
        
    }
    .profile .details-table td{

border: 0px  inset pink !important;   


    }
    
    
    
</style>

<style>:root {
    --topic1: "- General !";
    --topic2: "- Music ! ";
    --topic3: "- Movies !";
    --topic4: "- TV !";
    --topic5: "- Books !";
    --topic6: "- Heroes !";

 }

.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:white !important;
   letter-spacing:normal !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);
}</style>

<style>

    .friends{
        
border: 8px outset white !important;   
border-radius: 10px;
        
    }
    
    .profile .friends .person img:not(.icon) {
border-style: outset ;
border-width: 5px;
border-radius: 20px;
}

.blog-preview:before {
  content: "";
  white-space: pre-wrap;
  display: block;
  height: 100px;
  background-image: url(https://i.ibb.co/qB7RVTW/D13-FA2-F1-6-AF1-4-FDE-8418-61-DA0-B81-A097.jpg);
  background-repeat: no-repeat;
  background-size: 100%;
  align-content: center;
  border: 0px solid pink;
  margin-bottom: 10px;
  border: 10px inset ;
  border-radius: 10px;

}
</style>

<style>
    .blurbs .heading {
        
    background-color: white !important;
    border: inset  5px;
    box-shadow: lightpink 5px 5px 10px;
    text-align: center;
    border-radius: 10px;

    }
    
    .blurbs .inner{

text-align: center !important;
border: inset white 5px;
border-radius: 10px;
box-shadow: lightgray 5px 5px 10px;

}

   .friends .heading {
        
    background-color: white !important;
    border: inset  5px;
    box-shadow: lightgray 5px 5px 10px;
    text-align: center;
    border-radius: 10px;

    }
</style>

<style>
@import url('https://fonts.googleapis.com/css2?family=Itim&display=swap');
body{font-family: 'Itim', hand;
    font-size: 20px;
}

table.comments-table{

display: block;
height: 250px!important;
overflow-y: scroll;

}



</style>

<style>
    .top{
        border-radius: 25px 25px 0 0 
    }
    main{

        border-radius: 0 0 25px 25px 
    }
    
    .url-info:after {
  content: "";
  white-space: pre-wrap;
  display: block;
  height: 100px;
  width: 371px;
  margin-top: 10px;
  margin-bottom: -4px;
  background-image: url(https://i.ibb.co/WkXKfP0/37-EBBBDA-D9-E1-4-D4-E-B159-4433-A3752302.gif);
  background-repeat: no-repeat;
  background-size: 20%;
  align-content: center;
}
</style>

<style>
             ::-webkit-scrollbar {
    width: 15px;
    height: 10px;
    }
    ::-webkit-scrollbar-thumb {
    background: #e32723;
    }
    ::-webkit-scrollbar-track {
    background: white;
    }
    
    .mood:after {
  content: "";
  white-space: pre-wrap;
  display: block;
  height: 100px;
  width: 100px;
  background-image: url(https://i.ibb.co/ggr9wKp/3-D0-A1-DD0-1270-4-BE8-A199-0466-B607-BEC5.gif);
  background-repeat: no-repeat;
  background-size: 100%;
  align-content: center;
  margin-left: 142px;

}
</style>

<style>
html:before {
  background-image: url(https://i.pinimg.com/736x/ff/d2/ab/ffd2abcd043a87eca61fbee424970060.jpg);
  content: "";
  height: 300%;
  left: -50%;
  opacity:.1;
  position: fixed;
  top: -110%;
  width: 300%;
  pointer-events:none;
}
</style>

<style>
    .profile .table-section{
        border: none;
    }
    
        .table-section .heading{
        
border-radius: 10px;
    
    }
</style>

<style>
    footer{
    background-color: white !important;
    }
</style>

<style>
.online{

content: url("https://i.ibb.co/0Zg1rR9/593-A924-B-E316-413-F-A855-5-D6-E75-AB9-CFD.gif") !important;
}

}
.count {
  color: var(--links);
}
footer:after{
  bottom: 0;
  font-size:0;
  left: 75%;
  position:fixed;
  pointer-events: none;
  content:url(https://i.ibb.co/HHRTzgR/F005-A35-D-311-A-4-DDC-8-ABA-B9-FA21-BA88-D7.png);
  animation: slideIn 2s forwards;

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

<div class="menhera">
<div class="gloomy">

<style>
.contact .inner a img {
  font-size: 0;
}
.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://cutekawaiiresources.files.wordpress.com/2014/10/rabbit-6.gif?w=15&h=20&zoom=2);}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {content: "" url(https://cutekawaiiresources.files.wordpress.com/2014/10/rabbit-2.gif?w=16&h=16&zoom=2);}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {content: "" url(https://cutekawaiiresources.files.wordpress.com/2013/03/coelimn.gif?w=15&h=15&zoom=2);}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {content: "" url(https://cutekawaiiresources.files.wordpress.com/2014/10/rabbit-4.gif?w=16&h=16&zoom=2);}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {content: "" url(https://cutekawaiiresources.files.wordpress.com/2013/03/minikitty.gif?w=18&h=15&zoom=2);}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {content: "" url(https://cutekawaiiresources.files.wordpress.com/2013/03/minicoelho.gif?w=16&h=21&zoom=2);}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {content: "" url(https://cutekawaiiresources.files.wordpress.com/2013/03/bunny.gif?w=20&h=20&zoom=2);}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {content: "" url(https://cutekawaiiresources.files.wordpress.com/2013/03/gif202.gif?w=16&h=16&zoom=2);}
.profile .left h1:before {
    background-image: url(https://sdl-stickershop.line.naver.jp/products/0/0/1/1183759/android/stickers/7473772.png;compress=true);
    background-repeat: no-repeat;
    background-position: center;
    display: block;
    background-size: 100px;
    height: 100px;
    width: 100px;
    content: " ";
    transform: rotate(316deg) scale(2.7) translateX(-4.9em) translateY(2em);
    position: absolute;
    z-index: -1;
}

#q, button {
color: #f1b5c0;
background-color: white;
border: 1px solid white;
font-family: inherit;
font-size: 11px;
}

@font-face {
font-family: 'Magica';
src: url(https://static.tumblr.com/p6yopnt/Qkiqnu0r5/theheart.ttf);
}
@font-face {
font-family:'PORKYS';
src: url(https://dl.dropbox.com/s/p47jjxbd1dg8st2/PORKYS_.TTF);
}
h1{
font-family:'PORKYS';
font-weight: normal;
}
body{
background-image:url(https://64.media.tumblr.com/3019a93f486de0148d96e68ff1413630/tumblr_p7f8qvMf4G1xqa4xfo1_1280.png);
text-transform: lowercase;
font-family: 'Magica';
font-size: 22px;
background-size: 50%;
}
 .online {
display: none;

}
.online img { 
content: url("https://www.myspacegens.com/images/online_now/353.gif"); animation-name: none; visibility: visible; height: 20px; width: 80px; filter: none; 
}
.url-info{
display:none !important;
}
:root 
{
	--logo-blue: ;
 	--darker-blue: ;
	--lighter-blue: ;
	--even-lighter-blue: ;
	--lightest-blue: ;
	--dark-orange: ;
	--light-orange: ;
	--even-lighter-orange: ;
	--turquoise: ;
        
}
body, a, a:hover{ 
    color: #FFBDE1;
  -webkit-text-stroke: 1px #FFBDE1;
}
@keyframes changeColor{
    0%{color:white;}
    20%{color: #FFBDE1;}
    40%{color: white;}
    60%{color: #FFBDE1;}
    80%{color: white;}
    100%{color: #FFBDE1;}
}
.tableLeft{
background-color:white;
border:1px solid #FFBDE1;
}
div#header {
    background-color: white;
    background-position: 0px -400px;
text-align: center;
text-transform: lowercase;
    background-size: 100px;
    background-repeat: repeat;
}
div#hSub {
    color: white !important;
    background-color: #FFE6F4;
    text-align: center;
text-transform: lowercase;;
}
 {
    animation-name: floating ;
    animation-duration: 9s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    max-height: 650px;
    overflow-y: scroll;
    padding: 10px;
}

}
::-webkit-scrollbar {
width: 0px;

}
 nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after {
    content: url(https://i.ibb.co/m976KGS/BD388-B2-D-82-C8-4747-ADE3-255273-F36-BEC.gif)";
    color: var(--headers);
 
}
img:hover {
      animation:shake 10s;
      animation-iteration-count:infinite;
filter: none;
}
@keyframes shake{
    0% {
        transform:translate(1px,1px) rotate(0deg);
    }
 
    10% {
        transform:translate(-1px,-2px) rotate(-1deg);
    }
 
    20% {
        transform:translate(-3px,0px) rotate(1deg);
    }
 
    30% {
        transform:translate(3px,2px) rotate(0deg);
    }
 
    40% {
        transform:translate(1px,-1px) rotate(1deg);
    }
 
    50% {
        transform:translate(-1px,2px) rotate(-1deg);
    }
 
    60% {
        transform:translate(-3px,1px) rotate(0deg);
    }
 
    70% {
        transform:translate(3px,1px) rotate(-1deg);
    }
 
    80% {
        transform:translate(-1px,-1px) rotate(1deg);
    }
 
    90% {
        transform:translate(1px,2px) rotate(0deg);
    }
 
    100% {
        transform:translate(1px,1px) rotate(0deg);
    }
}
.comments-table{

}
#comments, footer{   
border: solid 1px #FFBDE1;
}

nav .top, .heading, nav .links{
background-color: #FFE6F4;
  text-shadow: 0 0 0px #fff;
}
nav .links, a{
  text-shadow: 0 0 0px #fff;
}
footer{
background-color: #FFE6F4;
}
.contact .inner a img {
    font-size: 0;
}
 div.friends div.inner p b {
color: black;
}
    h1, .count, .friends a p{
    color: #FFBDE1 !important;
}
.url-info{
display:none !important;
}
.icon, .award img {
    content: url(“https://m.media-amazon.com/images/S/abs-image-upload-na/c/AmazonStores/ATVPDKIKX0DER/777bc68375e4bbe9c0d58becb4844e46.w400.h400.png”);
    display: inline-block;
    height: 2.0em;
    width: 2.0em;
    margin: 0 .05em 0 .1em;
    vertical-align: -0.3em;
    color: rgba(0,0,0,0);
}
.gloomy{
    background: url(https://img1.picmix.com/output/stamp/normal/6/4/6/0/1810646_0b82c.png) no-repeat;
    background-size: 100%!important;
    position: fixed;
    left: 0px;
bottom: 0px;
    height: 200px;
    width: 200px;
    z-index: 100;
    opacity: 100%;
}
</style>