Skip to content

Commit 70d4032

Browse files
committed
lesson 5-2: codely page course list end
1 parent 1856d0b commit 70d4032

File tree

3 files changed

+62
-9
lines changed

3 files changed

+62
-9
lines changed

52-codely-page-course-list/index.html

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@
4141
</header>
4242

4343
<main class="courses">
44-
<article class="course-card">
44+
<article tabindex="0" class="course-card">
4545
<div class="course-card__image">
4646
<img src="./assets/de-javascript-a-typescript.png" alt="Portada curso De JavaScript a TypeScript">
4747
</div>
@@ -53,7 +53,7 @@ <h3 class="course-card__title">🏗️ De JavaScript a TypeScript</h3>
5353
<p>¡Después de este curso no querrás volver a JavaScript!</p>
5454
</article>
5555

56-
<article class="course-card">
56+
<article tabindex="0" class="course-card">
5757
<div class="course-card__image">
5858
<img src="./assets/css-grid.jpg" alt="Portada curso CSS Grid a fondo">
5959
</div>
@@ -63,7 +63,7 @@ <h3 class="course-card__title">🍱 CSS Grid a fondo</h3>
6363
</p>
6464
</article>
6565

66-
<article class="course-card">
66+
<article tabindex="0" class="course-card">
6767
<div class="course-card__image">
6868
<img src="./assets/light-dark-themes.jpg" alt="Portada curso Light and Dark themes accesibles">
6969
</div>
@@ -74,7 +74,7 @@ <h3 class="course-card__title">🌚🌝 Light & Dark themes accesibles</h3>
7474
</p>
7575
</article>
7676

77-
<article class="course-card">
77+
<article tabindex="0" class="course-card">
7878
<div class="course-card__image">
7979
<img src="./assets/domain-driven-design.jpg" alt="Portada curso Domain-Drive Design">
8080
</div>
@@ -85,7 +85,7 @@ <h3 class="course-card__title">🕋 Domain-Driven Design</h3>
8585
</p>
8686
</article>
8787

88-
<article class="course-card">
88+
<article tabindex="0" class="course-card">
8989
<div class="course-card__image">
9090
<img src="./assets/php-8.jpg" alt="Portada curso PHP 9 Ejemplos para el Mundo Real">
9191
</div>
@@ -96,7 +96,7 @@ <h3 class="course-card__title">🐘 PHP 8: Novedades y ejemplos para el Mundo Re
9696
</p>
9797
</article>
9898

99-
<article class="course-card">
99+
<article tabindex="0" class="course-card">
100100
<div class="course-card__image">
101101
<img class="course-card__image" src="./assets/api-http-go-hexagonal.jpg"
102102
alt="Portada curso API HTTP en Go con arquitectura hexagonal">
@@ -111,7 +111,7 @@ <h3 class="course-card__title">⛳ API HTTP en Go aplicando Arquitectura Hexagon
111111
</p>
112112
</article>
113113

114-
<article class="course-card">
114+
<article tabindex="0" class="course-card">
115115
<div class="course-card__image">
116116
<img class="course-card__image" src="./assets/setup-linux.jpg" alt="Portada curso Setup Linux para programar">
117117
</div>
@@ -121,7 +121,7 @@ <h3 class="course-card__title">🐧 Setup Linux para Programar</h3>
121121
</p>
122122
</article>
123123

124-
<article class="course-card">
124+
<article tabindex="0" class="course-card">
125125
<div class="course-card__image">
126126
<img class="course-card__image" src="./assets/js-moderno.jpg" alt="Portada curso JavaScript moderno">
127127
</div>
@@ -133,7 +133,7 @@ <h3 class="course-card__title">🐥 JavaScript moderno: Buenas prácticas para e
133133
</p>
134134
</article>
135135

136-
<article class="course-card">
136+
<article tabindex="0" class="course-card">
137137
<div class="course-card__image">
138138
<img class="course-card__image" src="./assets/testing-frontend.jpg" alt="Portada curso Testing en frontend">
139139
</div>
Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
.courses {
2+
margin-top: 1.5rem;
3+
display: flex;
4+
flex-direction: column;
5+
align-items: center;
6+
gap: 1rem;
7+
align-content: center;
8+
9+
@media screen and (min-width: 50rem) {
10+
flex-wrap: wrap;
11+
height: 1500px;
12+
13+
&::before,
14+
&::after {
15+
content: "";
16+
flex-basis: 100%;
17+
width: 0;
18+
order: 2;
19+
}
20+
}
21+
22+
.course-card {
23+
width: 80%;
24+
25+
&__image {
26+
img {
27+
width: 100%;
28+
height: 100%;
29+
}
30+
}
31+
32+
&__title {
33+
color: #238b53;
34+
}
35+
36+
@media screen and (min-width: 50rem) {
37+
width: 28%;
38+
39+
&:nth-child(3n + 1) {
40+
order: 1;
41+
}
42+
43+
&:nth-child(3n + 2) {
44+
order: 2;
45+
}
46+
47+
&:nth-child(3n) {
48+
order: 3;
49+
}
50+
}
51+
}
52+
}
Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
@import "./base";
22
@import "./header";
3+
@import "./courses";

0 commit comments

Comments
 (0)