Skip to content

Commit 1f92ba4

Browse files
ismanapaismanapa
committed
lesson 5-3: codely page pricing start
1 parent 70d4032 commit 1f92ba4

20 files changed

+2831
-0
lines changed

‎53-codely-page-pricing/.gitignore

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
node_modules
2+
css
3+
dist

‎53-codely-page-pricing/.stylelintrc.json

+9
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+
}

‎53-codely-page-pricing/assets/api-http-go-hexagonal.jpg

81.4 KB
Loading

‎53-codely-page-pricing/assets/css-grid.jpg

43.4 KB
Loading

‎53-codely-page-pricing/assets/de-javascript-a-typescript.png

146 KB
Loading

‎53-codely-page-pricing/assets/domain-driven-design.jpg

15.5 KB
Loading

‎53-codely-page-pricing/assets/js-moderno.jpg

42 KB
Loading

‎53-codely-page-pricing/assets/light-dark-themes.jpg

23.1 KB
Loading

‎53-codely-page-pricing/assets/logo-codelytv.png

3.74 KB
Loading

‎53-codely-page-pricing/assets/php-8.jpg

47.4 KB
Loading

‎53-codely-page-pricing/assets/setup-linux.jpg

76.9 KB
Loading

‎53-codely-page-pricing/assets/testing-frontend.jpg

33.7 KB
Loading

‎53-codely-page-pricing/index.html

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

0 commit comments

Comments
 (0)