-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
140 lines (139 loc) · 10.3 KB
/
Copy pathindex.html
File metadata and controls
140 lines (139 loc) · 10.3 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<!DOCTYPE html>
<html lang="ca">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Projecte Tailwind — Lliçons</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50 min-h-screen">
<div class="max-w-5xl mx-auto px-4 py-8">
<div class="mb-8">
<div class="flex items-center justify-between">
<div>
<h1 class="text-3xl font-bold text-gray-900">Projecte Tailwind</h1>
<p class="text-gray-600 mt-1">Lliçons per aprendre Tailwind CSS des de zero. Cada lliçó conté apunts, exercicis i exemples interactius.</p>
</div>
<a href="https://github.com/opensource-cat/opencode-tailwind-lessons"
class="inline-flex items-center gap-2 bg-gray-800 hover:bg-gray-700 text-white text-sm font-medium px-4 py-2 rounded-lg transition-colors shrink-0">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z"/></svg>
GitHub
</a>
</div>
</div>
<div class="overflow-x-auto">
<table class="w-full border-collapse bg-white shadow-sm rounded-lg overflow-hidden">
<thead>
<tr class="bg-gray-100 text-gray-700 text-sm font-semibold uppercase tracking-wide">
<th class="px-4 py-3 text-left">#</th>
<th class="px-4 py-3 text-left">Lliçó</th>
<th class="px-4 py-3 text-center">Exemples</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200">
<tr class="hover:bg-blue-50 transition-colors">
<td class="px-4 py-3 text-gray-400 font-mono text-sm">1</td>
<td class="px-4 py-3 font-medium text-gray-900">Què és Tailwind i per què servir-lo?</td>
<td class="px-4 py-3 text-center"><a href="lessons/01-introduccio/2_exemples.html" class="text-blue-600 hover:text-blue-800 text-sm font-medium">Mostra</a></td>
</tr>
<tr class="hover:bg-blue-50 transition-colors">
<td class="px-4 py-3 text-gray-400 font-mono text-sm">2</td>
<td class="px-4 py-3 font-medium text-gray-900">Tipografia i text</td>
<td class="px-4 py-3 text-center"><a href="lessons/02-tipografia/2_exemples.html" class="text-blue-600 hover:text-blue-800 text-sm font-medium">Mostra</a></td>
</tr>
<tr class="hover:bg-blue-50 transition-colors">
<td class="px-4 py-3 text-gray-400 font-mono text-sm">3</td>
<td class="px-4 py-3 font-medium text-gray-900">Colors i fons</td>
<td class="px-4 py-3 text-center"><a href="lessons/03-colors-fons/2_exemples.html" class="text-blue-600 hover:text-blue-800 text-sm font-medium">Mostra</a></td>
</tr>
<tr class="hover:bg-blue-50 transition-colors">
<td class="px-4 py-3 text-gray-400 font-mono text-sm">4</td>
<td class="px-4 py-3 font-medium text-gray-900">Spacing: margin i padding</td>
<td class="px-4 py-3 text-center"><a href="lessons/04-spacing/2_exemples.html" class="text-blue-600 hover:text-blue-800 text-sm font-medium">Mostra</a></td>
</tr>
<tr class="hover:bg-blue-50 transition-colors">
<td class="px-4 py-3 text-gray-400 font-mono text-sm">5</td>
<td class="px-4 py-3 font-medium text-gray-900">Width i height</td>
<td class="px-4 py-3 text-center"><a href="lessons/05-sizing/2_exemples.html" class="text-blue-600 hover:text-blue-800 text-sm font-medium">Mostra</a></td>
</tr>
<tr class="hover:bg-blue-50 transition-colors">
<td class="px-4 py-3 text-gray-400 font-mono text-sm">6</td>
<td class="px-4 py-3 font-medium text-gray-900">Flexbox (Part 1): contenidor</td>
<td class="px-4 py-3 text-center"><a href="lessons/06-flexbox-contenidor/2_exemples.html" class="text-blue-600 hover:text-blue-800 text-sm font-medium">Mostra</a></td>
</tr>
<tr class="hover:bg-blue-50 transition-colors">
<td class="px-4 py-3 text-gray-400 font-mono text-sm">7</td>
<td class="px-4 py-3 font-medium text-gray-900">Flexbox (Part 2): elements fills</td>
<td class="px-4 py-3 text-center"><a href="lessons/07-flexbox-elements/2_exemples.html" class="text-blue-600 hover:text-blue-800 text-sm font-medium">Mostra</a></td>
</tr>
<tr class="hover:bg-blue-50 transition-colors">
<td class="px-4 py-3 text-gray-400 font-mono text-sm">8</td>
<td class="px-4 py-3 font-medium text-gray-900">Grid CSS</td>
<td class="px-4 py-3 text-center"><a href="lessons/08-grid/2_exemples.html" class="text-blue-600 hover:text-blue-800 text-sm font-medium">Mostra</a></td>
</tr>
<tr class="hover:bg-blue-50 transition-colors">
<td class="px-4 py-3 text-gray-400 font-mono text-sm">9</td>
<td class="px-4 py-3 font-medium text-gray-900">Borders i border-radius</td>
<td class="px-4 py-3 text-center"><a href="lessons/09-borders/2_exemples.html" class="text-blue-600 hover:text-blue-800 text-sm font-medium">Mostra</a></td>
</tr>
<tr class="hover:bg-blue-50 transition-colors">
<td class="px-4 py-3 text-gray-400 font-mono text-sm">10</td>
<td class="px-4 py-3 font-medium text-gray-900">Display i visibilitat</td>
<td class="px-4 py-3 text-center"><a href="lessons/10-display/2_exemples.html" class="text-blue-600 hover:text-blue-800 text-sm font-medium">Mostra</a></td>
</tr>
<tr class="hover:bg-blue-50 transition-colors">
<td class="px-4 py-3 text-gray-400 font-mono text-sm">11</td>
<td class="px-4 py-3 font-medium text-gray-900">Responsive Design (Part 1): breakpoints</td>
<td class="px-4 py-3 text-center"><a href="lessons/11-responsive-breakpoints/2_exemples.html" class="text-blue-600 hover:text-blue-800 text-sm font-medium">Mostra</a></td>
</tr>
<tr class="hover:bg-blue-50 transition-colors">
<td class="px-4 py-3 text-gray-400 font-mono text-sm">12</td>
<td class="px-4 py-3 font-medium text-gray-900">Responsive Design (Part 2): patterns pràctics</td>
<td class="px-4 py-3 text-center"><a href="lessons/12-responsive-patterns/2_exemples.html" class="text-blue-600 hover:text-blue-800 text-sm font-medium">Mostra</a></td>
</tr>
<tr class="hover:bg-blue-50 transition-colors">
<td class="px-4 py-3 text-gray-400 font-mono text-sm">13</td>
<td class="px-4 py-3 font-medium text-gray-900">Estats: hover, focus, active i more</td>
<td class="px-4 py-3 text-center"><a href="lessons/13-estats/2_exemples.html" class="text-blue-600 hover:text-blue-800 text-sm font-medium">Mostra</a></td>
</tr>
<tr class="hover:bg-blue-50 transition-colors">
<td class="px-4 py-3 text-gray-400 font-mono text-sm">14</td>
<td class="px-4 py-3 font-medium text-gray-900">Pseudo-classes i dark mode</td>
<td class="px-4 py-3 text-center"><a href="lessons/14-pseudo-dark/2_exemples.html" class="text-blue-600 hover:text-blue-800 text-sm font-medium">Mostra</a></td>
</tr>
<tr class="hover:bg-blue-50 transition-colors">
<td class="px-4 py-3 text-gray-400 font-mono text-sm">15</td>
<td class="px-4 py-3 font-medium text-gray-900">Formularis amb Tailwind</td>
<td class="px-4 py-3 text-center"><a href="lessons/15-formularis/2_exemples.html" class="text-blue-600 hover:text-blue-800 text-sm font-medium">Mostra</a></td>
</tr>
<tr class="hover:bg-blue-50 transition-colors">
<td class="px-4 py-3 text-gray-400 font-mono text-sm">16</td>
<td class="px-4 py-3 font-medium text-gray-900">Animacions i transicions</td>
<td class="px-4 py-3 text-center"><a href="lessons/16-animacions/2_exemples.html" class="text-blue-600 hover:text-blue-800 text-sm font-medium">Mostra</a></td>
</tr>
<tr class="hover:bg-blue-50 transition-colors">
<td class="px-4 py-3 text-gray-400 font-mono text-sm">17</td>
<td class="px-4 py-3 font-medium text-gray-900">Imatges i fons</td>
<td class="px-4 py-3 text-center"><a href="lessons/17-imatges/2_exemples.html" class="text-blue-600 hover:text-blue-800 text-sm font-medium">Mostra</a></td>
</tr>
<tr class="hover:bg-blue-50 transition-colors">
<td class="px-4 py-3 text-gray-400 font-mono text-sm">18</td>
<td class="px-4 py-3 font-medium text-gray-900">Components pràctics</td>
<td class="px-4 py-3 text-center"><a href="lessons/18-components/2_exemples.html" class="text-blue-600 hover:text-blue-800 text-sm font-medium">Mostra</a></td>
</tr>
<tr class="hover:bg-blue-50 transition-colors">
<td class="px-4 py-3 text-gray-400 font-mono text-sm">19</td>
<td class="px-4 py-3 font-medium text-gray-900">Positioning i valors arbitraris</td>
<td class="px-4 py-3 text-center"><a href="lessons/19-positioning/2_exemples.html" class="text-blue-600 hover:text-blue-800 text-sm font-medium">Mostra</a></td>
</tr>
<tr class="hover:bg-blue-50 transition-colors">
<td class="px-4 py-3 text-gray-400 font-mono text-sm">20</td>
<td class="px-4 py-3 font-medium text-gray-900">Bones pràctiques</td>
<td class="px-4 py-3 text-center"><a href="lessons/20-bones-practiques/2_exemples.html" class="text-blue-600 hover:text-blue-800 text-sm font-medium">Mostra</a></td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>