FirmstepJsTest/index.html at master · Berkmann18/FirmstepJsTest · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!DOCTYPE html>
<html>
<head lang="en">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta charset="utf-8">

	<title>Firmstep Test</title>

	<link href="http://fonts.googleapis.com/css?family=Open+Sans:400" rel="stylesheet">
	<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<link href="css/styles.css" rel="stylesheet">
</head>
<body>
	<div class="container-fluid">
		<div class="row">
			<div class="col-md-2 filters-col">
				<div class="filters">
					<form>
						<div class="filter-criteria" id="manufacturer">
							<span>Manufacturer</span>
							<label><input type="checkbox" name="Apple">Apple</label>
							<label><input type="checkbox" name="Samsung">Samsung</label>
							<label><input type="checkbox" name="HTC">HTC</label>
							<label><input type="checkbox" name="Nokia">Nokia</label>
							<label><input type="checkbox" name="ZTE">ZTE</label>
							<label><input type="checkbox" name="Sony">Sony</label>
						</div>
						<div class="filter-criteria" id="storage">
							<span>Storage Size</span>
							<label><input type="checkbox" name="16">16 GB</label>
							<label><input type="checkbox" name="32">32 GB</label>
						</div>
						<div class="filter-criteria" id="os">
							<span>OS</span>
							<label><input type="checkbox" name="Android">Android</label>
							<label><input type="checkbox" name="iOS">iOS</label>
							<label><input type="checkbox" name="Windows">Windows</label>
						</div>
						<div class="filter-criteria" id="camera">
							<span>Camera</span>
							<label><input type="checkbox" name="5">5 Mpx</label>
							<label><input type="checkbox" name="8">8 Mpx</label>
							<label><input type="checkbox" name="12">12 Mpx</label>
							<label><input type="checkbox" name="15">15 Mpx</label>
						</div>
						<button>Clear filters</button>
					</form>
				</div>
			</div>
			<div class="col-md-10">
				<ul class="products-list" id="productList">
					<!-- ITEM SNIPPET -->
					<!--<li>
						<a href="#" class="product-photo">
							<img src="http://fs-filestore-eu.s3.amazonaws.com/firmstep-test/images/iphone6.jpg" height="130" alt="Iphone 6">
						</a>
						<h2><a href="#"> Iphone 6 </a></h2>
						<ul class="product-description">
							<li><span>Manufacturer: </span>Apple</li>
							<li><span>Storage: </span>16 GB</li>
							<li><span>OS: </span>iOS</li>
							<li><span>Camera: </span>8 Mpx</li>
							<li><span>Description: </span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique ipsum in efficitur pharetra. Maecenas luctus ante in neque maximus, sed viverra sem posuere. Vestibulum lectus nisi, laoreet vel suscipit nec, feugiat at odio. Etiam eget tellus arcu.</li>
						</ul>
						<p class="product-price">£899</p>
					</li>-->
					<!-- END OF HTML SNIPPET -->
				</ul>
			</div>
		</div>
	</div>

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="js/app.js"></script>
</body>
</html>