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.imgur.com/0N916yd.gif");
     --bottom-background:url("https://i.imgur.com/sagKnpe.png");
     --blast-off-bronze: #bd7869ff;
     --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:"Aesthetics";
     --topic-4:"Flowers";
     --topic-5:"Seasons";
     --topic-6:"Pets";
     /*this is where you can edit the online icon*/
     --online-icon: url("https://i.imgur.com/eAIS8L5.gif");
     /*this is where you can edit the supporter tag*/
     --supporter: url("https://i.imgur.com/RfapVgR.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;
	display: block;
	position: fixed; 
	top: 0; 
	left: 0; 
	z-index: 100;
	background-image: url('https://i.imgur.com/6PxSo12.gif');
	background-size: cover;
	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.*/
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 custom 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: contain;
    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 sextions 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:300px;
   Overflow:scroll;
}
.comments-table .report{
    font-size:11px!important;
}
.comments-table .report .icon{
    content: url(https://i.imgur.com/0BTdk8p.png);
    height:18px;
    width:10px;
}
.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:contain;
}
.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:contain;
    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{
content:var(--online-icon);
height:20px;
width:20px;
}
/*this is where the supporter image is changed*/
.supporter img{
font-size:0;
} 
.supporter:before{
display:inline-block;
width:15px;
height:15px;
margin-right:5px;
content:"";
background:var(--supporter); no-repeat 0 0;
background-size:100%;

}
}
.supporter 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 50 comments ( View all | Add Comment )

AlexNotone	1698966087 Hello does anybody know why the background doesnt work? is it a code problem? its not the first time it happends. Please if someone knows why this happends, tell asap, because i keep seeing this nice layout but the background its white instead of the designed gif Report Comment
Castrious	1698565569 using! c: Report Comment
𝒕𝒊𝒓𝒆𝒅 𝒑𝒆𝒂𝒄𝒉	1694252849 This is my fave layout but i not longer works properly :( Report Comment
Aster	1691811791 might use :] Report Comment
aqwa	1691266760 Using :) Report Comment
frann (taylor's version)	1690966257 using! Report Comment
kay.	1687236745 using :D Report Comment
venusstar	1686675133 very cute! using <3 :) Report Comment
Numa Mako	1683852334 Hey!! I love it and wanna use it but none of the background images are being displayed :c Can you check it or help me with it? Report Comment I'm having the same issue, I can't find anything that will fix it :( If we could have assistance with this that would be lovely <3 by ♡Charmeine♡; 1684927139; Report same issue here by frann (taylor's version); 1690966497; Report
Mira	1683404144 cute! Report Comment
! (forzens) street <3	1681440857 super cute<3 Report Comment
♡Jazz♡	1681181991 This is so cute Report Comment
veera	1680540630 i love this one!!!<3 Report Comment
Kay.Lives.Life (　＾ω＾)	1680124571 EEEEEEE USING!! Report Comment
mellkyway	1679977337 This is so adorable! Will def be using :) Report Comment
Bee Pierucci	1679740819 hiii! this is so cute!! im gonna use it :) Report Comment
fluorescent ella	1675042743 Love it!!! Def using <33 Report Comment
mikrofon	1674744998 so cool Report Comment
yinny	1674667893 using!! tyyy! Report Comment
𝒕𝒊𝒓𝒆𝒅 𝒑𝒆𝒂𝒄𝒉	1674528640 Love it~ Report Comment