Skip to content

Commit 2a1d874

Browse files
haivn-vibhaivn-vib
committed
paging
1 parent cdcaa63 commit 2a1d874

File tree

1 file changed

+143
-0
lines changed

1 file changed

+143
-0
lines changed

‎starter/06-Components/04-paging.html‎

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<!-- <base href="." /> -->
8+
<title>Paging</title>
9+
<style>
10+
/*
11+
SPACING SYSTEM (px)
12+
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
13+
14+
FONT SIZE SYSTEM (px)
15+
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
16+
*/
17+
18+
/*
19+
Main Color: #087f5b
20+
Grey Color: #212529
21+
*/
22+
* {
23+
margin: 0;
24+
padding: 0;
25+
box-sizing: border-box;
26+
}
27+
28+
body {
29+
font-family: 'Inter', sans-serif;
30+
color: #212529;
31+
margin: 24px auto;
32+
line-height: 1;
33+
display: flex;
34+
justify-content: center;
35+
}
36+
37+
.pagination {
38+
display: flex;
39+
gap: 8px;
40+
justify-content: center;
41+
align-items: center;
42+
}
43+
44+
.btn {
45+
border-radius: 50%;
46+
border: none;
47+
width: 48px;
48+
height: 48px;
49+
display: flex;
50+
justify-content: center;
51+
align-items: center;
52+
cursor: pointer;
53+
background-color: transparent;
54+
border: 1px solid #087f5b;
55+
box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.07);
56+
}
57+
58+
.btn:hover {
59+
background-color: #087f5b;
60+
color: #f8f9fa;
61+
}
62+
63+
.btn-icon {
64+
width: 24px;
65+
height: 24px;
66+
stroke: #087f5b;
67+
}
68+
69+
.btn:hover .btn-icon {
70+
stroke: #f8f9fa;
71+
}
72+
73+
.page-link:link,
74+
.page-link:visited {
75+
text-decoration: none;
76+
color: inherit;
77+
font-size: 18px;
78+
width: 36px;
79+
height: 36px;
80+
border-radius: 50%;
81+
display: flex;
82+
justify-content: center;
83+
align-items: center;
84+
}
85+
86+
.page-link:hover,
87+
.page-link:active,
88+
.page-link.page-link--active {
89+
background-color: #087f5b;
90+
color: #f8f9fa;
91+
}
92+
93+
.dots {
94+
cursor: pointer;
95+
color: inherit;
96+
}
97+
</style>
98+
</head>
99+
<body>
100+
<div class="pagination">
101+
<button class="btn">
102+
<svg
103+
xmlns="http://www.w3.org/2000/svg"
104+
fill="none"
105+
viewBox="0 0 24 24"
106+
stroke-width="1.5"
107+
stroke="currentColor"
108+
class="btn-icon"
109+
>
110+
<path
111+
stroke-linecap="round"
112+
stroke-linejoin="round"
113+
d="M15.75 19.5L8.25 12l7.5-7.5"
114+
/>
115+
</svg>
116+
</button>
117+
<a href="#" class="page-link">1</a>
118+
<a href="#" class="page-link">2</a>
119+
<a href="#" class="page-link page-link--active">3</a>
120+
<a href="#" class="page-link">4</a>
121+
<a href="#" class="page-link">5</a>
122+
<a href="#" class="page-link">6</a>
123+
<span class="dots">...</span>
124+
<a href="#" class="page-link">23</a>
125+
<button class="btn">
126+
<svg
127+
xmlns="http://www.w3.org/2000/svg"
128+
fill="none"
129+
viewBox="0 0 24 24"
130+
stroke-width="1.5"
131+
stroke="currentColor"
132+
class="btn-icon"
133+
>
134+
<path
135+
stroke-linecap="round"
136+
stroke-linejoin="round"
137+
d="M8.25 4.5l7.5 7.5-7.5 7.5"
138+
/>
139+
</svg>
140+
</button>
141+
</div>
142+
</body>
143+
</html>

0 commit comments

Comments
 (0)