Skip to content

Commit 2a045e7

Browse files
zJiaJunzJiaJun
committed
pagination component
1 parent 79638cf commit 2a045e7

File tree

2 files changed

+132
-1
lines changed

2 files changed

+132
-1
lines changed

‎starter/06-Components/03-table.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
rel="stylesheet"
1212
/>
1313
<style>
14-
/*
14+
/*
1515
SPACING SYSTEM (px)
1616
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
1717

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

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

0 commit comments

Comments
 (0)