Dashboard

Editing: style.css

/* Estilos Generales (Mobile First) */
html, body {
    margin: 0;
    padding: 0;
    font-family: 'Helvetica Neue', Arial, sans-serif; /* Fuente profesional y moderna */
    color: #333;
    line-height: 1.6;
    box-sizing: border-box;
    min-height: 100vh;
    overflow-x: hidden;
}

*, *::before, *::after {
    box-sizing: inherit;
}

/* --- Estilos para index.html (Página Principal) --- */
.index-body {
    background-image: url('images/blurred-flowers-bg.jpg'); /* REEMPLAZA con la ruta a tu imagen */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    display: flex;
    /* flex-direction: column; No es necesario si .container es el único hijo y es flex también */
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px; /* Espacio en los bordes para móviles */
}

/* El .container en index.html es para centrar el .main-menu */
.index-body .container {
    width: 100%;
    display: flex; /* Mantenemos flex para centrar .main-menu */
    justify-content: center;
    align-items: center;
}

.main-menu {
    background-color: rgba(255, 255, 255, 0.92); /* Fondo blanco semitransparente */
    padding: 25px 20px; /* Padding para móviles */
    border-radius: 12px; /* Bordes redondeados */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); /* Sombra suave */
    text-align: center;
    width: 100%;
    max-width: 450px; /* Ancho máximo para el contenido en móviles y tabletas pequeñas */
    /* margin: 0 auto; /* No es necesario si .index-body .container ya lo centra con flex */
}

.logo {
    max-width: 120px;
    height: auto;
    margin-bottom: 20px;
}

.main-menu h1 {
    font-size: 1.9em;
    margin-top: 0;
    margin-bottom: 25px;
    color: #7a12ca; /* Tono morado/rosa oscuro */
    font-weight: 600;
    line-height: 1.3;
}

.catalog-button { /* Botón en index.html */
    display: inline-block;
    padding: 12px 25px;
    background-color: #AD1457; /* Color de fondo para el botón */
    color: white; /* Color de texto para el botón */
    text-decoration: none;
    border-radius: 8px;
    font-size: 1em;
    font-weight: 500;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.catalog-button:hover,
.catalog-button:focus {
    background-color: #880E4F; /* Color más oscuro al pasar el ratón/focus */
    transform: translateY(-2px);
    outline: none;
}

/* --- Estilos para catalogo.html (Página del Catálogo - Ajustes básicos Mobile First) --- */
.catalog-body {
    background-color: #f8f9fa; /* Un fondo muy claro, casi blanco */
    padding-top: 20px;
    padding-bottom: 20px;
}

/* El .container en catalog-body debe comportarse como un bloque normal */
.catalog-body .container {
    display: block; /* IMPORTANTE: Sobrescribir display:flex para esta página */
    width: 100%;
    max-width: 1200px; /* Ancho máximo general para el contenido del catálogo */
    margin: 0 auto;    /* Centra el bloque .container en la página */
    padding: 0 15px;   /* Padding lateral para el contenido del catálogo en móviles */
}

.catalog-body h1 {
    font-size: 1.8em;
    margin-top: 20px; /* Añadir margen superior para separar del borde del viewport/body */
    margin-bottom: 25px;
    color: #C2185B; /* Color consistente para títulos */
    text-align: center; /* Centra el texto DENTRO del h1 */
}

.product-grid {
    display: grid;
    grid-template-columns: 1fr; /* Una columna por defecto para móviles */
    gap: 20px;
    padding: 0; /* El container ya tiene padding */
}

.product-item {
    background-color: #fff;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.product-item img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    margin-bottom: 12px;
}

.product-item h2 {
    font-size: 1.15em;
    margin-top: 0;
    margin-bottom: 10px;
    color: #333;
    font-weight: 600;
}

.buy-button { /* Botón "Comprar" en cada producto del catálogo */
    display: block;
    width: 100%;
    padding: 10px 0;
    background-color: #b025d3; /* Color morado que tenías */
    color: white;
    text-decoration: none;
    border-radius: 6px;
    font-size: 0.95em;
    font-weight: 500;
    transition: background-color 0.3s ease;
    margin-top: 10px;
}

.buy-button:hover,
.buy-button:focus {
    background-color: #5814e1; /* Morado más oscuro al pasar el ratón */
    outline: none;
}

/* --- Media Queries para Tabletas y Escritorio --- */

/* Tabletas (ej. iPads en modo retrato y paisaje) */
@media (min-width: 768px) {
    .index-body {
        padding: 40px;
    }

.main-menu {
        padding: 40px 50px;
        max-width: 600px;
    }

.logo {
        max-width: 160px;
    }

.main-menu h1 {
        font-size: 2.5em;
    }

.catalog-button { /* Botón en index.html */
        padding: 15px 35px;
        font-size: 1.1em;
    }

/* Catálogo en tabletas */
    .catalog-body .container {
        padding: 0 20px; /* Ajustar padding lateral */
    }

.catalog-body h1 {
        font-size: 2.2em;
        margin-bottom: 35px;
    }

.product-grid {
        grid-template-columns: repeat(2, 1fr); /* Dos columnas */
        gap: 25px;
    }

.product-item h2 {
        font-size: 1.25em;
    }

.buy-button { /* Botón de compra en producto */
        font-size: 1em;
    }
}

/* Escritorios Pequeños y Tabletas Grandes */
@media (min-width: 992px) {
    .main-menu {
        max-width: 700px;
    }

.main-menu h1 {
        font-size: 2.8em;
    }

.logo {
        max-width: 180px;
    }

/* Catálogo en escritorios pequeños */
    .product-grid {
        grid-template-columns: repeat(3, 1fr); /* Tres columnas */
        gap: 30px;
    }
}

/* Escritorios Grandes */
@media (min-width: 1200px) {
    .main-menu {
        max-width: 750px;
        padding: 50px 60px;
    }

.main-menu h1 {
        font-size: 3em;
    }

.catalog-button { /* Botón en index.html */
        padding: 18px 40px;
        font-size: 1.2em;
    }

/* Catálogo en escritorios grandes */
    /* .catalog-body .container ya tiene max-width: 1200px; */

.catalog-body h1 {
        font-size: 2.5em;
        margin-bottom: 40px;
    }

/* .product-grid { */
        /* Podría mantenerse en 3 columnas o pasar a 4 si hay muchos productos y se ven bien */
        /* grid-template-columns: repeat(4, 1fr); */
    /* } */
}

Cancel

! Без рубрики Archivos - Bonita Floristería Ibagué

! Без рубрики

The Founding of YouTube A Short History

Posted on agosto 30, 2026agosto 30, 2026 by seobot

YouTube is one of the most influential platforms in modern media, but its origin story is surprisingly simple: a small team wanted an easier way to share video online. In the early 2000s, uploading and sending video files was slow, formats were inconsistent, and most websites weren’t built for smooth playback. YouTube’s founders focused on removing […]

Continue reading →

! Без рубрики

The Founding of YouTube A Short History

Posted on agosto 29, 2026agosto 29, 2026 by seobot

Continue reading →

Dashboard

Acceder