Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <?php
- ?>
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
- <head>
- <title>Inventory</title>
- <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
- <meta name="description" content="" />
- <meta name="author" content="" />
- <meta name="keywords" content="" />
- </head>
- <style>
- #panel{
- height: 400px;
- width: 450px;
- margin-left: 70%;
- margin-top: 20%;
- position: relative;
- }
- #menu-left{
- height: 90%;
- width: 10%;
- float: left;
- }
- #content{
- background-color: #575757;
- height: 88.5%;
- width: 78.5%;
- float: left;
- padding-left: 1.5%;
- padding-top: 1.5%;
- border-radius: 5px;
- }
- #menu-right{
- height: 90%;
- width: 10%;
- float: left;
- }
- #menu-bottom{
- height: 10%;
- width: 90%;
- position:absolute;
- left:0;
- bottom:0;
- padding-left: 10%;
- }
- .inventory-field{
- float: left;
- margin-right: 1.5%;
- margin-left: 0;
- margin-top: 0;
- margin-bottom: 1.5%;
- width: 18.5%;
- height: 18.5%;
- background-color: #2D2D2D;
- border-radius: 3px;
- display: inline-block;
- box-shadow: 1px 1px 2px black;
- overflow: hidden;
- }
- .inventory-field img{
- width: 80%;
- height: 80%;
- padding-left: 10%;
- padding-top: 10%;
- position: relative;
- padding-right: 3%;
- }
- .use{
- background: linear-gradient(to bottom, #5077DA, black, #59647D);
- }
- .inventory-counter{
- margin-top: -2.2%;
- margin-left: 9%;
- width:5%;
- height: 3.3%;
- position: absolute;
- border-radius: 5px;
- background-color: #2D2D2D;
- }
- .inventory-counter{
- color: white;
- font-size: 11px;
- text-align: center;
- vertical-align: middle;
- }
- .menu-field{
- width: 80%;
- height: 10%;
- background-color: red;
- margin: 0 auto;
- margin-top: 10%;
- border-style: solid;
- border-color: #B7B8B8;
- border-width: 2px;
- background-color: #2D2D2D;
- border-radius: 3px;
- }
- .menu-field img{
- width: 80%;
- height: 80%;
- padding-left: 10%;
- padding-top: 10%;
- position: relative;
- padding-right: 3%;
- }
- .menu-bottom-field{
- width: 36px;
- display: inline-block;
- height: 36px;
- background-color: red;
- margin-top: 1%;
- margin-left: 1%;
- border-style: solid;
- border-color: #B7B8B8;
- border-width: 2px;
- background-color: #2D2D2D;
- border-radius: 3px;
- }
- .menu-bottom-field img{
- width: 80%;
- height: 80%;
- padding-left: 10%;
- padding-top: 10%;
- position: relative;
- padding-right: 3%;
- }
- .active, .menu-bottom-field:hover, .menu-field:hover{
- border-color: #295780;
- }
- </style>
- <body>
- <div id="panel">
- <div id="menu-left">
- <div class="menu-field active"><img src="box-solid.svg" alt="" /></div>
- <div class="menu-field "><img src="box-solid.svg" alt="" /></div>
- <div class="menu-field "><img src="box-solid.svg" alt="" /></div>
- <div class="menu-field "><img src="box-solid.svg" alt="" /></div>
- <div class="menu-field "><img src="box-solid.svg" alt="" /></div>
- </div>
- <div id="content">
- <div class="inventory-field use">
- <img src="key1.png" alt="" />
- <div class="inventory-counter">3</div>
- </div>
- <div class="inventory-field use">
- <img src="key1.png" alt="" />
- <div class="inventory-counter">3</div>
- </div>
- <div class="inventory-field use">
- <img src="key1.png" alt="" />
- <div class="inventory-counter">3</div>
- </div>
- <div class="inventory-field"></div>
- <div class="inventory-field"></div>
- <div class="inventory-field"></div>
- <div class="inventory-field"></div>
- <div class="inventory-field"></div>
- <div class="inventory-field"></div>
- <div class="inventory-field"></div>
- <div class="inventory-field"></div>
- <div class="inventory-field"></div>
- <div class="inventory-field"></div>
- <div class="inventory-field"></div>
- <div class="inventory-field"></div>
- <div class="inventory-field"></div>
- <div class="inventory-field"></div>
- <div class="inventory-field"></div>
- <div class="inventory-field"></div>
- <div class="inventory-field"></div>
- <div class="inventory-field"></div>
- <div class="inventory-field"></div>
- <div class="inventory-field"></div>
- <div class="inventory-field"></div>
- <div class="inventory-field"></div>
- </div>
- <div id="menu-right">
- <div class="menu-field active"><img src="box-solid.svg" alt="" /></div>
- <div class="menu-field "><img src="box-solid.svg" alt="" /></div>
- <div class="menu-field "><img src="box-solid.svg" alt="" /></div>
- <div class="menu-field "><img src="box-solid.svg" alt="" /></div>
- <div class="menu-field "><img src="box-solid.svg" alt="" /></div>
- </div>
- <div id="menu-bottom">
- <div class="menu-bottom-field active"><img src="box-solid.svg" alt="" /></div>
- <div class="menu-bottom-field "><img src="box-solid.svg" alt="" /></div>
- <div class="menu-bottom-field "><img src="box-solid.svg" alt="" /></div>
- <div class="menu-bottom-field "><img src="box-solid.svg" alt="" /></div>
- <div class="menu-bottom-field "><img src="box-solid.svg" alt="" /></div>
- </div>
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement