Spacehey 2.0 Gloss - Pink

Tags: simple, layout, vista, pink, purple, gloss, glossy, 2000s, futuristic

Description:

Thanks for checking out my layout! This layout is inspired by Windows Vista and websites made around the early 2000's that had a lot of gloss in their designs. I became inspired to make it while looking at the Yahoo 5.5 UI

This is literally just a recolor of my Spacehey 2.0 Gloss layout. Sorry if it's a bit low effort, I just wanted to share some color variations for my layouts since I think it would be nice for our non-coding users who want a different color, but don't know how to make one.

F.A.Q

"Do I have to credit you?"

- No, this layout is free to use, edit, and dissect. If you claim it as yours, then that's something you'll have to deal with. Not me. I do appreciate kudos, though!

"Where do I ask you for help with editing/reading the code?"

- You can email me or you can leave a comment here. Please don't add me just to leave a comment on my profile asking for help with CSS; it's just impolite. If you're going to friend me to ask for help, at least be secretive about it and IM me instead of making our convo public.

Preview:

click on the image for a larger preview

Code:

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

<style>

/* Gen Body Settings */

.container {
  border: 1px solid #ffa9d6; 
}

main {
    color: #f2258f;
}

body {
 background: #fff5fd; 
}

.icon {
    height: 1em;
    width: 1em;
}
/* Profile Settings */

.details-table td {
  background-color: white;
  color: #f2258f;
} 

.details-table td p {
  font-size: 11px;
  font-family: 'ms ui gothic';
  color: #f2258f;
} 

.details-table td:first-child {
  background: linear-gradient(#ffa9ea, white 20px);
  text-align: center;
  text-shadow: white 0px 1px 2px;
  width: 30%;
  box-shadow: #ffffffab 0px 1px 2px 2px inset;
  color: black;
  font-family: ms ui gothic;
  font-size: 15px;
  font-weight: normal;
}

.profile .contact .heading h4, .profile .table-section h4 {
  font-weight: normal;
}

.profile .contact, .profile .table-section, .profile .url-info {
    border: 0;
}

.profile .contact .inner, .profile .table-section .inner {
    border: #ffa9d6 1px solid;
    
}

.profile-info {
  border: 0;
  margin: 0;
  padding: 0;
}

.profile-info h3 {
  font-weight: normal;
  font-size: 11px;
  color: grey;
  margin: 0;
}

.profile h1 {
  letter-spacing: 0.3px;
  font-size: 14px;
  margin: 0;
}

.general-about .profile-pic {
 height: 100px;
 border: 1px solid #b01083;
 box-shadow: #a1c2cc 0px 2px 2px;
}

.mood p, .profile .url-info  {
 font-size: 13px;
 font-family: 'MS UI Gothic';
}

.mood b, .profile .url-info b{
  font-weight: normal;
  font-family: verdana;
  font-size: 0.875em;
}

.general-about .profile-pic img {
 height: 100px; 
 width: 100px;
}
/* Link Settings */
.mood a, .inner a, .friends a {
 color: #b01083;
 font-weight: normal;
 font-size: 13px;
 font-family: 'MS UI Gothic';
}

.blog-preview a {
 color: #b01083;
 font-weight: normal;
 font-size: 12px;
 font-family: 'MS UI Gothic';
}

/* Nav Bar */

nav .links {
 background: linear-gradient(#efcdf9 15%, #ffaae6, #f9d0e7); 
 box-shadow: white 0 1px 1px 1px inset;
 padding: 0;
 text-align: center;
}

nav .links a {
  color: #f2258f;
  text-shadow: white 0px 2px 4px;
  padding: 1px
}

nav .links a:hover {
  color: #f2258f;
  background: linear-gradient(white, lavender);
  text-decoration: none;
  padding-top: 0;
}

nav .links li.active a {
  color: #f2258f; 
  font-weight: normal;
}

nav .links li:not(:last-child)::after {
  color: white;
  text-shadow: lightblue 1px 0px 1px;
}

/* Nav Top */

nav .top {
 background: linear-gradient(#e8bdd7 , #f2258f 40%, #e6add8); 
 box-shadow: #fff6 0px 0px 2px 3px inset;
}

/* Blurbs and Headings Settings */

.profile .blurbs .inner, .profile .friends .inner, .profile .contact .heading {
  border: 1px solid #ffa9d6;
  border-bottom: 0;
}

.profile .blurbs .heading, .profile .friends .heading, .profile .contact .heading, .profile .table-section .heading {
  background: linear-gradient(#efcdf9 15%, #ffaae6, #f9d0e7); 
  box-shadow: white 0 1px 1px 1px inset;
  color: #f2258f;
  font-size: 11px;
  font-weight: normal;
  text-shadow: white 0px 2px 5px;
  border: 1px solid #ffa9d6;
  border-bottom: 0;
  border-radius: 2px;
}

.profile .friends .heading h4,  .blurbs .heading h4{
 font-weight: normal; 
}

.profile .blurbs .section h4 {
 color: grey;
 font-weight: normal;
 font-size: 13px;
 font-family: 'ms ui gothic';
}

.profile .blurbs .section {
 font-size: 11px; 
 font-family: 'ms ui gothic';
 color: #f2258f;
}

/* Friends */

.profile .inner b {
 font-size: 11px; 
 font-family: 'ms ui gothic';
 color: #f2258f;
}

.profile .inner span.count {
 color: orange; 
}

.profile .friends .person p {
 font-size: 11px;
 font-family: verdana;
 color: #f2258f;
}

.comments-table td:first-child {
  background: linear-gradient(#ffa9ea, white);
  text-align: center;
  text-shadow: white 0px 1px 2px;
  width: 30%;
  box-shadow: #ffffffab 0px 1px 2px 2px inset;
}
.comments-table img:not(.icon){
    border: 1px solid #f2258f;
    box-shadow: 0px 1px 2px #fff;
}

.comments-table td {
 background-color: white; 
}

button:not(.logout-btn) {
 background: linear-gradient(#efcdf9 15%, #ffaae6, #f9d0e7); 
 box-shadow: white 0 1px 1px 1px inset;
 color: #f2258f;
 font-size: 11px;
 font-weight: normal;
 text-shadow: white 0px 2px 5px;
 border: 1px solid #f2258f;
 border-radius: 2px;
 padding: 2px;
} 

button:not(.logout-btn):hover {
 background: linear-gradient(white, #d6bce0); 
 box-shadow: white 0 1px 1px 1px inset;
 color: #f2258f;
 font-size: 11px;
 font-weight: normal;
 text-shadow: white 0px 2px 5px;
 border: 1px solid #f2258f;
 border-radius: 2px;
 padding: 2px;
} 
</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 20 of 633 comments ( View all | Add Comment )

Haimaru	1770127305 Using!! Report Comment
MisaKox	1770071128 Using!! 👀 Report Comment
𝒦𝒶𝓉𝒸𝒶𝒻𝑒𐙚	1769987922 Using>w< Report Comment
lekfumaça	1769530879 Could you make a purple version of this? Report Comment
Ito ୨ৎ	1769365346 Using ! ! Report Comment
babicasi	1769326672 Using Report Comment
summie n00r	1768902791 using! Report Comment
jazz	1768878759 Usingg Report Comment
jazz	1768878759 Usingg Report Comment
l0ser	1768864489 Using!!! Report Comment
nyanners	1768467520 using! Report Comment
Spence	1768195602 Using Report Comment
Spence	1768195600 Using Report Comment
Phobos (*^▽︎^)ﾉ	1768153720 Awwhhh this is sososos cute! Report Comment
𝓐ngelito	1768152474 using, ty !!! <3 Report Comment
frankie / gamzee!	1768071872 using! Report Comment
rosette	1768058400 using Report Comment
rosette	1768058389 using Report Comment
SWAGPRINCE$$	1767956606 using, thank you angel!! Report Comment
sienhufz	1767918025 USING! Report Comment