Ismail (AKA iSmile)'s profile picture

Published by

published
updated

Category: SpaceHey

Some layouts I made...

It seems that posting SpaceHey layouts is unavailable at the moment... Since I'm not sure for how long this has been the case (as I only made a SpaceHey account today), and I don't know for how long will this last, I've decided to share some of the layouts I made.


MySpace Original

I made it look more like the original MySpace - with the colors, margins, sizes, and also the original MySpace logo.

Code:


.container {
width: 800px;
}

h1 {
font-weight: normal;
}

h1, h2, h3, h4 {
  font-size: 12px;
}

nav .top {
  min-height: 75px;
}

nav, nav .links a, main, p {
  font-size: 11px;
}

nav .links {
  display: inline-block;
  text-align: center;
  width: 100%;
}

nav .top .left .logo {
content:url("https://i.ibb.co/bmj9cd9/58164.png");
width: 205px;
height: 35px;
}

nav .top {
  background: #003499;
}

nav .links, .profile .contact .heading, .profile .table-section .heading {
  background: #6698CB;
}

main .left {
  padding: 5px 25px;
}

.col.w-40 {
  width: 44%;
}

.profile .contact, .profile .table-section {
  border: 2px solid #6698CB;
}

.profile .contact .f-row {
margin: 15px 0;
}

.f-col a {
margin: 15px;
}

.profile .url-info {
  border: 1px solid #6698CB;
}

.details-table td {
  background: #d5e8fb;
}

.details-table td:first-child, .details-table td:first-child a {
  background: #b1d0f0;
  color: #336699;
}

.profile .blurbs .heading, .profile .friends .heading {
  background: #ffcc99;
  color: #ff6600;
}

.profile .blurbs .section h4 {
  color: #ff6600;
}

@media only screen and (max-width: 815px) {
.container {
  width: 95%;
}
}

@media only screen and (max-width: 479px) {
.col.w-40 {
  width: 100%;
}

}



Blue

I just named this layout "Blue". It's a very simple layout I made, and it can easily be recolored.

body {
  background-image: url(https://background-tiles.com/overview/mixed-colors/textures/large/5014.png);
}

main {
  background: rgba(0,52,153,0.1);
  color: #fff;
  padding: 0;
  margin-top: 10px;
}

main a {
 color: #003499;
}

main .left {
  padding-left: 0;
}

main .right {
  padding-right: 0;
}

h1, .profile h1 {
  border: 5px solid #003499;
  border-bottom: none;
  padding: 5px;
  background: rgba(0,52,153,0.3);
  color: yellow;
  font-size: 16px;
}

.edit-link, .general-about {
  border-left: 5px solid #003499;
  border-right: 5px solid #003499;
  margin: 0;
  padding: 5px;
}

.general-about {
  height: 175px;
}

.pfp-fallback {
  border: 5px solid #003499;
  margin: 0 5px;
}

p, .profile h1 {
  margin: 0;
  padding: 5px;
  padding: 5px;
}

.mood {
  border: 5px solid #003499;
  border-top: none;
  margin: 0;
  margin-bottom: 15px;
}

.profile .url-info {
  padding: 0;
}

.profile .contact .heading, .profile .table-section .heading, .setting-section .heading, .home-actions .heading, .url-info > p:first-child, .blog-preview h4, .profile .blurbs .heading, .profile .friends .heading {
  background: rgba(0,52,153,0.3);
  color: yellow;
  font-size: 16px;
  padding: 5px;
  margin: 0;
}

.profile .contact, .profile .url-info, .profile .table-section, .setting-section, .home-actions, .profile-info, .blog-preview, .blurbs, .friends, footer {
  border: 5px solid #003499;
}

.details-table td, .details-table td:first-child {
  background: none;
  border: 1px solid #003499;
} 

.profile .blurbs .section h4 {
  color: #fff;
}

.friends {
  margin-bottom: 15px;
}

footer {
  background: rgba(0,52,153,0.1);
  margin-top: 0;
  color: #fff;
}

@media only screen and (max-width: 815px) {
.container {
  width: 95%;
}
}

@media only screen and (max-width: 479px) {
.col.w-40 {
  width: 100%;
}

}

I only made these 2 as of now, but I'm planning to make more in the future. I hope the upload of layouts will be working again so that I can upload them there instead, however, if it doesn't, I'll just upload them here.


2 Kudos

Comments

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