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 26 comments ( View all | Add 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
⤜(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
MrSleepband >_>	1705856588 USIKNG!!!! (OMG ITS SO SCUTRE I LOVE STARDEW RSJKHGHEWJKSWEJHKGRLABGESWRBHKJL) Report Comment