Aesthetic Pixel City Layout

Tags: city, cute, japan, red, brown, cozy, comfy, warm

Description:

Background Image by https://www.reddit.com/user/jorppu/

I really liked the aesthetic of this image I found so I made an entire layout based on it LUL

(add me or comment if u use it itll be really cool to see who likes this o(=•ェ•=)m)

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by KασKασ ♥ (https://layouts.spacehey.com/layout?id=21260) -->

<iframe width="0" height="0" src="https://www.youtube.com/embed/9FvvbVI5rYA//?&;amp;;autoplay=1&;loop=1&;controls=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>

<style>
/*Main Body Background Image*/
    body{
    background-image: url(https://i.pinimg.com/originals/f7/0b/dd/f70bdd8c08f479a16519e8319b51b46b.gif) !important;
    background-attachment: FIXED !important;
    background-repeat: NO-REPEAT !important;
    background-position: CENTER !important;
    background-size: COVER;}
</style>
    
<style>
/*Profile Color*/
    main{
    background-color: #00000095 !important;
</style>
    
<style>
/*Adding rounded corners to profile*/
   .top{
        border-radius: 25px 25px 25px 25px !important;}
        
    main{
        border-radius: 25px 25px 25px 25px !important;}
</style>
        
<style>
/*Top Background Color*/
   .top{
    background-color: #00000065 !important;
</style>
    
<style>
/*Top Links Background Color*/
 .links{
     text-align:center;
    background-color: transparent !important;
</style>

<style>
/*Search Users Box Background Color*/
    .top input{
    background-color: #a17164 !important;
</style>

<style>
/*Buttons*/
    button{
    border-radius: 25px 25px 25px 25px !important;
    background-color: #d7b2ae !important;
</style>

<style>
/*Profile Name Background Color*/
    h1{
    text-align:center;
    border-radius: 25px 25px 25px 25px !important;
    background-color: #EDAB95 !important;
</style>

<style>
/*Mood */
    .mood{
    text-align:center;
    border-radius: 25px 25px 25px 25px !important;
</style>

<style>
/*Contact Heading Background Color*/
    .contact .heading{
    border-radius: 25px 25px 25px 25px !important;
    background-color: transparent !important;
</style>

<style>
/*Contact Box Background Color*/
    .contact{
    background-color: transparent !important;
</style>

<style>
/*Interests Section/Social Links Heading Background Color*/
    .table-section .heading{
    border-radius: 25px 25px 25px 25px !important;
    text-align:center;
    background-color: #EDAB95 !important;
</style>

<style>
/*Interests Table & Links Table Background Color*/
    table.details-table{
    background-color: COLOR !important;
    background-image: url('URL') !important;
    background-attachment: FIXED OR SCROLL !important;
    background-repeat: REPEAT OR NO-REPEAT !important;
    background-position: CENTER / LEFT / RIGHT / TOP / BOTTOM !important;}
    
    .profile .details-table td{
    background-color: #00000065 !important;
    background-image: url('URL') !important;
    background-attachment: FIXED OR SCROLL !important;
    background-repeat: REPEAT OR NO-REPEAT !important;
    background-position: CENTER / LEFT / RIGHT / TOP / BOTTOM !important;}
</style>

<style>
/*Blurbs Heading Background Color*/
    .blurbs .heading{
    border-radius: 25px 25px 25px 25px !important;
    background-color: #EDAB95 !important;
</style>

<style>
/*Hide "About Me" & "Who I'd Like To Meet" Headers*/
 .blurbs .section h4{display: none !important;}
</style>

<style>
/*Friends/Comments Heading Background Color*/
    .friends .heading{
    border-radius: 25px 25px 25px 25px !important;
    background-color: #EDAB95 !important;
</style>

<style>
/*Comments Background/border Color*/
    .comments-table td{
    background-color: transparent !important;
    border-radius: 25px 25px 25px 25px !important;
    border-color: transparent;
    }
</style>

<style>
/*Put Your Comments In A Scroll Box*/
.comments-table {
    display: block;
    height: 300px!important;
    overflow-y: scroll;
    border: 0px solid black !important;
    outline: none !important;
    border-radius: 25pxpx;
    padding:5px;
    border-spacing: 4px;
    text-align: center;
}
.comments-table td * {
    border-radius: 25px 25px 25px 25px !important;
}
</style>

<style>
/*Customize Scrollbar*/
    ::-webkit-scrollbar {
    width: 1px;
    height: 10px;}

    ::-webkit-scrollbar-thumb {
    background: rgba(80, 80, 80);}

    ::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);}
</style>

<style>
/*spacehey logo color.
you can change it at https://codepen.io/sosuke/pen/Pjoqqp */
nav img.logo{
    filter: invert(48%) sepia(44%) saturate(766%) hue-rotate(321deg) brightness(76%) contrast(94%);
}
</style>

<style>
/*Footer Links Background Color*/
    footer{
    background-color: #00000075 !important;
</style>

<style>
/*Change Text Colors*/
    .top{
    color: #D48969;}    
    
    main{
    color: #C9705C !important;}
    
    footer{
    color: #FFFFFF;}
</style>

<style>
/*Change Link Colors*/
    a{
    color: #F0B1A3 !important;}
    
    a:hover{
    color: #F08E7E !important;}
    
    .top a{
    color: COLOR !important;}
    
    .top a:hover{
    color: COLOR !important;}
    
    .top a:visited{
    color: COLOR !important;}
    
    .links a{
    color: COLOR !important;}
    
    .links a:hover{
    color: COLOR !important;}
    
    .links a:visited{
    color: COLOR !important;}
   
    .friends-grid p{
    color: #F7A6A7 !important;}

    footer .links a{
    color: COLOR !important;}
   
    footer .links a:hover{
    color: COLOR !important;}
   
    footer .links a:visited{
    color: COLOR !important;}
</style>

<style>
/*Change Interests Section Titles*/
table, th, td {
  border: 0px trans;text-align:center;border-radius: 15px; }

:root {
  --topic1: "Games 🢚";
  --topic2: "Music 🢚";
  --topic3: "Movies 🢚";
  --topic4: "Television 🢚";
  --topic5: "Books 🢚";
  --topic6: "Heroes 🢚";}

.table-section:not(:last-child) .details-table tr td:first-child p{color:transparent !important;text-shadow: white !important;letter-spacing: -100px;}

.details-table tr td:first-child p::after{
color:#C4402E(--links) !important;
letter-spacing:normal !important;
text-shadow: 2px 2px #C4402E !important;
filter: brightness(95%) !important;}

.table-section:not(:last-child) .details-table tr:nth-child(1) td:first-child p::after{
  content: var(--topic1);}

.table-section:not(:last-child) .details-table tr:nth-child(2) td:first-child p::after{
  content: var(--topic2);}

.table-section:not(:last-child) .details-table tr:nth-child(3) td:first-child p::after{
  content: var(--topic3);}

.table-section:not(:last-child) .details-table tr:nth-child(4) td:first-child p::after{
  content: var(--topic4);}

.table-section:not(:last-child) .details-table tr:nth-child(5) td:first-child p::after{
  content: var(--topic5);}

.table-section:not(:last-child) .details-table tr:nth-child(6) td:first-child p::after{
  content: var(--topic6);}
</style>

<style>
/*Follow font instructions at: https://forum.spacehey.com/topic?id=6530  */
/*Change normal text font*/
.body{
font-family: 'Roboto Condensed', sans-serif;}
</style>

<style>
/*Change link font*/
a{
font-family: 'Roboto Condensed', sans-serif;}

a:hover{
font-family: 'Roboto Condensed', sans-serif;}

a:visited{
font-family: 'Roboto Condensed', sans-serif;}
</style>

<style>
/*Change Profile Name Font*/
h1{
font-family: 'Roboto Condensed', sans-serif;}
</style>

<style>
/* this centers your friend space */
    .profile .friends .inner, .profile .blurbs .section h4{
    text-align: center;
    }
</style>

<style>
/* cursors: top URL is the cursor that shows when you hover over links, bottom URL is the main or "resting" cursor */
/* https://cursors-4u.net */
a:hover {    
 cursor: url(https://cur.cursors-4u.net/food/foo-7/foo625.cur), auto;
}
* {
 cursor: url(https://cur.cursors-4u.net/food/foo-7/foo628.cur), auto;
}
</style>

<style>
/* this edits your friends' icons */
.profile .friends .person img:not(.icon) {
border-radius:15px;
box-shadow: 1px 0px 7px 2px rgb(255, 153, 153);
}
</style>

<style>
/* contact icons */
.contact .inner a img {
font-size: 0;
}
.contact .inner a img:before {
font-size: 1em;
display: block
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {
/* add to friends */
content: "🍂"
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
/* add to favorite */
content: "🍂"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* send a message */
content: "🍂"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* foward to friend*/
content: "🍂"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
/* instant message */
content: "🍂"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
/* block user */
content: "🍂"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
/* add 2 group  */
content: "🍂"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* report */
content: "🍂"
}   
</style>

<style>
/*Rounds profile picture*/
    .profile-pic img{
border-radius:25px;}
</style>

<style>
/*Change Header Text (Contact, About Me, Who I'd Like To Meet, etc)*/

/*"Contacting You" Box Title*/
.contact .heading{ font-size:0; text-align:center; }
.contact .heading:before{ content: "⬐Click Here⬎"; font-size:.9rem; font-weight:bold;color:#FFCABC; }

/*"Your Blurbs" Title*/
.blurbs .heading{ font-size:0; text-align:center;}
.blurbs .heading:before{ content: "About Me"; font-size:.8rem; font-weight:bold;color:#610027; }

/*"Your Friend Space" Title*/
.friends .heading{ font-size:0; text-align:center;}
.friends .heading:before{ content: "My Buddies"; font-size:.8rem; font-weight:bold;color:#610027; }

/*"Your Friend Comments" Title*/
.friends#comments .heading{ font-size:0; text-align:center; }
.friends#comments .heading:before{ content: "Leave a Message"; font-size:.8rem; font-weight:bold; }
</style>

<style>
/*Unbold All Links On Your Profile*/
     a{
     font-weight: normal !important;}
     
     a:visited{
     font-weight: normal !important;}
     
     a:hover{
     font-weight: normal !important;}  
     
    .top a{
        font-weight: normal !important;}
    
    .top a:hover{
        font-weight: normal !important;}
    
    .top a:visited{
        font-weight: normal !important;}
    
    .links a{
        font-weight: normal !important;}
    
    .links a:hover{
        font-weight: normal !important;}
    
    .links a:visited{
        font-weight: normal !important;}
    
    .profile a{
        font-weight: normal !important;}
    
    .profile a:hover{
        font-weight: normal !important;}
    
    .profile a:visited{
        font-weight: normal !important;}
    
    footer a{
        font-weight: normal !important;}
    
    footer a:hover{
        font-weight: normal !important;}
    
    footer a:visited{
        font-weight: normal !important;}
    
    .supporter{
    font-weight: normal !important;}
</style>

<style>
/*contact box border*/
    .contact{
border: 1px transparent !important;
border-radius: 15px;}
</style>

<style>
/* for this box, you can add an image of your choice. it's right under the contact box. */
.url-info{
    background: url(https://orig06.deviantart.net/1ce2/f/2016/023/1/3/pixel___vegan_intro_by_firstfear-d9p2e8l.gif) no-repeat;
    background-position: center;
    background-size: 100%!important;
    border: var(--borders)!important;
    border-radius: 15px;
    height: 150px;}

.url-info p{
    opacity: 0.0;}
</style>

<style>
/*removes blue boxes around the interests/links table*/
body  
    {
--lighter-blue: none;
}
</style>

<style>
/*Centering Text and Images in Blurbs Section*/
.blurbs .inner{

text-align: center !important;

}
</style>

<style>
/* the color of the number count of your friends/comments */
    .count {
        color: #F7A6A7;
    }
</style>

<style>
/*Interests and links table header text color*/
    .profile .table-section .heading h4 {
        color: #610027;
    }
</style>

<style>
/*Hides "XXX is your friend" Box*/
.profile-info{display: none !important;}
</style>

<style>
/*Hides Blogs*/
.blog-preview{display: none !important;}
</style>

<style>
/*Change "Online Now" Icon*/
.online{

content: url(https://cdn.discordapp.com/attachments/914867641980706858/965503839987978251/tumblr_mrfnlr7fnL1rfjowdo1_500.gif?width=50&height=50) !important;
    height: 50px;
    width: 50px;
}
</style>

<style>
.image {
    background: url('https://cdn.discordapp.com/attachments/914867641980706858/965498000732463144/Untitled-1.png') no-repeat;
    background-size: 100%!important;
    position: fixed;
    right: 0px;
    bottom: 0px;
    height: 20px;
    width: 145px;
    z-index: 1000;
    opacity: 1;
}
@media (max-width: 600px) {
.image{display:none;}
}
</style>
<div class="image"></div>

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

KimDestructo	1768606117 Using! Report Comment
Gilmix ☘	1765911079 Using >:D Arigato!! Report Comment
Kitty	1765838984 using!! Report Comment
Guy Parcival	1765299386 This is a cute, I'll definitely be using, thanks C: Report Comment
Kurumii	1764412222 using;> Report Comment
SammyBoom★🎸🎧⋆｡ °⋆𖦹✮₊ ⊹	1760656785 OMG USING Report Comment
stevie	1755113723 USING Report Comment
meri )╥ ω ╥(	1754914558 using!! Report Comment
‧₊˚✧ Chloe ✧˚₊‧	1752542957 Using!! Report Comment
fiji	1751053408 usinggg Report Comment
ᰔ𝚂𝚑𝚒𝚛𝙾˙⊹܀	1748057551 Using!! Report Comment
Viltrin	1747265721 Using Report Comment
Emma?	1745713983 Usando! Report Comment
jonhata	1743856828 Using Report Comment
Maye	1741172962 using Report Comment
walotboy22	1739296510 using!! Report Comment
urfavtoast	1738691267 usiinngggg Report Comment
jistar	1738181107 using<33 Report Comment
leo0_0vermo	1737863565 using Report Comment
misty	1735427639 using!! Report Comment