-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
311 lines (263 loc) · 18.7 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
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
<!DOCTYPE html>
<html lang="es">
<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">
<meta name="theme-color" content="#2091FP">
<!-- Primary Meta Tags -->
<title>EJR DESING'S - Entorno Web a tu medida. Página web personalizada.</title>
<meta name="title" content="EJR DESING'S - Entorno Web a tu medida. Página web personalizada." />
<meta name="description" content=" ¡Haz que tu marca brille en el mundo digital con nuestra ayuda! Descubre cómo podemos hacer que tu visión cobre vida en la web hoy mismo." />
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://eliasjr1989.gibhub.io/" />
<meta property="og:title" content="EJR DESING'S" />
<meta property="og:description" content=" ¡Haz que tu marca brille en el mundo digital con nuestra ayuda! Descubre cómo podemos hacer que tu visión cobre vida en la web hoy mismo." />
<meta property="og:image" content="https://eliasjr1989.gibhub.io/images/meta-tags.png" />
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content="https://metatags.iPREVIEWo/" />
<meta property="twitter:title" content="EJR DESING'S - Entorno Web a tu medida. Página web personalizada." />
<meta property="twitter:description" content=" ¡Haz que tu marca brille en el mundo digital con nuestra ayuda! Descubre cómo podemos hacer que tu visión cobre vida en la web hoy mismo." />
<meta property="twitter:image" content="https://eliasjr1989.gibhub.io/meta-tags.png" />
<title>Art Web</title>
<link rel="shortcut icon" href="./images/vector.jpg" type="image/x-icon">
<link rel="stylesheet" href="./css/normalize.css">
<link rel="stylesheet" href="./css/estilos.css">
</head>
<body>
<header class="hero">
<nav class="nav container">
<div class="nav__logo">
<h2 class="nav__title">EJR DESINGS</h2>
</div>
<ul class="nav__link nav__link--menu">
<li class="nav__items">
<a href="#" class="nav__links">Inicio</a>
</li>
<li class="nav__items">
<a href="#" class="nav__links">Servicios</a>
</li>
<li class="nav__items">
<a href="#" class="nav__links">Nosotros</a>
<li class="nav__items">
<a href="#" class="nav__links">Contacto</a>
</li>
</li>
<img src="./images/close.svg" class="nav__close" alt="">
</ul>
<div class="nav__menu">
<img src="./images/menu.svg" class="nav__img" alt="">
</div>
</nav>
<section class="hero__container container">
<h1 class="hero__title">· IMAGINA TU ENTORNO WEB,<br>NOSOTROS LO HACEMOS REALIDAD ·</h1>
<hr>
<p class="hero__paragrah">
¡Haz que tu marca brille en el mundo digital con nuestra ayuda! Descubre cómo podemos hacer que tu visión cobre vida en la web hoy mismo.</p>
<a href="#" class="cta">Solicitar Información</a>
</section>
</header>
<main>
<section class="container about">
<h2 class="subtitle">"DISEÑAMOS ENTORNOS WEB QUE CAUTIVAN, INSPIRAN Y GENERAN RESULTADOS"</h2><br>
<p class="about__paragraph">Desde el diseño inicial hasta el lanzamiento final, nuestro equipo trabaja en estrecha colaboración contigo para desarrollar una presencia en línea que refleje la esencia de tu marca y atraiga a tu audiencia objetivo. Descubre cómo podemos ayudarte a destacar en el competitivo mundo digital con nuestros servicios de diseño web a medida.</p><br>
<div class="about__main">
<article class="about__icons">
<img src="./images/cloud.svg" class="about__icon" alt="">
<h3 class="about__title">Diseño Web a Medida</h3>
<p class="about__paragraph">Tu web desde cero. Desde la apariencia visual hasta la funcionalidad, acordados con los requisitos y objetivos únicos del cliente. Sitio web sea único, exclusivo y perfectamente adaptado para representar la marca y cumplir con las expectativas del público objetivo.
</p>
</article>
<article class="about__icons">
<img src="./images/paint.svg" class="about__icon" alt="">
<h3 class="about__title">Entorno Profesional y Creativo</h3>
<p class="about__paragraph">Fomentamos la innovación y la excelencia en cada proyecto. Trabajamos en un ambiente colaborativo y estimulante, donde se valoran las ideas originales y se promueve el crecimiento profesional. Estamos comprometidos a ofrecer soluciones creativas que superen las expectativas de nuestros clientes y inspiren resultados excepcionales.</p>
</article>
<article class="about__icons">
<img src="./images/tool.svg" class="about__icon" alt="">
<h3 class="about__title">Mantenimiento Web y Actualizaciones</h3>
<p class="about__paragraph">Garantizamos un entorno web de óptimas condiciones en todo momento. Nos encargamos de realizar las actualizaciones necesarias, asegurando la seguridad, funcionalidad y rendimiento continuo de tu sitio. Con un enfoque proactivo, nos anticipamos a cualquier problema potencial y nos aseguramos de que tu sitio web esté siempre actualizado y funcionando sin problemas."</p>
</article>
</div>
</section>
<section class="knowledge">
<div class="knowledge__container container">
<div class="knowledge__texts">
<h2 class="subtitle">AÑOS DE EXPERIENCIA EN LA CREACIÓN DE ENTORNOS WEB PERSONALIZADOS</h2>
<p class="knowledge__paragraph">Entendemos la importancia de una presencia en línea sólida y atractiva. Nuestro enfoque personalizado garantiza que cada sitio web que creamos sea único, funcional y visualmente impresionante. Desde pequeñas empresas hasta grandes corporaciones, estamos aquí para ayudarte a alcanzar tus objetivos en línea y hacer que tu marca brille en la web.</p>
<a href="#" class="cta">Empieza ahora</a>
</div>
<figure class="knowledge__picture">
<img src="./images/webdesing.jpg" class="knowledge__img" alt="">
</figure>
</div>
</section>
<section class="price container">
<h2 class="subtitle">ELIGE TU PLAN</h2>
<div class="price__table">
<div class="price__element">
<p class="price__name">BASIC</p>
<h3 class="price__price">199€/Anual</h3>
<div class="price__items">
<p class="price__features">SERVICIO 1</p>
<p class="price__features">SERVICIO 2</p>
<a href="#" class="price__cta">Comprar</a>
</div>
</div>
<div class="price__element price__element--best">
<p class="price__name">MEDIUM</p>
<h3 class="price__price">399€/Anual</h3>
<div class="price__items">
<p class="price__features">SERVICIO 1</p>
<p class="price__features">SERVICIO 2</p>
<p class="price__features">SERVICIO 3</p>
<p class="price__features">SERVICIO 4</p>
<a href="#" class="price__cta">Comprar</a>
</div>
</div>
<div class="price__element">
<p class="price__name">PREMIUM</p>
<h3 class="price__price">599€/Anual</h3>
<div class="price__items">
<p class="price__features">SERVICIO 1</p>
<p class="price__features">SERVICIO 2</p>
<p class="price__features">SERVICIO 3</p>
<p class="price__features">SERVICIO 4</p>
<p class="price__features">SERVICIO 5</p>
<p class="price__features">SERVICIO 6</p>
<a href="#" class="price__cta">Comprar</a>
</div>
</div>
</div>
</section>
<section class="testimony">
<div class="testimony__container container">
<img src="./images/flechaizquierda.svg" class="testimony__arrow" id="before" alt="">
<section class="testimony__body testimony__body--show" data-id="1">
<div class="testimony__texts">
<h2 class="subtitle">Keisha, <span class="testimony__course"> ama de casa.</span></h2>
<p class="testimony__review">"¡Increíble servicio! La página web que nos diseñaron ha transformado completamente nuestra presencia en línea. Desde que la lanzamos, hemos visto un aumento significativo en las citas y consultas. El diseño es elegante, intuitivo y refleja perfectamente la esencia de nuestro salón de estética. Además, la integración de la reserva en línea ha sido un éxito total entre nuestros clientes. ¡Recomiendo sus servicios al 100%!"</div>
<figure class="testimony__picture">
<img src="./images/face11.jpg" class="testimony__img" alt="">
</figure>
</section>
<section class="testimony__body" data-id="2">
<div class="testimony__texts">
<h2 class="subtitle">Laura Marín Piqueras, <span class="testimony__course">empresaria.</span></h2>
<p class="testimony__review">"Estamos encantados con la nueva página web que nos crearon. No solo es moderna y fácil de navegar, sino que también nos ha ayudado a captar nuevos clientes y a gestionar mejor nuestras solicitudes de servicio. La sección de testimonios y el blog informativo son adiciones maravillosas que han elevado nuestra credibilidad. El equipo fue extremadamente profesional y entendió exactamente lo que necesitábamos. ¡Gracias por un trabajo tan excepcional!"</div>
<figure class="testimony__picture">
<img src="./images/face22.jpg" class="testimony__img" alt="">
</figure>
</section>
<section class="testimony__body" data-id="3">
<div class="testimony__texts">
<h2 class="subtitle">Elías Jiminián, <span class="testimony__course">full stack developer.</span></h2>
<p class="testimony__review">""¡No podríamos estar más satisfechos con nuestra nueva página web! Desde el primer día, la atención al detalle y el compromiso con nuestra visión fueron evidentes. La plataforma es intuitiva y visualmente impresionante, mostrando perfectamente nuestros proyectos de reformas. La funcionalidad para que los clientes soliciten presupuestos en línea ha facilitado mucho el proceso. Hemos recibido numerosos elogios de nuestros clientes y hemos visto un incremento notable en los contactos. ¡Gran trabajo y servicio impecable!"</div>
<figure class="testimony__picture">
<img src="./images/face33.jpg" class="testimony__img" alt="">
</figure>
</section>
<img src="./images/flechaderecha.svg" class="testimony__arrow" id="next" alt="">
</div>
</section>
<section class="questions container">
<h2 class="subtitle">Preguntas frecuentes</h2>
<p class="questions__paragraph">"¿Tienes alguna pregunta sobre nuestro servicio de diseño web a medida? Encuentra aquí respuestas a las preguntas más comunes que nuestros clientes suelen tener. Si no encuentras la información que necesitas, no dudes en ponerte en contacto con nuestro equipo. Estaremos encantados de ayudarte."</p>
<section class="questions__container">
<article class="questions__padding">
<div class="questions__answer">
<h3 class="questions__title">¿Qué es el diseño web a medida?
<span class="questions__arrow">
<img src="./images/flecha.svg" class="questions_img" alt="">
</span>
</h3>
<p class="questions__show">
El diseño web a medida se refiere a la creación de sitios web completamente personalizados y adaptados a las necesidades específicas de cada cliente. En lugar de utilizar plantillas predefinidas, cada aspecto del sitio se desarrolla desde cero para garantizar un diseño único y exclusivo.</p>
</div>
</article>
<article class="questions__padding">
<div class="questions__answer">
<h3 class="questions__title">¿Cuáles son las ventajas del diseño web a medida?
<span class="questions__arrow">
<img src="./images/flecha.svg" class="questions__img" alt="">
</span>
</h3>
<p class="questions__show">
El diseño web a medida permite una mayor flexibilidad y personalización, lo que significa que el sitio web puede adaptarse completamente a las necesidades y objetivos del cliente. Además, ofrece un mayor control sobre la apariencia visual, la funcionalidad y la experiencia del usuario.</p>
</div>
</article>
<article class="questions__padding">
<div class="questions__answer">
<h3 class="questions__title">¿Cómo funciona el proceso de diseño web a medida?
<span class="questions__arrow">
<img src="./images/flecha.svg" class="questions__img" alt="">
</span>
</h3>
<p class="questions__show">
El proceso de diseño web a medida comienza con una consulta inicial para comprender las necesidades y objetivos del cliente. Luego, se realiza una planificación detallada y se desarrolla un diseño personalizado desde cero. Después de la aprobación del diseño, se procede a la fase de desarrollo y pruebas, seguida del lanzamiento final del sitio web.</p>
</div>
</article>
<article class="questions__padding">
<div class="questions__answer">
<h3 class="questions__title">¿Cuánto tiempo lleva desarrollar un sitio web a medida?
<span class="questions__arrow">
<img src="./images/flecha.svg" class="questions__img" alt="">
</span>
</h3>
<p class="questions__show">
El tiempo de desarrollo de un sitio web a medida puede variar según la complejidad del proyecto y los requisitos específicos del cliente. En general, el proceso puede tomar varias semanas o incluso meses, pero se puede proporcionar una estimación más precisa después de una consulta inicial.</p>
</div>
</article>
</section>
</section>
<section class="questions__offer">
<h2 class="subtitle">¿ESTÁS LIST@ PARA DAR EL SIGUIENTE PASO EN TU PRESENCIA EN LINEA?</h2>
<p class="questions__copy">Nuestro enfoque centrado en el cliente garantiza que tu visión se convierta en realidad, mientras que nuestra experiencia y conocimiento técnico garantizan resultados excepcionales. Desde la conceptualización hasta la implementación, estamos aquí para hacer que tu experiencia en la web sea un éxito."</p>
<a href="#" class="cta">Compra tu plan</a>
</section>
</main>
<footer class="footer">
<section class="footer__container container">
<nav class="nav nav--footer">
<h2 class="footer__title">Contáctanos:</h2>
<ul class="nav__link nav__link--footer">
<li class="nav__items">
<a href="#" class="nav__links">Inicio</a>
</li>
<li class="nav__items">
<a href="#" class="nav__links">Acerca de</a>
</li>
<li class="nav__items">
<a href="#" class="nav__links">Contacto</a>
<li class="nav__items">
<a href="#" class="nav__links">Blog</a>
</li>
</li>
</ul>
</nav>
<form class="footer__form">
<h2 class="footer__formulario">Solicitud de información:</h2>
<div class="footer__inputs">
<input type="text" placeholder="Nombre y Apellidos" class="footer__input">
<input type="text" placeholder="Nº Tlf." class="footer__input">
<input type="email" placeholder="Email" class="footer__input" name="replyto">
<input type="submit" value="Enviar" class="footer__submit">
</div>
</form>
</section>
<section class="footer__copy container">
<div class="footer__social">
<a href="#" class="footer__icons"><img src="./images/instagram.svg" alt="" class="footer__img"></a>
<a href="#" class="footer__icons"><img src="./images/facebook.svg" alt="" class="footer__img"></a>
<a href="#" class="footer__icons"><img src="./images/youtube.svg" alt="" class="footer__img"></a>
</div>
<h3 class="footer__copyright"> Derechos reservados © Elías JR.</h3>
</section>
</footer>
<script src="./js/slider.js"></script>
<script src="./js/questions.js"></script>
<script src="./js/menu.js"></script>
</body>
</html>