Item Inventory!

Tags: inventory, minecraft, game, gaming, stickers, item

Description:

UH you can put items in it! You know the drill; you can copy and paste into your profile <3

Inventory

-10

Preview:

click on the image for a larger preview

Code:

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

<!--root -->
<style>
<style>
@import url(https://db.onlinewebfonts.com/c/535bc132d619f1b68d078ee3b996489e?family=Minecraft+1.1); 
.slot{
  font-family: "Minecraft 1.1", cursive;
  color: #3f3f3f;
}

:root{
/* colors */
--background: #c6c6c6;
--hover: #c3c3c3 ;
--shadow: #555555 ;
--highlight: #e8e8e8;
--maintext: #3f3f3f;
--itemtext: #ffffff;
--slot: #8b8b8b;

/* misc */
--slotsize:65px;
}
</style>






<!-- Inventory styling -->
<style>
.dummy{background:#000000;padding:4px;border-radius: 30px; margin:auto;}

.inv{padding:5%;padding-top:0;display: flex; flex-wrap: wrap;}

.slot:hover {
  align-content: center;
  background-color: var(--hover);
}
.slot {font-size:2em;
p{position:absolute;transform: translate(0, 20%); color:var(--itemtext); text-shadow: 3px 3px rgba(0, 0, 0, 0.60); width:65px; height:65px; text-align:right;}
width:var(--slotsize);
align-content: center;
margin: 5px;
display: grid;
aspect-ratio: 1;
Background-color: var(--slot);
box-shadow: 2px 2px 0 2px var(--highlight),
-2px -2px 0 2px var(--shadow),
0 0 0 4px var(--slot);
}



.invdisp{Background-color: var(--background);  margin:auto;
clip-path: polygon(
    0px calc(100% - 20px),
    4px calc(100% - 20px),
    4px calc(100% - 12px),
    8px calc(100% - 12px),
    8px calc(100% - 8px),
    12px calc(100% - 8px),
    12px calc(100% - 4px),
    20px calc(100% - 4px),
    20px 100%,
    calc(100% - 20px) 100%,
    calc(100% - 20px) calc(100% - 4px),
    calc(100% - 12px) calc(100% - 4px),
    calc(100% - 12px) calc(100% - 8px),
    calc(100% - 8px) calc(100% - 8px),
    calc(100% - 8px) calc(100% - 12px),
    calc(100% - 4px) calc(100% - 12px),
    calc(100% - 4px) calc(100% - 20px),
    100% calc(100% - 20px),
    100% 20px,
    calc(100% - 4px) 20px,
    calc(100% - 4px) 12px,
    calc(100% - 8px) 12px,
    calc(100% - 8px) 8px,
    calc(100% - 12px) 8px,
    calc(100% - 12px) 4px,
    calc(100% - 20px) 4px,
    calc(100% - 20px) 0px,
    20px 0px,
    20px 4px,
    12px 4px,
    12px 8px,
    8px 8px,
    8px 12px,
    4px 12px,
    4px 20px,
    0px 20px
  );

/*
PIXEL CURVE DONE WITH THIS SITE
https://pixelcorners.lukeb.co.uk/?radius=8&multiplier=4
*/

border-style: solid;
border-width: 5px;
border-color: var(--highlight) var(--shadow) var(--shadow) var(--highlight);
}



</style>

<!-- dummy class is just the outline because the inventory is a clipping mask -->
<!-- invdisp class is the background and clipping mask -->
<!-- inv is just to house the grid -->
<!-- slot is just a slot for the item and its count. The text kind of breaks if it is not a double digit number. nvm i fixed it -->

<div class="dummy">
<div class="invdisp">
<h3 style="padding-left:5%">Inventory</h3>
<div class="inv">
<!--Row-->
<div class="slot"><img src="https://media.tenor.com/aaEMtGfZFbkAAAAC/rat-spinning.gif"/><p>64</p></div>
<div class="slot"><img src="https://files.catbox.moe/wcjpnl.png"/><p>64</p></div>
<div class="slot"><img src="https://files.catbox.moe/wcjpnl.png"/><p>64</p></div>
<div class="slot"><img src="https://files.catbox.moe/wcjpnl.png"/><p>1</p></div>
<div class="slot"><img src="https://files.catbox.moe/wcjpnl.png"/><p>64</p></div>
<div class="slot"><img src="https://files.catbox.moe/wcjpnl.png"/><p>64</p></div>
<div class="slot"><img src="https://files.catbox.moe/wcjpnl.png"/><p>64</p></div>
<div class="slot"><img src="https://files.catbox.moe/wcjpnl.png"/><p>64</p></div>
<div class="slot"><img src="https://files.catbox.moe/wcjpnl.png"/><p>64</p></div>
<div class="slot"><img src="https://files.catbox.moe/wcjpnl.png"/><p>64</p></div>
<div class="slot"><img src="https://files.catbox.moe/wcjpnl.png"/><p>64</p></div>
<div class="slot"><img src="https://files.catbox.moe/wcjpnl.png"/><p>64</p></div>
<div class="slot"><img src="https://files.catbox.moe/wcjpnl.png"/><p>64</p></div>
<div class="slot"><img src="https://f4.bcbits.com/img/a0465688829_65"/><p style="color:red">-10</p></div>
<div class="slot"><img src="https://files.catbox.moe/wcjpnl.png"/><p>1</p></div>



</div>

</div>
</div>

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

eese seafoam	1752703828 Using! :> Report Comment
EVILWEEZER	1748019453 Using!! Report Comment
hexnorth ×_×	1744644291 using1 xp Report Comment
Ivy	1743320479 usingg Report Comment
DonnieR0cks🎸💥 !!	1729703403 Using :3 Report Comment
Evbo	1729595606 Definitely using!! Report Comment
재 :｡､ Jae-seon ⋆⭒˚｡⋆	1718215265 Using Report Comment
Oildrinker	1717865335 Using Report Comment
Miles★	1717338987 Using! I just spent like an hour doing the items lol Report Comment
YOYO	1715545202 using!! Report Comment
¡! Madoka 🍥	1714668139 using Report Comment
˚₊· ͟͟͞͞➳❥ᏗᏬᏒᎧᏒᏗ*ೃ༄	1710469508 using Report Comment
S͙i͙l͙l͙y͙	1709797234 Using! Report Comment
𖦹Loren	1706984185 using! Report Comment
MrPapbee	1695072444 thank you for putting this into code though when adding and editing it I've noticed it changes your top menu as well Report Comment Oops yeah sorry. theres a bit in there that kept reverting when i changed it. ill fix it but you can also just delete any part that says ", nav .links" if you want. should only be one place by KoSbeku; 1695072716; Report i fixed it but it might take a second or mess up again im not sure by KoSbeku; 1695072774; Report alrighty by MrPapbee; 1695073052; Report I appreciate your help thank you by MrPapbee; 1695073126; Report It's no problem! Im glad you were interested in using it ✨ by KoSbeku; 1695076177; Report