Proyecto del curso II : Web estática

 Web estática:

En este blog voy a explicar como he creado mi web estática y algunos pasos que he seguido:

Plantilla web:

He estado investigando plantillas en la página de https://bootstraptaste.com/ y la de https://bootstrapmade.com/demo/Imperial/ ha sido la que más me ha llamado la atención, me ha gustado mucho el diseño y como se distribuía el contenido, por lo que he decidido implementarlo en mi web.

He implementado algunos cambios como por ejemplo en la portada:

 Los cambios que ha habido en la portada respecto a la plantilla han sido:

-Cambio y color en la barra de navegación (en vez de abajo ahora se sitúa arriba y el color ha cambiado a amarillo).

-Las letras de la barra de navegación pasan de ser de blancas a negras , y de azul cuando pasas el ratón a blancas.

-Cambio en las imágenes de la plantilla por imágenes importadas por mi y mi logo de la web .

-Cambio en el color de los botones y en el subrayado.

-Cambio de color al pasar el ratón  por encima de los botones.

-Eliminación de secciones y sustitución por las mías(pasan de ser 8 a 5).

Sección: ¿Quiénes somos?

Cambios realizados:

-Color de fondo.

-Cambio de imagen.

-Cambio en el color de los títulos.

-Cambio en el color de la flechita que dirige al inicio.

-Cambios en el contenido del texto tanto en títulos y párrafos.

Sección: ¿Qué puedes aprender?

Cambios realizados:

-Imagen de fondo.

-Color de los iconos.

-Símbolo de los iconos.

-Cambios en el contenido del texto tanto en títulos y párrafos.

Sección: Tutoriales:

Cambios realizados:

-Cambios en el contenido del texto tanto en títulos y párrafos.

-Se han añadido las secciones de las que voy hacer tutoriales con su filtrado correspondiente.

-Cambio en el HTML en el filtrado , ya no se filtra a través de imágenes o porfolios ahora se filtra a través de artículos(textos e imágenes).

-Se ha añadido un menú nuevo en jugadores, añadiendo una nueva lista con el filtrado para cada jugador y con un plugin jQuery que realiza la función de toggle en el que si pulsas la palabra "JUGADORES:" se te abre un menú con los jugadores que hay disponibles y si vuelves a pinchar en "JUGADORES:" se te cierra el menú.

Sección: Contáctanos:

Cambios realizados:

-Color de fondo.

-Se ha eliminado el formulario que había.

-Cambios en el contenido del texto tanto en títulos y párrafos

-Se ha añadido un botón con un enlace que dirige a mi formulario.

-En el footer se ha añadido el nombre El dorsal del gol

Formulario: 

Para hacer el formulario he recogido ideas de esta página web:  https://facturacionweb.site/blog/formularios-contacto-html5-gratis/  en especial de: https://codepen.io/ssbalakumar/pen/bGwwaG obtiendo como resultado final del formulario:

Datos del formulario:

-El formulario cuenta con un plugin jQuery even y odd en el que se van alternando los colores según avanzan los inputs.

-Cuenta con 3 inputs obligatorios que son el nombre, apellidos y correo.

-Cuenta con un input donde puedes seleccionar la clase de tutorial que quieres que se te envié.

-Cuenta con una opción de elegir sí o no en la que esta integrado un plugin jQuery en el que si seleccionas la opción si se te abre un input donde puedes poner el nombre del jugador

Y si seleccionas la opción no desaparece

 -Un textarea donde puedes escribir si tienes alguna sugerencia.

-Por último un botón submit en el que si has rellenado todo correctamente te llevara a una página respuesta.