Entregable Página Estática

1. En primer lugar creamos un proyecto de Bootstrap 5 y partimos de la plantilla Simple, descargada del siguiente enlace. La decisión de escoger esa plantilla se debe a que tiene un diseño parecido a las webs de clubes universitarios similares, mostradas en la primera entrada de este blog de idea de proyecto. Además viene con un formulario final, lo que ayudará cumplir los requisitos de la entrega de la web.

2. Después creamos el favicon con el logo de la Asociación Familiar Codaste (ver entrada Colores) y posteriormente diseñamos un logo específico para el Club Universitario (siguiendo un estilo parecido y los mismos colores).

3. En tercer lugar creamos la página principal a través de una nueva imagen de fondo, de un texto y de una nueva gama de colores atendiendo a lo expuesto en la entrada "Colores". Después cambiaremos la paleta en el resto de la página web, pasando de los colores rojos y blancos que vienen por defecto a los naranjas y azules propuestos en la entrada Colores. Además eliminamos las partes que no queremos en nuestra página (apartado de pricing, team y testimonial) y por último cambiamos la información del "footer" incluyendo un enlace a la cuenta de Instagram del club.

4. A continuación vamos a editar el apartado de Blog, que pasará a llamarse Anuncios. Empezaremos cambiando las fotos y los títulos para adecuarlos a los planes que ofrece Codaste. Para mantener el tamaño de las imágenes pequeñas creamos una nueva clase: blog_image_small (en la plantilla simple para que el tamaño sea el mismo han cogido fotos del mismo tamaño, pero no va a ser lo que ocurrirá habitualmente), y editamos el css para que cumpla los requisitos que queremos.

5. Una vez editado el apartado de anuncios, pasamos a editar el apartado "Sobre Codaste". Para ello comenzamos cambiando el texto. Además añadimos un plugin jQuery de un mapa desde la página https://jasonewert.github.io/example-jquery-leaflet/index.html, y lo metemos en un contenedor a la derecha del texto.

6. Más tarde añadimos los servicios que ofrece el club.

7. Cambiamos el apartado de galería y añadimos un link a otras páginas html con todas las fotos (hemos puesto solamente una foto porque todavía no poseemos todas las fotos del club). Además en esa página hemos añadido un pequeño plugin jQuery llamado lightbox para que cuando pulses en una imagen, esta se agrande.

8. Por último, editamos el formulario y añadimos un html por defecto que aparezca al pulsar el botón "enviar" con el mismo nav y footer, manteniendo el estilo de la página.