<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="style.css"> <meta charset="utf-8"> <title>SkinPicker.Com</title> </head> <body> <!--Wrapper omfamnar allt i sidan--> <div id="wrapper"> <!--Header innehåller det i top sektionen av hemsidan--> <div id="header"> <h1>Skinpicker.com</h1> <p>Counter-Strike: Global Offensive Trade-Up Contract Guide</p> </div> <!--Adbar ska användas för ads, denna ska byta bild efter en viss tid--> <div id="adbarleft"> ADS </div> <!--Inom Tradeup så ska vi ha itembarsen där itemsen ska visas efter att man valt dem, samt en result bar där man får se vilka olika skins man kan få tag på genom att tradea up dem valda itemsen. --> <div id="Tradeup"> <!--Results rutan ska man kunna scrolla i. --> <div id="results"> RESULTS </div> <table> <tbody> <tr> <td id="slot1">SLOT 1</td> <td id="slot2">SLOT 2</td> <td id="slot3">SLOT 3</td> <td id="slot4">SLOT 4</td> <td id="slot5">SLOT 5</td> </tr> <tr> <td id="slot6">SLOT 6</td> <td id="slot7">SLOT 7</td> <td id="slot8">SLOT 8</td> <td id="slot9">SLOT 9</td> <td id="slot10">SLOT 10</td> </tr> </tbody> </table> </div> <!--Search, denna ska vara lik den man kan hitta på csgolounge.com--> <div id="search"> <!--Här väljer man vilka items som ska visas--> <div id="searchbar"> <!-- Sökbar för itemsen i displayen--> <input placeholder="Search.."></input> <!--Här kan man välja quality på vapnena--> <select id="qualityfilter" class="selectbox" name="quality"> <option value="0">Quality - All</option> <option value="1">Base</option> <option value="2">Consumer</option> <option value="3">Industrial</option> <option value="4">Mil-Spec</option> <option value="5">Restricted</option> <option value="6">Classified</option> </select> <!-- Här kan man välja exterior på vapnena--> <select id="exteriorfilter" class="selectbox" name="exterior"> <option value="0">Exterior - All</option> <option value="1">Factory New</option> <option value="2">Minimal Wear</option> <option value="5">Field-Tested</option> <option value="3">Well-Worn</option> <option value="4">Battle-Scarred</option> </select> <select id="typefilter" class="selectbox" name="type"> <option>Type - All</option> <option>Pistol</option> <option>SMG</option> <option>Shotgun</option> <option>Rifle</option> <option>Sniper Rifle</option> <option>Machinegun</option> </select>
<a class="button" onclick="">All Items<input type="hidden" name="category" value="1" disabled="disabled"></a>
<a class="button" onclick="">StatTrak<input type="hidden" name="category" value="2" disabled="disabled"></a>
</div>
<!--Här visas alla items man sökt på, eller om inget sökt så visas alla items-->
<div id="itemsdisplay">
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<!--Row 2-->
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<!--Row 3-->
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<!--Row 4-->
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<!--Row 5-->
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
</div>
</div>
<!--Ännu en adbar ( samma som den andra )-->
<div id="adbarright">
ADS
</div>
</div>
<script src="jsscripts.js"></script>
<script src="jquery.js"></script>
</body>
</html>
CSS - body { background: url("http://www.theblockforum.com/fun/lance/lancescollection/textures/paper2.jpg"); }
text-align: center; }
font-size: 70px;
}
font-size: 15px;
margin-top: -50px;
margin-left: -100px;
}
width: 15%;
height: 700px;
border: 1px black solid;
margin-right: 5%;
float: right;
margin-top: -295px;
}
width: 15%;
height: 700px;
border: 1px black solid;
margin-left: 5%;
margin-top: 5px;
float: left;
}
width: 55%;
height: 300px;
float:left;
margin-left: 2.5%;
}
height: 120px;
width: 120px;
margin-right: 5px;
margin-top: 5px;
border: 1px black solid;
float: left;
}
width: 260px;
height: 255px;
margin-top: 5px;
float: right;
border: 1px black solid;
}
width: 55%;
float: left;
height: 405px;
margin-left: 2.5%;
border: 1px black solid;
}
height: 40px;
border-bottom: 1px black solid;
}
margin-top: 7px;
margin-left: 7px;
height: 20px;
background-color: antiquewhite;
border: 1px black solid;
}
.selectbox {
margin-top: 7px;
float: right;
margin-right: 7px;
height: 25px;
background-color: antiquewhite;
border: 1px black solid;
}
.button {
background-color: antiquewhite;
border: 1px black solid;
padding: 2px;
margin-right: 7px;
margin-top: 7px;
float: right;
}
.button:hover {
font-weight: bold;
}
height: 365px;
width: 100%;
}
height: 66px;
width: 99px;
border: 1px black solid;
} .container { border: 1px black solid; height: 66px; width: 99px; margin-top: 4px; margin-left: 12px; float: left; }