Skip to content

Commit d19fc17

Browse files
ismanapaismanapa
committed
lesson 5-1: codely page menu start
1 parent 759c051 commit d19fc17

18 files changed

+2720
-0
lines changed

‎51-codely-page-menu/.gitignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
node_modules
2+
css
3+
dist

‎51-codely-page-menu/.stylelintrc.json

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
2+
{
3+
"plugins": ["stylelint-scss"],
4+
"extends": ["stylelint-config-standard"],
5+
"rules": {
6+
"at-rule-no-unknown": null,
7+
"scss/at-rule-no-unknown": true
8+
}
9+
}

‎51-codely-page-menu/assets/api-http-go-hexagonal.jpg

81.4 KB
Loading

‎51-codely-page-menu/assets/css-grid.jpg

43.4 KB
Loading

‎51-codely-page-menu/assets/de-javascript-a-typescript.png

146 KB
Loading

‎51-codely-page-menu/assets/domain-driven-design.jpg

15.5 KB
Loading

‎51-codely-page-menu/assets/js-moderno.jpg

42 KB
Loading

‎51-codely-page-menu/assets/light-dark-themes.jpg

23.1 KB
Loading

‎51-codely-page-menu/assets/logo-codelytv.png

3.74 KB
Loading

‎51-codely-page-menu/assets/php-8.jpg

47.4 KB
Loading

‎51-codely-page-menu/assets/setup-linux.jpg

76.9 KB
Loading

‎51-codely-page-menu/assets/testing-frontend.jpg

33.7 KB
Loading

‎51-codely-page-menu/index.html

Lines changed: 243 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,243 @@
1+
<!DOCTYPE html>
2+
<html lang="es">
3+
4+
<head>
5+
<meta charset="utf-8" />
6+
<meta name="referrer" content="no-referrer-when-downgrade" />
7+
<title>Café con Codely News</title>
8+
<meta name="description" content="Café con Codely news" />
9+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
10+
<link href="css/index.css" rel="stylesheet" type="text/css" media="all" />
11+
</head>
12+
13+
<body>
14+
<header class="header">
15+
<img class="header__image" alt="Logo de Codely" src="./assets/logo-codelytv.png">
16+
<nav class="header__menu">
17+
<ul>
18+
<li>
19+
<a href="https://codely.tv/pro/cursos">Cursos</a>
20+
</li>
21+
<li>
22+
<a href="https://codely.tv/pro/teams">Empresas</a>
23+
</li>
24+
<li>
25+
<a href="https://codely.tv/pro/comunidades">Comunidades</a>
26+
</li>
27+
<li>
28+
<a href="https://www.youtube.com/CodelyTV">Youtube</a>
29+
</li>
30+
<li>
31+
<a href="https://codely.tv/blog/">Blog</a>
32+
</li>
33+
<li>
34+
<a href="mailto:soporte@codely.tv?Subject=[CodelyTV]%20Contacto%20web">Contacta</a>
35+
</li>
36+
</ul>
37+
</nav>
38+
<a class="header__subscribe" href="https://codely.tv/pro/cursos">Subscribete</a>
39+
</header>
40+
41+
<main class="courses">
42+
<article class="course-card">
43+
<div class="course-card__image">
44+
<img src="./assets/de-javascript-a-typescript.png" alt="Portada curso De JavaScript a TypeScript">
45+
</div>
46+
<h3 class="course-card__title">🏗️ De JavaScript a TypeScript</h3>
47+
<p class="course-card__description">
48+
🏍️ Aprende TypeScript partiendo de un ejemplo de JavaScript en el que haremos el proceso de refactor poco a
49+
poco y analizando las principales características de TypeScript.
50+
</p>
51+
<p>¡Después de este curso no querrás volver a JavaScript!</p>
52+
</article>
53+
54+
<article class="course-card">
55+
<div class="course-card__image">
56+
<img src="./assets/css-grid.jpg" alt="Portada curso CSS Grid a fondo">
57+
</div>
58+
<h3 class="course-card__title">🍱 CSS Grid a fondo</h3>
59+
<p class="course-card__description">
60+
Aprende a sacar provecho de CSS Grid para crear layouts flexibles sin necesidad de recurrir a frameworks.
61+
</p>
62+
</article>
63+
64+
<article class="course-card">
65+
<div class="course-card__image">
66+
<img src="./assets/light-dark-themes.jpg" alt="Portada curso Light and Dark themes accesibles">
67+
</div>
68+
<h3 class="course-card__title">🌚🌝 Light & Dark themes accesibles</h3>
69+
<p class="course-card__description">
70+
Aprende a implementar temas claros y oscuros en una página web de forma accesible, cómo integrarlo en tu
71+
arquitectura CSS y cómo adaptar los diseños para que te queden unos temas finísimos.
72+
</p>
73+
</article>
74+
75+
<article class="course-card">
76+
<div class="course-card__image">
77+
<img src="./assets/domain-driven-design.jpg" alt="Portada curso Domain-Drive Design">
78+
</div>
79+
<h3 class="course-card__title">🕋 Domain-Driven Design</h3>
80+
<p class="course-card__description">
81+
Aprende a modelar tus aplicaciones centrándote en tu dominio, definir Bounded Contexts, agregados, value
82+
objects, y mucho más. Todo de forma práctica y con ejemplos de código ⚡
83+
</p>
84+
</article>
85+
86+
<article class="course-card">
87+
<div class="course-card__image">
88+
<img src="./assets/php-8.jpg" alt="Portada curso PHP 9 Ejemplos para el Mundo Real">
89+
</div>
90+
<h3 class="course-card__title">🐘 PHP 8: Novedades y ejemplos para el Mundo Real™</h3>
91+
<p class="course-card__description">
92+
Migra tus aplicaciones a PHP 8 paso a paso, consigue tests más mantenibles gracias a Named Arguments, Value
93+
Objects más simples con Constructor Property Promotion, reemplaza PECL (obsoleto), y mucho más.
94+
</p>
95+
</article>
96+
97+
<article class="course-card">
98+
<div class="course-card__image">
99+
<img class="course-card__image" src="./assets/api-http-go-hexagonal.jpg"
100+
alt="Portada curso API HTTP en Go con arquitectura hexagonal">
101+
</div>
102+
<h3 class="course-card__title">⛳ API HTTP en Go aplicando Arquitectura Hexagonal</h3>
103+
<p class="course-card__description">
104+
Aprende a desarrollar tu primera API HTTP en Go aplicando algunos de los fundamentos de la Arquitectura
105+
Hexagonal.
106+
</p>
107+
<p>
108+
!Sin olvidarnos de su adorable mascota!
109+
</p>
110+
</article>
111+
112+
<article class="course-card">
113+
<div class="course-card__image">
114+
<img class="course-card__image" src="./assets/setup-linux.jpg" alt="Portada curso Setup Linux para programar">
115+
</div>
116+
<h3 class="course-card__title">🐧 Setup Linux para Programar</h3>
117+
<p class="course-card__description">
118+
Configura tu ordenador con Linux tal y cómo lo tiene Dani para programar lo más cómodamente posible.
119+
</p>
120+
</article>
121+
122+
<article class="course-card">
123+
<div class="course-card__image">
124+
<img class="course-card__image" src="./assets/js-moderno.jpg" alt="Portada curso JavaScript moderno">
125+
</div>
126+
<h3 class="course-card__title">🐥 JavaScript moderno: Buenas prácticas para empezar y refactorizar aplicaciones
127+
</h3>
128+
<p class="course-card__description">
129+
Aprende buenas prácticas para empezar aplicaciones JavaScript vanilla desde 0 y refactorizar código legacy dando
130+
soporte a navegadores antiguos.
131+
</p>
132+
</article>
133+
134+
<article class="course-card">
135+
<div class="course-card__image">
136+
<img class="course-card__image" src="./assets/testing-frontend.jpg" alt="Portada curso Testing en frontend">
137+
</div>
138+
<h3 class="course-card__title">🐙 Testing en frontend</h3>
139+
<p class="course-card__description">
140+
Aprende cómo testear tus aplicaciones frontend, aplicando buenas prácticas para conseguir unos tests mantenibles
141+
que aporten confianza.
142+
</p>
143+
</article>
144+
</main>
145+
146+
<section class="pricing">
147+
<article class="pricing-tier">
148+
<div class="pricing-tier__title">
149+
<h3>Plan Individual</h3>
150+
<p>¡Ahorra 50€!</p>
151+
<p>299€ / año</p>
152+
<button class="pricing-tier__subscribe">
153+
Subscribete
154+
</button>
155+
</div>
156+
<div class="pricing-tier__perks">
157+
<ul>
158+
<li>
159+
✅ Acceso a todos los cursos.
160+
</li>
161+
<li>
162+
✅ Centraliza todo en un único pago.
163+
</li>
164+
<li>
165+
✅ El mejor ahorro para el plan individual.
166+
</li>
167+
<li>
168+
✅ Contenido de calidad impartido por profesionales.
169+
</li>
170+
<li>
171+
✅ Nuevo contenido cada semana.
172+
</li>
173+
<li>
174+
✅ Acceso a la comunidad CodelyTV
175+
</li>
176+
<li>
177+
✅ Certificados al completar los cursos
178+
</li>
179+
</ul>
180+
</div>
181+
</article>
182+
183+
<article class="pricing-tier">
184+
<div class="pricing-tier__title">
185+
<h3>Plan Individual</h3>
186+
<p>29€ / mes</p>
187+
<button class="pricing-tier__subscribe">
188+
Subscribete
189+
</button>
190+
</div>
191+
<div class="pricing-tier__perks">
192+
<ul>
193+
<li>
194+
✅ Acceso a todos los cursos.
195+
</li>
196+
<li>
197+
✅ Contenido de calidad impartido por profesionales.
198+
</li>
199+
<li>
200+
✅ Nuevo contenido cada semana.
201+
</li>
202+
<li>
203+
✅ Acceso a la comunidad CodelyTV
204+
</li>
205+
<li>
206+
✅ Certificados al completar los cursos
207+
</li>
208+
</ul>
209+
</div>
210+
</article>
211+
212+
<article class="pricing-tier">
213+
<div class="pricing-tier__title">
214+
<h3>Plan Empresas</h3>
215+
<p>desde 168€</p>
216+
<button class="pricing-tier__subscribe">
217+
Subscribete
218+
</button>
219+
</div>
220+
<div class="pricing-tier__perks">
221+
<ul>
222+
<li>
223+
✅ Gestión centralizada de cuentas.
224+
</li>
225+
<li>
226+
✅ Todo los beneficios del plan individual.
227+
</li>
228+
<li>
229+
✅ Reducción de precios por incremento de cuentas.
230+
</li>
231+
<li>
232+
✅ Informe trimestral de progreso.
233+
</li>
234+
<li>
235+
✅ Y muchos más beneficios.
236+
</li>
237+
</ul>
238+
</div>
239+
</article>
240+
</section>
241+
</body>
242+
243+
</html>

0 commit comments

Comments
 (0)