-
Notifications
You must be signed in to change notification settings - Fork 49
/
Copy pathindex.html
133 lines (114 loc) · 5.1 KB
/
index.html
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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/reset.css"> <!-- CSS reset -->
<link rel="stylesheet" href="css/style.css"> <!-- Resource style -->
<script src="js/modernizr.js"></script> <!-- Modernizr -->
<title>Content Filters | CodyHouse</title>
</head>
<body>
<header class="cd-header">
<h1>Content Filters</h1>
</header>
<main class="cd-main-content">
<div class="cd-tab-filter-wrapper">
<div class="cd-tab-filter">
<ul class="cd-filters">
<li class="placeholder">
<a data-type="all" href="#0">All</a> <!-- selected option on mobile -->
</li>
<li class="filter"><a class="selected" href="#0" data-type="all">All</a></li>
<li class="filter" data-filter=".color-1"><a href="#0" data-type="color-1">Color 1</a></li>
<li class="filter" data-filter=".color-2"><a href="#0" data-type="color-2">Color 2</a></li>
</ul> <!-- cd-filters -->
</div> <!-- cd-tab-filter -->
</div> <!-- cd-tab-filter-wrapper -->
<section class="cd-gallery">
<ul>
<li class="mix color-1 check1 radio2 option3"><img src="img/img-1.jpg" alt="Image 1"></li>
<li class="mix color-2 check2 radio2 option2"><img src="img/img-2.jpg" alt="Image 2"></li>
<li class="mix color-1 check3 radio3 option1"><img src="img/img-3.jpg" alt="Image 3"></li>
<li class="mix color-1 check3 radio2 option4"><img src="img/img-4.jpg" alt="Image 4"></li>
<li class="mix color-1 check1 radio3 option2"><img src="img/img-5.jpg" alt="Image 5"></li>
<li class="mix color-2 check2 radio3 option3"><img src="img/img-6.jpg" alt="Image 6"></li>
<li class="mix color-2 check2 radio2 option1"><img src="img/img-7.jpg" alt="Image 7"></li>
<li class="mix color-1 check1 radio3 option4"><img src="img/img-8.jpg" alt="Image 8"></li>
<li class="mix color-2 check1 radio2 option3"><img src="img/img-9.jpg" alt="Image 9"></li>
<li class="mix color-1 check3 radio2 option4"><img src="img/img-10.jpg" alt="Image 10"></li>
<li class="mix color-1 check3 radio3 option2"><img src="img/img-11.jpg" alt="Image 11"></li>
<li class="mix color-2 check1 radio3 option1"><img src="img/img-12.jpg" alt="Image 12"></li>
<li class="gap"></li>
<li class="gap"></li>
<li class="gap"></li>
</ul>
<div class="cd-fail-message">No results found</div>
</section> <!-- cd-gallery -->
<div class="cd-filter">
<form>
<div class="cd-filter-block">
<h4>Search</h4>
<div class="cd-filter-content">
<input type="search" placeholder="Try color-1...">
</div> <!-- cd-filter-content -->
</div> <!-- cd-filter-block -->
<div class="cd-filter-block">
<h4>Check boxes</h4>
<ul class="cd-filter-content cd-filters list">
<li>
<input class="filter" data-filter=".check1" type="checkbox" id="checkbox1">
<label class="checkbox-label" for="checkbox1">Option 1</label>
</li>
<li>
<input class="filter" data-filter=".check2" type="checkbox" id="checkbox2">
<label class="checkbox-label" for="checkbox2">Option 2</label>
</li>
<li>
<input class="filter" data-filter=".check3" type="checkbox" id="checkbox3">
<label class="checkbox-label" for="checkbox3">Option 3</label>
</li>
</ul> <!-- cd-filter-content -->
</div> <!-- cd-filter-block -->
<div class="cd-filter-block">
<h4>Select</h4>
<div class="cd-filter-content">
<div class="cd-select cd-filters">
<select class="filter" name="selectThis" id="selectThis">
<option value="">Choose an option</option>
<option value=".option1">Option 1</option>
<option value=".option2">Option 2</option>
<option value=".option3">Option 3</option>
<option value=".option4">Option 4</option>
</select>
</div> <!-- cd-select -->
</div> <!-- cd-filter-content -->
</div> <!-- cd-filter-block -->
<div class="cd-filter-block">
<h4>Radio buttons</h4>
<ul class="cd-filter-content cd-filters list">
<li>
<input class="filter" data-filter="" type="radio" name="radioButton" id="radio1" checked>
<label class="radio-label" for="radio1">All</label>
</li>
<li>
<input class="filter" data-filter=".radio2" type="radio" name="radioButton" id="radio2">
<label class="radio-label" for="radio2">Choice 2</label>
</li>
<li>
<input class="filter" data-filter=".radio3" type="radio" name="radioButton" id="radio3">
<label class="radio-label" for="radio3">Choice 3</label>
</li>
</ul> <!-- cd-filter-content -->
</div> <!-- cd-filter-block -->
</form>
<a href="#0" class="cd-close">Close</a>
</div> <!-- cd-filter -->
<a href="#0" class="cd-filter-trigger">Filters</a>
</main> <!-- cd-main-content -->
<script src="js/jquery-2.1.1.js"></script>
<script src="js/jquery.mixitup.min.js"></script>
<script src="js/main.js"></script> <!-- Resource jQuery -->
</body>
</html>