Skip to content

Commit 13bf68b

Browse files
clinton74clinton74
committed
table and paginantion
1 parent 911d109 commit 13bf68b

File tree

2 files changed

+259
-0
lines changed

2 files changed

+259
-0
lines changed

‎starter/06-Components/pagination.html

Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
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+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" rel="stylesheet" />
9+
<style>
10+
/*
11+
SPACING SYSTEM (px)
12+
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
13+
14+
FONT SIZE SYSTEM (px)
15+
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
16+
*/
17+
18+
* {
19+
margin: 0;
20+
padding: 0;
21+
box-sizing: border-box;
22+
}
23+
24+
/* ------------------------ */
25+
/* GENERAL STYLES */
26+
/* ------------------------ */
27+
body {
28+
font-family: "Inter", sans-serif;
29+
color: #343a40;
30+
line-height: 1;
31+
32+
display: flex;
33+
justify-content: center;
34+
}
35+
36+
.pagination {
37+
margin-top: 150px;
38+
39+
display: flex;
40+
align-items: center;
41+
gap: 16px;
42+
}
43+
44+
.number:link,
45+
.number:visited {
46+
height: 32px;
47+
width: 32px;
48+
border-radius: 50%;
49+
text-decoration: none;
50+
font-weight: 500;
51+
color: #495057;
52+
/* background-color: coral; */
53+
transition: all 0.15s;
54+
55+
display: flex;
56+
align-items: center;
57+
justify-content: center;
58+
}
59+
60+
.number:hover,
61+
.number:active,
62+
.number.number--current {
63+
background-color: #087f5b;
64+
color: #fff;
65+
}
66+
67+
.btn {
68+
background-color: #fff;
69+
border: 1px solid #087f5b;
70+
height: 40px;
71+
width: 40px;
72+
border-radius: 50%;
73+
cursor: pointer;
74+
transition: all 0.15s;
75+
76+
display: flex;
77+
align-items: center;
78+
justify-content: center;
79+
}
80+
81+
.btn:hover {
82+
background-color: #087f5b;
83+
color: #fff;
84+
border: none;
85+
}
86+
87+
.btn:hover .button-icon {
88+
color: #fff;
89+
}
90+
91+
.button-icon {
92+
height: 24px;
93+
width: 24px;
94+
color: #087f5b;
95+
transition: all 0.25s;
96+
}
97+
98+
.dots {
99+
color: #868e96;
100+
}
101+
</style>
102+
</head>
103+
<body>
104+
<div class="pagination">
105+
<button class="btn btn--left">
106+
<svg
107+
xmlns="http://www.w3.org/2000/svg"
108+
class="button-icon"
109+
fill="none"
110+
viewBox="0 0 24 24"
111+
stroke="currentColor"
112+
>
113+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
114+
</svg>
115+
</button>
116+
117+
<a href="#" class="number">1</a>
118+
<a href="#" class="number">2</a>
119+
<a href="#" class="number number--current">3</a>
120+
<a href="#" class="number">4</a>
121+
<a href="#" class="number">5</a>
122+
<a href="#" class="number">6</a>
123+
<span class="dots">...</span>
124+
<a href="#" class="number">23</a>
125+
126+
<button class="btn btn--right">
127+
<svg
128+
xmlns="http://www.w3.org/2000/svg"
129+
class="button-icon"
130+
fill="none"
131+
viewBox="0 0 24 24"
132+
stroke="currentColor"
133+
>
134+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
135+
</svg>
136+
</button>
137+
</div>
138+
139+
<script>
140+
const numbers = document.querySelectorAll(".number");
141+
142+
numbers.forEach((el, key, arr) => {
143+
el.addEventListener("click", () => {
144+
arr.forEach((el) => {
145+
el.classList.remove("number--current");
146+
});
147+
el.classList.add("number--current");
148+
});
149+
});
150+
</script>
151+
</body>
152+
</html>

‎starter/06-Components/table.html

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

0 commit comments

Comments
 (0)