card2

 <!DOCTYPE html>

<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Featured Card - Flexbox</title>
    <style>
        /* CONTENEDOR PRINCIPAL - FLEX EN COLUMNA */


        .featured-card {
            /* ACTIVAR FLEXBOX: Convierte este contenedor en un flex container */
            display: flex;

            /* DIRECCIÓN DE LOS ELEMENTOS: Coloca los hijos en vertical (columna)
       en lugar de horizontal (fila) que es el valor por defecto */
            flex-direction: column;

            /* DIMENSIONES Y ESTILOS */

            /* ANCHO COMPLETO: Ocupa el 100% del ancho de su contenedor padre */
            width: 100%;

            /* ANCHO MÁXIMO: Limita el crecimiento a 400px en pantallas grandes
       (mejor experiencia de lectura) */
            max-width: 400px;

            /* MARGEN EXTERNO:
       - 50px: espacio arriba y abajo
       - auto: centrado horizontal automático (funciona porque width está definido) */
            margin: 50px auto;

            /* BORDE: 1px de grosor, sólido, color negro con 17.5% de opacidad
       (más sutil que negro puro) */
            border: 1px solid rgba(0, 0, 0, 0.175);

            /* BORDE REDONDEADO: 8px de radio en todas las esquinas */
            border-radius: 8px;

            /* FONDO: Blanco sólido (forma abreviada de background-color) */
            background: white;

            /* SOMBRA:
       - 0: desplazamiento horizontal
       - 4px: desplazamiento vertical (hacia abajo)
       - 6px: desenfoque
       - color negro con 5% opacidad (muy sutil) */
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);

            /* TIPOGRAFÍA:
       -apple-system: Fuente nativa de macOS/iOS
       BlinkMacSystemFont: Fuente nativa de macOS en Chrome
       'Segoe UI': Fuente nativa de Windows
       sans-serif: Fuente genérica sin remates como respaldo */
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

            /* DESBORDAMIENTO: Oculta cualquier contenido que sobresalga
       de las esquinas redondeadas (por ejemplo, si una imagen
       o texto muy grande intentara salirse) */
            overflow: hidden;
        }

        /* HEADER - Primero en el flujo */
        .card-header {
            background: #f8f9fa;
            padding: 16px 20px;
            border-bottom: 1px solid rgba(0, 0, 0, 0.125);
            font-size: 1.1rem;
            font-weight: 600;
            color: #212529;
        }

        /* TÍTULO - Segundo en el flujo */
        .card-title {
            padding: 20px 20px 0 20px;
            margin: 0;
            font-size: 1.5rem;
            font-weight: 500;
            color: #212529;
        }

        /* TEXTO - Tercero en el flujo */
        .card-text {
            padding: 10px 20px;
            margin: 0;
            color: #6c757d;
            line-height: 1.5;
            font-size: 1rem;
        }

        /* FOOTER - Cuarto y último en el flujo */
        .card-footer {
            background: #f8f9fa;
            padding: 16px 20px;
            border-top: 1px solid rgba(0, 0, 0, 0.125);

            /* Footer usa flexbox en fila */
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 15px;
        }

        /* Texto pequeño del footer */
        .footer-text {
            color: #6c757d;
            font-size: 0.875rem;
            margin: 0;
        }

        /* Botón */
        .card-button {
            display: inline-block;
            padding: 8px 20px;
            background: #0d6efd;
            color: white;
            text-decoration: none;
            border: none;
            border-radius: 6px;
            font-size: 1rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
            text-align: center;
            min-width: 120px;
            white-space: nowrap;
            /* Evita que el texto del botón se rompa */
        }

        .card-button:hover {
            background: #0b5ed7;
            transform: translateY(-1px);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        /* VERSIÓN MÓVIL */
        @media (max-width: 480px) {
            .featured-card {
                margin: 20px;
                max-width: 100%;
            }

            /* En móvil: columna centrada */
            .card-footer {
                flex-direction: column;
                gap: 10px;
                text-align: center;
            }

            .card-button {
                width: 100%;
                /* Botón ocupa todo el ancho */
                min-width: auto;
            }
        }
    </style>
</head>

<body>
    <div class="featured-card">
        <div class="card-header">Featured</div>
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <div class="card-footer">
            <small class="footer-text">Last updated 3 mins ago</small>
            <a href="#" class="card-button">Go somewhere</a>
        </div>
    </div>
</body>

</html>

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