Skip to content

Commit c33d6aa

Browse files
author
Andy Chau
committed
Add table and pagination
1 parent 55626d6 commit c33d6aa

File tree

2 files changed

+253
-0
lines changed

2 files changed

+253
-0
lines changed

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

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
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>Table</title>
8+
<style>
9+
/*
10+
SPACING SYSTEM (px)
11+
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
12+
13+
FONT SIZE SYSTEM (px)
14+
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
15+
*/
16+
17+
/*
18+
MAIN COLOR: #087f5b
19+
GREY COLOR: #343a40
20+
*/
21+
22+
* {
23+
margin: 0;
24+
padding: 0;
25+
box-sizing: border-box;
26+
}
27+
28+
/* ------------------------ */
29+
/* GENERAL STYLES */
30+
/* ------------------------ */
31+
body {
32+
font-family: "Inter", sans-serif;
33+
color: #343a40;
34+
line-height: 1;
35+
display: flex;
36+
justify-content: center;
37+
}
38+
39+
table {
40+
width: 800px;
41+
margin-top: 100px;
42+
font-size: 18px;
43+
/* border: 1px solid #343a40; */
44+
border-collapse: collapse; /*Collapse borders between cells into one*/
45+
}
46+
th,
47+
td {
48+
/* border: 1px solid #343a40; */
49+
padding: 16px 24px;
50+
text-align: left;
51+
}
52+
53+
thead tr {
54+
background-color: #087f5b;
55+
color: #fff;
56+
}
57+
58+
thead th {
59+
width: 25%;
60+
}
61+
62+
tbody tr:nth-child(odd) {
63+
background-color: #f8f9fa;
64+
}
65+
66+
tbody tr:nth-child(even) {
67+
background-color: #e9ecef;
68+
}
69+
</style>
70+
</head>
71+
<body>
72+
<table>
73+
<thead>
74+
<tr>
75+
<th>Chair</th>
76+
<th>The Laid Back</th>
77+
<th>The Worker Bee</th>
78+
<th>The Chair 4/2</th>
79+
</tr>
80+
</thead>
81+
82+
<tbody>
83+
<tr>
84+
<th>Width</th>
85+
<td>80 cm</td>
86+
<td>60 cm</td>
87+
<td>220 cm</td>
88+
</tr>
89+
<tr>
90+
<th>Height</th>
91+
<td>100 cm</td>
92+
<td>110 cm</td>
93+
<td>90 cm</td>
94+
</tr>
95+
<tr>
96+
<th>Depth</th>
97+
<td>70 cm</td>
98+
<td>65 cm</td>
99+
<td>80 cm</td>
100+
</tr>
101+
<tr>
102+
<th>Weight</th>
103+
<td>16 kg</td>
104+
<td>22 kg</td>
105+
<td>80 kg</td>
106+
</tr>
107+
</tbody>
108+
</table>
109+
</body>
110+
</html>

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

0 commit comments

Comments
 (0)