Skip to content

Commit 0963b29

Browse files
andreituicuandreituicu
committed
Section 6 - Pagination
1 parent 576026f commit 0963b29

File tree

1 file changed

+166
-0
lines changed

1 file changed

+166
-0
lines changed

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

Lines changed: 166 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,166 @@
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>Template</title>
8+
9+
<link rel="preconnect" href="https://fonts.googleapis.com" />
10+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
11+
<link
12+
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap"
13+
rel="stylesheet"
14+
/>
15+
16+
<style>
17+
/*
18+
SPACING SYSTEM (px)
19+
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
20+
21+
FONT SIZE SYSTEM (px)
22+
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
23+
*/
24+
25+
/*
26+
MAIN COLOR: #087f5b
27+
GREY COLOR: #343a40
28+
29+
*/
30+
31+
* {
32+
margin: 0;
33+
padding: 0;
34+
box-sizing: border-box;
35+
}
36+
37+
body {
38+
font-family: "Inter", sans-serif;
39+
color: #343a40;
40+
line-height: 1;
41+
}
42+
43+
.pagination {
44+
margin-top: 100px;
45+
46+
display: flex;
47+
justify-content: center;
48+
align-items: center;
49+
gap: 24px;
50+
}
51+
52+
.btn {
53+
height: 48px;
54+
width: 48px;
55+
border-radius: 50%;
56+
57+
display: flex;
58+
justify-content: center;
59+
align-items: center;
60+
61+
border: solid 1px #087f5b;
62+
background-color: #fff;
63+
64+
cursor: pointer;
65+
}
66+
67+
.btn-icon {
68+
height: 24px;
69+
width: 24px;
70+
stroke: #087f5b;
71+
}
72+
73+
.btn:hover {
74+
border: solid 1px #087f5b;
75+
background-color: #087f5b;
76+
}
77+
78+
.btn:hover .btn-icon {
79+
stroke: #fff;
80+
}
81+
82+
.page-number:link,
83+
.page-number:visited {
84+
font-size: 18px;
85+
color: #000;
86+
87+
text-decoration: none;
88+
89+
width: 32px;
90+
height: 32px;
91+
92+
display: flex;
93+
justify-content: center;
94+
align-items: center;
95+
}
96+
97+
.page-number:active,
98+
.page-number:hover,
99+
.page-number.current-page {
100+
background-color: #087f5b;
101+
color: #fff;
102+
border-radius: 50%;
103+
}
104+
</style>
105+
<script>
106+
function pageNumberChange(item) {
107+
currentPage = document.getElementsByClassName("current-page");
108+
if (currentPage !== undefined) {
109+
for (let i = 0; i < currentPage.length; i++) {
110+
currentPage[i].classList.remove("current-page");
111+
}
112+
}
113+
item.classList.add("current-page");
114+
}
115+
</script>
116+
</head>
117+
<body>
118+
<div class="pagination">
119+
<button class="btn">
120+
<svg
121+
xmlns="http://www.w3.org/2000/svg"
122+
fill="none"
123+
viewBox="0 0 24 24"
124+
stroke-width="2"
125+
stroke="currentColor"
126+
class="btn-icon"
127+
>
128+
<path
129+
stroke-linecap="round"
130+
stroke-linejoin="round"
131+
d="M15.75 19.5L8.25 12l7.5-7.5"
132+
/>
133+
</svg>
134+
</button>
135+
<a href="#" class="page-number" onclick="pageNumberChange(this)">1</a>
136+
<a href="#" class="page-number" onclick="pageNumberChange(this)">2</a>
137+
<a
138+
href="#"
139+
class="page-number current-page"
140+
onclick="pageNumberChange(this)"
141+
>3</a
142+
>
143+
<a href="#" class="page-number" onclick="pageNumberChange(this)">4</a>
144+
<a href="#" class="page-number" onclick="pageNumberChange(this)">5</a>
145+
<a href="#" class="page-number" onclick="pageNumberChange(this)">6</a>
146+
<span class="dots">...</span>
147+
<a href="#" class="page-number" onclick="pageNumberChange(this)">23</a>
148+
<button class="btn">
149+
<svg
150+
xmlns="http://www.w3.org/2000/svg"
151+
fill="none"
152+
viewBox="0 0 24 24"
153+
stroke-width="2"
154+
stroke="currentColor"
155+
class="btn-icon"
156+
>
157+
<path
158+
stroke-linecap="round"
159+
stroke-linejoin="round"
160+
d="M8.25 4.5l7.5 7.5-7.5 7.5"
161+
/>
162+
</svg>
163+
</button>
164+
</div>
165+
</body>
166+
</html>

0 commit comments

Comments
 (0)