Pixel Cottagecore

Tags: relaxing, gif, pretty, spring, cottagecore, moving, intro, pixel, green, nature

Description:

a simple yet relaxing cottagecore themed layout featuring pixel art. Green is a main color within this layout with white, blue, and rose colored accents. This layout is designed to be easy to read and simplistic while still attaining a unique sense of liveliness through the use of gifs. If you like relaxing cottage vibes then this is the layout for you! Check out this profile for a sample of what to expect!

Preview:

click on the image for a larger preview

Code:

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

<style>
/*this gets the font for mobile users*/
@import url('https://fonts.googleapis.com/css2?family=Halant:wght@300;400;500;600;700&family=Nunito+Sans: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');
/*change things around in this section to modify backgrounds, colors, fonts, and the curve*/
:root{
     --background:url("https://i.ibb.co/Zh5ytj1/D54-F6-CC1-A09-E-4016-AD9-F-91-B6810-F1-A92.gif");
     --bottom-background:url("https://i.ibb.co/gwwM7ZF/istockphoto-1372585970-612x612-removebg-preview-1.png");
     --blast-off-bronze: #a86d68;
     --army-green: #565e35ff;
     --dark-sky-blue: #92b5c9ff;
     --bone: #dcd8cdff;
     --grullo: #a3916bff;
     /*this next one is for the profile background. change the .8 to a anything from 0-1 to change the transparency*/
     --profile-color: rgba(86, 94, 53, .8);
     /*this next one is for the header background. same deal as the profile color for transparency*/
     --header-color: rgba(56, 64, 43, .6);
     /*this is for the navigation bar background color.*/
     --nav-color: rgba(46, 54, 13, .9);
     /*this is for the footer background color*/
     --footer-color:rgba(86, 94, 53, .3);
     /*this changes the background of your table of intersts and comments*/
     --table-background: rgba(200, 196, 205, .16);
     --border-color: rgba(116, 154, 103, .8);
     --border-color2: rgba(116, 154, 103, .2);
     --header-color2: rgba(56, 64, 43, .4);
     --curve:3px;
     /*here are the customizable topics for the interests section*/
     --topic-1:"General";
     --topic-2:"Songs";
     --topic-3:"Flowers";
     --topic-4:"Anime";
     --topic-5:"Pets";
     --topic-6:"DnD";
     /*this is where you can edit the online icon*/
     --online-icon: url("https://i.ibb.co/TLL5wWF/ezgif-1-5e79882531.gif");
     /*this is where you can edit the supporter tag*/
     --supporter: url("https://i.ibb.co/X3bXpz6/d5uvzqa-ecbc8eef-3ea7-4cbe-a2a7-47ed42eed203.png");
     /*this is the where you can edit the fonts*/
     --headers:'Halant', serif;
     --body:'Nunito Sans', sans-serif;
     

      
  }
/*this is for the intro animation. Cory is the one who came up with this fantastic css code so go give them a follow if you like this! He has a ton of other super helpful codes and their profile is overall one of the best on spacehey imo https://spacehey.com/cory*/
body:before {
	content: " ";
	height: 100vh;
	width: 100vw;
	position: fixed; 
	top: 0; 
	left: 0; 
	z-index: 100;
	background-image: url('https://i.ibb.co/n6wzmpm/output-onlinegiftools.gif');
	background-size: 100%;
	background-repeat: no-repeat;
background-position:center;
	animation: yourAnimation 3s ease 0s 1 normal forwards;
	pointer-events: none;
}
@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} }
  /*this next bit is the background behind the main profile.*/
body, .bodycontent{
    background:var(--background);
    background-attachment: fixed!important;/*this is what allows the background to scroll with you. change "fixed" to "scroll" if you want this feature turned off*/
    background-size: 100%; /*fits the background to the device being used. Mobile phones will just have a repeating background. if you don't mind it looking stretched out when using phones, add a 100% right before the semicolon.*/
    border-color:#00000000;
    border-width:55px; 
    border-style:dotted
}
/*now for the rest of the profile.*/
/* Start https://www.cursors-4u.com */ * {cursor: url(https://cur.cursors-4u.net/food/foo-5/foo436.cur), auto !important;} /* End https://www.cursors-4u.com */
main{
    background:none;
    padding-top:0px!important;
}
.profile{
    background-color:var(--profile-color)!important;
    /*delete the astriskes and slashes in the next line of code if you want a cute flower patch at the bottom of your profile. I dont like it but I'm leaving it in here in case anyone wants to use it*/
    /*
    background:var(--bottom-background) bottom no-repeat;
    background-size: 100px;
    background-repeat: repeat-x;
    */
    padding-top:none!important;
    border: groove 10px;
    border-color:var(--bone);
    border-top:none;
}
nav ul{
    background-color: var(--nav-color)!important;
    border: groove 10px;
    padding-top:none!important;
    border: groove 10px;
    border-color:var(--bone);
    border-top:none;
    border-bottom:none;
}
.top{
    background-color: var(--profile-color)!important;
     padding-top:none!important;
    border: groove 10px;
    border-color:var(--bone);
    border-bottom:none;
}
footer{
    background:var(--footer-color)!important;
}
p, .count{
    color:var(--bone);
    font-family: var(--body);
}
a{
    color:var(--dark-sky-blue);
    font-family: var(--body);
}
.friends-grid p{
    color:var(--grullo)!important;
text-align:center!important;
}
.friends-grid img{
    border-radius:500px;
    box-shadow: 3px 3px var(--army-green);
    object-fit: cover;
    height:100px;
    width:100px;
}
h1, h2, h3, h4, h5{
    font-family: var(--headers);
    color: var(--blast-off-bronze);
    text-align: center!important;
}
td{
    background: var(--table-background)!important;
}
.section h4{
    color:var(--bone)!important;
}

.blurbs .inner .section:nth-child(1) h4{ 
    font-size:0; 
}

.blurbs .inner .section:nth-child(1) h4:before{ 
    content: "Introductions"; /* put your own "about me" header here*/
    font-size: 18px;
    
}
.blurbs .inner .section:nth-child(2) h4{ 
    font-size:0; 
    
}
.blurbs .inner .section:nth-child(2) h4:before{ 
    content: "Foraging for Friendships"; /*put your own "who id like to meet" header here*/
    font-size: 18px;
    
}
.blurbs .heading{
    display:none;
}
.contact a{
    font-size: 12px;
}
/* this next bit hides the URL info*/
.profile .url-info{
    display:none;
}
/*this gives everything the border and background*/
.contact, .mood, .table-section, .blog-preview, .friends, .profile .blurbs .inner, .profile h1{
    background:var(--header-color)!important;
    border:solid var(--border-color) 2px!important;
    border-radius: var(--curve)!important;
}
/*this is just some fixing things*/
.contact .heading, .friends .heading, .profile .table-section .heading, .profile .friends p{
    background: none!important;
    text-align: center!important;
}
.blog-preview h4{
    background-color:var(--header-color2);
}
.blog-preview, .mood{
    text-align: center;
}
/*this next bit fixes the friends and comments sections from being off center*/
DIV.friends:nth-child(3){
    text-align:center;
}
.profile .friends .heading{
    padding-left:50px;
}
#comments .heading{
    padding-left:0px!important;
}
table.comments-table p{
    text-align:left!important;
}
#comments, .contact{
    border-top:none!important;
    border-bottom:solid 2px var(--slate-gray)!important;
    border-radius: var(--curve);
    border-top-right-radius: 0px!important;
    border-top-left-radius: 0px!important;
}
.mood, .friends{
    border-bottom:0px!important;
    border-bottom-left-radius: 0px!important;
    border-bottom-right-radius: 0px!important;
}
.contact .heading, .profile .friends .heading h4{
    background-color:var(--header-color2)!important;
}
.profile .friends .heading h4{
    border-radius:3px!important;
}
.profile .friends .heading{
    padding-top:5px;
}
#comments{
   Height:400px;
   Overflow:scroll;
}
.comments-table .report{
    font-size:11px!important;
}
.comments-table .report .icon{
    content: url(https://i.ibb.co/x6Lv8SW/isolated-cute-white-spotted-red-mushroom-in-pixel-art-free-png.webp);
   
}
.comments-table td:last-child img{
    height:12px;
    width:12px;
    Border:0px solid!important;
    Border-radius:0px!important;
}
.comments-table td{
    background-color:var(--header-color2)!important;
}
.comments-table td:first-child img{
    height:90px;
    width:90px!important;
    border-radius: 500px!important;
    Object-fit:cover;
}
.comments-table{
    border-radius:var(--curve)!important;
    border:none;
}
.comments-table td{
    border-color:white;
}
.comments-table p{
Font-size:15px!important;
}
.comments-table td:first-child p{
Font-size:15px!important;
text-align: center!important;
}
.comments-table tr:first-child td:first-child{
    border-top-left-radius: var(--curve);
}
.comments-table td:first-child{
    font-size:15px;
    text-align:center;
Padding:15px;
}
.comment-table tr:last-child img{
Border-radius:0px!important;
Border:none!important;
}
.comments-table tr:first-child td:last-child{   
    border-top-right-radius:var(--curve)!important;
}
.comments-table tr:last-child td:first-child{
    border-bottom-left-radius: var(--curve);
}
.comments-table tr:last-child td:last-child{
    border-bottom-right-radius: var(--curve);
}

/*this next string makes the profile photo into a circle and fits photos into it*/
.profile-pic img{
    height:160px!important;
    width:160px!important;
    border-radius:500px;
    border:var(--border-color) 2px solid;
    object-fit:cover;
    overflow:hidden;
}
.details{
    background-color:var(--header-color);
    border:solid var(--border-color) 2px;
    height:160px;
    border-top-left-radius: 80px;
    border-bottom-left-radius: 80px;
}
/*this next bit is hides the origional interest labels*/
.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{
  letter-spacing:normal !important;
  Text-shadow: 2px 2px var(--bone);
}
/*and this is what customizes them. it can easily be done in the root*/
.table-section:not(:last-child) .details-table tr:nth-child(1) td:first-child p::after{
  content:var(--topic-1);
}
.table-section:not(:last-child) .details-table tr:nth-child(2) td:first-child p::after{
  content:var(--topic-2)!important;
}
.table-section:not(:last-child) .details-table tr:nth-child(3) td:first-child p::after{
  content:var(--topic-3)!important;
}
.table-section:not(:last-child) .details-table tr:nth-child(4) td:first-child p::after{
  content:var(--topic-4);
}
.table-section:not(:last-child) .details-table tr:nth-child(5) td:first-child p::after{
  content:var(--topic-5);
}
.table-section:not(:last-child) .details-table tr:nth-child(6) td:first-child p::after{
  content:var(--topic-6);
}

/*this is where the online image is changed. it looks funky from your perspective with the edit profile link, but it looks fine from other people's point of view*/
.online img{
font-size: 0;}
.online:before{
display:inline-block;
width:15px;
height:25px;
content:"";
background:var(--online-icon); no-repeat 0 0;
background-size:100%; }

/*This changes the online text color. It can be easily changed in the root.*/
.online {
    Color:var(--blast-off-bronze);
}
.supporter img{
font-size: 0;}

.supporter:before{
display:inline-block;
width:15px;
height:15px;
content:"";
background:var(--supporter); no-repeat 0 0;
background-size:100%;

}
.awards a{
    Color:var(--blast-off-bronze);
}
.mood{
    text-align:center;
padding-left:3px;
}

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

s★mr★r★_zaza	1742880051 Usandoooo Report Comment
AEHT	1742838663 using!! Report Comment
Rere	1742740920 Using >_< Report Comment
Lidia^^	1742503663 usinggg Report Comment
wormpi	1741920776 using!!! Report Comment
natty	1741751604 using!! thank you <3 Report Comment
I want something else...	1741666659 using ty!! <3 Report Comment
kawa206	1740427383 using!! ty!! Report Comment
Jessie	1740249774 using! Report Comment
Princess Luna ☀	1739491035 This might be weird but in my intro it say " About me: background-position:center; animation: yourAnimation 1s ease 1s 1 normal forwards; pointer-events: none;} @keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } background-position:center; animation: yourAnimation 1s ease 1s 1 normal forwards; pointer-events: none;} @keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} " How could I fix this because I love this pf? Report Comment FIRGURED THAT OUT BUT NOW THE BACKGROUND WONT WORK :( by Princess Luna ☀; 1739544258; Report figured it out :0 by Princess Luna ☀; 1739659235; Report
fishie 🐠	1738712132 usingg <33 Report Comment
𝖗𝖆𝖜𝖗𝖗𝖗	1738365961 using!! Report Comment
dejei$ter	1738196056 usinggg Report Comment
｡𖦹°‧ katx ⋆˚࿔	1737696915 usinggggg Report Comment
Ohnetter	1737417148 using :) Report Comment
p1nkpxnther	1737401549 using Report Comment
Whimsi_Loo	1737368222 using! Report Comment
Gitthenya	1736375806 using!! Report Comment
alex_trex	1735943305 Im going to use this one, thank you so much for explaining what is what if it makes sense, I plan to change the background and this layout is so intuitive and helpful<33 Report Comment
☽☾ MURDER SAPPHIC ☽☾	1735422219 using! Report Comment