-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
206 lines (199 loc) · 14.1 KB
/
index.html
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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="CSS/style.css"><!--referencia de css-->
<script src="JS/main.js"></script> <!--referencia de js-->
<link rel="icon" href="IMG/icon_color-03.svg"> <!--Aquí hay un icono-->
<title>https://eplam.com</title>
</head>
<body>
<div class="container"> <!--Aquí estará el contenedor donde trabajamos todo el home-->
<header>
<div class="linea_morada">Accede a TODOS los cursos disponibles por SOLO 9,99€ | Cancela cuando quieras <!--Esta x simula la x de cerrar banner--->
<img src="img/Xs-03.svg" alt="close"></div>
<nav><a href="index.html"><img class="logo" src="IMG/EPLAM-03.svg" alt=""></a> <!--Aquí va la imagen del logo-->
<ul class="cont-ul"> <!--Aquí va el menú-->
<li class="cursos"><a href="cursos.html">Cursos</a>
<ul class="ul-second">
<li><a href="curso_ciberseguridad.html">Ciberseguridad </a></li>
<li><a href="curso_hardwarehacking.html">Hardware-hacking</a></li>
<li><a href="curso_programacion.html">Programación</a></li>
<li><a href="curso_linuxbasics.html">Linux Basics </a></li>
</ul>
</li>
<li><a href="trabaja.html">Trabaja con Nosotros</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="nosotros.html">Nosotros</a></li>
</ul>
<div class="search-box">
<input class="search-input" type="text" name="" placeholder="">
<a href="#" class="search-btn">
<i class="fas fa-search"></i> <!--Hasta aquí se ha realizado un input search para que el usuario pueda buscar el contenido que necesite en la página.-->
</a>
</div>
<div><a href="Area_cliente.html"><img class="user_area" src="IMG/perfil_icon.svg" alt="usuario"></a></div><!--Área del cliente-->
</nav>
</header>
<div class="slider"><!--Aquí empieza el script de las imágenes que se van pasando. Las imágenes se cambiarán posteriormente-->
<div><img class="foto_home" src="IMG/galeria_1.png" alt="Imagen 1"></div>
<div><img class="foto_home" src="IMg/foto2.jpg" alt="Imagen 3"></div>
<div><img class="foto_home" src="IMG/galeria_2.png" alt="Imagen 2"></div>
<div><img class="foto_home" src="IMG/foto_1ciber.jpg" alt="Imagen 4"></div>
</div>
<script src="js/main.js"></script><!--Aquí se aplica el slider para que pueda pasar las imágenes del script viendo una imagen emergente en los circulos inferiores.-->
<div class="section_dos"> <!--Esta es la seccion dos de la página que va debajo de la imagen y es de color blanco-->
<div class="card_uno"><p>Aprende Python desde 0</p> <!--Estas son las secciones de "cards"-->
<img src="img/python.png" alt="Python">
<br><br><a href="curso_programacion.html"><input type="button" value="Ir al curso"></a>
</div>
<div class="card_dos"><p>Curso de Hacking Ético Avanzado</p><!--Estas son las secciones de "cards"-->
<img src="img/hacking.png" alt="hacking">
<br><a href="curso_ciberseguridad.html"><input type="button" value="Ir al curso"></a>
</div>
<div class="card_tres"><p>Crea tu propio USB Rubber Ducky</p><!--Estas son las secciones de "cards"-->
<img src="img/usb.png" alt="usb">
<br><a href="curso_hardwarehacking.html"><input type="button" value="Ir al curso"></a>
</div>
</div>
<div class="franja_morada"> <!--Esta es la franja morada que contiene otros tres divs para meter los textos-->
<p><b>+ de</b><span style="color:#F28C0F;"> 3500</span><br> alumnos</p>
<p><b>+ de</b><span style="color:#F28C0F;"> 1800</span><br> horas de aprendizaje</p>
<p><b>+ de</b><span style="color:#F28C0F;"> 80</span><br> cursos</p>
</div>
<div class="texto_section_tres"><h2>Accede a TODOS los cursos las veces que quieras</h2>
<p>Sin salir de tu casa. Cancela cuando quieras.</p></div>
<div class="section_tres"> <!--Esta sección (caja) engloba todos los elementos desde la franja morada hasta categorías (categorías no incluido) -->
<div class="card_precios_uno"> <!--Esta es la "carta" de 9,99€ al mes-->
<p>1 mes</p>
<h2>9,99€</h2>
<p>Acceso a todos los Cursos</p>
<a href="Area_cliente.html"><input type="button" value="¡Suscríbete!"></a>
</div>
<div class="card_precios_dos"> <!--Esta es la "carta" de 26,99€ al mes-->
<p>3 meses</p>
<h2>26,99€</h2>
<p>8,99€/mes</p>
<a href="Area_cliente.html"><input type="button" value="¡Suscríbete!"></a>
</div>
<div class="card_precios_tres"> <!--Esta es la "carta" de 99,99€ al mes-->
<p>12 meses</p>
<h2>99,99€</h2>
<p>8,33€/mes</p>
<a href="Area_cliente.html"><input type="button" value="¡Suscríbete!"></a>
</div>
</div>
<div class="section_cuatro"><h1>Categorías</h1><!--Primera categoría-->
<div class="card">
<div class="face front"><!--Parte delantera de nuestra categoría-->
<img src="IMG/hardware.png" alt="Hardware">
<h3>Hardware Hacking</h3>
</div>
<div class="face back"><!--Parte trasera de la categoría-->
<p>En esta sección aprenderás todo lo relacionado con la modificación del hardware orientada a vulnerar sistemas informáticos éticamente</p>
</div>
</div>
<div class="card"><!--Segunda categoría-->
<div class="face front"><!--Parte delantera de nuestra categoría-->
<img src="IMG/programacion.png" alt="Programación">
<h3>Programación</h3>
</div>
<div class="face back"> <!--Parte trasera de la categoría-->
<p>Aquí aprenderás a dominar diversos lenguajes de programación como: Python, C++, Bash, Rust, Golang etc.</p>
</div>
</div>
<div class="card"> <!--Tercera categoría-->
<div class="face front">
<img src="IMG/seguridad.png" alt="Ciberseguridad">
<h3>Ciberseguridad</h3>
</div>
<div class="face back"> <!--Parte trasera de la categoría-->
<p>En esta sección podrás aprender los fundamentos esenciales de la seguridad informática especialmente enfocado en Pentesting</p>
</div>
</div>
<div class="card"><!--Cuarta categoría-->
<div class="face front"><!--Parte delantera de nuestra categoría-->
<img src="IMG/sistema.png" alt="Linux">
<h3>Linux Basics</h3>
</div>
<div class="face back"> <!--Parte trasera de la categoría-->
<p>En esta categoría aprnederás desde 0 a dominar los distintos Sistemas Operativos Linux, gestores de paquetes, comandos básicos y diversas aplicaciones.</p>
</div>
</div>
</div>
<div class="container-faq"> <!--Esta sección son preguntas que tendrán una respuesta como si fuese un menú despegable. El usuario dará click y aparecerá la respuesta.-->
<div class="titulo-faq">
<h3>FAQ'S</h3>
</div>
<div class="item-faq">
<div class="question">
<h3>¿Habrá Cursos nuevos?</h3>
<div class="more"><i>+</i></div>
</div>
<div class="answer">
<p>Si, constantemente incluimos nuevos cursos y certificaciones</p>
</div>
</div>
<div class="item-faq">
<div class="question">
<h3>¿Cómo funciona una suscripción en Eplam?</h3>
<div class="more"><i>+</i></div>
</div>
<div class="answer">
<p>Al confirmar tu suscripción tendrás disponible en la plataforma el material informativo,acceso a contacto con profesores y material audiovisual</p>
</div>
</div>
<div class="item-faq">
<div class="question">
<h3>¿Recibiré algún título?</h3>
<div class="more"><i>+</i></div>
</div>
<div class="answer">
<p>Si, constantemente incluimos nuevos cursos y certificaciones</p>
</div>
</div>
<div class="item-faq">
<div class="question">
<h3>¿Dónde cancelo mi suscripción?</h3>
<div class="more"><i>+</i></div>
</div>
<div class="answer">
<p>Si, aunque se podrán generar comisiones bancarias por motivos de cambios de divisas. </p>
</div>
</div>
<div class="item-faq">
<div class="question">
<h3>¿Puedo comprar un solo curso?</h3>
<div class="more"><i>+</i></div>
</div>
<div class="answer">
<p>Si, la cantidad de cursos es de tu elección</p>
</div>
</div>
</div>
<footer>
<div class="container_footer">
<div class="logo_footer"><img src="IMG/logo_footer.svg" alt="logo"></div><!--Esto es el logo entre el footer y la estructura principal de la página-->
<div class="box__footer">
<a href="cursos.html">Cursos</a>
<a href="trabaja.html">Trabaja con Nosotros</a>
<a href="nosotros.html">Nosotros</a>
<a href="blog.html">Blog</a>
</div>
<div class="box__footer"> <!--Segunda columna de links del footer-->
<a href="curso_ciberseguridad.html">Ciberseguridad</a>
<a href="curso_hardwarehacking.html">Hardware hacking</a>
<a href="curso_programacion.html">Programación</a>
<a href="curso_linuxbasics.html">Linux Basics</a>
</div>
<div class="box_copyright"><!--Fila de abajo del footer con los links a política de privacidad etc.-->
<p>Política de Privacidad</p>
<p>Condiciones de contratación</p>
<p>Política de cookies</p>
<p>Aviso legal</p>
<p>@Copyright Eplam 2022</p>
</div>
</div>
</footer>