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

⤜(Rainy_leaves)_isMine→	1713235626 Using this, indefinitely! Report Comment Same person but new acc, using though by ⤜Rainy_Leaves_isMine→; 1713418264; Report
Roran	1708903385 THIS IS SUPER GOOD! I'M USING IT! Report Comment
Bree	1707965941 thank you for this layout design! still a top ten game for me Report Comment
kya._.bea	1707936163 jus wanted to say this is rlly QT!! Report Comment
M͙𝚛𝚜𝚕𝚎𝚎𝚙𝚋𝚊𝚗𝚍	1705856588 USIKNG!!!! (OMG ITS SO SCUTRE I LOVE STARDEW RSJKHGHEWJKSWEJHKGRLABGESWRBHKJL) Report Comment
Luricard	1705811398 I love this, is cool <3 Report Comment
Taz	1701556309 this is so cute tysmm ;-; !!! Report Comment Enjoy :) by Tommy Panzram; 1701567439; Report
Harvey :3	1701093156 using!!11 Report Comment
Evan	1699820235 using! <3 Report Comment
ANGEL	1695926737 using!! Report Comment Enjoy :) by Tommy Panzram; 1695937231; Report