diff --git a/.gitignore b/.gitignore index 77b0418..39a1c27 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,3 @@ #.DS_Store +**/.DS_Store +.DS_Store diff --git a/README.md b/README.md index 15cd16a..84cefce 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,92 @@ -# btc-geekshubs-15092023-proyecto-1 -Mi primer proyecto en Bootstrap para el bootcamp de Full Stack en Geekshubs + + +# Proyecto 1 - Carta Restaurante Digital + +Hola mundo! : ) + +Este es mi primer proyecto como parte del Bootcamp Fullstack Developer de Geekshubs y también mi primera página web. + +He creado la imagen de marca de una supuesta pizzeria que ofrece productos artesanales y de proximidad. + +## Despliegue en Github Pages + +https://paco-fuentes.github.io/btc-geekshubs-15092023-proyecto-1/ + +### Descripción del Proyecto + +El proyecto consiste en una página web para una pizzaería llamada "Ñum", donde se presenta una carta digital, información sobre el restaurante y una sección de inicio. + + +### Tecnologías utilizadas + +HTML5 CSS3 Bootstrap + + +## Características + +**Página de Inicio.** + +Presentación de la pizzería Ñum. Se trata de la pagína de inicio con imagenes muy grandes de presentación de la pizzería dentro de un componente de carousel. + +![image](./img/cap-1.png) +![image](./img/cap-ini-res-1.png) +![image](./img/cap-ini-res-2.png) + +**Página de la Carta.** + +Lista de todos los platos disponibles en el menú, ordenados en una matriz con un selector de pizzas, entrantes, postres y bebidas. + +![image](./img/cap-2.png) +![image](./img/cap-car-res.png) + +**Página de About us.** + +Información sobre los principios y valores del restaurante. Composición básica de bootstrap de fila y columna, con un gran baner arriba, con una imagen del logo creado para esta maqueta, y texto explicando los valores de la marca. + +![image](./img/cap-3.png) +![image](./img/cap-abo-res.png) + +**Página de Reserva.** + +Sección de reserva. Esta página en un principio era la seccion final de "Sobre nosotros" pero decidí crear otro apartado para ponerle un mapa con la etiqueta iframe que por falta de tiempo no pude incluir sin que rompiese la composición. + +![image](./img/cap-4.png) +![image](./img/cap-res-res.png) + + +### Logros + +- He conseguido hacer un diseño 100% responsive cumpliendo los obejetivos que me había propuesto: + + - Navbar y Footer. + - Carousel a pantalla completa. + - Carta con selector de famlia de alimentos. + - Sección about por columnas y con banner. + - Maqueta de página de reserva. + +- He adquirido la capacidad de afrontar un futuro diseño en bootstrap de manera más fluida, el uso, conocimiento y manipulación de clases CSS, tanto creadas, como manipuladas de elementos Bootstrap. + + +### Mejoras futuras (Al acabar el bootcamp...) + +- Al tratarse de un proyecto de caracter muy urgente con una tecnogía nueva (Bootstrap) y no tener mucho bagaje escribiendo código este me ha quedado muy sucio, algo para tener en cuenta a mejorar en siguientes proyectos. + +- No conseguí colocar un mapa dentro de una etiqueta iframe en la sección about a tiempo para la entrega. + +- No conseguí investigar a tiempo la recolocación de las filas y columnas de la seccion "Sobre nosotros" en modo móvil y no me gusta que en el orden vertical de este modo se vean dos imágenes seguidas sin que hay a texto entre ellas. + + +### Bugs Conocidos a la entrega del proyecto + +1. Las flechas del selector del carousel en la pantalla de inicio se superponen al texto en modo móvil. +2. Error en el que si hay más texto en las cards de la carta del menú, estas pierden su proporción vertical. + +### Licencia + +Este proyecto está bajo la Licencia MIT. Consulta el archivo [LICENSE](insertar enlace al archivo LICENSE) para obtener más detalles. + +### Autor + +- Paco Fuentes + + diff --git a/css/styles.css b/css/styles.css index 8d8ab55..4c25309 100644 --- a/css/styles.css +++ b/css/styles.css @@ -1,5 +1,76 @@ + + +/* TEXT */ + +@import url('https://fonts.googleapis.com/css2?family=Amatic+SC&display=swap'); + +h1, h3{ + font-family: 'Amatic SC', cursive; +} + + +/* SLIDER - AJUSTES DE IMAGEN DEL CAROUSEL*/ + +.bg-cover{ + background-position: center !important; + background-size: cover !important; + background-repeat: no-repeat !important; +} + +.slide-1{ + + background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.9)), url(../img/bg-carousel-wide-1.png); + +} + +.slide-2{ + + background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.9)), url(../img/bg-carousel-wide-2.png); + +} + +.slide-3{ + + background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.9)), url(../img/bg-carousel-wide-3.png); + +} + +/* .bg-cover{ + background-position: center; + background-size: cover; + background-repeat: no-repeat; +} + */ + + + +a{ + color: darkseagreen; +} + +/* BOTONES + +.btn{ + border: 0; + padding: 1rem, 2.5rem; +} + +.btn-brand{ + background-color: lightgreen; + transition:350ms; +} + +.btn-brand:hover{ + background-color: rgb(114, 208, 114); + transition:350ms; + +} + */ + +/* --------------COLORES DE ÁREA PARA TEST----------------- */ + body{ - background-color: black; + background-color: whitesmoke; margin: 0; padding:0; } @@ -26,8 +97,87 @@ body{ } +/* --------------CONTAINER FLUID----------------- */ -.container-fluid { +/* .container-fluid { height: 100vh; width: 100vw; -} \ No newline at end of file +} */ + + +/* INTRO TEXT MENU */ + +.intro-text{ + margin-bottom: 3rem; + text-align:center; +} + +.intro-text-p{ + max-width: 32rem; + margin: 1rem auto 0 auto; +} + + +/* EN PAGINA MENU */ + +#menu .nav-pills .nav-link{ + background-color: white; + margin-left: 0.5rem; + margin-right: 0.5rem; + margin-top: 0.5rem; + margin-bottom: 0.5rem; + color:darkseagreen; + box-shadow: 0 0.2rem 2rem rgba(0, 0, 0, 0.1); +} + +#menu .nav-pills .nav-link.active{ + background-color: darkseagreen; + margin-left: 0.5rem; + margin-right: 0.5rem; + margin-top: 0.5rem; + margin-bottom: 0.5rem; + color:white; + box-shadow: 0 0.2rem 2rem rgba(0, 0, 0, 0.2); +} + + +/* CAMBIOS EN BOTON CLASE PRIMARY */ + +.btn-primary{ + background-color: darkseagreen; + border: darkseagreen; + transition: 100ms; +} + +.btn-primary:active{ + background-color: darkseagreen !important; + border: darkseagreen !important; +} + + +.btn-primary:hover{ + background-color: rgb(123, 163, 123); + border: rgb(138, 182, 138); +} + + + + +/* .menu-item .euros{ + + block-size: auto; +} + */ + + .shadow-on-hover{ + transition: all 200ms; + } + + .shadow-on-hover:hover{ + box-shadow: 0 0.8rem 3rem rgba(0, 0, 0, 0.1); + } + + +/* .about{ + flex-direction:row; + } */ diff --git a/img/about.jpg b/img/about.jpg new file mode 100644 index 0000000..7493145 Binary files /dev/null and b/img/about.jpg differ diff --git a/img/bebida-1.jpg b/img/bebida-1.jpg new file mode 100644 index 0000000..6ee5c10 Binary files /dev/null and b/img/bebida-1.jpg differ diff --git a/img/bebida-2.jpg b/img/bebida-2.jpg new file mode 100644 index 0000000..093b197 Binary files /dev/null and b/img/bebida-2.jpg differ diff --git a/img/bg-carousel-wide-1.png b/img/bg-carousel-wide-1.png new file mode 100644 index 0000000..04b3dad Binary files /dev/null and b/img/bg-carousel-wide-1.png differ diff --git a/img/bg-carousel-wide-2.png b/img/bg-carousel-wide-2.png new file mode 100644 index 0000000..80a8da0 Binary files /dev/null and b/img/bg-carousel-wide-2.png differ diff --git a/img/bg-carousel-wide-3.png b/img/bg-carousel-wide-3.png new file mode 100644 index 0000000..24d8586 Binary files /dev/null and b/img/bg-carousel-wide-3.png differ diff --git a/img/cap-1.png b/img/cap-1.png new file mode 100644 index 0000000..c614555 Binary files /dev/null and b/img/cap-1.png differ diff --git a/img/cap-2.png b/img/cap-2.png new file mode 100644 index 0000000..d498d25 Binary files /dev/null and b/img/cap-2.png differ diff --git a/img/cap-3.png b/img/cap-3.png new file mode 100644 index 0000000..10f3024 Binary files /dev/null and b/img/cap-3.png differ diff --git a/img/cap-4.png b/img/cap-4.png new file mode 100644 index 0000000..3fe0f71 Binary files /dev/null and b/img/cap-4.png differ diff --git a/img/cap-abo-res.png b/img/cap-abo-res.png new file mode 100644 index 0000000..46e1092 Binary files /dev/null and b/img/cap-abo-res.png differ diff --git a/img/cap-car-res.png b/img/cap-car-res.png new file mode 100644 index 0000000..16bc202 Binary files /dev/null and b/img/cap-car-res.png differ diff --git a/img/cap-ini-res-1.png b/img/cap-ini-res-1.png new file mode 100644 index 0000000..0fd5241 Binary files /dev/null and b/img/cap-ini-res-1.png differ diff --git a/img/cap-ini-res-2.png b/img/cap-ini-res-2.png new file mode 100644 index 0000000..4290538 Binary files /dev/null and b/img/cap-ini-res-2.png differ diff --git a/img/cap-res-res.png b/img/cap-res-res.png new file mode 100644 index 0000000..cadb25e Binary files /dev/null and b/img/cap-res-res.png differ diff --git a/img/entrante-1.jpg b/img/entrante-1.jpg new file mode 100644 index 0000000..8abde4f Binary files /dev/null and b/img/entrante-1.jpg differ diff --git a/img/entrante-2.jpg b/img/entrante-2.jpg new file mode 100644 index 0000000..5e167ec Binary files /dev/null and b/img/entrante-2.jpg differ diff --git a/img/entrante-3.jpg b/img/entrante-3.jpg new file mode 100644 index 0000000..c52580b Binary files /dev/null and b/img/entrante-3.jpg differ diff --git a/img/entrante-4.jpg b/img/entrante-4.jpg new file mode 100644 index 0000000..2d00e36 Binary files /dev/null and b/img/entrante-4.jpg differ diff --git a/img/logo-master.png b/img/logo-master.png new file mode 100644 index 0000000..bd9c94a Binary files /dev/null and b/img/logo-master.png differ diff --git a/img/logo-trans-black-ok.png b/img/logo-trans-black-ok.png new file mode 100644 index 0000000..8b78640 Binary files /dev/null and b/img/logo-trans-black-ok.png differ diff --git a/img/logo-trans-black.png b/img/logo-trans-black.png new file mode 100644 index 0000000..1e291b5 Binary files /dev/null and b/img/logo-trans-black.png differ diff --git a/img/logo-trans.png b/img/logo-trans.png new file mode 100644 index 0000000..1e291b5 Binary files /dev/null and b/img/logo-trans.png differ diff --git a/img/pizza-1.png b/img/pizza-1.png new file mode 100644 index 0000000..af424fb Binary files /dev/null and b/img/pizza-1.png differ diff --git a/img/pizza-2.jpg b/img/pizza-2.jpg new file mode 100644 index 0000000..f01b770 Binary files /dev/null and b/img/pizza-2.jpg differ diff --git a/img/pizza-3.jpg b/img/pizza-3.jpg new file mode 100644 index 0000000..e54d7f6 Binary files /dev/null and b/img/pizza-3.jpg differ diff --git a/img/pizza-4.jpg b/img/pizza-4.jpg new file mode 100644 index 0000000..a94dd38 Binary files /dev/null and b/img/pizza-4.jpg differ diff --git a/img/pizza-5.jpg b/img/pizza-5.jpg new file mode 100644 index 0000000..cbd3c6d Binary files /dev/null and b/img/pizza-5.jpg differ diff --git a/img/pizza-6.jpg b/img/pizza-6.jpg new file mode 100644 index 0000000..617b8ca Binary files /dev/null and b/img/pizza-6.jpg differ diff --git a/img/pizza-7.jpg b/img/pizza-7.jpg new file mode 100644 index 0000000..a0bbadf Binary files /dev/null and b/img/pizza-7.jpg differ diff --git a/img/pizza-8.jpg b/img/pizza-8.jpg new file mode 100644 index 0000000..32d0b88 Binary files /dev/null and b/img/pizza-8.jpg differ diff --git a/img/pizza-col-1.jpg b/img/pizza-col-1.jpg new file mode 100644 index 0000000..8a90409 Binary files /dev/null and b/img/pizza-col-1.jpg differ diff --git a/img/pizza-col-2.jpg b/img/pizza-col-2.jpg new file mode 100644 index 0000000..a53210f Binary files /dev/null and b/img/pizza-col-2.jpg differ diff --git a/img/pizza-col-3.jpg b/img/pizza-col-3.jpg new file mode 100644 index 0000000..d07a48d Binary files /dev/null and b/img/pizza-col-3.jpg differ diff --git a/img/pizza-main.png b/img/pizza-main.png new file mode 100644 index 0000000..09ec6c9 Binary files /dev/null and b/img/pizza-main.png differ diff --git a/img/postre-1.jpg b/img/postre-1.jpg new file mode 100644 index 0000000..668b10a Binary files /dev/null and b/img/postre-1.jpg differ diff --git a/img/postre-2.jpg b/img/postre-2.jpg new file mode 100644 index 0000000..569b959 Binary files /dev/null and b/img/postre-2.jpg differ diff --git a/img/postre-3.jpg b/img/postre-3.jpg new file mode 100644 index 0000000..7780950 Binary files /dev/null and b/img/postre-3.jpg differ diff --git a/img/postre-4.jpg b/img/postre-4.jpg new file mode 100644 index 0000000..84b5f1e Binary files /dev/null and b/img/postre-4.jpg differ diff --git a/index.html b/index.html index b03beec..9d6d439 100644 --- a/index.html +++ b/index.html @@ -2,57 +2,145 @@ - - - Document - - + + + YummY ÑuM - + - -
- - + -
cabecera
línea2
+ - + -
banner1
- + -
banner2
+ + +
+ + + + - + -
-
plato1
-
plato2
-
plato3
-
plato4
+ -
plato5
-
plato6
-
plato7
-
plato8
+ -
plato9
-
plato10
-
plato11
-
plato12
-
+ + + + + + + +
+ +
+ +
+ + + - \ No newline at end of file diff --git a/pages/about.html b/pages/about.html new file mode 100644 index 0000000..f3affb1 --- /dev/null +++ b/pages/about.html @@ -0,0 +1,174 @@ + + + + + + + YummY ÑuM + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + +
+ +
+ +
+ + +
+
+ + + + +
+
+ +
+
+

Acerca de Nosotros

+
+

En Ñum, no somos solo una pizzería, somos una expresión de nuestros valores y pasión por la comida de + calidad. Fundada con la convicción de ofrecer a nuestros clientes una experiencia culinaria excepcional, + nos enorgullece presentar una pizzería que combina lo artesanal y lo vegano en un solo lugar..

+

Nuestra misión es simple pero fundamental: ofrecer comida de la más alta calidad posible. Utilizamos + ingredientes frescos y locales siempre que podemos, asegurando que cada bocado que disfrutes en Ñum sea + una explosión de sabores auténticos y frescos. Desde nuestra masa de pizza integral hasta nuestros postres + caseros y entrantes originales, cada detalle es importante para nosotros.

+ +
+
+ +
+ +
+
+

Sostenibilidad y Responsabilidad

+
+

En Ñum, creemos en la inclusividad culinaria. Nuestro menú es una celebración de la diversidad de sabores + y preferencias alimenticias. Ya sea que sigas una dieta vegana, busques opciones más saludables o + simplemente quieras disfrutar de una buena pizza, encontrarás algo que te encante en nuestro menú.

+

Nos preocupamos profundamente por el planeta y la comunidad que servimos. Es por eso que nos esforzamos + por reducir nuestro impacto ambiental y apoyar a productores locales. Nuestro compromiso con la + sostenibilidad se refleja en cada plato que servimos, desde nuestros ingredientes hasta nuestras prácticas + en la cocina.

+ +
+
+ +
+
+ +
+ +
+
+ +
+
+

Ambiente Cálido y Cerveza Artesanal

+
+

En Ñum, te invitamos a disfrutar de una experiencia gastronómica en un ambiente acogedor y familiar. + Queremos que te sientas como en casa mientras saboreas nuestras creaciones culinarias. Nuestro personal + amable y servicial está aquí para hacer que tu visita sea memorable.

+

Complementa tu comida con nuestra selección de cervezas artesanales cuidadosamente elegidas para realzar + los sabores de nuestras pizzas. O si prefieres algo más refrescante, prueba nuestra horchata casera, una + bebida tradicional que te transportará a sabores auténticos.

+
+ Explora nuestro menú +
+
+ + + +
+
+ + + + +
+ + + + +
+ +
+ + + + + +
+ + + \ No newline at end of file diff --git a/pages/carta.html b/pages/carta.html new file mode 100644 index 0000000..c2a299e --- /dev/null +++ b/pages/carta.html @@ -0,0 +1,591 @@ + + + + + + + YummY ÑuM + + + + + + + + + + + + + + + + + + +
+ + + + + + + + +
+ + + + + + + + + + + + +
+ +
+ +
+ + + + + + + \ No newline at end of file diff --git a/pages/reserva.html b/pages/reserva.html new file mode 100644 index 0000000..c3bb67b --- /dev/null +++ b/pages/reserva.html @@ -0,0 +1,134 @@ + + + + + + + YummY ÑuM + + + + + + + + + + + + + + +
+ + + + + + + + + + + + +
+ +
+ +
+
+

RESERVA

+
+

En Ñum, no solo estamos en el negocio de la comida; estamos en el negocio de la satisfacción + del cliente + y la pasión por la cocina. Gracias por unirte a nosotros en este emocionante viaje + culinario. ¡Esperamos + verte pronto y compartir una deliciosa comida contigo!

+
+ +
+
+
+ Nombre: +
+ Teléfono: +
+ Fecha: +
+ Reservar + + +
+
+ +
+
+ + + + +
+ + + + +
+ +
+ + + + + +
+ + + \ No newline at end of file