Stardew Valley Layout

Tags: video games, gaming, games, stardew valley, pixel, art

Description:

This is a layout I made using some assets from Stardew Valley, modified to fit the needs for SpaceHey.

I've made the sections easily hideable by giving you custom root variables at the top of the code.

This layout does play audio from YouTube when the page loads (it's the Fall music from the Stardew Valley OST). If you do not want this you can remove the iframe element at the very bottom of the code.

If you have any questions feel free to drop a comment and I'll be happy to help!

Preview:

click on the image for a larger preview

Code:

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

<style>
@import url('https://fonts.googleapis.com/css2?family=Silkscreen&display=swap');

:root {
  /*change any of the below to "none" to hide the element.
  Change to "block" to display the element*/
  
  --interests: block;
  --links: block;
  --blurbs: block;
  --AboutMe: block;
  --WhoIdLikeToMeet: block;
  --comments: block;
  --friends: block;
  --StardewValleyLogo: block;
  --JunimoGifs: block;

  /*change any of these to "none" to hide the element
  Change to "table-row" to display*/
  
  --general: table-row;
  --music: table-row;
  --movies: table-row;
  --television: table-row;
  --books: table-row;
  --heroes: table-row;
  
  
  /* If you would like to update any of the images used in the layout you can change them here */

  --bodyBackground: url(https://i.ibb.co/5Lv00F6/wp6659180.png);
  --border1: url(https://i.ibb.co/MkKfRZz/stardew-border.png);
  --border2: url(https://i.ibb.co/SPRQDDL/stardew-border2.png);
  --scroll: url(https://i.ibb.co/rdZ1B09/stardew-scroll-1.png);
  --commentPhoto: url(https://i.ibb.co/ZhjP7Bb/stardew-commentpic.png);
  --commentBody: url(https://i.ibb.co/g3HZJMZ/stardew-comment.png);
  --mainlogo: url(https://i.ibb.co/Wtp4yqp/stardewlogo.png);
  
  --lightbrown1: #fad793;
  --brown1: #d67e4c;
  --blue1: #69baec;
}



div.col.w-40.left > div:nth-child(6){ display: var(--interests) }
div.col.w-40.left > div:nth-child(6) > div.inner > table > tbody > tr:nth-child(1){ display: var(--general); }
div.col.w-40.left > div:nth-child(6) > div.inner > table > tbody > tr:nth-child(2){ display: var(--music); }
div.col.w-40.left > div:nth-child(6) > div.inner > table > tbody > tr:nth-child(3){ display: var(--movies); }
div.col.w-40.left > div:nth-child(6) > div.inner > table > tbody > tr:nth-child(4){ display: var(--television); }
div.col.w-40.left > div:nth-child(6) > div.inner > table > tbody > tr:nth-child(5){ display: var(--books); }
div.col.w-40.left > div:nth-child(6) > div.inner > table > tbody > tr:nth-child(6){ display: var(--heroes); }
div.col.w-40.left > div:nth-child(7) { display: var(--links); }
.blurbs { display: var(--blurbs); }
.blurbs > div.inner > div:nth-child(1) { display: var(--AboutMe); }
.blurbs > div.inner > div:nth-child(2) { display: var(--WhoIdLikeToMeet); }
#comments{ display: var(--comments); }
.friends { display: var(--friends); }
.profile-info { display: var(--StardewValleyLogo); }  


.blog-preview::after { 
  display: var(--JunimoGifs); 
  background-image: url('https://media.tenor.com/TEDBFZ0I7uYAAAAi/junimo-stardew-valley.gif');
  background-repeat: no-repeat;
    background-size: 200px auto;
    width: 200px; 
    height: 75px;
  	padding: 0;
  	margin: 0 auto;
    content:"";
}

a {
 color: #FFF; 
}

.top, footer{
 background: rgba(0,0,0,0.5) !important; 
  color: #FFF;
}

.links{
  background: var(--blue1) !important;
}

body{
 font-family: 'Silkscreen', cursive; 
  background-image: var(--bodyBackground);
  background-size: fit;
	background-repeat: no-repeat;
  background-attachment: fixed;
}

.blurbs, .friends, .contact, .profile-pic, .url-info, .table-section{
  padding: 25px;
	    border-image: var(--border1) 80 fill repeat !important;
    border-image-width: 48px !important;
  
}

.comments-table{
  border: none;
}

.comments-table a{
 color: #000; 
}

.comments-table td{
 background: transparent; 
}

.comments-table td:nth-child(odd){
  padding: 25px;
	    border-image: var(--commentPhoto) 80 fill !important;
    border-image-width: 25px !important;
}

.comments-table td:nth-child(odd) p{
  padding: 5px;
  background-image: var(--scroll);
  background-size: 100% 100%;
  text-align: center;
}

.comments-table td:nth-child(even){
    padding: 25px;
	    border-image: var(--commentBody) 80 fill !important;
    border-image-width: 25px !important;
}

#comments{
   padding: 25px;
	    border-image: var(--border2) 80 fill repeat !important;
    border-image-width: 48px !important;
}



.col.w-40.left h1{
	background-image: var(--scroll);
  background-size: 100% 100%;
  text-align: center;
  
}

.contact{
 font-size: 10px; 
border-radius: 25px;
}

.profile-pic img{
  padding: 10px;
  height: 100%;
}

.heading{
	background: transparent !important;
}

.mood p{
 font-size: 10px; 
}

main{
 background: transparent; 
}

.details-table p{
 font-size: 10px; 
}

.details-table td{
 padding: 0px 5px; 
}

.details-table td:nth-child(odd){
 background: transparent;
  color: black;
}

.details-table td:nth-child(even){
 background: rgba(255,255,255,0.5);
  color: #712f18;
  font-size: 10px;
}

.profile-info{
  height: 200px;
  background-image: var(--mainlogo);
  background-size: 100% 100%;
  text-align: center;
  color: transparent;
  border: none;
}

.friends-grid{
 display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: top !important;
  flex-wrap: wrap;
}

.person{
  width: 20% !important;
  margin: 5px;
  background: transparent;
  display: flex !important;
  flex-direction: column;
  justify-content: center !important;
  align-items: center !important;
}
.person img{
 width: 100%; 
}
.person p{
  font-size: 10px !important;
  text-align: center !important;
  color: #000 !important;
}

.table-section a{
   color: #000 !important;
}


</style>

<iframe width="0" height="0" src="https://www.youtube.com/embed/Qd96mpRuHtQ//?&;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="" loading="lazy">
</iframe>

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

betty	1763822544 using thx!! Report Comment
Altana	1762931585 I love this layout so much! OMG (*≧∇≦)ﾉ Using! ♡ Report Comment
♡𝒜𝓁𝓁 𝓂𝒾𝓃𝑒 - 𝓔𝓵𝓵𝓲𝓸𝓽𝓽’𝓼 𝔀𝓲𝓯𝓮♡ (ESP)	1760067632 BROOO IT’S LITERALLY WHAT I NEEDED, I WAS DYING TRYING TO MAKE MINE FROM SCRATCH, I’M DEFINITELY USING THIS AHHHHHHH Report Comment
jin—bug	1757905498 using! Report Comment
Floortje	1751998364 This is literally so cool! I was thinking that a stardew layout eould slap but this is on another level! Report Comment
puddleglum	1743477636 using :-) Report Comment
Imie	1739041610 using! Report Comment
peytonn 🌿	1738420065 my writing is cursive and I can only get it to the regular font I don't know how to fix it Report Comment
Ash	1734136978 using!! Report Comment
Max	1733890383 Using Report Comment
GabriELLIe	1727806105 love this Report Comment
Katarina :3	1727164916 Using !! Report Comment
Ailares	1725002455 using!! Report Comment
Oliver/Vex	1724658801 using :D Report Comment
Kitty	1722315151 using Report Comment
Makkity	1719428692 -using- Report Comment
Bugz_World	1719297070 using Report Comment
KenKen	1716331353 using! Report Comment
Tishina vo mgle	1715389074 Использую) Report Comment
Yami	1714909767 using!! :3 Report Comment