Spacehey 2.0 Gloss

Tags: simple, layout, vista, blue, green, 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

I tried to clean up the code, but it's still messy. I'm really embarrassed by my CSS abilities, so go easy on me with critiques. I made this at 2am while listening to the Hoku, So Real, and the Baby One More Time albums so this is probably some of the messiest coding I've ever done.

UPDATE 5.23.22 : Shoutout to Adonai and Raven for their edits of this layout!

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=3245) -->

<style>

/* Gen Body Settings */

.container {
  border: 1px solid lightblue; 
}

main {
    color: #2f748a;
}

body {
 background: #fffff8; 
}

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

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

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

.details-table td:first-child {
  background: linear-gradient(lightblue, 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: lightblue 1px solid;
    
}

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

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

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

.general-about .profile-pic {
 height: 100px;
 border: 1px solid #2f748a;
 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: #2f748a;
 font-weight: normal;
 font-size: 13px;
 font-family: 'MS UI Gothic';
}

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

/* Nav Bar */

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

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

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

nav .links li.active a {
  color: #1a586c; 
  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(#bddde8 , #1d94ba 40%, lightblue); 
 box-shadow: #fff6 0px 0px 2px 3px inset;
}

/* Blurbs and Headings Settings */

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

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

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

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

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

/* Friends */
.profile .friends .person img:not(.icon){
  width: 50px;
  height: 50px;
}

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

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

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

.comments-table td:first-child {
  background: linear-gradient(lightblue, 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 lightblue;
    box-shadow: 0px 1px 2px #fff;
}

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

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

button:not(.logout-btn):hover {
 background: linear-gradient(white, lightgreen); 
 box-shadow: white 0 1px 1px 1px inset;
 color: #2f748a;
 font-size: 11px;
 font-weight: normal;
 text-shadow: white 0px 2px 5px;
 border: 1px solid #91cfe3;
 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 315 comments ( View all | Add Comment )

yam.x.te	1747569154 usingg Report Comment
世界で一番お姫様	1746819482 using! thnx Report Comment
skadi	1746792719 usingg Report Comment
☆ Caden	1746657491 using Report Comment
Mimi ⋆˚࿔	1746469526 using!! Report Comment
rosette ( ´ ꒳ ` )	1746014036 using Report Comment
lambiefan127	1745774067 using Report Comment
Dine	1745394632 usiiing Report Comment
𝓜𝓲𝓵𝔂 丰	1744905061 Usinggg Report Comment
salesman	1744773396 using!! tysm!! Report Comment
Lucille ✰	1744737239 Using !! I edited some of it to fit with the rest of my code. Thanks! >_< Report Comment
jolly.butter	1744711192 using!!1! Report Comment
Stricken	1744495593 using Report Comment
crkeni	1744256435 using! Report Comment
Sharky_✯	1743841885 USING !!! <3 Report Comment
YusaLoveRain	1743631604 using :D Report Comment
MiguelKenjiLOL69	1743351373 using Report Comment
0nxi	1743350085 Maybe using Report Comment
coolboyyaoi444	1743035328 using Report Comment
Yoru	1742844718 Using :-) Report Comment