Skip to content

Commit a3630c0

Browse files
owen-webbowen-webb
committed
section-6: Pagination.
1 parent 45eefc0 commit a3630c0

File tree

1 file changed

+112
-0
lines changed

1 file changed

+112
-0
lines changed

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

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
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+
8+
<title>Table Component</title>
9+
10+
<link rel="preconnect" href="https://fonts.googleapis.com">
11+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
12+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" rel="stylesheet">
13+
14+
<style>
15+
/*
16+
SPACING SYSTEM (px)
17+
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
18+
19+
FONT SIZE SYSTEM (px)
20+
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
21+
*/
22+
23+
/*
24+
MAIN COLOR: #087f5b
25+
GRAY: #343a40
26+
*/
27+
28+
* {
29+
margin: 0;
30+
padding: 0;
31+
box-sizing: border-box;
32+
}
33+
34+
/* ------------------------ */
35+
/* GENERAL STYLES */
36+
/* ------------------------ */
37+
body {
38+
color: #343a40;
39+
display: flex;
40+
font-family: 'Inter', sans-serif;
41+
justify-content: center;
42+
line-height: 1;
43+
}
44+
45+
.btn {
46+
border-radius: 50%;
47+
cursor: pointer;
48+
}
49+
50+
.btn:hover {
51+
background-color: #087f5b;
52+
color: #fff;
53+
}
54+
55+
.btn:hover svg {
56+
stroke: #fff;
57+
}
58+
59+
.btn-arrow {
60+
background-color: #fff;
61+
border: 1px solid #087f5b;
62+
height: 36px;
63+
width: 36px;
64+
}
65+
66+
.btn-page {
67+
background-color: #fff;
68+
border: none;
69+
font-size: 18px;
70+
height: 30px;
71+
width: 30px;
72+
}
73+
74+
.left-icon, .right-icon {
75+
stroke: #087f5b;
76+
width: 24px;
77+
}
78+
79+
.paginator {
80+
align-items: center;
81+
display: flex;
82+
gap: 12px;
83+
justify-content: center;
84+
margin-top: 256px;
85+
}
86+
</style>
87+
</head>
88+
89+
<body>
90+
<div class="paginator">
91+
<button class="btn btn-arrow">
92+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="left-icon">
93+
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
94+
</svg>
95+
</button>
96+
<button class="btn btn-page">1</button>
97+
<button class="btn btn-page">2</button>
98+
<button class="btn btn-page">3</button>
99+
<button class="btn btn-page">4</button>
100+
<button class="btn btn-page">5</button>
101+
<button class="btn btn-page">6</button>
102+
<div class="dots">...</div>
103+
<button class="btn btn-page">23</button>
104+
<button class="btn btn-arrow">
105+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="right-icon">
106+
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
107+
</svg>
108+
109+
</button>
110+
</div>
111+
</body>
112+
</html>

0 commit comments

Comments
 (0)