Published by NixyPixie

published 1740451397
updated 1740451595

Category: SpaceHey

View Blog View Profile Report Blog Entry

All Current Layout Codes || [02/24/2025] || Vampire Gothic

Copy and edit whatever you want, this is mostly so I can swap between layouts without losing my personal edits. All credits to layout creators have been kept in.

About me:

<style>

.online {

margin:auto;

padding-bottom: 5px;

content: url(https://i.ibb.co/sCLNcck/ezgif-5-5861b4e688.png);

animation: rotation 6s infinite linear;

}

@keyframes rotation {

from {

transform: rotate(0deg);

}

to {

transform: rotate(359deg);

}

</style>

</div>

<style>

.snowflake {

font-size: 20px;

}

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

/*layout by clementine*/

</style>

<style>

}

/*these are ur color settings*/

:root {

--text: white;

--links: rgb(48, 25, 52);

--shift: rgb(48, 25, 52);

--borders: rgba(48, 25, 52);

--background: white;

--shadow: rgb(48, 25, 52)

}

/*this is ur main bg image*/

body {

margin: 1px;

background-image: url(https://i.pinimg.com/564x/47/6c/0b/476c0b401012ea57c0fb793b396598db.jpg);

background-attachment: fixed;

font-weight: bold;

padding-top: 30px;

padding-bottom: 30px;

}

.container {

box-shadow: 0px 0px 10px var(--shadow);

border: var(--borders) 2px solid;

border-radius: 10px;

}

/*this is ur spacehey logo,feel free to change it up*/

nav img.logo {

filter: brightness(0) saturate(100%) invert(84%) sepia(12%) saturate(11%) hue-rotate(330deg) brightness(79%) contrast(89%);!important;

}

p {

color: var(--text);

font-weight: bold;

}

button {

background: var(--background);

color: white; (--text);

font-weight: bold;

border: 1px solid var(--borders);

}

button:hover {

box-shadow: 0px 0px 7px var(--shadow);

transition: 0.2s;

color: white;

}

.col.w-40.left .contact{

background: var(--background);

border: white

}

.col.w-40.left .table-section{

border: none

}

input {

color: var(--text);

font-weight: bold;

border: var(--borders) solid 1px;

background: var(--background);

}

input:hover {

box-shadow: 0px 0px 7px var(--shadow);

transition: 0.2s;

color: white

}

nav .top , nav .links{

background: transparent;

text-align: center;

}

/* feel free to chnage this emoji*/

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

content: "🩶";

color: white; (--text);

}

/*this is ur secondary bg, the one insie ur prof*/

main {

background: url(https://i.pinimg.com/564x/b5/6e/b6/b56eb6f5026caa11060548947978595f.jpg) !important;

border-top: 0px;

border-bottom: 0px;

margin-top: 0px;

margin-bottom: 0px;

}

h1 {

color: white;

}

.mood {

padding-top: 3px;

}

.blurbs:after {

content: "";

white-space: pre-wrap;

display: block;

height: 30px;

background-image: url(https://64.media.tumblr.com/88e3658f27315f077a2c46698e1131af/81b88b2ec67f7892-fd/s400x600/48c8b4296cec9d7115b43ea84c36708ada9758f2.pnj);

background-repeat: round, no-repeat;

background-size: 240px;

}

.blurbs .inner {

text-align: center !important;

}

.url-info {

display: none;

}

nav {

background: var(--background) !important;

color: white;(--links);

border-radius: 2px;

}

footer {

background: var(--background) !important;

color: var(--links);

margin-top: 0px;

margin-bottom: 0px;

border-radius: 2px;

}

.comments-table, .comment-replies {

border: none;

border-radius: 100px;

}

.profile-info, .comments-table td:first-child, .music-table td:first-child, .comments-table td, .music-table td {

background-color: transparent;

border: none;

}

#comments {

height: 200px;

overflow-y: scroll;

border-radius: 20px;

margin-top: 20px;

}

.icon{

display: none;

}

.comments-table td:first-child img:not(.icon), .bulletin-table td:first-child img:not(.icon){

border: 2px solid var(--borders);

box-shadow: 0px 0px 7px var(--shadow);

border-radius: 100px;

}

.comments-table td:first-child img:not(.icon):hover {

animation: rotate 0.5s;

animation-iteration-count: infinite;

}

a, nav .links a, .special {

color: white;(--links) !important;

text-shadow: none;

}

a:hover, nav .links a:hover, .special {

color: white; (--shift) !important;

text-decoration: none !important;

transition: 0.2s;

}

.logout-btn {

color: white;(--links);

box-shadow: none;

}

.logout-btn:hover {

color: grey;(--shift);

box-shadow: none;

border: none;

text-decoration: none;

transition: 0.2s;

}

DIV.blog-preview{

text-align: center;

border: ridge 3px black;

background-image: url(https://i.pinimg.com/564x/8e/6a/dd/8e6add28eceddbbb1a29a1aae1e0cc97.jpg);

border-radius: 5px;

box-shadow: 0px 2px 2px white;

}

.profile .blurbs .section h4{

text-align: center;

text-shadow: 0px 2px 2px #301934;

color: white;

}

.profile .mood{

border: ridge 3px none;

border-radius: 5px;

margin-top: 5px;

margin-bottom: 5px;

text-align: center;

}

.profile .friends .heading{

border-radius: 5px;

border: ridge 3px black;

text-align: center;

box-shadow: 0px 2px 2px white;

}

.profile .friends .heading h4{

color: white;

box-shadow: ;

text-shadow: 0px 2px 2px white;

}

.profile .friends .inner{

text-align: center;

background-image: url(https://i.pinimg.com/564x/8e/6a/dd/8e6add28eceddbbb1a29a1aae1e0cc97.jpg);

border: ridge 3px black;

border-radius: 5px;

margin-top: 10px;

margin-bottom: 10px;

}

.profile .friends .person p{

display: none;

}

.profile .friends .person img:not(.icon){

border: ridge 3px white;

border-radius: 5px;

box-shadow: 0px 2px 2px gray

}

.contact .inner a img {

font-size: 0;

}

/*these are ur contact icons, u can change the icon image to whatever u want*/

.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before,

.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before,

.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before,

.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before,

.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before,

.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before,

.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before,

.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {

content: url(https://media.discordapp.net/attachments/1026163393381531669/1244304039412240394/PinClipart.com_celtic-crosses-clipart_5451917.png?ex=66549ff1&is=66534e71&hm=15fdac0c1c5ebbfc3086195f62e83ac594453dbda9501890349da9610057b157&=&format=webp&quality=lossless&width=27&height=63);

}

.profile .table-section .details-table td {

background-color: black;

}

.profile .blurbs .heading {

font-size: 15px;

font-weight: bolder;

background: transparent;

color: white;(--links);

}

.col.right h4 {

color: white;(--links);

text-align: left;

}

.profile .blurbs .section h4, .profile .friends .heading, .profile .contact .heading, .profile .table-section .heading {

background: none;

color: white;(--text);

font-style: italic;

}

.profile .blurbs .section h4 {

padding-left: 5px;

}

.person p {

color: var(--links) !important;

}

.person img{

border: 2px solid var(--borders);

box-shadow: 0px 0px 7px var(--shadow);

border-radius: 200px;

display: absolute;

height: 100px;

object-fit: cover;

width:100px;

}

@import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

main{background: none}

/*body text setting*/

body{font-family: 'Orbitron', sans-serif;

color: white !important;

font-size: 90%;

text-shadow: 2px 2px 3px #FFFFFF,

/*heading text setting*/

h1, h2, h3, h4, .profile .blurbs .section h4{font-family: 'Press Start 2P', cursive;

font-size: 120%;

color: white !important;

text-shadow: 2px 2px 3px black, 0 0 25px black, 0 0 5px #FFFFFF}

}

/*this is ur text setting*/

main p{

letter-spacing: 2px;

font-weight: 700;

line-height: 1.5;

color: white !important;

text-shadow: 2px 2px 3px black, 0 0 25px black, 0 0 5px black;}

}

.person:hover {

animation: rotate 0.9s;

animation-iteration-count: infinite;

}

.count {

color: white; (--links);

}

footer:after{

bottom: 0;

font-size:0;

left: 75%;

position:fixed;

pointer-events: none;

} content:url(https://i.pinimg.com/564x/1c/4c/98/1c4c98df90fca35e88624ad50a94c67d.jpg);

animation: slideIn 2s forwards;

}

@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, -2px) rotate(-1deg); }

}

@keyframes rotation {

from {

transform: rotate(0deg);

}

to {

transform: rotate(359deg);

}

@keyframes slideIn {

0% {

transform: translateX(900px);

}

100% {

transform: translateX(0);

}

/*this is ur snowflake code,u can change the emojis to whatevr u want*/

@media screen and (min-width: 0px) and (max-width: 720px) {

footer:after { display: none; }

</style>

</div>

<style>

.snowflake {

font-size: 20px;

}

/*layout by clementine*/

</style>

People I'd like to meet:

0 Kudos

Comments

Displaying 0 of 0 comments ( View all | Add Comment )