Parte 5.06 - Estilizacion de Pie de Pagina

/* CSS Personas*/ .persona{ display: flex; flex-direction: column; }

.personas{ display: flex; padding-top: 3rem; justify-content: space-around; }

@media screen and (min-width:0){ .persona{ margin-bottom: 2rem; }

.personas{
    flex-direction: column;
}

}

@media screen and (min-width: 768px){ .persona{ margin-bottom: 0; }

.personas{
    flex-direction: row;
}

}

/* CSS Receta*/ .recetas{ background: #5e5e5e; display: flex; flex-wrap: wrap; padding: 5rem 0 0 5rem; }

.receta__imagen{ height: 200px; }

@media screen and (min-width:0){ .recetas{ padding: 5rem 0 0 1rem; } }

@media screen and (min-width: 768px){ .recetas{ padding: 5rem 0 0 2.5rem; } }

@media screen and (min-width: 922px){ .recetas{ padding: 5rem 0 0 5rem; } }

/* CSS recetas*/ .receta{ background: #fdfdfd; display: flex; flex-direction: column; margin-bottom: 5rem; }

.receta__imagen{ height: 200px; }

@media screen and (min-width:0){ .receta{ margin-right: 1rem; width: 100%; } }

@media screen and (min-width: 768px){ .receta{ margin-right: 2.5rem; width: calc(33% - 2.5rem); } }

@media screen and (min-width: 922px){ .receta{ margin-right: 5rem; width: calc(25% - 5rem); } }

/* CSS sobre-descripcion*/ .sobre__descripcion{ color: #595959; font-weight: 100; }

@media screen and (min-width:0){ .sobre__descripcion{ font-size: 1.3rem; } }

@media screen and (min-width: 768px){ .sobre__descripcion{ font-size: 1.75rem; } }

/* CSS sobre-titulo*/ .sobre__titulo{ color: #8D0606; font-family: Pacifico,cursive; }

@media screen and (min-width:0){ .sobre__titulo{ font-size: 2rem; } }

@media screen and (min-width: 768px){ .sobre__titulo{ font-size: 3.1875rem; } }

/* CSS sobre*/ .sobre{ text-align: center; }

@media screen and (min-width:0){ .sobre{ padding: 2.5rem 1rem; } }

@media screen and (min-width: 768px){ .sobre{ padding: 2.5rem; } }

/* CSS banner-titulo*/ .banner__titulo{ color: #fdfdfd; font-family: Pacifico, cursive; position: absolute; left: 50%; text-align: center; top: 50%; text-shadow: 0 4px 4px rgba(0,0,0,0.75); width: 100%; transform: translate(-50%, -50%); }

@media screen and (min-width:0){ .banner__titulo{ font-size: 3rem; } }

@media screen and (min-width: 768px){ .banner__titulo{ font-size: 5.0625rem; } }

/* CSS banner-imagen*/ .banner__imagen{ width: 100%; background: url("../../img/banner.jpg") no-repeat center / cover; }

@media screen and (min-width:0){ .banner__imagen{ height: calc(100vh - 50px); } }

@media screen and (min-width: 768px){ .banner__imagen{ height: calc(100vh - 72px); } }

/* CSS logo*/ @media screen and (min-width:0){ .logo{ display: none; } }

@media screen and (min-width: 768px){ .logo{ display: block; } }

/* CSS cabecera*/ .cabecera{ align-items: center; background: #F9F9F9; justify-content: space-between; padding-left: 2rem; padding-right: 2rem; display: flex; padding-left: 2rem; padding-right: 2rem; }

@media screen and (min-width:0){ .cabecera{ justify-content: center; padding: 0 1rem; } }

@media screen and (min-width: 768px){ .cabecera{ justify-content: space-between; padding: 0 5rem; } }

/* CSS pie-de-pagina*/ .pie-de-pagina{ background: #bfbfbf; color: #fdfdfd; text-align: right; padding: 1.5625rem 5rem; text-transform: lowercase; }

/* HTML index */