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

⋆~˚Looking4_Basil･ﾟ~⋆	1712362895 Usingggg! Report Comment
Leaf	1712241913 Using Report Comment
Ace(●´ω｀●)	1711929015 Using!! Report Comment
saiki	1711261127 Using! <33 Report Comment
_Carol_Gacha_	1709323064 Usando Report Comment
Rab.	1708471975 using >-< Report Comment
brokeassweeb (soff)	1707454846 using!! ^^ Report Comment
Octi	1706372398 using :] Report Comment
Jhez	1705944591 Using :D Report Comment
icedart21	1705932263 Using it! It's very pretty Report Comment
Soobin	1705881456 Usando <3 Report Comment
mysticalien	1705871199 usando <3 Report Comment
Vanrouge	1705852508 Usando :› Report Comment
spiraling	1704837605 using Report Comment
spiraling	1704837597 using Report Comment
dari<33	1704361458 using !! :33 Report Comment
honey <3	1703655105 using omg !!! Report Comment
RiviR	1702140558 Layout is fixed and should be good to go now! Report Comment Oh, thank you so much, your layout its very nice, and thanks for fixing it. Now I know whats the problem with other layouts i've had. good luck and have a nice day <3 by AlexNotone; 1702282419; Report
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 Hi! I can definitely look into it and let you know! by RiviR; 1702040411; Report Looks like Imgur for whatever reason stopped working as an image host! It’s a pretty simple fix and I can work on it today to get it back to what it was! by RiviR; 1702040836; Report It is completely fixed now! Should be all good to go! by RiviR; 1702140533; Report
𝒕𝒊𝒓𝒆𝒅 𝒑𝒆𝒂𝒄𝒉	1694252849 This is my fave layout but i not longer works properly :( Report Comment It is fixed now if you would like to use it again! by RiviR; 1702140578; Report