Skip to content

Commit 3f587ae

Browse files
quechauquechau
committed
Add Pagination component.
1 parent fd2a9b8 commit 3f587ae

File tree

2 files changed

+144
-67
lines changed

2 files changed

+144
-67
lines changed

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

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
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+
<link
7+
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Lato&display=swap"
8+
rel="stylesheet"
9+
/>
10+
11+
<title>Accordion Component</title>
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+
MAIN COLOR: #087f5b
24+
GREY COLOR: #343a40
25+
*/
26+
27+
* {
28+
margin: 0;
29+
padding: 0;
30+
box-sizing: border-box;
31+
}
32+
33+
/* ------------------------ */
34+
/* GENERAL STYLES */
35+
/* ------------------------ */
36+
body {
37+
font-family: "Inter", sans-serif;
38+
color: #343a40;
39+
line-height: 1;
40+
display: flex;
41+
justify-content: center;
42+
}
43+
44+
.pagination {
45+
display: flex;
46+
align-items: center;
47+
gap: 12px;
48+
margin-top: 200px;
49+
}
50+
51+
.btn {
52+
border: 1px solid #087f5b;
53+
height: 48px;
54+
width: 48px;
55+
border-radius: 50%;
56+
background: none;
57+
cursor: pointer;
58+
}
59+
60+
.btn:hover {
61+
background-color: #087f5b;
62+
}
63+
64+
.btn:hover .btn-icon {
65+
stroke: #fff;
66+
}
67+
68+
.btn-icon {
69+
height: 24px;
70+
width: 24px;
71+
stroke: #087f5b;
72+
}
73+
74+
.page-link:link,
75+
.page-link:visited {
76+
font-size: 18px;
77+
color: #343a40;
78+
text-decoration: none;
79+
height: 36px;
80+
width: 36px;
81+
border-radius: 50%;
82+
display: flex;
83+
flex-direction: row;
84+
align-items: center;
85+
justify-content: center;
86+
}
87+
88+
.page-link:hover,
89+
.page-link:active,
90+
.page-link.page-link--current {
91+
background-color: #087f5b;
92+
color: #fff;
93+
}
94+
95+
.dots {
96+
color: #868e96;
97+
}
98+
</style>
99+
</head>
100+
<body>
101+
<div class="pagination">
102+
<button class="btn">
103+
<svg
104+
xmlns="http://www.w3.org/2000/svg"
105+
fill="none"
106+
viewBox="0 0 24 24"
107+
stroke-width="1.5"
108+
stroke="currentColor"
109+
class="btn-icon"
110+
>
111+
<path
112+
stroke-linecap="round"
113+
stroke-linejoin="round"
114+
d="M15.75 19.5L8.25 12l7.5-7.5"
115+
/>
116+
</svg>
117+
</button>
118+
<a href="#" class="page-link">1</a>
119+
<a href="#" class="page-link">2</a>
120+
<a href="#" class="page-link page-link--current">3</a>
121+
<a href="#" class="page-link">4</a>
122+
<a href="#" class="page-link">5</a>
123+
<a href="#" class="page-link">6</a>
124+
<span class="dots">...</span>
125+
<a href="#" class="page-link">23</a>
126+
<button class="btn">
127+
<svg
128+
xmlns="http://www.w3.org/2000/svg"
129+
fill="none"
130+
viewBox="0 0 24 24"
131+
stroke-width="1.5"
132+
stroke="currentColor"
133+
class="btn-icon"
134+
>
135+
<path
136+
stroke-linecap="round"
137+
stroke-linejoin="round"
138+
d="M8.25 4.5l7.5 7.5-7.5 7.5"
139+
/>
140+
</svg>
141+
</button>
142+
</div>
143+
</body>
144+
</html>

‎starter/06-Components/component.html

Lines changed: 0 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -38,73 +38,6 @@
3838
color: #343a40;
3939
line-height: 1;
4040
}
41-
42-
.accordion {
43-
width: 700px;
44-
margin: 100px auto;
45-
46-
display: flex;
47-
flex-direction: column;
48-
gap: 24px;
49-
}
50-
51-
.item {
52-
box-shadow: 0 0 32px rgba(0, 0, 0, 0.1);
53-
padding: 24px;
54-
55-
display: grid;
56-
grid-template-columns: auto 1fr auto;
57-
column-gap: 24px;
58-
row-gap: 32px;
59-
align-items: center;
60-
}
61-
62-
.number,
63-
.text {
64-
font-size: 24px;
65-
font-weight: 500;
66-
/* color: #087f5b; */
67-
}
68-
69-
.number {
70-
color: #ced4da;
71-
}
72-
.icon {
73-
width: 24px;
74-
height: 24px;
75-
stroke: #087f5b;
76-
}
77-
78-
.hidden-box {
79-
grid-column: 2;
80-
display: none;
81-
}
82-
83-
.hidden-box p {
84-
line-height: 1.6;
85-
margin-bottom: 24px;
86-
}
87-
.hidden-box ul {
88-
color: #868e96;
89-
margin-left: 20px;
90-
91-
display: flex;
92-
flex-direction: column;
93-
gap: 12px;
94-
}
95-
96-
.open {
97-
border-top: 4px solid #087f5b;
98-
}
99-
100-
.open .hidden-box {
101-
display: block;
102-
}
103-
104-
.open .number,
105-
.open .text {
106-
color: #087f5b;
107-
}
10841
</style>
10942
</head>
11043
<body></body>

0 commit comments

Comments
 (0)