BUENO-2

 Te reescribo el código completo con explicaciones detalladas de cada parte, enfocándome en los conceptos que mencionaste:

html
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Mi Tutorial Web</title>
    <style>
        /* ===== RESET GLOBAL ===== */
        /* El selector * afecta a TODOS los elementos de la página */
        * { 
            margin: 0;      /* Elimina márgenes por defecto de TODOS los elementos */
            padding: 0;     /* Elimina rellenos por defecto de TODOS los elementos */
            box-sizing: border-box; /* El padding y borde se incluyen en el ancho/alto total */
        }
        
        /* ===== BODY ===== */
        /* Es el PADRE de toda la página */
        body { 
            font-family: Arial, sans-serif;  /* Se HEREDA a todos los hijos */
            background: #f0f0f0;  /* Color de fondo gris claro */
        }
        
        /* ===== CONTENEDOR PRINCIPAL ===== */
        /* HIJO DIRECTO del body - Caja que estructura toda la página */
        .contenedor {
            display: grid;                    /* ACTIVAMOS GRID - sistema de rejilla */
            grid-template-columns: 250px 1fr; /* 2 columnas: 250px fijos | 1 fracción del resto */
            min-height: 100vh;                 /* Altura mínima = 100% de la ventana */
        }
        
        /* ===== MENÚ LATERAL ===== */
        /* PRIMER HIJO de .contenedor - Columna izquierda */
        .indice {
            background: #2c3e50;    /* Azul oscuro */
            color: white;            /* Texto blanco (se hereda) */
            padding: 20px;           /* Relleno interno */
            overflow-y: auto;        /* Scroll vertical si el contenido es muy largo */
        }
        
        /* Título del menú */
        .indice h2 {
            margin-bottom: 20px;     /* Espacio inferior */
            font-size: 20px;         /* Tamaño de fuente */
            border-bottom: 2px solid #3498db; /* Línea azul decorativa */
            padding-bottom: 10px;    /* Espacio entre texto y línea */
        }
        
        /* Lista del menú - quitamos viñetas */
        .indice ul {
            list-style: none;
        }
        
        /* Cada elemento de la lista */
        .indice li {
            margin-bottom: 10px;     /* Espacio entre elementos */
        }
        
        /* Enlaces del menú */
        .indice a {
            color: #ecf0f1;          /* Gris muy claro */
            text-decoration: none;   /* Quita subrayado */
            display: block;          /* ¡CLAVE! Ocupa TODO el ancho disponible */
            padding: 8px 10px;       /* Relleno interno */
            border-radius: 4px;      /* Bordes redondeados */
            transition: all 0.3s;    /* Animación suave al hacer hover */
        }
        
        /* Efecto hover en enlaces */
        .indice a:hover {
            background: #34495e;     /* Fondo más claro */
            transform: translateX(5px); /* Se desplaza 5px a la derecha */
        }
        
        /* ===== CONTENIDO PRINCIPAL ===== */
        /* SEGUNDO HIJO de .contenedor - Columna derecha */
        .contenido {
            background: white;        /* Fondo blanco */
            padding: 30px;            /* Relleno interno generoso */
            overflow-y: auto;         /* Scroll vertical si es necesario */
        }
        
        /* ===== SISTEMA DE PESTAÑAS ===== */
        /* Todos los temas están OCULTOS por defecto */
        .tema {
            display: none;            /* ¡CLAVE! Oculta los temas */
        }
        
        /* Solo el tema con clase "activo" se muestra */
        .tema.activo {
            display: block;           /* Muestra el tema seleccionado */
        }
        
        /* ===== ESTILOS DEL CONTENIDO ===== */
        /* Título principal de cada tema */
        h1 {
            color: #2c3e50;           /* Azul oscuro */
            margin-bottom: 20px;       /* Espacio inferior */
            border-bottom: 3px solid #3498db; /* Línea azul gruesa */
            padding-bottom: 10px;      /* Espacio entre texto y línea */
        }
        
        /* Subtítulos */
        h2 {
            color: #34495e;            /* Azul un poco más claro */
            margin: 25px 0 15px 0;      /* Superior 25px | Inferior 15px */
        }
        
        /* Párrafos */
        p {
            line-height: 1.6;           /* Altura de línea para mejor legibilidad */
            margin-bottom: 15px;         /* Espacio entre párrafos */
        }
        
        /* Bloques de ejemplo */
        .ejemplo {
            background: #f8f9fa;        /* Fondo gris muy claro */
            border-left: 4px solid #3498db; /* Borde izquierdo azul */
            padding: 15px;                /* Relleno interno */
            margin: 20px 0;               /* Margen vertical */
            font-family: monospace;       /* Fuente monoespaciada */
        }
        
        /* Bloques de código */
        .codigo {
            background: #2c3e50;         /* Fondo azul oscuro */
            color: #ecf0f1;               /* Texto gris claro */
            padding: 15px;                 /* Relleno interno */
            border-radius: 5px;            /* Bordes redondeados */
            font-family: monospace;        /* Fuente monoespaciada */
            margin: 20px 0;                /* Margen vertical */
        }
        
        /* Bloques de ejercicio */
        .ejercicio {
            background: #d4edda;           /* Verde claro */
            border: 1px solid #c3e6cb;      /* Borde verde */
            color: #155724;                 /* Texto verde oscuro */
            padding: 15px;                   /* Relleno interno */
            border-radius: 5px;              /* Bordes redondeados */
            margin: 20px 0;                  /* Margen vertical */
        }
        
        /* Bloques de nota */
        .nota {
            background: #fff3cd;           /* Amarillo claro */
            border: 1px solid #ffeeba;      /* Borde amarillo */
            color: #856404;                  /* Texto amarillo oscuro */
            padding: 15px;                    /* Relleno interno */
            border-radius: 5px;               /* Bordes redondeados */
            margin: 20px 0;                   /* Margen vertical */
        }
        
        /* ===== BOTONES ===== */
        button {
            background: #3498db;            /* Fondo azul */
            color: white;                    /* Texto blanco */
            border: none;                     /* Sin borde */
            padding: 10px 20px;                /* Relleno: 10px vertical, 20px horizontal */
            border-radius: 4px;                /* Bordes redondeados */
            cursor: pointer;                   /* Cursor tipo mano */
            font-size: 16px;                   /* Tamaño de fuente */
            margin: 10px 5px 10px 0;           /* Margen: sup 10px, der 5px, inf 10px, izq 0 */
        }
        
        /* Efecto hover en botones */
        button:hover {
            background: #2980b9;            /* Azul más oscuro */
        }
        
        /* ===== ÁREAS DE TEXTO ===== */
        textarea {
            width: 100%;                     /* Ocupa todo el ancho disponible */
            padding: 10px;                    /* Relleno interno */
            border: 1px solid #ddd;           /* Borde gris claro */
            border-radius: 4px;               /* Bordes redondeados */
            font-family: monospace;           /* Fuente monoespaciada */
            margin: 10px 0;                   /* Margen vertical */
        }
        
        /* ===== MEDIA QUERY - MÓVILES ===== */
        @media (max-width: 768px) {
            .contenedor {
                grid-template-columns: 1fr;   /* En móviles, UNA SOLA COLUMNA */
            }
        }
    </style>
</head>
<body>
    <!-- ================================================== -->
    <!-- ESTRUCTURA HTML - JERARQUÍA DE CAJAS                -->
    <!-- ================================================== -->

    <!-- CONTENEDOR PRINCIPAL (HIJO DIRECTO del body) -->
    <div class="contenedor">
        
        <!-- =============================================== -->
        <!-- CAJA 1: ÍNDICE LATERAL (HIJO de .contenedor)    -->
        <!-- =============================================== -->
        <div class="indice">
            <h2>📚 MI TUTORIAL</h2>  <!-- Título - elemento de BLOQUE -->
            <ul>                       <!-- Lista - elemento de BLOQUE -->
                <li><a href="#" onclick="mostrarTema(1)">📖 1. HTML Básico</a></li>  <!-- Los <li> son BLOQUE -->
                <li><a href="#" onclick="mostrarTema(2)">🎨 2. CSS Básico</a></li>    <!-- Los <a> son BLOQUE por display:block -->
                <li><a href="#" onclick="mostrarTema(3)">🔧 3. Flexbox</a></li>
                <li><a href="#" onclick="mostrarTema(4)">📐 4. CSS Grid</a></li>
                <li><a href="#" onclick="mostrarTema(5)">🏗️ 5. Layouts</a></li>
                <li><a href="#" onclick="mostrarTema(6)">💡 6. Proyectos</a></li>
                <li><a href="#" onclick="mostrarTema(7)">❓ 7. Mis Preguntas</a></li>
            </ul>
        </div>
        
        <!-- =============================================== -->
        <!-- CAJA 2: CONTENIDO PRINCIPAL (HIJO de .contenedor) -->
        <!-- =============================================== -->
        <div class="contenido">
            
            <!-- =========================================== -->
            <!-- TEMA 1: HTML BÁSICO                          -->
            <!-- Todos los temas son HIJOS de .contenido      -->
            <!-- =========================================== -->
            <div id="tema1" class="tema activo">  <!-- Este tema está visible (clase activo) -->
                <h1>📖 HTML BÁSICO</h1>  <!-- Elemento de BLOQUE -->
                
                <h2>¿Qué es HTML?</h2>  <!-- Elemento de BLOQUE -->
                <p>HTML (HyperText Markup Language) es el lenguaje estándar para crear páginas web. Describe la estructura de una página web.</p>  <!-- Elemento de BLOQUE -->
                
                <h2>Estructura básica:</h2>
                <div class="codigo">  <!-- Elemento de BLOQUE -->
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Mi primera página&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Hola Mundo&lt;/h1&gt;
    &lt;p&gt;Este es mi primer párrafo.&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;
                </div>
                
                <div class="ejercicio">  <!-- Elemento de BLOQUE -->
                    <strong>✏️ EJERCICIO 1:</strong> Crea una página HTML con:
                    <ul>
                        <li>Un título principal (h1) con tu nombre</li>
                        <li>Un párrafo describiendo qué quieres aprender</li>
                        <li>Una lista de 3 cosas que te gustan</li>
                    </ul>
                    <textarea rows="8" placeholder="Escribe tu código aquí..."></textarea>  <!-- Elemento en LÍNEA (pero con width:100%) -->
                    <button onclick="alert('¡Bien! Ahora pregúntame dudas específicas')">Verificar</button>  <!-- Elemento en LÍNEA -->
                </div>
                
                <div class="nota">  <!-- Elemento de BLOQUE -->
                    <strong>📝 NOTA:</strong> Puedes preguntarme cualquier duda sobre este tema.
                </div>
            </div>
            
            <!-- TEMA 2: CSS BÁSICO -->
            <div id="tema2" class="tema">  <!-- Este tema está OCULTO (sin clase activo) -->
                <h1>🎨 CSS BÁSICO</h1>
                
                <h2>¿Qué es CSS?</h2>
                <p>CSS (Cascading Style Sheets) se usa para dar estilo a las páginas HTML.</p>
                
                <h2>Formas de aplicar CSS:</h2>
                
                <h3>1. CSS Externo:</h3>  <!-- h3 es elemento de BLOQUE -->
                <div class="codigo">
&lt;link rel="stylesheet" href="estilos.css"&gt;
                </div>
                
                <h3>2. CSS Interno:</h3>
                <div class="codigo">
&lt;style&gt;
    body {
        background-color: lightblue;
    }
    h1 {
        color: white;
        text-align: center;
    }
&lt;/style&gt;
                </div>
                
                <div class="ejemplo">
                    <strong>EJEMPLO PRÁCTICO:</strong><br>
                    <p style="color: blue; font-size: 20px;">Este texto es azul con CSS en línea</p>
                </div>
                
                <div class="ejercicio">
                    <strong>✏️ EJERCICIO 2:</strong> Dale estilo a tu página anterior:
                    <ul>
                        <li>Fondo de color claro</li>
                        <li>Título centrado y color azul</li>
                        <li>Párrafos con fuente más grande</li>
                    </ul>
                </div>
            </div>
            
            <!-- TEMA 3: FLEXBOX -->
            <div id="tema3" class="tema">
                <h1>🔧 FLEXBOX</h1>
                
                <h2>Conceptos básicos:</h2>
                <p>Flexbox es un sistema para alinear elementos de manera fácil.</p>
                
                <div class="codigo">
.contenedor {
    display: flex;
    justify-content: center;  /* Centra horizontalmente */
    align-items: center;      /* Centra verticalmente */
    gap: 20px;                 /* Espacio entre elementos */
}
                </div>
                
                <!-- Ejemplo visual de flexbox -->
                <div style="display: flex; gap: 10px; margin: 20px 0;">
                    <div style="background: #3498db; padding: 20px; color: white;">1</div>
                    <div style="background: #3498db; padding: 20px; color: white;">2</div>
                    <div style="background: #3498db; padding: 20px; color: white;">3</div>
                </div>
                <p>⬆️ Este es un ejemplo de flexbox con 3 elementos</p>
            </div>
            
            <!-- TEMA 4: CSS GRID -->
            <div id="tema4" class="tema">
                <h1>📐 CSS GRID</h1>
                
                <h2>Grid básico:</h2>
                <div class="codigo">
.grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}
                </div>
                
                <!-- Ejemplo visual de grid -->
                <div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin: 20px 0;">
                    <div style="background: #e74c3c; padding: 20px; color: white;">1</div>
                    <div style="background: #e74c3c; padding: 20px; color: white;">2</div>
                    <div style="background: #e74c3c; padding: 20px; color: white;">3</div>
                    <div style="background: #e74c3c; padding: 20px; color: white;">4</div>
                    <div style="background: #e74c3c; padding: 20px; color: white;">5</div>
                    <div style="background: #e74c3c; padding: 20px; color: white;">6</div>
                </div>
            </div>
            
            <!-- TEMA 5: LAYOUTS -->
            <div id="tema5" class="tema">
                <h1>🏗️ LAYOUTS COMPLETOS</h1>
                
                <h2>Ejemplo de página completa:</h2>
                <div class="codigo">
body {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
}

header { background: #333; color: white; padding: 20px; }
main { padding: 20px; }
footer { background: #333; color: white; padding: 20px; }
                </div>
            </div>
            
            <!-- TEMA 6: PROYECTOS -->
            <div id="tema6" class="tema">
                <h1>💡 PROYECTOS PRÁCTICOS</h1>
                
                <h2>Proyecto 1: Tarjeta de presentación</h2>
                <p>Crea una tarjeta como la que hemos visto antes.</p>
                
                <h2>Proyecto 2: Menú lateral + contenido</h2>
                <p>El layout que estamos usando AHORA MISMO en este tutorial.</p>
                
                <div class="nota">
                    ¿Te animas a intentar recrear este mismo layout?
                </div>
            </div>
            
            <!-- TEMA 7: MIS PREGUNTAS -->
            <div id="tema7" class="tema">
                <h1>❓ MIS PREGUNTAS</h1>
                
                <div class="nota">
                    <strong>💡 Aquí puedes anotar tus dudas:</strong>
                </div>
                
                <textarea rows="10" placeholder="Escribe tus preguntas aquí..."></textarea>
                <button onclick="alert('¡Perfecto! Ahora pregúntame específicamente sobre estas dudas')">Guardar Preguntas</button>
                
                <h2 style="margin-top: 30px;">Preguntas Frecuentes:</h2>
                
                <p><strong>P: ¿Por qué no se centra mi elemento?</strong></p>
                <p>R: Revisa que tengas display: flex y justify-content: center</p>
                
                <p><strong>P: ¿Cuál es la diferencia entre padding y margin?</strong></p>
                <p>R: Padding es dentro del borde, margin es fuera del borde</p>
            </div>
        </div>  <!-- Cierra .contenido -->
    </div>  <!-- Cierra .contenedor -->

    <!-- ===== JAVASCRIPT PARA CAMBIAR DE TEMA ===== -->
    <script>
        function mostrarTema(numero) {
            // Ocultar todos los temas
            for (let i = 1; i <= 7; i++) {
                document.getElementById('tema' + i).classList.remove('activo');
            }
            
            // Mostrar el tema seleccionado
            document.getElementById('tema' + numero).classList.add('activo');
        }
    </script>
</body>
</html>

Explicación de los Conceptos Clave

1. Maquetación de Cajas (Estructura Visual)

text
┌─────────────────────────────────────────────────┐
│ BODY (fondo gris)                               │
│  ┌───────────────────────────────────────────┐  │
│  │ .contenedor (GRID)                         │  │
│  │  ┌──────────────┬────────────────────┐    │  │
│  │  │              │                    │    │  │
│  │  │ .indice      │ .contenido         │    │  │
│  │  │ (250px fijo) │ (1fr - flexible)   │    │  │
│  │  │              │                    │    │  │
│  │  │ • HTML       │ ┌──────────────┐   │    │  │
│  │  │ • CSS        │ │ TEMA 1 (activo)│   │    │  │
│  │  │ • Flexbox    │ │ • Título      │   │    │  │
│  │  │ • Grid       │ │ • Texto       │   │    │  │
│  │  │ • Layouts    │ │ • Ejercicio   │   │    │  │
│  │  │ • Proyectos  │ │ • Botón       │   │    │  │
│  │  │ • Preguntas  │ └──────────────┘   │    │  │
│  │  │              │                    │    │  │
│  │  └──────────────┴────────────────────┘    │  │
│  └───────────────────────────────────────────┘  │
└─────────────────────────────────────────────────┘

2. Flujo Natural de las Cajas

Elementos de BLOQUE en este código:

  • <div> (todos los contenedores)

  • <h1>, <h2>, <h3> (títulos)

  • <p> (párrafos)

  • <ul>, <li> (listas)

  • Los elementos con clase .codigo, .ejercicio, .nota

Características de los bloques:

  • Ocupan todo el ancho disponible

  • Se apilan verticalmente (uno debajo del otro)

  • Respetan margin y padding

Elementos en LÍNEA en este código:

  • <strong> (texto en negrita)

  • <a> (enlaces - pero aquí son block por CSS)

  • <button> (botones)

  • <textarea> (área de texto)

Características de los elementos en línea:

  • Se colocan uno al lado del otro

  • Solo ocupan el espacio necesario

  • No aceptan width/height (aunque botones y textarea sí por ser casos especiales)

3. Agrupación de Elementos

.indice agrupa:

  • Título "MI TUTORIAL"

  • Lista de enlaces a temas

  • Todos comparten el mismo fondo azul oscuro

  • Todos tienen el mismo estilo de hover (desplazamiento)

.contenido agrupa:

  • Todos los temas del tutorial

  • Cada tema tiene título, explicaciones, ejercicios

  • Los diferentes tipos de bloques (ejemplo, código, ejercicio, nota) comparten márgenes consistentes

Cada tema (tema1, tema2, etc.) agrupa:

  • Contenido relacionado con un concepto específico

  • Ejemplos prácticos

  • Ejercicios para practicar

4. Jerarquía Padre-Hijo

Herencia (propiedades que pasan de padres a hijos):

css
body { font-family: Arial; } /* TODOS los textos heredan Arial */

.indice { color: white; } /* Todos los textos dentro heredan color blanco */
  .indice a { } /* Los enlaces heredan el color blanco */

.contenido { } /* Los temas dentro heredan el padding del padre */

Contención (cómo el padre condiciona a los hijos):

  1. .contenedor (padre) → Define el espacio disponible:

    css
    .contenedor {
    display: grid;
    grid-template-columns: 250px 1fr; /* Reparte el espacio entre sus dos hijos */
}

    • Hijo .indice: Recibe EXACTAMENTE 250px de ancho

    • Hijo .contenido: Recibe TODO lo que sobre (1fr)

  2. .contenido (padre) → Limita el área de los temas:

    css
    .contenido {
    padding: 30px; /* Todos los temas respetan este relleno */
    overflow-y: auto; /* Si el tema es muy alto, aparece scroll AQUÍ */
}

  3. Cada tema (hijo de .contenido):

    • Ocupa el ancho que le deja .contenido (restando padding)

    • Si es muy alto, .contenido hará scroll, no la página completa

5. Sistema de Temas (Ocultar/Mostrar)

css
.tema {
    display: none; /* TODOS los temas OCULTOS por defecto */
}

.tema.activo {
    display: block; /* Solo el tema con clase "activo" se muestra */
}

Esto crea una jerarquía de visibilidad:

  • El padre .contenido contiene 7 hijos (los temas)

  • Solo 1 hijo está visible gracias a la clase "activo"

  • JavaScript cambia qué hijo tiene la clase activo

Resumen Visual de la Jerarquía

text
body (PADRE GENERAL)
│
├── .contenedor (PADRE FLEX/GRID)
│   ├── .indice (PADRE DEL MENÚ)
│   │   ├── h2 (hijo)
│   │   ├── ul (hijo)
│   │   │   └── li (hijo) → a (hijo)
│   │   └── ... más li
│   │
│   └── .contenido (PADRE DE TEMAS)
│       ├── #tema1 (hijo - visible)
│       │   ├── h1, h2, p, div (nietos)
│       │   └── button, textarea (nietos)
│       │
│       ├── #tema2 (hijo - oculto)
│       ├── #tema3 (hijo - oculto)
│       └── ... más temas
│
└── script (no es caja, es comportamiento)

Este código es un excelente ejemplo de maquetación moderna porque:

  1. Usa Grid para el layout principal

  2. Tiene una jerarquía clara de contenedores

  3. Aprovecha la herencia para estilos consistentes

  4. Los hijos se adaptan al espacio que les dan sus padres

  5. Es responsivo (media query para móviles)

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