CARD-3


    /* CONTENEDOR PRINCIPAL - Centra la card en la pantalla */
    .container {
        display: flex;                 /* Activa Flexbox */
        justify-content: center;       /* Centra horizontalmente */
        align-items: center;           /* Centra verticalmente */
        min-height: 100vh;             /* Altura mínima = 100% del viewport */
    }



2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Card como imagen</title>
</head>
<style>
    /* RESETEO DE ESTILOS POR DEFECTO DEL NAVEGADOR */
    /* Elimina todos los márgenes y paddings que los navegadores añaden por defecto */
    * {
        margin: 0;
        padding: 0;
        /* box-sizing: border-box;  /* Opcional: hace que padding no aumente el tamaño */
    }

    /* ESTILOS DEL BODY */
    /* Fondo gris claro y fuente principal para toda la página */
    body {
        background-color: #f0f0f0;    /* Color de fondo gris suave */
        font-family: Arial, sans-serif; /* Fuente principal y alternativa */
    }

    /* CONTENEDOR PRINCIPAL - Centra la card en la pantalla */
    .container {
        display: flex;                 /* Activa Flexbox */
        justify-content: center;       /* Centra horizontalmente */
        align-items: center;           /* Centra verticalmente */
        min-height: 100vh;             /* Altura mínima = 100% del viewport */
    }

    /* ESTILOS DE LA CARD (TARJETA) */
    .card {
        display: flex;                 /* Activa Flexbox para sus hijos */
        flex-direction: column;        /* Apila hijos verticalmente */
        width: 500px;                  /* Ancho fijo de 500 píxeles */
        border-radius: 8px;            /* Bordes redondeados de 8px */
        background-color: white;        /* Fondo blanco */
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);  /* Sombra suave:
            - 0: desplazamiento horizontal
            - 2px: desplazamiento vertical
            - 5px: difuminado
            - rgba(0,0,0,0.1): color negro con 10% opacidad */
    }

    /* ENCABEZADO DE LA CARD (parte superior) */
    .card-header {
        height: 50px;                   /* Altura fija de 50px */
        background: #f8f9fa;            /* Fondo gris muy claro */
        border-radius: 8px 8px 0 0;      /* Bordes redondeados:
            - 8px: superior izquierdo
            - 8px: superior derecho
            - 0: inferior derecho
            - 0: inferior izquierdo */
        padding: 0 20px;                 /* Padding: 0 arriba/abajo, 20px izquierda/derecha */
        display: flex;                   /* Activa Flexbox para centrar el texto */
        align-items: center;              /* Centra el texto verticalmente */
        font-weight: bold;                /* Texto en negrita */
        color: #495057;                   /* Color gris oscuro para el texto */
        border-bottom: 1px solid #dee2e6; /* Borde inferior:
            - 1px: grosor
            - solid: línea sólida
            - #dee2e6: color gris claro */
    }

    /* CUERPO DE LA CARD (contenido principal) */
    .card-body {
        padding: 30px 20px;              /* Padding: 30px arriba/abajo, 20px izquierda/derecha */
        background: white;                /* Fondo blanco */
    }

    /* ESTILOS PARA EL TÍTULO (h2) DENTRO DEL CUERPO */
    .card-body h2 {
        margin-bottom: 15px;              /* Espacio debajo del título */
        font-size: 24px;                  /* Tamaño de fuente 24px */
        color: #212529;                    /* Color gris muy oscuro (casi negro) */
    }

    /* ESTILOS PARA EL PÁRRAFO (p) DENTRO DEL CUERPO */
    .card-body p {
        margin-bottom: 20px;              /* Espacio debajo del párrafo */
        color: #6c757d;                    /* Color gris medio */
        line-height: 1.5;                  /* Altura de línea 1.5 (interlineado) */
    }

    /* ESTILOS PARA EL TEXTO PEQUEÑO (small) DENTRO DEL CUERPO */
    .card-body small {
        display: block;                    /* Hace que ocupe toda la línea (como un div) */
        margin-bottom: 25px;               /* Espacio debajo del texto pequeño */
        color: #adb5bd;                     /* Color gris claro */
    }

    /* ESTILOS PARA EL BOTÓN */
    .card-body button {
        background: #0d6efd;               /* Color azul primario */
        color: white;                       /* Texto blanco */
        border: none;                       /* Sin borde */
        padding: 10px 20px;                 /* Padding: 10px arriba/abajo, 20px izquierda/derecha */
        border-radius: 6px;                 /* Bordes redondeados de 6px */
        font-size: 16px;                     /* Tamaño de fuente 16px */
        cursor: pointer;                     /* Cambia el cursor a manita al pasar */
    }

    /* ESTILOS PARA EL BOTÓN CUANDO EL RATÓN PASA POR ENCIMA (hover) */
    .card-body button:hover {
        background: #0b5ed7;                /* Azul un poco más oscuro */
    }
</style>
<body>
    <div class="container">
        <div class="card">
            <div class="card-header">
                Featured
            </div>
            <div class="card-body">
                <h2>Special title treatment</h2>
                <p>With supporting text below as a natural lead-in to additional content.</p>
                <small>Last updated 3 mins ago</small>
                <button>Go somewhere</button>
            </div>
        </div>
    </div>
</body>

</html> 



Excelente pregunta! Si no quieres centrarla verticalmente, sino simplemente bajarla un poco desde arriba, hay varias formas de hacerlo. Te mostraré las opciones más prácticas:

Opción 1: Usar margin-top en la card (La más sencilla)

Esta es probablemente la forma más directa. En lugar de centrar con align-items: center, simplemente agregas un margen superior a la tarjeta.

css
.container {
    display: flex;
    justify-content: center;    /* Esto SÍ lo mantienes para centrar horizontalmente */
    /* align-items: center;     /* ELIMINA esta línea */
    min-height: 100vh;
}

.card {
    /* ... tus otros estilos ... */
    margin-top: 100px;          /* AÑADE esto: baja la card 100px desde arriba */
}

¿Qué hace? El margin-top: 100px empuja la tarjeta hacia abajo, separándola del borde superior del contenedor.

Opción 2: Usar padding-top en el contenedor

En lugar de mover la tarjeta, puedes empujar todo el contenido del contenedor hacia abajo:

css
.container {
    display: flex;
    justify-content: center;
    /* align-items: center;     /* ELIMINA esta línea */
    min-height: 100vh;
    padding-top: 100px;          /* AÑADE esto: crea un espacio arriba */
}

Opción 3: Usar position: relative y top

Esta es otra alternativa, aunque es menos común para este caso específico:

css
.container {
    display: flex;
    justify-content: center;
    min-height: 100vh;
}

.card {
    /* ... tus otros estilos ... */
    position: relative;          /* AÑADE esto */
    top: 100px;                  /* AÑADE esto: baja la card 100px */
}

Opción 4: Con un elemento invisible (más flexbox)

Si quieres mantener el centrado vertical pero con un desplazamiento, puedes usar un margen automático:

css
.card {
    /* ... tus otros estilos ... */
    margin-top: auto;            /* Empuja la card hacia abajo */
    margin-bottom: auto;         /* Centrado vertical pero... */
    /* Para bajarla solo un poco, necesitarías un elemento "espaciador" */
}

Pero esta opción es más compleja y requeriría un elemento extra.

Recomendación

La Opción 1 es la que te recomiendo por ser la más simple e intuitiva:

css
.container {
    display: flex;
    justify-content: center;    /* Centra horizontalmente */
    min-height: 100vh;
}

.card {
    margin-top: 100px;          /* Baja la card 100px desde arriba */
    /* El resto de estilos de la card permanecen igual */
}

Visualmente, sería así:

text
▌                                                ▐
▌                                                ▐
▌                                                ▐
▌                    ▲                           ▐
▌                    │                           ▐
▌              margin-top: 100px                  ▐
▌                    │                           ▐
▌                    ▼                           ▐
▌              ┌─────────────┐                    ▐
▌              │             │                    ▐
▌              │    CARD     │                    ▐
▌              │             │                    ▐
▌              └─────────────┘                    ▐
▌                                                ▐
▌                                                ▐
▌                                                ▐

¿Cuánto la quieres bajar? Simplemente cambia el valor 100px por la cantidad que necesites (puede ser en píxeles, porcentajes, rem, etc.).

Comentarios

Publicar un comentario

Entradas más populares de este blog

Tutorial de CSS: De Cero a Estilizar tu Primera Página Web

1. ¿Qué es CSS? CSS son las siglas de  Cascading Style Sheets  (Hojas de Estilo en Cascada). Es un lenguaje que usamos para describir la  presentación  de un documento escrito en HTML. Mientras que HTML se encarga de la estructura y el contenido (títulos, párrafos, imágenes), CSS se encarga de cómo se ve ese contenido (colores, fuentes, tamaños, posición). 2. ¿Cómo se integra CSS con HTML? Hay tres formas principales de incluir CSS en tu proyecto: CSS en línea (Inline):  Se aplica directamente a una etiqueta HTML usando el atributo  style . Es el método menos recomendado porque mezcla contenido con presentación y es difícil de mantener. html < p style = " color : blue ; font-size : 18px ; " > Este es un párrafo azul. </ p > CSS interno (Internal):  Se escribe dentro de la etiqueta  <style>  en la sección  <head>  del documento HTML. Es útil para páginas individuales o para hacer pruebas rápidas. html <...
Leer más

layouts

   "Explica el siguiente código HTML y CSS poniendo especial énfasis en: La maquetación de cajas : cómo se estructuran visualmente cada uno de los elementos (body, tarjeta, imagen, textos, botón). El flujo natural de las cajas : cómo se comportan los elementos en el flujo por defecto (elementos de bloque vs. en línea) y cómo se van posicionando unos respecto a otros. La agrupación de elementos : cómo se relacionan visualmente los elementos que están dentro de un mismo contenedor. La jerarquía padre-hijo : cómo afectan las propiedades del elemento padre a sus hijos directos e indirectos (herencia, contención, y cómo el espacio del padre condiciona el espacio de los hijos). f Tutorial: Creando una Plantilla de Registro HTML/CSS Objetivo del Proyecto Vamos a crear la estructura básica de una página web que contiene: Un menú de navegación con 4 opciones. Un formulario de registro de usuario. Estilos CSS para que todo se vea ordenado y profesional. Paso 1: Entendiendo la Estructura...
Leer más

Proyecto Práctico: Tarjeta de Perfil

"Explica el siguiente código HTML y CSS poniendo especial énfasis en: La maquetación de cajas : cómo se estructuran visualmente cada uno de los elementos (body, tarjeta, imagen, textos, botón). El flujo natural de las cajas : cómo se comportan los elementos en el flujo por defecto (elementos de bloque vs. en línea) y cómo se van posicionando unos respecto a otros. La agrupación de elementos : cómo se relacionan visualmente los elementos que están dentro de un mismo contenedor. La jerarquía padre-hijo : cómo afectan las propiedades del elemento padre a sus hijos directos e indirectos (herencia, contención, y cómo el espacio del padre condiciona el espacio de los hijos).    Creando una Tarjeta de Perfil con HTML y CSS Descripción del Proyecto Vamos a crear una tarjeta de perfil profesional que contiene: Foto de perfil circular Nombre de la persona Descripción breve Ubicación Botón interactivo con efectos Al final, tendremos una tarjeta moderna y responsive que se centra en la pa...
Leer más