From db9812571f73935d742c910783ea98c18e6d8c3d Mon Sep 17 00:00:00 2001
From: mikel <donmiguelus8@gmail.com>
Date: Sat, 20 Jan 2024 09:00:12 +0100
Subject: [PATCH] Segundo Commit

---
 CSS/main.css    | 1305 +++++++++++++++++++++++++++++++++++++++++++++++
 HTML/index.html |  136 +++++
 2 files changed, 1441 insertions(+)
 create mode 100644 CSS/main.css
 create mode 100644 HTML/index.html

diff --git a/CSS/main.css b/CSS/main.css
new file mode 100644
index 0000000..756227a
--- /dev/null
+++ b/CSS/main.css
@@ -0,0 +1,1305 @@
+
+
+/*---------------------GRID HEADER PAGINAS--------------------*/
+
+
+
+.grid-cabeza-container {
+    display: grid;
+    grid-template-areas: 
+    "header header"
+    "nav nav";
+}
+
+
+
+.grid-cabeza-logo {
+    text-align: center;
+    grid-area: header;
+  
+
+}
+
+.barraInicio {
+    grid-area: nav;
+    display: flex;
+    flex-direction: row;
+    margin: 0;
+    padding: 0;
+    background: linear-gradient(45deg, #138522, gold, black);
+    position: relative;
+    animation: cambiar 10s ease-in infinite;
+    background-size: 200% 200%;
+
+}
+
+.itemBarra {
+    list-style: none;
+    color: white;
+    width: 100%;
+    height: 25px;
+    padding-top: 6px;
+    text-align: center;
+    border: 2px solid white;
+    
+    
+   
+}
+
+@keyframes cambiar{
+    0%{background-position: 0 50%;}
+    50%{background-position: 100% 50%;}
+    100%{background-position: 0 50%;}
+
+}
+
+.enlacePaginas {
+    text-decoration: none;
+    color: white;
+}
+
+/*----------------------------Boton Arriba------------------*/
+
+.btn-up {
+    width: 35px;
+    height: 35px;
+    outline: 0;
+    border-radius: 50%;
+    border: 1px solid #138522;
+    background-color: #138522;
+    position: fixed;
+    cursor: pointer;
+    right: 40px;
+    bottom: 50px;
+    transition: all 1s ease-in-out;
+    color: white;
+    opacity: .5;
+
+}
+
+
+.btn-up:hover{
+    opacity: 1;
+}
+
+/*------------------------------CUERPO----------------------------------*/
+
+    body {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+        
+    }
+
+   
+/*----------------------CABECERA INTRO PAGINAS---------------*/
+
+
+        
+
+    .titulo-inicio{
+        text-align: center;
+        background-image: url(../RECURSOS/Logo/fuego2.jpg);
+        background-size: cover;
+        box-shadow: 2px 2px 5px grey;
+        color: white;
+    }
+
+ 
+
+/*----------------------INICIO------------------------*/
+   
+.art-inicio {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+}
+
+.cuerpo-inicio{
+  
+    padding: 50px;
+}
+.img-inicio {
+    padding: 20px;
+}
+/*----------------------GALLETAS------------------------*/
+
+.aviso-galletas{
+    display: none;
+    background: #fff;
+    padding: 20px;
+    width: cal(100% - 40px);
+    max-width: 300px;
+    border-radius: 10px;
+    border:1px solid #07360d;
+    position: fixed;
+    bottom: 20px;
+    left: 20px;
+    z-index: 100;
+    padding-top: 40px;
+    box-shadow: 0px 2px 20px 10px rgba(222, 222, 222, .25);
+    text-align: center;
+}
+
+.aviso-galletas.active {
+    display: block;
+}
+.img-galleta{
+    max-width: 100px;
+    position: absolute;
+    top: -50px;
+    left: calc(50% - 50px);
+}
+
+.aviso-galletas .titulo-galletas {
+    margin-bottom: 15px;
+    color: #0c5416;
+}
+
+.aviso-galletas .parrafo-galletas{
+    margin-bottom: 10px;
+
+   
+}
+.aviso-galletas .boton-galletas{
+        width: 100%;
+        background-color: #106c1c;
+        color: white;
+        cursor: pointer;
+        transition: .3s ease all;
+        border-radius: 5px;
+        margin-bottom: 15px;
+}
+
+.aviso-galletas .boton-galletas:hover{
+    
+    background-color: #07360d;
+
+}
+.enlace-galletas{
+    color: #138522;
+    text-decoration: none;
+}
+
+.enlace-galletas:hover{
+    text-decoration: underline;
+}
+
+
+.fondo-aviso-galletas{
+    display: none;
+    background: rgba(0, 0, 0, .20);
+    position: fixed;
+    z-index: 99;
+    width: 100vw;
+    height: 100vh;
+    top: 0;
+    left: 0;
+}
+.fondo-aviso-galletas.active{
+    display: block ;
+}
+
+.lista-galletas {
+    list-style: none;
+}
+
+/*----------------------PRODUCTOS------------------------*/
+
+
+.cuerpo-prod{
+    margin: 0;
+    padding: 0;
+}
+
+.art-inicio-productos{
+    margin: 0;
+    padding: 0;
+}
+
+.contenedor-productos {
+    width: 100%;
+}
+
+.lista-productos {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    width: 100%;
+    text-align: center;
+    margin: 0px;
+    padding: 0px;
+    justify-content: center;
+}
+
+.item-lista-productos {
+    display: flex;
+    flex-direction: column;
+    list-style: none;
+    width: 500px;
+    border: 2px solid grey;
+    margin: 20px 40px;
+    border-radius: 20px;    
+    box-shadow: 5px 5px 5px 1px lightslategray; 
+}
+
+.item-lista-productos .container-carousel {
+    margin: 0;
+    object-fit: cover;
+    width: 100%;
+
+}
+.carruseles-prod {
+    width: 300%; /*modificar en caso de meter mas slides*/
+    height: 100%;
+    display: flex;
+    user-select: none;
+    margin: 0;
+    padding: 0;
+
+    
+}
+
+.slider-section-prod {
+    width: calc(100% / 3); /*modificar en caso de meter mas slides*/
+    padding: 20px;
+    margin: 0;
+    
+    
+}
+
+.slider-section-prod img{
+    min-height: 180px;
+}
+
+
+.info-producto{
+    display: flex;
+    display: row;
+    list-style: none;
+    border-width: 1px 0px 0px 0px;
+    border-color: grey;
+    border-style: solid;
+    height: auto;
+    margin: 0;
+    padding-inline-start: 0px;
+    
+}
+
+.descripcion-producto {
+    text-align: start;
+    padding: 0px 20px;    
+}
+
+.precio-producto {
+    text-align: center;
+    padding: 45px;
+    border-width: 0px 0px 0px 0px;
+    border-color: grey;
+    border-style: solid;
+    margin: 0;
+    font-weight: bold;
+}
+
+.productos-disponibles {
+    color: #576c57;
+}
+
+
+
+.item-lista-productos .container-carousel .btn-left,
+.item-lista-productos .container-carousel .btn-right {
+    display: flex;
+    position: absolute;
+    font-size: 40px;
+    top: 50%;
+    background-color: transparent;
+    border-radius: 50%;
+    border-color: transparent;
+    padding: 5px;
+    font-weight: 600;
+    cursor: pointer;
+    color: #576c57;
+    transform: translate(0, -50%);
+    transition: .5s ease;
+    user-select: none;
+
+}
+
+.item-lista-productos .container-carousel .btn-left {
+    left: 30px;
+}
+
+.item-lista-productos .container-carousel .btn-right {
+    right: 30px;
+}
+
+.item-lista-productos .container-carousel .btn-left:hover,
+.item-lista-productos .container-carousel .btn-right:hover {
+    background-color: lightgrey;
+    color: black;
+}
+
+
+
+/*---------------------------SERVICIOS---------------------*/
+
+/*---------------KARRUSEL----------------*/
+
+.karro-section {
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+}
+
+.karrusel {
+    width: 100%;
+    background-color: white;
+}
+
+.karrusel h2 {
+    text-align: center;
+    margin-bottom: 30px;
+}
+.karrusel .karro-grande {
+    width: 300%;
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: flex-start;
+    align-items: center;
+    transition: all .5s ease;
+    transform: translateX(0%);
+
+}
+.karrusel .img-karro {
+    width: calc(100% / 3); /*modificar en caso de meter más slides*/
+    height: 450px;
+    margin-left: 50px;
+    display: flex;
+    flex-direction: row nowrap;
+    justify-content: center;
+    align-items: center;
+
+}
+
+.karrusel .img-karro h2{
+    margin: 0;
+    text-align: center;
+    padding: 20px;
+    color: #138522;
+    
+}
+.karrusel .img-karro .articulo-karro{
+    display: flex;
+    flex-direction: column; 
+    margin-left: 80px;
+    padding: 60px;
+    margin: 0;
+
+}
+
+.karrusel .img-karro img{
+    max-height: 350px;
+
+}
+.karrusel .img-karro article {
+   padding: 60px;
+    margin: 0;
+
+}
+
+.karrusel .puntos-karro {
+    width: 100%;
+    height: 30px;
+    margin: 0;
+    padding: 1em;
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: center;
+    align-items: center;
+    list-style: none;
+}
+
+.karrusel .punto-karro {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    background-color: gold;
+    margin: 1em;
+    border-radius: 25px;
+    border: 1px solid gray;
+    box-shadow: 1px 1px #0c5416;
+    text-align: center;
+    color: white;
+    font-weight: bold;
+    font-size: larger;
+
+    
+}
+
+.karrusel .punto-karro:hover{
+    background-color: rgb(239, 210, 44);
+    cursor: pointer;
+}
+
+.karrusel .punto-karro.activo {
+    background-color: goldenrod;
+    cursor: auto;
+    color: white;
+}
+
+        .container-carousel {
+            position: relative;
+            box-sizing: border-box;
+            width: 100%;
+            height: 100%;
+            text-align: center;
+            overflow: hidden;
+            margin-left: 30px;
+
+        }
+
+        .carruseles-servicios {
+            width: 300%; /*modificar en caso de meter mas slides*/
+            height: 100%;
+            display: flex;
+            user-select: none;
+            
+
+            
+        }
+        .slider-section {
+            height: 100%;
+            width: calc(100% / 3); /*modificar en caso de meter mas slides*/
+            display: flex;
+            justify-content: center;
+            align-items: center;
+     
+            
+        }
+
+        .container-carousel .btn-left,
+        .container-carousel .btn-right {
+            position: absolute;
+            font-size: 35px;
+            top: 50%;
+            background-color: transparent;
+            border-radius: 50%;
+            border-color: transparent;
+            padding: 5px;
+            font-weight: 600;
+            cursor: pointer;
+            color: gold;
+            transform: translate(0, -50%);
+            transition: .5s ease;
+            user-select: none;
+
+        }
+
+        .container-carousel .btn-left {
+            left: 10px;
+        }
+
+        .container-carousel .btn-right {
+            right: 10px;
+        }
+       
+        .container-carousel .btn-left:hover,
+        .container-carousel .btn-right:hover {
+            color: darkgoldenrod;
+        }
+
+
+
+
+/*--------------------------EVENTOS------------------------------*/
+
+
+.art-inicio-eventos {
+    text-align: center;
+}
+.contenedor-eventos{
+    display: flex;
+    flex-direction: row;
+    margin: 50px;
+}
+
+.section-eventos{
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+}
+
+        /*------------------MAPA-------------------*/
+.contenedor-mapa{
+    width: 100%;
+    margin-top: 50px;
+    text-align: center;
+    padding-left: 80px;
+    
+}
+
+.jaula-mapa {
+
+    width:300px; 
+    height:300px;
+}
+
+        /*-----------------------------------*/
+
+.item-lista-eventos {
+    display: grid;
+    grid-template-columns: 1fr 1fr 3fr;
+    grid-template-areas: 
+        "img fecha titulo"
+        "img texto texto";
+    margin-bottom: 20px;
+}
+
+.token-evento {
+    grid-area: img;
+    align-self: center;
+}
+
+.titulo-evento {
+    grid-area: titulo;
+    color: #07360d;
+}
+
+.texto-evento {
+    grid-area: texto;
+    margin: 20px;
+
+}
+.fecha-evento {
+    grid-area: fecha;
+    margin: 20px;
+    align-self: center;
+    font-size: x-large;
+    font-weight: bold;
+    color: #138522;
+}
+
+
+            /*---------CALENDARIO EVENTOS--------*/
+.calendario {
+    width: auto;
+    margin: 30px;
+    padding: 10px;
+}
+
+.info-calendario {
+    display: flex;
+    align-items: center;
+    padding: 0 30px;
+    font-size: 1.4em;
+    text-transform: capitalize;
+
+}
+
+.btn-izq-calendar, 
+.btn-der-calendar {
+    color: gold;
+    cursor: pointer;
+    font-size: 1.3em;
+}
+
+
+.btn-izq-calendar {
+    margin-right: auto;
+}
+.btn-der-calendar {
+    margin-left: auto ;
+}
+
+.mes-calendario,
+.year-calendario {
+    padding: 50px 15px;
+}
+
+.semana-calendario, .fechas-calendario {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    grid-gap: 10px;
+}
+
+.item-calendario {
+    text-align: center;
+    line-height: 2;
+
+}
+
+
+.today {
+    background-color: lightcoral;
+    color: white;
+    width: 50%;
+    border-radius: 50%;
+    margin: auto;
+}
+.today:hover{
+    background-color: coral;
+}
+
+.dia-evento {
+    background-color: gold;
+    color: white;
+    width: 50%;
+    border-radius: 50%;
+    margin: auto;
+}
+
+.dias-ultimo-mes {
+    opacity: .4;
+}
+.desplegable-calendario{
+    display: none;
+    opacity: 0;
+    padding: 10px;
+    background-color: rgb(171, 149, 25);
+    border-radius: 20px;
+    
+
+}
+
+.desplegable-calendario li {
+    margin: 0;
+    padding: 0;
+    float: none;
+    list-style: none;
+    font-weight: bold;
+    
+
+}
+
+.dropdown:hover > ul {
+    display:block;
+    opacity: 1;
+    position: absolute;
+    
+   }
+
+.dropdown:hover {
+    background-color: darkgoldenrod;
+}
+
+
+.formateo-evento-calend{
+    font-weight: bold;
+    
+}
+
+
+/*------------------------------CONTACTO------------------------*/
+
+.formulario-contacto input[type="email"] {
+    -webkit-appearance: none;
+    appearance: none;  
+    width: 100%;
+    border: 1px solid gold;
+    margin: 0;  
+    font-family: inherit;
+    font-size: 90%;  
+    box-sizing: border-box;
+  }
+
+.formulario-contacto input:invalid {
+    border-color: red;
+    background-color: rgba(19, 133, 34, 0.5);
+    
+  }
+  
+.formulario-contacto input:focus:invalid {
+    outline: none;
+}
+  
+.formulario-contacto .error {
+    width: 100%;
+    padding: 0;
+    font-size: 80%;
+    color: white;
+    background-color: #900;
+    border-radius: 0 0 5px 5px;
+    box-sizing: border-box;
+}
+  
+.formulario-contacto .error.active {
+    padding: 3px;
+    display: block;
+    text-align: center;
+    position: absolute;
+    width: fit-content;
+}
+
+.cuerpo-contacto {
+    display: flex;
+    flex-direction: column;
+    
+    justify-content: center;
+    align-items: center;
+}
+
+.articulo-contacto{
+    width: 800px;
+    text-align: center;
+}
+.formulario-contacto {
+    background: linear-gradient(
+        30deg,
+        rgba(19, 133, 34, 0.8) 30%,
+        rgba(40, 42, 55, 0.8)
+        ), 
+        url(../RECURSOS/Contacto/Horno.jpg);
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    padding: 50px;
+    width: 800px;
+    border-radius: 25px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    box-shadow: 2px 2px 5px grey;    
+        
+}
+.formulario-contacto h2 {
+    color: gold;
+    font-size: 30px;
+    text-align: center;
+
+
+}
+.formulario-contacto form {
+    display: flex;
+    flex-direction: column;
+    width: 50%;
+    
+}
+
+.formulario-contacto label {
+    font-size: 15px;
+    color: gold;
+    font-weight: 700;
+    padding: 10px;
+
+}
+.formulario-contacto input, 
+.formulario-contacto textarea,
+button.boton-enviar-form   {
+    padding: 15px 15px;
+    background-color: rgba(19, 133, 34, 0.5);
+    color: white;
+    margin: 10px;
+    border-radius: 15px;
+    font-weight: bold;
+}
+
+.formulario-contacto input:focus, 
+.formulario-contacto textarea:focus {
+    outline: 1.5px solid gold;
+} 
+
+.formulario-contacto button.boton-enviar-form {
+    background-color: rgba(40, 42, 55, 0.5);
+    font-size: 20px;
+    color: gold;
+    width: 50%;
+    align-self: center;
+    cursor: pointer;
+}
+
+.formulario-contacto button.boton-enviar-form:hover {
+    background-color: rgba(40, 42, 55, 0.9);
+}
+
+
+
+
+
+/*------------------------------POLITICA DE DATOS Y GALLETAS------------------------*/
+
+
+
+        .cuerpo-politica-datos {
+            margin: 0 80px 0 80px;
+            display: flex;
+            flex-direction: column;
+        }
+    
+        .ultima-actualizacion {
+            text-align: center;
+        }
+
+        .intro-polpriv {
+            margin: 0px 10px;
+        }
+ 
+        .art-inicio-avisos .texto-inicio-avisos{
+            margin: 60px;
+        }
+        .cuerpo-avisos-legales{
+            margin: 60px;
+        }
+
+.texto-intro-galletas{
+    margin: 0px 30px;
+}
+
+.cuerpo-galletas {
+    margin: 0px 30px;
+}
+
+
+/*-----------------------FORMATEO FOOTER-----------------------*/
+
+
+.pie-forja {
+    margin: 0;
+    width: 100%;
+    margin-top: 30px;
+}
+
+.contenedor-listas-pie {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    background: linear-gradient(45deg, #138522, gold, black);
+    animation: cambiar 10s ease-in infinite;
+    background-size: 200% 200%;
+    
+}
+
+.lista-pie-forja {
+    display: flex;
+    flex-direction: column;
+    list-style: none;
+    color: white;
+    width: 100%;
+    margin: 0;
+    padding: 10px 0px 25px 0px;
+    align-items: center;
+    
+}
+
+.cabeza-lista-pie {
+    padding: 10px 0px;
+    font-size: large;
+    font-weight: bold
+    
+}
+
+.item-lista-pie {
+    padding: 5px 0px;
+    
+}
+.item-lista-pie a{
+    text-decoration: none;
+    color: white;
+
+}
+.item-lista-pie a:visited {
+    text-decoration: none;
+    
+}
+
+.item-lista-pie a:hover{
+    color: grey;
+}
+
+
+/*-----------------------FORMATEO TEXTO LIBRE----------------------*/
+
+
+
+.titulos-h2 {
+    color: #0c5416;
+}
+
+
+.titulos-h3 {
+    color: #138522;
+}
+
+.titulos-h4 {
+    color: #28c23c;
+}
+.dia-finde {
+    font-weight: bold;
+}
+
+
+.item-lista-productos h3 {
+    color: #0c5416;
+}
+
+
+
+@media only screen and (min-width:300px) and (max-width:480px){
+    
+
+    
+    .grid-cabeza-container {
+        display: flex;
+        flex-wrap: nowrap;
+        justify-content: center;
+        position: relative;
+
+    }
+    
+    .grid-cabeza-logo {
+        max-width: 350px;
+    
+    }
+    
+    .barraInicio {
+        flex-wrap: wrap;
+      
+    }
+    .itemBarra {
+      
+        width: 100%;
+        height: 25px;
+        padding-top: 6px;
+       
+    }
+
+
+
+
+
+    .btn-up{
+        opacity: 1;
+        right: 17px;
+        bottom: 40px;
+    }
+    
+    .titulo-inicio{
+        width: 100%;
+    }
+
+    .img-inicio img{
+        width: 280px;
+    }
+
+    .img-inicio{
+        width: 350px;
+        margin: 0;
+        padding: 0;
+        text-align: center;
+    }
+    .cuerpo-inicio{
+        padding: 20px;
+    }
+    .cuerpo-inicio h3{
+        text-align: center;
+    }
+    .cuerpo-inicio p{
+        padding: 10px;
+    }
+
+    .art-inicio{
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        margin: 0;
+        padding: 0;
+
+    }
+    
+
+    /*-----------------PRODUCTOS MOVIL-----------------*/
+
+    .art-inicio-productos{
+        margin: 0;
+        padding: 0;
+    }
+    .contenedor-productos{
+        margin-bottom: 30px;
+    }
+    .container-carousel{
+        margin: 0;
+        padding: 0;
+    }
+  
+    .item-lista-productos {
+        
+        width: 280px;
+        margin: 10px 0px;
+        padding: 0;
+    }
+    .carruseles-prod{
+        margin: 0;
+        padding: 0;
+    }
+    
+    .kuerpo-prod{
+        width: 100%;
+        margin: 0;
+        padding: 0;
+    }
+    .info-producto{
+        margin: 0;
+        padding: 0;
+    }
+    .slider-section-prod {
+        padding: 0;
+        margin: 0;  
+    }
+    .slider-section-prod img {
+        padding: 0;
+        margin: 0; 
+        width: 80%;
+        height: 80%;
+    }
+    .item-lista-productos h3{
+        font-size: large;
+        padding: 0px 20px;
+    }
+    .info-producto{
+        justify-content: end;
+    }
+     .precio-producto{
+        padding: 15px 30px;
+        align-self: center;
+    }
+
+
+    .item-lista-productos .container-carousel .btn-left {
+        left: 10px;
+    }
+    
+    .item-lista-productos .container-carousel .btn-right {
+        right: 10px;
+    }
+
+    /*-----------------SERVICIOS MOVIL-----------------*/
+
+
+    .karro-section{
+        width: 100%;
+        background-color: white;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        overflow: auto;
+        
+    }
+
+    .karrusel .img-karro {
+        width: 100%;
+    }
+    .karrusel .titulos-h2{
+        margin: 5px 20px;
+        padding: 0;
+    }
+
+    .karrusel{
+        margin: 0px;
+        width: 100%;
+    }
+
+    .karro-section .karrusel .karro-grande {
+        
+        margin: 0;
+        padding: 0;
+        width: 100%;
+        display: grid;
+        grid-column: 1;
+        translate: none;
+        flex-direction: none;
+        flex-wrap: nowrap;
+    }
+    .karrusel .img-karro {
+        height: 100%;
+        width: 100%;
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        align-items: center;
+        background-color: white;
+        margin: 0px;
+
+    
+    }
+    .karrusel .img-karro img{
+        width: 100%;
+        margin: 0px;
+    }
+
+    
+    .karrusel .img-karro article{
+        display: flex;
+        flex-wrap: wrap;
+        width: 100%;
+        
+    }
+
+    .container-carousel {
+        
+        box-sizing: border-box;
+        width: 90%;
+        height: auto;
+        text-align: center;
+        overflow: hidden;
+
+    }
+
+    .carruseles-servicios {
+        align-items: center;
+       }
+    .karrusel .puntos-karro{
+        display: none;
+    }
+
+    .container-carousel .btn-left {
+        left: -2px;
+    }
+
+    .container-carousel .btn-right {
+        right: -2px;
+    }
+
+    /*-----------------EVENTOS MOVIL-----------------*/
+
+    .section-eventos{
+        flex-direction: row;
+        flex-wrap: wrap;
+        justify-content: space-around;
+        align-items: center;
+        height: auto;
+        margin-bottom: 60px;
+        
+    }
+    .contenedor-eventos{
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+        margin: 10px;
+    }
+    .contenedor-mapa{
+        width: 180px;
+        height: 180px;
+       margin: 30px;
+       padding: 0;
+    
+    }
+
+    .jaula-mapa {
+
+        width:180px; 
+        height:180px;
+    }
+
+    .lista-eventos{
+        display: flex;
+        flex-wrap: wrap;
+        margin: 0;
+        width: 100%;
+    }
+    .item-lista-eventos {
+        display: flex;
+        flex-wrap: wrap;
+        margin: 0;
+    }
+
+    .texto-evento {
+        margin: 0px;
+        padding: 10px;
+    
+    }
+    .titulo-evento{
+        margin: 0px;
+        font-size: large;
+    }
+    .fecha-evento {
+        margin: 5px;
+        font-size: large;
+        font-weight: bold;
+       
+    }
+
+    .calendario {
+        width: 240px;
+        margin: 5px;
+        padding: 0px;
+    }
+
+    .mes-calendario,
+    .year-calendario {
+        padding: 5px 2px;
+    }
+    
+    .semana-calendario, .fechas-calendario {
+        grid-gap: 2px;
+    }
+
+    .dia-calendario.item-calendario {
+            font-size: xx-small;
+    }
+
+    .info-calendario {
+        text-align: center;
+        padding-left: 5px;
+    }
+
+    .btn-izq-calendar {
+        margin-right: 10px;
+    }
+    .btn-der-calendar {
+        margin-left: 10px ;
+    }
+
+   /*----------------CONTACTOS MOVIL------------*/
+
+
+
+   .articulo-contacto{
+    width: 100%;
+}
+   .formulario-contacto {
+        width: auto;
+        margin: 30px;
+
+    }
+
+    .formulario-contacto h2 {
+        color: gold;
+        font-size: 20px;
+        
+    
+    
+    }
+    .formulario-contacto form {
+   
+        width: 100%;
+        
+    }
+    
+
+   /*----------------FOOTER MOVIL------------*/
+
+
+
+    .pie-forja {
+        margin: 0;
+        width: 100%;
+  
+    }
+    .contenedor-listas-pie{
+        display: flex;
+        flex-wrap: wrap;
+    }
+
+  }
+
+
+
+
+
+
+
diff --git a/HTML/index.html b/HTML/index.html
new file mode 100644
index 0000000..b43b516
--- /dev/null
+++ b/HTML/index.html
@@ -0,0 +1,136 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="../CSS/main.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
+    <script src="../JS/index.js"></script>
+    <title>La Forja Dorada</title>
+    
+</head>
+<body onload="cargado(), galletas()">
+    <header class="grid-cabeza-container">
+        <div class="grid-cabeza-logo">
+            <img src="..\RECURSOS\Logo\LogoForjaDorada200x160.png" alt="fotoForja">
+        </div>
+
+        <ul class="barraInicio">
+            <li class="itemBarra">
+                <a href="index.html" class="enlacePaginas"><b>INICIO</b></a>
+                
+            </li>
+            <li class="itemBarra">
+                <a href="Productos.html" class="enlacePaginas"><b>PRODUCTOS</b></a>
+            </li>
+            <li class="itemBarra">
+                <a href="Servicios.html" class="enlacePaginas"><b>SERVICIOS</b></a>
+
+            </li>
+             <li class="itemBarra">
+                <a href="Eventos.html" class="enlacePaginas"><b>EVENTOS</b></a>
+
+            </li>
+            <li class="itemBarra">
+                <a href="Contactos.html" class="enlacePaginas"><b>CONTACTO</b></a>
+
+            </li>
+        </ul>
+        
+            <button class="btn-up" id="botonArriba">
+                <i class="fa-solid fa-arrow-up"></i>
+            </button>
+        
+    </header>
+    <main class="cuerpo" id="cuerpo">
+        
+
+        <h2 class="titulo-inicio">
+            LA FORJA
+        </h2>
+    <!--               ARTICULO INICIO               -->  
+       
+    
+        <div class="art-inicio" id="articulo-inicio">
+            <figure class="img-inicio">
+                <img src="../RECURSOS/IntroForja/FotoIntroForja500px.jpg" alt="imagenforja">
+            </figure>
+            <article class="cuerpo-inicio">
+                <h3 class="titulos-h3">
+                   ¡Bienvenidos a la Forja Dorada!
+                </h3>
+                
+                <p>La Forja Dorada es un taller especializado en
+                     miniaturas para Wargames y juegos de mesa. Abordamos todos los aspectos de este tipo 
+                     de hobbies: montaje, modelado, pintura y competición. 
+                </p>
+                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia, reprehenderit 
+                    nostrum totam autem enim molestias dignissimos error perferendis veniam exercitationem 
+                    aliquam temporibus libero magnam? Nihil cumque corporis error voluptatum molestias.
+                </p>
+                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste incidunt distinctio ipsa maxime dolore tenetur dolorem optio, minima perspiciatis minus voluptatibus nostrum asperiores eos a enim laborum, earum at adipisci.</p>
+
+            </article>
+        </div>
+
+    </main>
+
+    <div class="aviso-galletas" id="avisoGalleta">
+        <img class="img-galleta" src="../RECURSOS/IntroForja/pngGalleta.png" alt="galleta">
+        <h3 class="titulo-galletas">Cookies</h3>
+        <p class="parrafo-galletas">Utilizamos cookies propias y de terceros para mejorar nuestros servicios.
+        </p>
+        <ul class="lista-galletas">
+            <li>
+                <input type="checkbox" id="galletasPubli" name="galletasPubli"/>
+                <label for="galletasPubli">Cookies Publicidad</label>
+            </li>
+            <li>
+                <input type="checkbox" id="galletasAnaliticas" name="galletasAnaliticas"/>
+                <label for="galletasAnaliticas">Cookies Analíticas</label>
+            </li>
+            <li><input type="checkbox" id="galletasNecesarias" name="galletasNecesarias" checked/>
+                <label for="galletasNecesarias">Cookies Necesarias</label>
+</li>
+        </ul>
+
+
+        <button class="boton-galletas" id="botonGalleta">Aceptar</button>
+        <a class="enlace-galletas" href="../HTML/Galletas.html">Gestión de Cookies</a>    
+
+    </div>
+    <div class="fondo-aviso-galletas" id="fondoAvisoGalletas"></div>
+
+    <footer class="pie-forja">
+        <nav class="contenedor-listas-pie">
+            <ul class="lista-pie-forja">
+                <li class="cabeza-lista-pie">Redes Sociales</li>
+                <li class="item-lista-pie">
+                    <a href="https://instagram.com/arkantthos?utm_source=qr" target="_blank">
+                        Instagram
+                    </a>                    
+                </li>
+                <li class="item-lista-pie">Facebook</li>
+                <li class="item-lista-pie">
+                    <a href="https://www.ebay.es/usr/thegoldenforge" target="_blank">Ebay</a>
+                    </li>
+            </ul>
+            <ul class="lista-pie-forja">
+                <li class="cabeza-lista-pie">Documentación de Interés</li>
+                <li class="item-lista-pie">
+                    <a href="../HTML/PoliticaDatos.html">Política de Privacidad</a>
+                </li>
+
+                
+                <li class="item-lista-pie">
+                <a href="../HTML/Galletas.html">Gestión de Cookies</a>    
+                    
+                </li>
+                <li class="item-lista-pie">
+                    <a href="../HTML/AvisosLegales.html">Avisos Legales</a>
+                    </li>
+            </ul>
+        </nav>
+    </footer>
+</body>
+</html>
\ No newline at end of file