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 @@ + + + + + + + + + La Forja Dorada + + + +
+ + + + + + +
+
+ + +

+ LA FORJA +

+ + + +
+
+ imagenforja +
+
+

+ ¡Bienvenidos a la Forja Dorada! +

+ +

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. +

+

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. +

+

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.

+ +
+
+ +
+ +
+ galleta +

Cookies

+

Utilizamos cookies propias y de terceros para mejorar nuestros servicios. +

+ + + + + Gestión de Cookies + +
+
+ + + + \ No newline at end of file