497 lines
8.4 KiB
CSS
497 lines
8.4 KiB
CSS
|
|
|
|
/*---------------------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: 30px;
|
|
height: 30px;
|
|
outline: 0;
|
|
border-radius: 50%;
|
|
border: 1px solid #138522;
|
|
background-color: #138522;
|
|
position: fixed;
|
|
cursor: pointer;
|
|
right: 10px;
|
|
bottom: 50px;
|
|
transition: all 3s ease-in-out;
|
|
color: white;
|
|
|
|
}
|
|
|
|
.btn-up:hover{
|
|
opacity: .75;
|
|
}
|
|
|
|
/*------------------------------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: grid;
|
|
grid-template-areas:
|
|
"titulo titulo"
|
|
"img texto";
|
|
grid-template-columns: 1fr 2fr;
|
|
|
|
}
|
|
.img-inicio{
|
|
grid-area: img;
|
|
padding: 50px;
|
|
width: 50%;
|
|
}
|
|
.cuerpo-inicio{
|
|
grid-area: texto;
|
|
padding: 50px;
|
|
}
|
|
|
|
/*----------------------PRODUCTOS------------------------*/
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/*---------------------------SERVICIOS---------------------*/
|
|
|
|
.contenedor-articulos{
|
|
display: flex;
|
|
justify-content: center;
|
|
margin: 0;
|
|
padding: 0;
|
|
|
|
}
|
|
|
|
.container-carousel {
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
width: 90%;
|
|
height: 100%;
|
|
text-align: center;
|
|
overflow: hidden;
|
|
|
|
}
|
|
|
|
.carruseles {
|
|
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: flexbox;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
box-shadow: 2px 3px 5px 1px grey;
|
|
|
|
}
|
|
|
|
.slider-section h4 {
|
|
padding: 20px;
|
|
}
|
|
.slider-section img {
|
|
padding: 30px;
|
|
height: 300px;
|
|
|
|
|
|
|
|
}
|
|
|
|
.slider-section p {
|
|
height: 70%;
|
|
padding: 30px 70PX;
|
|
}
|
|
|
|
.btn-left,
|
|
.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: #138522;
|
|
transform: translate(0, -50%);
|
|
transition: .5s ease;
|
|
user-select: none;
|
|
|
|
}
|
|
|
|
.btn-left {
|
|
left: 80px;
|
|
}
|
|
|
|
.btn-right {
|
|
right: 80px;
|
|
}
|
|
|
|
.btn-left:hover,
|
|
.btn-right:hover {
|
|
background-color: lightgray;
|
|
}
|
|
|
|
|
|
|
|
|
|
/*--------------------------EVENTOS------------------------------*/
|
|
|
|
.contenedor-eventos{
|
|
display: flex;
|
|
flex-direction: row;
|
|
margin: 50px;
|
|
}
|
|
|
|
.item-lista-eventos {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 3fr;
|
|
grid-template-areas:
|
|
"img fecha titulo"
|
|
"img texto texto";
|
|
}
|
|
|
|
.token-evento {
|
|
grid-area: img;
|
|
align-self: center;
|
|
}
|
|
|
|
.titulo-evento {
|
|
grid-area: titulo;
|
|
|
|
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.dias-ultimo-mes {
|
|
opacity: .4;
|
|
}
|
|
|
|
/*------------------------------CONTACTO------------------------*/
|
|
|
|
|
|
.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);
|
|
}
|
|
|
|
|
|
/*-----------------------FORMATEO TEXTO-----------------------*/
|
|
|
|
span.titulos-esp {
|
|
color: #138522;
|
|
|
|
}
|
|
|
|
|
|
span.titulosh3-eng {
|
|
color: gold;
|
|
|
|
}
|
|
|
|
.titulos-h3 {
|
|
color: #138522;
|
|
}
|
|
|
|
.dia-finde {
|
|
font-weight: bold;
|
|
}
|
|
|
|
|
|
/*-----------------------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;
|
|
}
|
|
|
|
|
|
|