layout of my page

Tags:
Description:

this is just the css i pieced together so its not gonna be one of those short ones you copy paste 💀 its moreso if youre having trouble finding specific css codes for specific parts of your profile (like you have yr whole page made but cant figure out how to change the text in the headers etc. feel free to pick thru this and choose what you want, sorry if the code is clunky! oh and if you use the whole layout (you can customize the pics) credit me or smth pls and ty, you dont need to if youre just taking bits of code though
Preview:

click on the image for a larger preview
Code:

<!-- (c) Layout created by faolan/beetle/mutt ⚧⚣Ⓐ (https://layouts.spacehey.com/layout?id=36760) -->

<style>
/* custom cursor */
a:hover{
 cursor: url('https://i.postimg.cc/YSs1ZkzJ/Purple-Paw-Print.png'), auto !important;
}
* {
 cursor: url('https://i.postimg.cc/YSs1ZkzJ/Purple-Paw-Print.png'), auto;
}
</style>

<style>
/* round pfp */
.profile-pic {

border-radius: 500px;

overflow: hidden;

}

</style>

<style>
/* now online gif */
.online{content:url("https://ranfren.neocities.org/art/dot/ouijaboard.gif");}
</style>
<style>
/* hides url link */
.url-info{display:none !important;}

</style>

<style>
/* p sure this gets rid of borders */
friends th, tr, .friends td, th, .icon, #comments, main, .comments-table, .friends, .table, .table-section, .contact, .url-info, .mood, .blurbs, .blog-preview, .details, .profile-pic img
{
border: 0px dotted gray !important;
outline: none !important;
}
</style>

<style>
/* gif pfp */

.profile-pic > img { display:none; }

.profile-pic:after { background-image: URL("https://i.pinimg.com/originals/ba/16/b9/ba16b920a6799532aeafec533cd37f9d.gif"); display: inline-block; content:"" }

.blog-entry .profile-pic:after, .bulletin .profile-pic:after { background-size: cover; width: 110px; height: 110px; } /* blogs, bulletins */

.general-about .profile-pic:after { background-size: cover; width: 160px; height: 160px; } /* profile */ 

</style>

<style>
/* repeating background gif */
body:before {
	content: " ";
	height: 100vh;
	width: 100vw;
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	background-image: url('https://i.pinimg.com/originals/a0/66/78/a0667815bb982ae0507a79977940e8c0.gif');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	animation: yourAnimation 3s ease 0s 1 normal forwards;
	pointer-events: none;
}
@keyframes yourAnimation { 0.0% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; } }
nav, footer {
	margin: 1em;
	position: relative;
	box-shadow: 5px 8px 10px #0006;
}
</style>

<style>
/* footer img or gif */
footer {
    border-radius: 0px;
    background-image: url(https://i.pinimg.com/originals/bc/c5/a7/bcc5a77c3411338efc340251a0bb8060.gif);
    color: white;
}
</style>

<style> 
/* name color w a gradient */<style>
/* custom 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://64.media.tumblr.com/7f962bb505c335d2cd090493a97d0523/74e3a4f2f60c0e4d-8b/s75x75_c1/c23cfbed4e8372f06e36e8e5e0697afe8f66c70f.gifv")
    }
    .contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
	    /* add to favorites */
	    content: url("https://64.media.tumblr.com/45891f642c0a56e0feb38db2e4c177b3/380f3f98d067d883-c2/s75x75_c1/2809f9d87674dd45463706dda4e6b6840cafe71e.gifv")
    }
    .contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
	    /* send Message */
	    content: url("https://64.media.tumblr.com/18e9713b061dcbd806c238810c6e649d/3032b7ca4216d4a5-96/s75x75_c1/e405574316f1c25a6479e99892240a264ad3080f.gifv")
    }
    .contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
	    /* forward to friend */
	    content: url("https://64.media.tumblr.com/a7785a5ff8f50f0be82a8b7d636cb038/380f3f98d067d883-89/s75x75_c1/952791e41f963fcb6cda4de2a7fe5c769ed80c94.gifv")
    }
    .contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
	    /* instant message */
	    content: url("https://64.media.tumblr.com/9d8ac7e01946703169f329f0a046e097/0504a7c3ce0b11b0-ab/s75x75_c1/70d1dbabfa4aed1ea5c3cbcb93b850e0e87dd78d.gifv")
    }
    .contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
	    /* block user */
	    content: url("https://64.media.tumblr.com/1e811bc207b2fea97db2695a958f9c2e/0504a7c3ce0b11b0-21/s75x75_c1/1d556dabe394dafb0e85f223e64f26cd25fc53ba.gifv")
    }
    .contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
	    /* add to group */
	    content: url("https://64.media.tumblr.com/38232401a569f45e1bd8a285cd4172c9/9e7c7ea502c31880-5b/s75x75_c1/97451e66581e4b48301b2fbba1fb99cd72546f66.gifv")
    }
    .contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
	    /* report user */
	    content: url("https://64.media.tumblr.com/e58577084885e80e487a1d3572f2d671/d93bbf6f907da767-ab/s75x75_c1/efea44d82b8499908d75f05e6baa9299b34a7e9d.gifv")
    }
</style>

.profile h1{
background: -webkit-linear-gradient(#8870ff, #ff9c00);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}


<style>
/* custom header names */
.friends .heading{ font-size:0; }
.friends .heading:before{ content: "mooties and oomfs!⋆｡°✩"; font-size:.8rem; font-weight:bold; 
color:White; }
}
</style>
<style>
.friends#comments .heading{ font-size:0; }
.friends#comments .heading:before{ content: "comments⋆｡°✩"; font-size:.8rem; font-weight:bold;
color:White; } 
</style>
<style>
 .profile .table-section .heading h4 { font-size:0; }
.profile .table-section .heading h4:before{ content: "my interests and my socials!!⋆｡°✩"; font-size:.8rem; font-weight:bold; 
color:White; }
 </style>
<style>
    .contact .heading{ font-size:0; }
.contact .heading:before{ content: "hihi!!⋆｡°✩"; font-size:.8rem; font-weight:bold; 
color:White; }
}</style>
<style>
  .blurbs .heading{ font-size:0; }
.blurbs .heading:before{ content: "general⋆｡°✩"; font-size:.8rem; font-weight:bold; color:White; }
</style>

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

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

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

<style>
/* navigation bar at the top/the bar that has navigation links */
nav .links {
background-color: rgba(171, 118, 207, 0.4);
}
nav .links a:hover {
color: green;
}
</style>

<style>
/* about me and who id like to meet text color */
:root {
--logo-blue: White;
--darker-blue:white;
--lighter-blue:#8e0d3e;
--even-lighter-blue:#8e0d3e;
--lightest-blue:##3c0130;
--dark-orange:White;
--light-orange:#8e0d3e;
--even-lighter-orange:black;
--green:black;#ff0090
}
</style>

<style>
/* little gif or img below spacehey and nav bar and above your name */
main:before {
	width: 800px;
	height: 400px;
	display: block;
	content: "";
	background-image: url('https://i.pinimg.com/originals/ba/67/f9/ba67f93b54e5d3618a8a89a58e34631e.gif');
	background-position: center center;
	background-size: cover;
}
</style>

<style>
/* turns default black text white, you can change the color if you want */

h1, h2, h3, h4,h5,a, p, nav label, .section {color: white;}


h1, h2, h3, h4, h5, a, p, nav label, .section{ text-transform:lowerercase !important;
}

.online{
  color: white!important;  
}

</style>

<style>
/* custom sections in the interest box */
:root{

  --topic1: "✩ political beliefs etc";
  --topic2: "✩ crafts + diy";
  --topic3: "✩ aesthetics/subcultures";
  --topic4: "✩ media and fandoms";
  --topic5: "✩ music!!";
  --topic6: "✩ other";

 }

.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 white !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);
}
</style>

<style> 
/* this is the box that says "_'s latest blog entries", the a in rgba lines up with the number areas, the a is the opacity. */
DIV.blog-preview{
text-align: center;
background-color:rgba(171, 118, 207, 0.4);
text-transform:lowercase !important;
color: white;
border-radius:0px;
border: 5px dotted rgba(218, 165, 255, 0.65)
}
</style>

<style>
/* little box by your pfp color and opacity */
.general-about {

 background-color:rgba(171, 118, 207, 0.4);

  border-radius: 15px;
</style>

<style>
/* friends are background color and opacity */
.profile .friends td {

  background-color:rgba(171, 118, 207, 0.4);

  border-radius: 0px

} 
</style>

<style>
/* color and opacity */
.profile .table-section .details-table td {
  background-color:rgba(171, 118, 207, 0.4);
  color: #white;
}
</style>

<style>
	body{
		background-image:url('https://i.pinimg.com/originals/b4/d6/b9/b4d6b9b99810ab628794427dc27e607e.gif');
	}
</style>

<style>
.friends:not(#comments) {

  grid-area: friends;

  background-color:rgba(171, 118, 207, 0.4);  

  border-radius: 0px


}
</style>

<style>
/* blurbs background color and opacity */
.blurbs {

    background-color:rgba(171, 118, 207, 0.4);

  border-radius: 0px;


 }
</style>

<style>
/* contacting "_" color and opacity */
.profile .contact {
background-color:rgba(171, 118, 207, 0.4);
}
</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(171, 118, 207, 0.4);
text-transform:lowercase !important;
color: white;
border-radius:0px;
}
</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(0, 0, 0, 0.4);
border-radius:15px;
border: 2px dotted rgba(241, 190, 255, 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(171, 118, 207, 0.4);
}
</style>

<style>
/* spacehey logo text and background color + opacity */
.logo{ background-color:rgba(0, 0, 0, 0) !important; }
.top{ color: WHITE; background-color: rgba(171, 118, 207, 0.4) !important; }
</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 2 of 2 comments ( View all | Add Comment )
Sixz:P
1745173835
Using
Report Comment
Saranna
1741828598
usinggggg
Report Comment