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

ᰔ𝚂𝚑𝚒𝚛𝙾˙⊹܀	1748057551 Using!! Report Comment
Rin	1747265721 Using Report Comment
Mile	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
Shaky	1734915133 usando Report Comment
dr.pepperaddict	1729378810 USINGGGG Report Comment
ザ・フール	1727581942 using :) Report Comment
☆꧁Mirokoshi꧂☆	1723709553 Using :D Report Comment
Akira	1723552228 using tyy Report Comment
zeimi_	1721580091 Using :DD Report Comment
nana	1719830774 using!!) Report Comment
...GH(o)ST...	1719172583 using :] Report Comment
rcks	1717170332 using Report Comment
divxs	1715903215 Using!! Report Comment