# Ejercicios 4

## Ejercicio 1 - Crear una Web responsive

Para poner en práctica los conceptos teóricos sobre diseño *responsive,* se propone como ejercicio la creación de un pequeño sitio Web estático que use los estilos y componentes de Bootstrap.

La temática, contenidos y estilos del sitio son libres, pero deberá tener al menos las siguientes características:

* El sitio estará formado por al menos 3 páginas enlazadas entre sí (con contenidos estáticos).
* Ser completamente *responsive*, de forma que se adapte tanto a pantallas extra pequeñas de *smartphone* como a *tablets*

   y pantallas más grandes de portátiles y de escritorio.
* Tener una barra de navegación principal que se contraiga cuando la pantalla sea pequeña. Esta barra tendrá al menos:
  * Dos enlaces.
  * Una imagen como logotipo.
  * Un buscador (aunque no sea funcional).
* Un carousel en la página principal con tres imágenes. Modifica el intervalo para que las imágenes se muestren durante 3000 ms.
* Contener los siguientes elementos (un ejemplo de cada uno en alguna de las páginas del sitio web):
  * Iconos con FontAwesome.
  * Botones.
  * Un desplegable.
  * Una sección con fichas o pestañas.
  * Un formulario horizontal.
  * Una tabla responsive con bordes y de tipo *striped.*
* El estilo base a utilizar será el que define Bootstrap, si se definen estilos CSS personalizados tendrán que estar en un fichero separado, llamado "custom.css", y que será común para todas las páginas del sitio.

Un posible ejemplo de una web que podéis realizar sería, por ejemplo, una web de recetas. Esta podría tener una página principal con la información más importante, una página con una receta de ejemplo (aquí se podrían utilizar las fichas o pestañas para cambiar entre elaboración e ingredientes, los cuales podrían estar en una tabla) y otra página para el envío de recetas (con un formulario horizontal, botones para envíar y cancelar, y un desplegable para elegir la categoría).

De forma similar se podría crear la web sobre coches u otro tipo de vehículos, mascotas, bicicletas, etc.

> Al ser una web estática tendréis que repetir partes del código en todas las páginas, por ejemplo la barra de menú principal tendrá que ser igual en todas las páginas. Por este motivo se recomienda realizar primero estas partes, y una vez probadas, copiar y pegar el código en el resto de páginas.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://ajgallego.gitbook.io/bootstrap-4/ejercicios-4.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.