Report Blog Entry
Since the layout section of spacehey isn't accepting new layouts and hasn't for around 10 months, I'm just gonna assume that part of spacehey might never be back up. So, I'm just gonna design layouts and post them on my blog!!
This particular layout doesn't really work on mobile, sorry ^^' Frames get super wonky- Everything else is fine.. Just like.. The frames don't look the best lol, I tried my hardest to get them to work properly but they just decided they didn't feel like it.
Most of the artwork here is made by me!! Feel free to use the full layout or just some parts if you'd like, but please credit me somewhere on your profile. I'm going to put links to the individual pieces of art here just so that they're easier to find.
Cupid Angel Icon (real size: 37px by 29px): https://res.cloudinary.com/dp5c3makl/image/upload/v1743640100/angelicon1_pzivcg.png
Wings and Halo Icon (real size: 37px by 29px): https://res.cloudinary.com/dp5c3makl/image/upload/v1743640190/angelicon2_zz2kkd.png
Praying Angel Icon (real size: 33px by 35px): https://res.cloudinary.com/dp5c3makl/image/upload/v1743785061/angelicon3_yfq0wi.png
Angel Online Icon (real size: 120px by 159px): https://res.cloudinary.com/dp5c3makl/image/upload/v1743640167/onlineicon_mmqro2.png
Syringe Icon (real size: 30px by 30px): https://res.cloudinary.com/dp5c3makl/image/upload/v1743691276/needle_dclzgr.png
Small Heart (real size: 13px by 10px): https://res.cloudinary.com/dp5c3makl/image/upload/v1743702875/heartspacer_p9xdff.png
Animated Sparkle (real size: 50px by 50px): https://res.cloudinary.com/dp5c3makl/image/upload/v1743691506/sparkle_jxeslf.gif
Smallest Sparkle (real size: 50px by 50px): https://res.cloudinary.com/dp5c3makl/image/upload/v1743692197/sparkle2_egvxwk.png
Medium Sparkle (real size: 50px by 50px): https://res.cloudinary.com/dp5c3makl/image/upload/v1743692198/sparkle3_twqn6e.png
Non-selecting Cursor (real size: 32px by 32px): https://res.cloudinary.com/dp5c3makl/image/upload/v1743640710/cursor1_hmrbh1.png
Selecting Cursor (real size: 32px by 32px): https://res.cloudinary.com/dp5c3makl/image/upload/v1743640693/cursor2_pfroof.png
Main Background (real size: 500px by 356px): https://res.cloudinary.com/dp5c3makl/image/upload/v1743702585/background_ae1syg.jpg
Friends Frame (real size: 361px by 327px): https://res.cloudinary.com/dp5c3makl/image/upload/v1743716016/people_border_pndxuz.png
Friends Comment Frame (real size: 316px by 327px): https://res.cloudinary.com/dp5c3makl/image/upload/v1744392028/people_border_lighter_flosjl.png
Custom Spacehey Logo (real size: 1260px by 321px): https://res.cloudinary.com/dp5c3makl/image/upload/v1744741692/logo_customized_hrqgdo.png
Code (copy and paste this into your about me section):
<!--Autoplay music and rain-->
<iframe width="0" height="0" src="https://www.youtube.com/embed/3nssfwuMxKk?//?&;amp;;autoplay=1&;loop=1&;controls=1;" title="Everyone adores you" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" loading="lazy">
</iframe>
<iframe width="0" height="0" src="https://www.youtube.com/embed/M0qWBKQ7ldY?//?&;amp;;autoplay=1&;loop=1&;controls=1" title="Rain" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" loading="lazy">
</iframe>
<!--The blorbos :3-->
<div style="height: 328px; width: 221px; position: fixed; left: 20px; bottom: 0px; z-index: 201;">
<img style="position: fixed; bottom: 0px;" src="https://res.cloudinary.com/dp5c3makl/image/upload/v1745816078/angelgif_trxw69.gif" height="328"/></div>
<div style="height: 380px; width: 246px; position: fixed; right: 20px; bottom: 0px; z-index: 200;">
<img style="position: fixed; bottom: 0px;" src="https://res.cloudinary.com/dp5c3makl/image/upload/v1745813740/leegif_d7pfeq.gif" height="380"/></div>
<!--General styling-->
<style>
@import url('https://fonts.googleapis.com/css2?family=Short+Stack&display=swap');
html {
/*Hides the scroll bar while still allowing the page to scroll, this only really works properly in chrome or safari*/
overflow: scroll;
overflow-x: hidden;
}
::-webkit-scrollbar {
/*Hides the scroll bar while still allowing the page to scroll, this only really works properly in chrome or safari*/
width: 0;
background: transparent;
}
body {
background: url("https://res.cloudinary.com/dp5c3makl/image/upload/v1743702585/background_ae1syg.jpg");
background-position: center;
background-repeat: repeat;
background-attachment: fixed;
}
main {
background: #656aab;
margin-top: 10px;
border-radius: 10px;
}
p, h1, h2, h3, h4, h5, h6 {
color: #c9cdfa;
font-family: 'Short Stack', sans-serif;
}
a {
color: #a4a9dd;
font-family: 'Short Stack', sans-serif;
}
a:hover {
color: #c9cdfa;
text-decoration: underline #c9cdfa wavy;
}
.profile .url-info {
/*Hides url*/
display: none;
}
.table-section:last-child {
/*Hides links*/
display: none !important;
}
@media (min-width: 30em) {
.col.w-40 {
width: 45%;
}
/*Resizes left column to better fit contact box text*/
}
.profile-info {
/*Changes the "edit your profile" button*/
border: 2px #565a93;
border-radius: 5px;
}
</style>
<!--Navigation bar-->
<style>
nav {
background: #777dc5;
margin-top: 10px;
border-radius: 10px;
}
nav .top {
background: #565a93;
border-radius: 10px 10px 0px 0px;
}
nav .top a {
font-family: 'Short Stack', sans-serif;
color: #c9cdfa;
}
nav .top a:hover {
color: #c9cdfa;
text-decoration: underline #c9cdfa wavy;
}
nav .top .left .logo {
/*Replaces logo with one I custom made*/
content: url("https://res.cloudinary.com/dp5c3makl/image/upload/v1744741692/logo_customized_hrqgdo.png");
}
nav .links {
background: transparent!important;
text-align: center;
}
nav .links a {
color: #a4a9dd;
text-shadow: none;
font-size: 10px;
}
nav .links a:hover {
color: #c9cdfa;
text-decoration: underline #c9cdfa wavy;
}
nav .links li {
border: none;
padding: 0px;
margin: 0px;
}
nav .links .icon {
/*Changes the little notification bell icon that you get*/
content: url("https://res.cloudinary.com/dp5c3makl/image/upload/v1743691276/needle_dclzgr.png");
}
nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after {
/*Changes spacer bars to lil heart*/
width: 10px;
padding-left: 4px;
content: url("https://res.cloudinary.com/dp5c3makl/image/upload/v1744739765/heartspacer_p9xdff.png");
}
label {
/*Changes "Search Users:" text*/
font-family: 'Short Stack', sans-serif;
color: #c9cdfa;
}
input {
/*Changes the search bar*/
font-family: 'Short Stack', sans-serif;
pointer-events: auto;
color: #c9cdfa !important;
background-color: #777dc5 !important;
border-radius: 5px !important;
border-color: #656aab !important;
border-style: inset !important;
}
input:focus {
/*Gets rid of that outline you get when typing in the search bar*/
outline: none;
}
.center button {
/*Changes search button*/
font-family: 'Short Stack', sans-serif;
color: #c9cdfa;
background-color: #565a93;
border-color: #656aab;
border-radius: 5px;
}
.center button:hover {
font-family: 'Short Stack', sans-serif;
color: #c9cdfa;
background-color: #565a93;
border-color: #656aab;
border-style: inset;
border-radius: 5px;
}
.top .right {
/*Changes color of little lines between help, logout, login, or sign up buttons in the top right bc I can't find another way to change it*/
color: #565a93;
}
.logout-btn {
font-family: 'Short Stack', sans-serif;
color: #c9cdfa;
}
.logout-btn:hover {
color: #c9cdfa;
text-decoration: underline #c9cdfa wavy;
}
</style>
<!--Profile Picture-->
<style>
.general-about .profile-pic img {
border-radius: 80px;
}
</style>
<!--Cursor-->
<style>
html, body {
cursor: url(https://res.cloudinary.com/dp5c3makl/image/upload/v1743640710/cursor1_hmrbh1.png), auto! important;
}
a {
cursor: url(https://res.cloudinary.com/dp5c3makl/image/upload/v1743640693/cursor2_pfroof.png), auto !important;
}
button {
cursor: url(https://res.cloudinary.com/dp5c3makl/image/upload/v1743640693/cursor2_pfroof.png), auto !important;
}
label {
cursor: url(https://res.cloudinary.com/dp5c3makl/image/upload/v1743640710/cursor1_hmrbh1.png), auto !important;
}
</style>
<!--Online-->
<style>
.online {
color: #c9cdfa;
}
.online img {
content: url("https://res.cloudinary.com/dp5c3makl/image/upload/v1743640167/onlineicon_mmqro2.png")
}
</style>
<!--Contact-->
<style>
.contact {
background: #777dc5;
}
.profile .contact {
border: #565a93;
border-radius: 5px;
}
.profile .contact .heading {
background: #565a93;
border-radius: 5px 5px 0px 0px;
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a .icon {
/* Add to friends icon */
content: url("https://res.cloudinary.com/dp5c3makl/image/upload/v1743640100/angelicon1_pzivcg.png")
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a .icon {
/* Add to favorite icon */
content: url("https://res.cloudinary.com/dp5c3makl/image/upload/v1743640190/angelicon2_zz2kkd.png")
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a .icon {
/* Send a message icon */
content: url("https://res.cloudinary.com/dp5c3makl/image/upload/v1743640190/angelicon2_zz2kkd.png")
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a .icon {
/* Forward to friend icon */
content: url("https://res.cloudinary.com/dp5c3makl/image/upload/v1743640100/angelicon1_pzivcg.png")
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a .icon {
/* Instant message icon */
content: url("https://res.cloudinary.com/dp5c3makl/image/upload/v1743640100/angelicon1_pzivcg.png")
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a .icon {
/* Block user icon */
content: url("https://res.cloudinary.com/dp5c3makl/image/upload/v1743640190/angelicon2_zz2kkd.png")
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a .icon {
/* Add to group icon */
content: url("https://res.cloudinary.com/dp5c3makl/image/upload/v1743640190/angelicon2_zz2kkd.png")
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a .icon {
/* Report user icon */
content: url("https://res.cloudinary.com/dp5c3makl/image/upload/v1743640100/angelicon1_pzivcg.png")
</style>
<!--Interests-->
<style>
.profile .table-section {
border: #565a93;
border-radius: 5px;
}
.profile .table-section .heading {
background: #565a93;
border-radius: 5px;
}
.details-table td:first-child {
/*Left side of interests table*/
background: #6c72b4;
border-radius: 5px;
}
.details-table td {
/*Right side of interests table*/
background: #777dc5;
border-radius: 5px;
}
</style>
<!--Friends, blurbs, and friend comments-->
<style>
.profile .friends .heading {
background: #565a93;
border-radius: 5px;
}
.profile .friends .person img:not(.icon) {
/*Resizes friend's pfps, in case their pfp is not already square. Frames will not work without this, unless all your friend's have perfectly square pfps (which likely isn't the case ^^')*/
width: 90px;
height: 90px;
object-fit: cover;
}
.profile .friends .person a:last-child {
position: sticky;
/*position:sticky; is required for the borders to work- Since the border positions are absolute, they determine their position based off of the nearest positioned ancestor. Without this, that ancestor is the body*/
}
.profile .friends .person a:last-child:before {
/*Adds pretty frames on top of friend's pfps :3*/
content: "";
background: url("https://res.cloudinary.com/dp5c3makl/image/upload/v1743716016/people_border_pndxuz.png");
position: absolute;
background-size: cover, contain;
background-position: center;
top: -1px;
left: -1px;
width: 92px;
height: 92px;
}
.profile .friends .person p {
color: #c9cdfa;
}
.profile .friends .person {
width: 95px;
}
.profile .blurbs .heading{
background: #565a93;
border-radius: 5px;
}
.count {
/*Changes color of numbers in friends and friend comments*/
color: #c9cdfa;
}
.profile .blurbs .section h4 {
margin: 0;
color: #c9cdfa;
}
.comments-table td:first-child img:not(.icon) {
/*Again, resizes friend's pfps, but in the friend comments part- Frames will not work without this*/
width: 90px;
height: 90px;
object-fit: cover;
}
.comments-table td:first-child a:last-child {
display: inline-block;
height: 90px;
width: 90px;
position: sticky;
/*position:sticky; is required for the borders to work- Since the border positions are absolute, they determine their position based off of the nearest positioned ancestor. Without this, that ancestor is the body*/
}
.comments-table td:first-child a:last-child:before {
/*Frames over comment pfps :3*/
content: "";
background: url("https://res.cloudinary.com/dp5c3makl/image/upload/v1744392028/people_border_lighter_flosjl.png");
position: absolute;
display: inline-block;
background-size: cover, contain;
background-position: center;
left: calc(50% - 46px);
top: -1px;
width: 92px;
height: 92px;
}
.comments-table td:first-child {
background-color: #6c72b4;
border-color: #656aab;
border-radius: 5px;
}
.comments-table td {
/*Right side of comment*/
background-color: #777dc5;
border-color: #656aab;
border-radius: 5px;
}
table.comments-table {
border: none;
}
.comment-replies {
/*Styling for replies to comments -w-*/
background-color: #6c72b4;
border: 2px #6c72b4;
border-radius: 5px;
}
.comment-reply:not(:first-child) {
border-top: 2px solid #656aab;
}
.comments-table button {
/*Could just be button, if you'd like, since there aren't any other built in buttons on a spacehey page except the search button- I'm specifying that it's the comments-table buttons just in case you want to add other buttons*/
color: #c9cdfa;
background-color: #565a93;
border-color: #656aab;
border-radius: 5px;
margin: 2px;
}
.comments-table button:hover {
color: #c9cdfa;
background-color: #565a93;
border-color: #656aab;
border-style: inset;
border-radius: 5px;
margin: 2px;
}
.comments-table .icon {
content: url("https://res.cloudinary.com/dp5c3makl/image/upload/v1743691276/needle_dclzgr.png");
}
</style>
<!--Footer-->
<style>
footer {
background: #565a93;
border-radius: 10px;
}
</style>
<!--Snowflakes :D-->
<style>
.snowflake {
/*I've seen this code everywhere, no clue who exactly it belongs to- Cleaned it up bc gawDAMN it was messy as all get out*/
position: fixed;
top: -10%;
z-index: 9999;
user-select: none;
cursor: default;
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;
}
@keyframes snowflakes-fall {
0% {
top: -10%
}
100% {
top: 100%
}
}
@keyframes snowflakes-shake {
0%,100% {
transform: translateX(0)
}
50%{
transform: translateX(80px)
}
}
.snowflake img {
/*Changes size of images inside snowflake div boxes, unnecessary if you're using text. If you do use text/emojis, just add whatever style specifications you want in .snowflake*/
width: 30px;
}
.snowflake:nth-of-type(0) {
/*First snowflake (the very first div box)*/
left: 1%;
animation-delay: 0s, 0s;
}
.snowflake:nth-of-type(1) {
left: 10%;
animation-delay: 1s, 1s;
}
.snowflake:nth-of-type(2) {
left: 20%;
animation-delay: 6s, .5s;
}
.snowflake:nth-of-type(3) {
left: 30%;
animation-delay: 4s, 2s;
}
.snowflake:nth-of-type(4) {
left: 40%;
animation-delay: 2s, 2s;
}
.snowflake:nth-of-type(5) {
left: 50%;
animation-delay: 8s, 3s;
}
.snowflake:nth-of-type(6) {
left: 60%;
animation-delay: 6s, 2s;
}
.snowflake:nth-of-type(7) {
left: 70%;
animation-delay: 2.5s, 1s;
}
.snowflake:nth-of-type(8) {
left: 80%;
animation-delay: 1s, 0s;
}
.snowflake:nth-of-type(9) {
left: 90%;
animation-delay: 3s, 1.5s;
}
.snowflake:nth-of-type(10) {
left: 25%;
animation-delay: 2s, 0s;
}
.snowflake:nth-of-type(11) {
/*Last snowflake (the very last div box, the twelfth)*/
left: 65%;
animation-delay: 4s, 2.5s;
}
</style>
<div class="snowflakes">
<div class="snowflake"><img src="https://res.cloudinary.com/dp5c3makl/image/upload/v1743640100/angelicon1_pzivcg.png"/></div>
<div class="snowflake"><img src="https://res.cloudinary.com/dp5c3makl/image/upload/v1743691506/sparkle_jxeslf.gif"/></div>
<div class="snowflake"><img src="https://res.cloudinary.com/dp5c3makl/image/upload/v1743692197/sparkle2_egvxwk.png"/></div>
<div class="snowflake"><img src="https://res.cloudinary.com/dp5c3makl/image/upload/v1743692198/sparkle3_twqn6e.png"/></div>
<div class="snowflake"><img src="https://res.cloudinary.com/dp5c3makl/image/upload/v1743692197/sparkle2_egvxwk.png"/></div>
<div class="snowflake"><img src="https://res.cloudinary.com/dp5c3makl/image/upload/v1743691506/sparkle_jxeslf.gif"/></div>
<div class="snowflake"><img src="https://res.cloudinary.com/dp5c3makl/image/upload/v1743692198/sparkle3_twqn6e.png"/></div>
<div class="snowflake"><img src="https://res.cloudinary.com/dp5c3makl/image/upload/v1743691506/sparkle_jxeslf.gif"/></div>
<div class="snowflake"><img src="https://res.cloudinary.com/dp5c3makl/image/upload/v1743640100/angelicon1_pzivcg.png"/></div>
<div class="snowflake"><img src="https://res.cloudinary.com/dp5c3makl/image/upload/v1743692197/sparkle2_egvxwk.png"/></div>
<div class="snowflake"><img src="https://res.cloudinary.com/dp5c3makl/image/upload/v1743691276/needle_dclzgr.png"/></div>
<div class="snowflake"><img src="https://res.cloudinary.com/dp5c3makl/image/upload/v1743785061/angelicon3_yfq0wi.png"/></div>
<!--There are a total of 12 snowflakes, you can add more but you do have to add a nth-of-type in the snowflake style code (you would need a nth-of-type(12) if you want 13, nth-of-type(13) if you want 14, etc.)-->
</div>
Comments
Displaying 0 of 0 comments ( View all | Add Comment )