Merge pull request #2 from paco-fuentes/dev

Dev

.gitignore

@@ -1 +1,3 @@
 #.DS_Store
+**/.DS_Store
+.DS_Store

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
+
+<img src="https://camo.githubusercontent.com/49fbb99f92674cc6825349b154b65aaf4064aec465d61e8e1f9fb99da3d922a1/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f68746d6c352d2532334533344632362e7376673f7374796c653d666f722d7468652d6261646765266c6f676f3d68746d6c35266c6f676f436f6c6f723d7768697465" alt="HTML5" data-canonical-src="https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&amp;logo=html5&amp;logoColor=white" style="max-width: 100%;"> <img src="https://camo.githubusercontent.com/e6b67b27998fca3bccf4c0ee479fc8f9de09d91f389cccfbe6cb1e29c10cfbd7/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f637373332d2532333135373242362e7376673f7374796c653d666f722d7468652d6261646765266c6f676f3d63737333266c6f676f436f6c6f723d7768697465" alt="CSS3" data-canonical-src="https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&amp;logo=css3&amp;logoColor=white" style="max-width: 100%;"> <img src="https://camo.githubusercontent.com/b768ae6e4f89b74512e6de02a8367fd71465bc3d88ef1cf2f1622e2017c32bea/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f626f6f7473747261702d2532333536334437432e7376673f7374796c653d666f722d7468652d6261646765266c6f676f3d626f6f747374726170266c6f676f436f6c6f723d7768697465" alt="Bootstrap" data-canonical-src="https://img.shields.io/badge/bootstrap-%23563D7C.svg?style=for-the-badge&amp;logo=bootstrap&amp;logoColor=white" style="max-width: 100%;">
+
+
+## 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
+
+

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;
-}
+} */
+
+
+/* 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;
+ }  */