Midnight Lo-Fi

Tags: cute, lofi, calm, relaxing, layout, gif, midnight, 8bit, retro, colorful

Description:

A calm and relaxing layout that offers a dark Lo-Fi aesthetic to make your profile a chill and welcoming place. For a real profile example, click here. If you use this please give this some Kudos and/or leave a comment. Credit is always appreciated and feel free to follow me for more layouts

Code:

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

<style>

@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap');    
:root{
    --space-cadet: #22223B;
    --independence: #4a4e69;
    --heliotrope-gray: #9a8c98;
    --silver-pink: #c9ada7;
    --isabelline: #f2e9e4;
    --tuscany: #C0969B;
    --rich-black: #000D22;
    --font-family: 'Nunito', sans-serif;
    --curve: 4px;
    /*change these to imput your own interest topics*/
    --topic1: "➕general";
    --topic2: "➕songs";
    --topic3: "➕books";
    --topic4: "➕movies";
    --topic5: "➕pets";
    --topic6: "➕heros";
    /*edit the next three to make your own headers*/
    --contact: "Add me";
    --links: "Follow me";
    --topics: "Meet me";
}
    

body, .bodyContent  { 
 background-image: url("https://i.imgur.com/svP2e4X.gif");
 background-repeat:repeat;
 background-size: 100% 100%;
 background-attachment:scroll; 
 border-color:#00000000; 
 border-width:35px; 
 border-style:dotted;
 filter: brightness(.8);
}
.contact {
background-color:var(--independence);
  border-radius: 25px;
  border-color:#FFFFFF!important;
  background-position:right, bottom;
  background-size: 100% 100%;
  background-repeat: repeat-y;
  padding: 20px;
  width: 200px;
  height: 150px;
}
.online{
    content:url("https://i.imgur.com/7O3q7ds.gif");
    height: 40px;
    width: 40px;
}
.supporter img{
    font-size:0;
    
} 
.supporter:before{
    content:url("https://i.imgur.com/WMOOC54.gif")!important;
    
}
.contact .inner img{
    filter: grayscale(.7);
}
.profile{
    background-color:var(--space-cadet);
    
}
h1{
    color:var(--tuscany);
    text-shadow:5px 5px var(--rich-black);
}
url-info{
    display: none!important;
}
h3, h4, h5, url-info{
    color:var(--silver-pink)!important;
}
p{
    color:var(--isabelline)!important;
}
a{
    color:var(--heliotrope-gray)!important;
}
.heading{
    background:none!important;
}
.blurbs, .blog-preview,.friends, .table, .table-section{
    background-color:rgba(10,13,20,.40) !important;
    border-radius: var(--curve);
}
.table-section{
    border:none !important;
    border-radius: var(--curve) !important;
    
}
.heading{
    background:none !important;
    padding-bottom: none !important;
    
}
main{
    padding-top: 0px;
    border: 4px ridge var(--space-cadet);
    border-top: 0px;
    padding-bottom: 0px;
}
.top{
    border: 4px ridge var(--space-cadet);
    border-bottom: 0px;
}
footer{
    background-color:var(--space-cadet);
    filter: opacity(.75);
    border: ridge 4px var(--space-cadet);
}
.profile-pic img{
    border-radius: 500px;
    box-shadow: 5px 5px var(--rich-black);
}
nav ul{
    border-style: none ridge;
    border-color: var(--space-cadet);
    border-width: 4px;
}
.table-section:not(:last-child) .details-table tr td:first-child p{color:transparent !important;text-shadow: none !important;letter-spacing: -100px;}

.details-table tr td:first-child p::after{
  color:var(--isabelline) !important;
  letter-spacing:normal !important;
   text-shadow: 	2px 2px black !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);
}
td {
    background-color:rgba(0, 0, 0, 0.4) !important;
}
.friends, .count, a p{
    color:var(--isabelline) !important;
    text-align:center !important;
}
.friends-grid img{
    border-radius:2 !important;
    filter:grayscale(60%) !important;
    border: solid 2px;
    border-color:var(--space-cadet);
}
.mood{
    text-align: center;
    background-color: rgba(0, 0, 0, .3);
    border-radius: var(--curve);
}
h1, h2, h3, h4{
    font-family: var(--font-family);
    font-style: oblique;
}
p, a{
    font-family: var(--font-family);
    font-weight: 300px;
}
.friends, .count{
    font-family: var(--font-family);
}
h1{
    text-shadow: var(--rich-black) 5px 5px;
}
nav .top{
    background-image: url("https://i.imgur.com/uAc4MFC.gif");
    background-size: 100% 100%;
    
}
nav ul{
    background-color: #1A1A2E!important;
}
.profile-pic img{
    filter: grayscale(.8);
    border: 2px solid var(--isabelline);
}
.blurbs .heading{
    display: none;
}
.section h4{
    color: var(--silver-pink)!important;
}
/*delete the next two lines to reveal the about me header*/
.blurbs .inner .section:nth-child(1) h4{ 
    font-size:0; 
}
.blurbs .inner .section:nth-child(1) h4:before{ 
    content: ""; /* put your own "about me" header here*/
    font-size: 0;
    
}
/*delete the next two lines to reveal the "who id like to meet" header*/
.blurbs .inner .section:nth-child(2) h4{ 
    font-size:0; 
    
}
.blurbs .inner .section:nth-child(2) h4:before{ 
    content: ""; /*put your own "who id like to meet" header here*/
    font-size: 0;
    
}
.blog-preview{
    text-align: center;
}
.w-40 .table-section:last-child .heading h4{
    font-size:0px;
    
}

.w-40 .table-section:last-child .heading::before{
    content: var(--links);
    font-family: var(--font-family) !important;	
    color: var(--silver-pink) !important;
    font-weight: bold !important;
    
}

.w-40 .table-section:nth-last-child(2) .heading h4{
    font-size:0px;
}

.w-40 .table-section:nth-last-child(2) .heading::before{
    font-family: var(--font-family);
    content: var(--topics);
    font-weight: bold!important;
    color: var(--silver-pink);
}

.w-40 .contact .heading h4{
    display:none;
}

.w-40 .contact .heading::before{
    content: var(--contact);
    font-family: var(--font-family) !important;
    font-weight: bold !important;
    color: var(--isabelline);
    
}
#comments{
    overflow:auto;
    Height:300px;
    
}
#comments td{
    border:solid .75px var(--independence);
}
</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 13 of 13 comments ( View all | Add Comment )

pollyaa	1718526886 using! Report Comment
aria [she/her]	1715770338 using 🎀🎀 Report Comment
Ropender	1709936238 using! I rlly love it!! Report Comment
Nonya ୨୧	1701369211 using! i love this layout so much! <3 Report Comment
gingerslicer	1678911948 such a chill palette! <3 Report Comment
yinny	1674667722 will be using! thank you!! Report Comment
GoofySillyMills	1664138996 Using!! Thank you for your hard work, I love it sm!! Report Comment
Bethy	1636775971 This is a beautiful background! Thank you!! Report Comment
Relish Ubiquitous	1622785657 Very awesome theme! (∪ ◡ ∪) Report Comment
Angel Dawn	1615931860 this layout is STUNNING! thanks so much for putting this out into the world. Report Comment
Saeyen	1613367988 Loving this layout! Fits the mood just right! Report Comment
kota	1613015342 hey im using this layout ! it's so nice looking, thank you for making it:) Report Comment Thank you so much! I’m glad you enjoy it :) by RiviR; 1613016924; Report
差不多🌻	1613009368 banging work as usual! Can I Suggest a 尺乇匚ㄖ尺ᗪ－丂卄ㄖ卩　丨几　ㄒㄖҜㄚㄖ，　几ㄩﾌ卂乃乇　／　丂ㄒㄩᗪ丨ㄖ　Ꮆ卄丨乃ㄥ丨 vibes theme next? Report Comment Working on Studio Ghibli now! I’m already loving how it’s turning out and I can’t wait to post it when I’m done! by RiviR; 1613016872; Report Just posted a studio Ghibli themed layout! by RiviR; 1613037729; Report