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

≪ MURRIT TURKIN / LIL HAL ≫	1715545202 using!! Report Comment
꒰ᐢ. .ᐢ꒱Madoka₊˚⊹	1714668139 using Report Comment
ЯэтѓоЅоциↁЩаvэ	1710469508 using Report Comment
Y͜͡i͜͡p͜͡p͜͡e͜͡e͜͡	1709797234 Using! Report Comment
𖦹Loren	1706984185 using! Report Comment
Muichiro	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 Muichiro; 1695073052; Report I appreciate your help thank you by Muichiro; 1695073126; Report It's no problem! Im glad you were interested in using it ✨ by KoSbeku; 1695076177; Report