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 114 comments ( View all | Add Comment )

jayden galaxia	1702158996 i love this a lot!! using a slightly altered version for my blog, tysm <3 Report Comment
Arden!	1701997223 usinggg!!! tysm! Report Comment
xXJellyfishXx	1701882704 Using :D Report Comment
Alex	1701777297 definitely using! thank you very much :) Report Comment
kouwzx	1701626819 usinggg Report Comment
CONFETTI	1701556562 using! <3 Report Comment
liam :3	1701287890 using! Report Comment
Conrad <3	1701221053 I'm going to use the top for my profile! thanks!! Report Comment
k3nl3x	1701038897 Using it •u• Report Comment
polistes	1701034175 this looks so good! definitely using! Report Comment
tony	1700884499 using (with a couple of tweaks)!! thank you!! Report Comment
Chicken_Snatcher	1700758694 Maybe using! Report Comment
Gabruuu	1700176678 Me encanta este estilo de diseño ^^ Report Comment
PuttingHolesİnHappiness	1699709767 using thnk u very muchhgh Report Comment
FELIX C	1699461757 using!! Report Comment
glittrz	1699446729 using but will tweak the design a bit :) Report Comment
Rainy (-.-)Zzz・・・・	1699382904 Using :3 Report Comment
Graciax	1699382555 AAA i love this! thanks for making it :) Report Comment
fern	1699216265 using Report Comment