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:

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.