-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
149 lines (138 loc) · 5.34 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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Friends App</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DynaPuff&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div class="site-container">
<header class="header">
<div class="container">
<div class="header__inner">
<div class="burger">
<span class="burger__line"></span>
<span class="burger__line"></span>
<span class="burger__line"></span>
</div>
<h1 class="title">Friends App</h1>
<h2 class="slogan">Find a friend! <span>*Cause I didn't find it</span></h2>
</div>
</div>
</header>
<main class="main">
<div class="container">
<div class="wrapper">
<aside class="sidebar">
<form action="#" class="form">
<div class="filter__type">Search by name:</div>
<div class="form__list form__list--filter">
<input type="input" class="form__field form__field--name" placeholder="Name" name="search" required
id="search-input" />
<label for="name" class="form__label form__label--name">Name</label>
</div>
<div class="filter__type">Sort by name:</div>
<ul class="form__list sort-name">
<li class="form__item">
<label class="form__label">
<input type="radio" name="sort" class="radio__input" value="name-down">
<span>
<svg class="icon">
<use xlink:href="sprite.svg#name-down"></use>
</svg>
</span>
</label>
</li>
<li class="form__item">
<label class="form__label">
<input type="radio" name="sort" class="radio__input" value="name-up">
<span>
<svg class="icon">
<use xlink:href="sprite.svg#name-up"></use>
</svg>
</span>
</label>
</li>
</ul>
<div class="filter__type">Sort by age:</div>
<ul class="form__list sort-age">
<li class="form__item">
<label class="form__label">
<input type="radio" name="sort" class="radio__input" value="age-up">
<span>
<svg class="icon">
<use xlink:href="sprite.svg#age-down"></use>
</svg>
</span>
</label>
</li>
<li class="form__item">
<label class="form__label">
<input type="radio" name="sort" class="radio__input" value="age-down">
<span>
<svg class="icon">
<use xlink:href="sprite.svg#age-up"></use>
</svg>
</span>
</label>
</li>
</ul>
<div class="filter__type">Filter by gender:</div>
<ul class="form__list form__list--gender sort-gender">
<li class="form__item">
<label class="form__label">
<input type="radio" name="gender" class="radio__input" value="male">
<span class="gender">
<svg class="icon">
<use xlink:href="sprite.svg#male"></use>
</svg>
</span>
</label>
</li>
<li class="form__item">
<label class="form__label">
<input type="radio" name="gender" class="radio__input" value="female">
<span class="gender">
<svg class="icon icon--gender">
<use xlink:href="sprite.svg#female"></use>
</svg>
</span>
</label>
</li>
<li class="form__item">
<label class="form__label">
<input type="radio" name="gender" class="radio__input" value="all">
<span>
<svg class="icon">
<use xlink:href="sprite.svg#all"></use>
</svg>
</span>
</label>
</li>
</ul>
<button class="form__button" type="reset">Reset</button>
</form>
</aside>
<div class="users">
<ul class="users__list">
</ul>
<ul class="pagination-list">
</ul>
</div>
</div>
</div>
</main>
<footer class="footer">
<p class="footer__copy">
Created by <a href="https://github.com/Pozzitive11" target="_blank">Pozzitive11</a>
</p>
</footer>
</div>
<script src="script.js"></script>
</body>
</html>