Skip to content

Commit 37d53f6

Browse files
kalpshah485kalpshah485
committed
feat: pagination added
1 parent 8c22d4f commit 37d53f6

File tree

1 file changed

+126
-0
lines changed

1 file changed

+126
-0
lines changed

‎06-Components/pagination.html

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
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+
<title>Pagination</title>
8+
<style>
9+
/*
10+
SPACING SYSTEM (px)
11+
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
12+
FONT SIZE SYSTEM (px)
13+
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
14+
*/
15+
/*
16+
MAIN COLOR: #087f5b
17+
GREY COLOR: #343a40
18+
*/
19+
20+
* {
21+
margin: 0;
22+
padding: 0;
23+
box-sizing: border-box;
24+
}
25+
26+
body {
27+
font-family: "Inter", sans-serif;
28+
color: #343a40;
29+
line-height: 1;
30+
display: flex;
31+
justify-content: center;
32+
}
33+
.pagination {
34+
display: flex;
35+
align-items: center;
36+
gap: 12px;
37+
margin-top: 200px;
38+
}
39+
.btn {
40+
border: 1px solid #087f5b;
41+
height: 48px;
42+
width: 48px;
43+
border-radius: 50%;
44+
background: none;
45+
cursor: pointer;
46+
}
47+
.btn:hover {
48+
background-color: #087f5b;
49+
}
50+
.btn:hover .btn-icon {
51+
stroke: #fff;
52+
}
53+
.page-link:link,
54+
.page-link:visited {
55+
font-size: 18px;
56+
color: #343a40;
57+
text-decoration: none;
58+
height: 36px;
59+
width: 36px;
60+
border-radius: 50%;
61+
display: flex;
62+
align-items: center;
63+
justify-content: center;
64+
}
65+
66+
.page-link:hover,
67+
.page-link:active,
68+
.page-link.page-link--current {
69+
background-color: #087f5b;
70+
color: #fff;
71+
}
72+
.btn-icon {
73+
height: 24px;
74+
width: 24px;
75+
stroke: #087f5b;
76+
}
77+
.dots {
78+
color: #868e96;
79+
}
80+
</style>
81+
</head>
82+
<body>
83+
<div class="pagination">
84+
<button class="btn">
85+
<svg
86+
xmlns="http://www.w3.org/2000/svg"
87+
class="btn-icon"
88+
fill="none"
89+
viewBox="0 0 24 24"
90+
stroke="currentColor"
91+
>
92+
<path
93+
stroke-linecap="round"
94+
stroke-linejoin="round"
95+
stroke-width="2"
96+
d="M15 19l-7-7 7-7"
97+
/>
98+
</svg>
99+
</button>
100+
<a href="#" class="page-link">1</a>
101+
<a href="#" class="page-link">2</a>
102+
<a href="#" class="page-link page-link--current">3</a>
103+
<a href="#" class="page-link">4</a>
104+
<a href="#" class="page-link">5</a>
105+
<a href="#" class="page-link">6</a>
106+
<span class="dots">...</span>
107+
<a href="#" class="page-link">23</a>
108+
<button class="btn">
109+
<svg
110+
xmlns="http://www.w3.org/2000/svg"
111+
class="btn-icon"
112+
fill="none"
113+
viewBox="0 0 24 24"
114+
stroke="currentColor"
115+
>
116+
<path
117+
stroke-linecap="round"
118+
stroke-linejoin="round"
119+
stroke-width="2"
120+
d="M9 5l7 7-7 7"
121+
></path>
122+
</svg>
123+
</button>
124+
</div>
125+
</body>
126+
</html>

0 commit comments

Comments
 (0)