SpaceHey 2010s

Tags: layout, 2010s, facebook, modern, simple

Description:

A 2010s inspired layout for your SpaceHey profile :3 If you use this layout, comment below!

Preview:

click on the image for a larger preview

Code:

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

<style>
/*CUSTOMIZE PROFILE*/

/*PROFILE BANNER INSTRUCTIONS - This is your profile banner. To keep with the style if you're making a banner, the dimensions are included in the sample art. But your image should automatically crop into the correct size. To change your banner, where it says "background-image", you want to copy the image address of your desired image, and paste it after the ' in the brackets. Make sure there is a ' before and after your url.*/

main:before {
	width: 100%;
	height: 300px;
	display: block;
	content: "";
	background-image: url('https://media.discordapp.net/attachments/473079589367840778/1144956097988407466/Space-Background-Image-3.jpg?width=984&height=655');
	background-position: center center;
	background-size: cover;
}
@media only screen and (max-width: 600px) {
	main:before{
		height: 200px;
	}
}
</style>

<style>
/*PROFILE BACKGROUND INSTRUCTIONS - Heres your profile background. Currently it is set ot the default color, but you can change this to any color you want by replacing the HEX code with a new one. Or alternitivley, add a URL in the URL section to add an image. If adding an image instead of a color, you may need to remove the color HEX code first so it doesnt overlap.*/

body {
background-color: #9da1b8;
}
body{
  background-image:url( );

background-attachment:fixed;background-size:cover; /* If you want your background to tile, remove this line */
<!-- (c) Background Image code created by Ashton (https://layouts.spacehey.com/layout?id=32100) -->

</style>




<style>
/*NON CUSTOMIZABLE ELEMENTS, ALTER AT OWN RISK.*/
.container > nav:nth-child(1) {
margin-left: -548px;
margin-right: -545px;
}
.container > main:nth-child(2) {
margin-top: 0px;
margin-left: -200px;
margin-right: -200px;
}

.profile-info {
border-left-width: 0px;
border-right-width: 0px;
margin-left: 550px;
}
.profile-info {
border-bottom-width: 0px;
border-top-width: 0px;
}
</style>

<style>
.details {
margin-top: -50px;
}

div.col:nth-child(3) > span:nth-child(1) > h1:nth-child(1) {
margin-left: 180px;
}
.details > p:nth-child(1) {
margin-right: 400px;
margin-top: 1px;
}
div.left:nth-child(1) {
margin-left: 325px;
}
.center > form:nth-child(1) {
margin-left: -220px;
margin-top: 10px;
}
.active {
margin-left: 340px;
}
</style>

<style>
.profile-pic {
margin-bottom: -105px;
}
.details {
margin-top: -190px;
}

</style>

<style>
.details > p:nth-child(2) {
margin-top: 20px;
}
.details > p:nth-child(1) {
margin-top: 33px;
}
.profile-pic > img:nth-child(1) {
margin-top: -20px;
}
.blog-preview {
margin-top: -55px;
}
.logout-btn {
margin-right: 345px;
margin-left: -;
}
.center > form:nth-child(1) {
margin-top: 1px;
margin-top: 23px;
}
}
</style>
<style>
nav .top {
background: #3B599A;
}
nav .links {
background-color: #1F4189;
}
main {
background: #E7EBF2;
}
</style>

<style>
.profile .blurbs .heading, .profile .friends .heading {
background: #3B599A;
}
.profile .contact .heading, .profile .table-section .heading, .setting-section .heading, .home-actions .heading {
background: #3B599A;
}
:root {
--lighter-blue: #BFBFC6;
}
.details-table td:first-child {
background: #A1BADA;
}
.details-table td:first-child {
color: #475C97;
}
.profile .contact .heading, .profile .table-section .heading, .setting-section .heading, .home-actions .heading {
color: #dbddef;
}
.profile .blurbs .heading, .profile .friends .heading {
color: #dbddef;
}
.profile .blurbs .section h4 {
color: #475C97;
}
:root {
--lightest-blue: #DBE7FF;
}
.comments-table td, .music-table td {
background: #E6F8DD;
}
.comments-table td:first-child, .music-table td:first-child {
background: #A0C99C;
}
</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 30 comments ( View all | Add Comment )

Wavey Joe	1755727146 the cover photo portion of the code is broken!! i've been doing my best to try and fix it myself but no matter what i do the image won't appear. the links to the photos i know for sure aren't broken; pls fix this if you still can!! Report Comment
emmalineainsley	1752292126 using! Report Comment
jayden	1751957006 usign Report Comment
Izzy<3	1746581173 using, tysm :D Report Comment
Cherry ♡	1742971084 using ^0^ Report Comment
briefkase	1737002430 using :p Report Comment
liana678	1736995379 im going to use this Report Comment
liana678	1736995378 im going to use this Report Comment
cabraliciano	1735789322 usinglyly Report Comment
Bytanic	1732654689 Using. Report Comment
Lemony	1719592098 Using!! :3 Report Comment
cr0wluvr	1719418305 Using Report Comment
Kara_Ww	1716485289 usandooo Report Comment
fuckeduptrampstamp	1716451542 using Report Comment
Jaxon	1713758363 Absolutely using! Report Comment
cr0wluvr	1713574298 Using! Report Comment
♱ Natalie ♱	1711934329 USINGGG!!! Report Comment
MyKif™	1710743656 this is awesome! using Report Comment
Dr.Cheez12	1698108679 Using Report Comment
Tristan	1697401649 USING!!!!!!!! Report Comment