Con Sub-Opciones
En este ejercicio nos concentramos en el menú responsivo con subopciones y realizamos un diseño más sofisticado con colores brillantes y gran diversidad de gradientes. Adaptamos imágenes SVG a nuestro diseño.
Podés visitar el sitio que desarrollaremos aquí. ↩
● Preparación
- 1.Como en todos los proyectos, iniciamos creando una carpeta en el escritorio.
- 2.Abrimos la carpeta con Visual Studio Code.
- 3.Generamos el index.html ( con ! enter).
- 4.Corregimos el lang=“en” a lang=“es”.
- 5.Escribimos el título del documento web en la etiqueta title.
- 6.Desarrollamos el head para buscadores y redes sociales.
- 7.Creamos el style.css y lo conectamos con la etiqueta link.
- 8.Buscamos en google fonts (https://fonts.google.com/) el link de la letra escogida. En este caso “Inter” y copiamos el link en el html.
- 9.Escribimos la propiedad de font-family en el style.css
- 10.Buscamos nuestro favicon, lo agregamos a la carpeta imagenes que creamos y lo conectamos con la etiqueta link correspondiente.
- 11.Activamos Live Server y Live Preview para facilitar el desarrollo del documento.
De esta manera el head nos queda de la siguiente manera:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Para buscadores -->
<meta name="robots" content="index, follow">
<meta name="description" content="Sitio web con subopciones responsivo.">
<!-- Para redes sociales -->
<meta property="og:title" content="Ejercicio 4 - Menú con subopciones">
<meta property="og:description" content="Ejercicio 4 - Menú con subopciones">
<meta property="og:image" content="https://codigoenweb.com/imagenes/logo.png">
<meta property="og:url" content="https://htmlcsssub.codigoenweb.com">
<!-- Para ex twitter X -->
<meta name="twitter:card" content="summary_large_card">
<meta name="twitter:image" content="https://codigoenweb.com/imagenes/logo.png">
<meta name="twitter:title" content="Ejercicio 4 - Menú con subopciones">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
<link rel="shortcut icon" href="imagenes/favicon.svg" type="image/x-icon">
<link rel="stylesheet" href="style.css">
<title>Ejercicio 4 - Menú con subopciones</title>
</head>en style.css
body{
font-family: "Inter", sans-serif;
}● Iniciamos con el body
1.Como nuestro proyecto tendrá cambio de modo claro/oscuro. Configuramos dos etiquetas hermanas.
<body>
<input type="checkbox" id="cambiar-color">
<div class="contenedor-app"> </div>
</body>2.Toda la app se desarrollará dentro de .contenedor-app
<body>
<input type="checkbox" id="cambiar-color">
<div class="contenedor-app">
<header></header>
<main></main>
<footer></footer>
</div>
</body>● Header
1.Primero desarrollamos el html del encabezado
<body>
<input type="checkbox" id="cambiar-color">
<div class="contenedor-app">
<header>
<nav>
<a href="" id="logo" class=logo><span>M</span><span>Menger/Economía</span></a>
<ul class="opciones">
<li><a href="">Mapa</a></li>
<li><a href="">Conceptos</a></li>
<li><a href="">Libro</a></li>
<li><a href="">Resumen</a></li>
</ul>
<div class="iconos">
<label for="cambiar-color" id="sol">Sol</label>
<label for="cambiar-color" id="luna">Luna</label>
</div>
</nav>
</header>
<main></main>
<footer></footer>
</div>
</body>2.De los íconos en el sitio de google fonts, descargamos el sol (Sunny) y la luna (Dark Mode), guardándolos en nuestra carpeta de imágenes.
Situándonos, sobre el archivo de sol.svg, con botón derecho lo abrimos con Open with Text Editor Default, copiamos todo con ctl C y lo pegamos en el interior de la etiqueta correspondiente.
Hacemos lo mismo con la luna. Porque para cambiar el color, el archivo svg debe estar dentro del html como etiqueta y no como imagen externa.
...
<div class="iconos">
<label for="cambiar-color" id="sol"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#008b8b"><path d="M440-760v-160h80v160h-80Zm266 110-55-55 112-115 56 57-113 113Zm54 210v-80h160v80H760ZM440-40v-160h80v160h-80ZM254-652 140-763l57-56 113 113-56 54Zm508 512L651-255l54-54 114 110-57 59ZM40-440v-80h160v80H40Zm157 300-56-57 112-112 29 27 29 28-114 114Zm113-170q-70-70-70-170t70-170q70-70 170-70t170 70q70 70 70 170t-70 170q-70 70-170 70t-170-70Zm283-57q47-47 47-113t-47-113q-47-47-113-47t-113 47q-47 47-47 113t47 113q47 47 113 47t113-47ZM480-480Z"/></svg></label>
<label for="cambiar-color" id="luna"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#008b8b"><path d="M480-120q-150 0-255-105T120-480q0-150 105-255t255-105q14 0 27.5 1t26.5 3q-41 29-65.5 75.5T444-660q0 90 63 153t153 63q55 0 101-24.5t75-65.5q2 13 3 26.5t1 27.5q0 150-105 255T480-120Zm0-80q88 0 158-48.5T740-375q-20 5-40 8t-40 3q-123 0-209.5-86.5T364-660q0-20 3-40t8-40q-78 32-126.5 102T200-480q0 116 82 198t198 82Zm-10-270Z"/></svg></label>
</div>
...● Estilos al header
Aplicamos las propiedades correspondientes:
- Como configuración general y determinación de colores
:root{
--color-fondo: #050505;
--color-texto: #fff;
--color-resaltador: #00e5ff;
--fondo-body-general: radial-gradient(circle at 15% 0%, rgba(0,229,255,.08), transparent 26rem),
radial-gradient(circle at 85% 12%, rgba(255,255,255,0.04), transparent 25rem),
var(--color-fondo);
}
#cambiar-color:checked ~ .contenedor-app{
--color-fondo:#fff;
--color-texto:#010101;
--color-resaltador:#00baeb;
--fondo-body-general:var(--color-fondo);
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: "Inter", sans-serif;
}
/* Estandarización del documento web */
.contenedor-app{
min-height: 100vh;
background:var(--fondo-body-general);
color: var(--color-texto);
/* Es solo un diseño que me gusta */
line-height: 1.65;
letter-spacing: -0.01em;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
img { max-width: 100%; display: block; }
input#cambiar-color{
display: none;
}2.Ubicación de los elementos Usaremos la propiedad FlexBox y sus propiedades derivadas.
header nav{
display: flex;
justify-content: space-between;
align-items: center;
/* Con la fijación de altura y el align-center, el padding arriba/abajo se determina solo */
height:80px;
}
/* Hay varios ul porque hay subopciones, entonces es importante aclarar a cual me refiero. */
header nav ul.opciones{
list-style: none;
display: flex;
align-items: center;
gap:3rem;
}3.Creamos una clase .contenedor para aplicarla en el nav y otras etiquetas más adelante. La ubicamos con las clases generales.
...
<nav class="contenedor">
...
</nav>
.../* Propiedades generales */
.contenedor{
/* De esta manera estoy marcando también el padding para los distintos dispositivos */
max-width: min(1180px, calc(100% - 32px));
/* Lo centro */
margin: 0 auto;
}4.Vamos hijo por hijo del nav. Iniciamos con la etiqueta a con id=“logo”
header nav a span:first-child{
width: 30px;
height: 30px;
line-height: 30px; /*Para que centre la letra*/
border: 1px solid var(--borde) ;
border-radius: 8px;
display: grid;
place-items:center ;
color: var(--color-resaltador);
background: var(--fondo-logo);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.025);
}- Agrego en la parte superior, la variable del color –borde
En el root.
--borde:#262626;
--fondo-logo:linear-gradient(145deg, #141414, #090909);
Cuando cambió el modo.
--borde:#010101;
--fondo-logo:linear-gradient(145deg, #e9e9e9, #f9f9f9);- Alineo la etiqueta a#logo
header nav a.logo{
display: flex;
align-items: center;
gap:0.5rem;
font-size: 0.93rem;
font-weight: 750;
letter-spacing: -0.03em;
}- Continúo con los hijos de las opciones
header nav li a{
color: var(--color-opciones);
padding: 9px 11px;
border-radius: 9px;
font-size: .93rem;
transition: .2s ease;
white-space: nowrap;
}
header nav li a:hover{
background: var(--color-fondo-opcion);
color: var(--color-hover-opciones);
box-shadow: var(--sombra);
}Agregando en la parte superior de las variables
en el root:
--color-opciones:#d4d4d4;
--color-hover-opciones:#fff;
--color-fondo-opcion:#1b1b1b;
--sombra: 1px 1px 2px rgba(255,255,255,0.5);
cuando se activa el cambio:
--color-opciones:#444;
--color-hover-opciones:#000;
--color-fondo-opcion:#e9e9e9;
--sombra:0 6px 10px rgba(0,0,0,0.15);- Ubicamos el Sol/Luna en el mismo lugar, porque solo se verá el activo.
header nav .iconos{
/* márgenes laterales */
margin-inline: 2rem;
/*Actúa como referencia para determinar la posición del hijo que tiene absolute*/
position: relative;
}
header nav .iconos label#sol, header nav .iconos label#luna{
/* Se ubica en el (0,0) desde el padre con position:relative */
position: absolute;
top:50%;
right:0;
transform: translate(-50%,-43%);
transition: 0.2s linear;
cursor: pointer;
}
header nav .iconos label{
transition: 0.2s linear;
}
header nav .iconos label:hover svg {
transform: scale(1.05);
}
header nav .iconos label#luna{
opacity: 0;
visibility: hidden;
}
/* Cuando se activa cambiar-color, desaparece el sol y aparece la luna */
#cambiar-color:checked ~ .contenedor-app .iconos #sol{
opacity: 0;
visibility: hidden;
}
/* Cuando se activa cambiar-color, desaparece el sol y aparece la luna */
#cambiar-color:checked ~ .contenedor-app .iconos #luna{
opacity: 1;
visibility: visible;
}● Menú Hamburguesa
El menú Hamburguesa va a estar a lado de los íconos de cambiar-color, lo ubicaremos con position absolute en la etiqueta .íconos. En cambio el ícono para cerrar la ventana lateral del menú estará dentro con las opciones. En este caso como están ubicados en lugares diferentes, usaremos un input de tipo radio, que se relacionan al tener el mismo name, y cuando se activa uno, automaticamente se desactiva el otro. en el html
<header>
<nav class="contenedor">
<!-- Para el menú lateral de celulares -->
<input type="radio" id="menu-btn" name="menu-lateral" />
<input type="radio" id="cerrar-btn" name="menu-lateral" />
<a href="" id="logo" class="logo"><span>M</span><span>Menger/Economía</span></a>
<ul class="opciones">
<label for="cerrar-btn" id="cerrar-label" aria-label="Cerrar Menú"> <svg xmlns="http://www.w3.org/2000/svg" height="28px" viewBox="0 -960 960 960" width="28px" fill="var(--color-resaltador)"> <path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z" /></svg>
</label>
<li><a href="">Mapa</a></li>
<li><a href="">Conceptos</a></li>
<li><a href="">Libro</a></li>
<li><a href="">Resumen</a></li>
</ul>
<div class="iconos">
...
<label for="menu-btn" id="menu-label" aria-label="Abrir Menu">
<svg xmlns="http://www.w3.org/2000/svg" height="28px" viewBox="0 -960 960 960" width="28px" fill="var(--color-resaltador)" > <path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"/></svg>
</label>
</div>
</nav>
</header>Lo primero es que los input no se muestren, solo los label que son los que reciben el click del mouse.
input#cambiar-color, input#menu-btn, input#cerrar-btn{
display: none;
}Vamos a concentrarnos primero en la pantalla de celulares. Ubicamos primero las opciones
@media (max-width:970px) {
header nav ul.opciones{
position: fixed;
height: 100vh;
width: 90%;
max-width: 300px;
top: 0;
left: 0;
background-color: var(--color-fondo-opcion);
display: block;
padding: 50px 10px;
line-height: 50px;
overflow-y: auto;
box-shadow: var(--sombra);
transition: 0.3s ease;
z-index:4;
}
}Ubicamos la etiqueta cerrar-label
header nav label#cerrar-label{
position: absolute;
right: 30px;
top:20px;
cursor: pointer;
transition: 0.3s linear;
}En pantallas grandes, no se ve y en pequeñas si
...
header nav label#menu-label,header nav label#cerrar-label{
display: none;
}
@media (max-width:970px) {
header nav ul.opciones{
position: fixed;
height: 100vh;
width: 90%;
max-width: 300px;
top: 0;
left: 0;
background-color: var(--color-fondo-opcion);
display: block;
padding: 50px 10px;
line-height: 50px;
overflow-y: auto;
box-shadow: var(--sombra);
transition: 0.3s ease;
z-index:4;
}
header nav label#menu-label, header nav label#cerrar-label{
display: block;
}
}Pero como iniciamos con el menú cerrado, donde dice left:0, escribimos left:-100% y recién cuando se haga click en el menú-label, se activa la clase que lo pone en cero y se abre.
left: -100%;Ubicamos el menu-label
header nav .iconos label#menu-label{
margin-inline: 0.3rem;
position: absolute;
top:0;
left: 0;
transform: translate(-50%,-40%);
transition: 0.2s linear;
cursor: pointer;
}Ahora agregamos lo que sucede cuando se activa el input#menu-btn que es cuando se hace click en el label menu-label
@media (max-width:970px) {
...
#menu-btn:checked ~ ul.opciones{
left: 0%;
}
#menu-btn:checked ~ .iconos #menu-label{
display: none;
}
}El menú común ya funciona. Ahora faltan las subopciones.
● Cambiar fondo al header
header{
position: sticky;
top: 0;
z-index: 1000;
border-bottom: 1px solid var(--color-borde-header);
background-color: var(--color-fondo-header);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}Agregamos estos colores en las variables
en el root
--color-fondo-header:rgba(5,5,5,.98);
--color-borde-header:rgba(255,255,255,.08);
en el modo claro
--color-fondo-header:#f9f9f9;
--color-borde-header:rgba(0,0,0,.08);
● Subopciones en computadoras
Agregamos las subopciones en el html. Primero para las pantallas grandes, que se manejan con el hover del mouse, es decir, cuando el mouse pasa por encima de la opción general.
Pero tenemos el problema que en los celulares y tablet, el hover no funciona, porque no hay mouse.
Entonces, debemos agregar un input tipo checkbox, para saber cuando se le hace click con el dedo.
...
<ul class="opciones">
<label for="cerrar-btn" id="cerrar-label" aria-label="Cerrar Menú"> <svg xmlns="http://www.w3.org/2000/svg" height="28px" viewBox="0 -960 960 960" width="28px" fill="var(--color-resaltador)"> <path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z" /></svg>
</label>
<li><a href="">Mapa</a></li>
<li>
<!-- Esta opción aparece en computadoras -->
<a href="#" class="escritorio">Conceptos</a>
<ul class="subopciones">
<li><a href="#bienestar">Bienestar económico</a></li>
<li><a href="#valor">Teoría del Valor</a></li>
<li><a href="#intercambio">Intercambio</a></li>
<li><a href="#precio">Precio</a></li>
<li><a href="#dinero">Dinero</a></li>
</ul>
</li>
<li><a href="">Libro</a></li>
<li><a href="">Resumen</a></li>
</ul>
...Agregamos primero una y después la otra porque son diferentes. Primeramente, en el nav debemos establecer el alto de línea, para que coincida con el alto del mismo, de modo tal que al hacer hover en la opción, aparezca el submenú y se pueda desplazar al mismo, manteniendose abierto.
nav{
...
height:80px;
/* para el submenu - importante para no perder el hover*/
line-height:80px;
}
y para las subopciones
header nav ul.subopciones{
list-style: none;
position: absolute;
background-color:var(--color-fondo-header);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-bottom: 1px solid var(--color-borde-header);
border-left: 2px solid var(--color-borde-header);
border-right: 1px solid var(--color-borde-header);
box-shadow: var(--sombra);
border-radius: 0 0 8px 8px;
width: 220px;
line-height: 45px;
top:85px;
opacity: 0;
visibility: hidden;
}
header nav ul li a{
white-space: nowrap;
}
header nav ul.subopciones li:hover a{
background: var(--color-fondo-opcion);
color: var(--color-hover-opciones);
box-shadow: var(--sombra);
margin-inline: 8px;
}
header nav ul.opciones li:hover ul.subopciones {
transition: 0.3s ease;
/* Importante que sea igual a los valores line-height y height del nav */
top:80px;
opacity: 1;
visibility: visible;
}● Flechas en la opcíon
En la opción a la que tenemos que agregarle las flechas porque tiene submenú
<a href="#" class="escritorio">Conceptos <span aria-hidden="true">↓</span ><span aria-hidden="true">↑</span></a>Le ajustamos el estilo para que se vez una a la vez. Para abajo cuando está cerrado y para arriba cuando se abre con hover.
header nav ul.opciones li a{
/* punto de referencia */
position: relative;
}
header nav ul.opciones li a.escritorio{
/* acomodo para tener espacio */
padding-right: 25px;
}
header nav ul.opciones li a span{
/* ubico la flecha */
position: absolute;
top: -60%;
right: 5%;
transition: 0.2s linear;
}
header nav ul.opciones li a span:last-child{
/* flecha-arriba - oculta cuando no está hover */
visibility: hidden;
opacity: 0;
}
header nav ul.opciones li:hover a span:first-child{
/* flecha-abajo - oculta cuando está hover */
visibility: hidden;
opacity: 0;
}
header nav ul.opciones li:hover a span:last-child{
/* flecha-arriba - visible cuando está hover */
visibility: visible;
opacity: 1;
}● Opción en celular
Trabajamos en la parte del celular. Aquí el hover no funciona, se debe presionar porque es digital, no hay mouse. En el html, agrego
...
<li>
<a href="#" class="escritorio">Conceptos <span aria-hidden="true">↓</span ><span aria-hidden="true">↑</span> </a>
<input type="checkbox" id="menu-celu" />
<label for="menu-celu" class="celular-label">Conceptos <span>↓</span><span>↑</span></label >
<ul class="subopciones">
<li><a href="#bienestar">Bienestar económico</a></li>
<li><a href="#valor">Teoría del Valor</a></li>
<li><a href="#intercambio">Intercambio</a></li>
<li><a href="#precio">Precio</a></li>
<li><a href="#dinero">Dinero</a></li>
</ul>
</li>
...En pantallas grandes solo aparecerá la etiqueta a de clase .esccritorio y en las tablets y celulares el input #menu-celu y el label de clase .celular-label 1- Ocultamos los input, relacionados al label, que son los que se presionan. En la parte superior del css, ponemos todos juntos.
input#cambiar-color, input#menu-btn, input#cerrar-btn, input#menu-celu{
display: none;
}2- Ajustamos las opciones para cada dispositivo. Que solo aparezca la que corresponde.
...
header nav .celular-label{
cursor: pointer;
width: fit-content;
line-height: 40px;
display: none;
}
header nav .celular-label:hover{
background: var(--color-fondo-opcion);
color: var(--color-hover-opciones);
box-shadow: var(--sombra);
}
...
@media (max-width:970px) {
header nav .escritorio{
display: none;
}
header nav .celular-label{
display: block;
color: var(--color-opciones);
padding: 0 11px;
border-radius: 9px;
font-size: .93rem;
transition: .2s ease;
}
...
}- Ajustamos las subopciones, para que se muestren debajo de la opción presionada.
...
@media (max-width:970px) {
...
/* aparece cerrada */
header nav ul.opciones ul.subopciones{
position: static;
background: transparent;
border: none;
opacity: 1;
top: 55px;
visibility: visible;
padding-left: 20px;
width: 100%;
margin-top: 1px;
overflow: hidden;
box-shadow: none;
transition: 0.2s linear;
clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
max-height: 0;
}
/* se abre cuando el input está activado */
#menu-celu:checked ~ ul.subopciones{
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
max-height: 100%;
}
}- Ajustamos las flechas del label para celulares
label.celular-label span:last-child{
display: none;
}
#menu-celu:checked ~ label.celular-label span:first-child{
display: none;
}
#menu-celu:checked ~ label.celular-label span:last-child{
display: inline;
}● Mega-opción para computadora
Hacemos algo muy similar para la mega-opción. Solo varía cómo lo ubicamos en la pantalla grande. En el html
...
<li>
<a href="#" class="escritorio" >Libro <span>↓</span><span>↑</span></a>
<input type="checkbox" id="menu-mega-celu" />
<label for="menu-mega-celu" class="celular-label">Libro <span>↓</span><span>↑</span></label>
<div class="mega-opcion">
<div class="contenido">
<div class="fila">
<span>Bienes o Servicios</span>
<ul class="mega-subopcion">
<li><a href="#cap1">I. Teoría General del Bien</a></li>
<li><a href="#cap2">II. Economía y Bienes </a></li>
<li><a href="#cap3">III.Teoría del Valor</a></li>
</ul>
</div>
<div class="fila">
<span>El intercambio</span>
<ul class="mega-subopcion">
<li><a href="#cap4">VI. Teoría del Intercambio</a></li>
<li><a href="#cap5">V. Teoría del Precio</a></li>
<li><a href="#cap6">VI. Uso e Intercambio</a></li>
</ul>
</div>
<div class="fila">
<span>El dinero</span>
<ul class="mega-subopcion">
<li><a href="#cap7">VII. Teoría de la Mercancía</a></li>
<li><a href="#cap8">VIII. Teoría del Dinero</a></li>
</ul>
</div>
</div>
</div>
</li>
...En el css 1- ocultamos el input
input#cambiar-color, input#menu-btn, input#cerrar-btn, input#menu-celu, input#menu-mega-celu{
display: none;
}2- La referencia para la ubicación de la mega-opción es el nav, por lo que debemos agregarle position:relative;
header nav{
display: flex;
justify-content: space-between;
align-items: center;
/* Con la fijación de altura y el align-center, el padding arriba/abajo se determina solo */
height:80px;
/* para el submenu - importante para no perder el hover*/
line-height:80px;
/*Como referencia para ubicar el submenu para el mega */
position: relative;
}3- Ubicamos la mega-opción en pantalla
header nav ul.opciones .mega-opcion{
list-style: none;
position: absolute;
left: 0;
width: 100%;
padding: 0 30px;
top:85px;
visibility: visible;
opacity: 1;
transition: 0.3s ease;
}4- Le damos estilo a su contenido
header nav ul.opciones .mega-opcion .contenido{
background-color: var(--color-fondo-header);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-bottom: 1px solid var(--color-borde-header);
border-left: 2px solid var(--color-borde-header);
border-right: 1px solid var(--color-borde-header);
padding: 25px 20px;
border-radius: 0 0 8px 8px;
display: flex;
width: 100%;
justify-content: space-between;
box-shadow: var(--sombra);
}5- Estilamos los hijos del contenido
header nav ul.opciones .mega-opcion .contenido .fila{
width: calc(33% - 30px);
line-height: 45px;
}
header nav ul.opciones .mega-opcion .contenido .fila span{
color: var(--color-resaltador);
font-size: 18px;
font-weight: 700;
white-space: nowrap;
cursor: default;
}
header nav ul.opciones .mega-opcion .contenido .fila ul.mega-subopcion {
list-style: none;
border-left: 1px solid var(--borde);
}
header nav .mega-opcion li:hover a{
background: var(--color-fondo-opcion);
color: var(--color-hover-opciones);
box-shadow: var(--sombra);
margin-inline: 8px;
}6- Lo ocultamos y solo lo mostramos cuando se hace hover sobre la opción. Para ocultarlo, en esta clase que ya está escrita, en visibility ponemos hidden y en opacity cero
header nav ul.opciones .mega-opcion{
list-style: none;
position: absolute;
left: 0;
width: 100%;
padding: 0 30px;
top:85px;
/* corregimos solo ahí */
visibility: hidden;
opacity: 0;
transition: 0.3s ease;
}y agregamos la del hover
header nav ul.opciones li:hover .mega-opcion {
transition: 0.3s ease;
/* Importante que sea igual a los valores line-height y height del nav */
top:80px;
opacity: 1;
visibility: visible;
}● Megaopción para celulares
7- Continuamos con los ajustes de la mega-opción para celulares. Como usamos la misma clase, escritorio y celular-label que en la opción anterior, eso ya se arma solo. Queda primero que se muestren uno debajo del otro, y que se active solo con el input correspondiente
...
@media (max-width:970px) {
...
/* estilo para el mega en celulares*/
header nav ul.opciones .mega-opcion{
position: static;
top:55px;
opacity: 1;
visibility: visible;
padding: 0 20px;
overflow: hidden;
box-shadow: none;
clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
max-height: 0;
}
header nav ul.opciones .mega-opcion .contenido{
box-shadow: none;
flex-direction: column;
background: transparent;
padding-top: 0;
padding-bottom:0 ;
border: none;
}
header nav ul.opciones .mega-opcion .contenido .fila{
width: 100%;
}
header nav ul.opciones .mega-opcion .contenido .fila ul.mega-subopcion {
border-left: none;
}
/* cuando se activa, se abre */
#menu-mega-celu:checked ~ .mega-opcion{
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
max-height: 100%;
}
}
...Ajustamos las flechas
#menu-mega-celu:checked ~ label.celular-label span:first-child{
display:none;
}
#menu-mega-celu:checked ~ label.celular-label span:last-child{
display:inline;
}Para facilitar el estilo, se escribe primero con el clip-path abierto que permite ver lo que estamos haciendo y luego lo cerramos y activamos solo cuando corresponde.
● Cerrar el menú
Para darle un pequeño movimiento a la x de cerrar el menú lateral, agregamos
header nav label#cerrar-label svg{
transition: 0.3s linear;
}
header nav label#cerrar-label:hover svg{
transform:rotate(180deg);
}● Iniciamos con el main
Escribimos la estructura general de nuestro documento. Algunas clases las vamos a utilizar dos o más veces, es por ello que no identificaremos para en que sección se va a aplicar. No es lo mismo aplicarle la clase contenedor directamente al main , que a cada una de las secciones. Debido a que el main será el fondo de pantalla, cualquiera sea el dispositivo.
<main>
<section id="inicio" class="contenedor"></section>
<section id="mapa" class="contenedor"></section>
<section id="bienestar" class="contenedor"></section>
<section id="valor" class="contenedor"></section>
<section id="intercambio" class="contenedor"></section>
<section id="precio" class="contenedor"></section>
<section id="dinero" class="contenedor"></section>
<section id="capitulos" class="contenedor"></section>
<section id="resumen" class="contenedor"></section>
<section id="fuentes" class="contenedor"></section>
</main>● Sección inicio
En esta sección tendremos 2 partes fundamentales
<section id="inicio" class="contenedor">
<div class="izquierda"></div>
<div class="derecha"></div>
</section>Completando la izquierda y armando la derecha nos queda
<section id="inicio" class="contenedor">
<div class="izquierda">
<span class="pretitulo">Karl / Carl Menger · 1871</span>
<h1>El valor empieza en las necesidades humanas.</h1>
<p class="subtitulo">Una guía visual y extensa de <em>Principios de Economía Política</em>: desde la naturaleza de los bienes hasta el intercambio, la formación del precio, la mercancía y el origen del dinero.</p>
<div class="botones">
<a class="btn primario" href="#bienestar">Comenzar por el bienestar →</a>
<a class="btn secundario" href="#mapa">Ver el mapa completo ⇄</a>
</div>
</div>
<div class="derecha">
<aside class="hero-note" aria-label="Idea central de Menger"></aside>
<aside class="hero-note" aria-label="Idea central de Menger"></aside>
<div class="redes"></div>
</div>
</section>Antes de comenzar con la sección inicio, vamos a escibrir las propiedades para las clases que usaremos en varias secciones y de algunas etiquetas como los titulos, para que sean igual en todo el documento.
/* Generales para varias secciones */
.pretitulo{
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--color-resaltador);
font-size: .78rem;
font-weight: 800;
letter-spacing: .11em;
text-transform: uppercase;
}
.pretitulo::before{
content: "";
width: 24px;
height: 1px;
background: var(--color-resaltador);
}
h1,h2,h3,h4 {
line-height: 1.08;
letter-spacing: -.045em;
margin: 0; }
h1 {
font-size: clamp(3.1rem, 5vw, 6.4rem);
max-width: 980px;
line-height:clamp(2.9rem, 4.9vw, 6.1rem);
}
h2 { font-size: clamp(2.2rem, 3vw, 4rem); }
h3 { font-size: clamp(1.35rem, 1vw, 2rem); }
h4 { font-size: 1rem; }
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
min-height: 43px;
padding: 0 16px;
border: 1px solid var(--borde);
border-radius: 10px;
font-weight: 700;
font-size: .9rem;
transition: .2s ease;
}
.btn.primario {
color: #001014;
background: var(--color-resaltador);
border-color: var(--color-resaltador);
}
.btn.primario:hover {
filter: brightness(1.08);
transform: translateY(-1px);
}
.btn.secundario {
background:var(--fondo-boton-secundario) ;
}
.btn.secundario:hover {
background: var(--fondo-hover-secundario);
}
/* Los usaremos repetidamente después */
.grid-2 {
display: grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap: 18px;
}
.grid-3 {
display: grid;
grid-template-columns:
repeat(3, minmax(0,1fr));
gap: 16px;
}
.grid-4 { display: grid;
grid-template-columns: repeat(4, minmax(0,1fr));
gap: 14px;
}Agreguemos estas variables ´´´css /en el root/ –fondo-boton-secundario:#0b0b0b; –fondo-hover-secundario:#131313; /en el cambio/ –fondo-boton-secundario:#f9f9f9; –fondo-hover-secundario:#f3f3f3; ´´´ Comencemos con los estilos, de toda la sección inicio en general
/* El Main */
main{
/* La propiedad overflow: clip en CSS recorta por completo el contenido que sobresale de los límites de un contenedor.A diferencia de overflow: hidden, la opción clip prohíbe de forma absoluta cualquier tipo de desplazamiento, incluso el programático a través de JavaScript. */
overflow: clip;
}
main section#inicio{
display: grid;
grid-template-columns: 1.25fr 0.75fr;
gap:3.25rem;
align-items: start;
padding: 4.5rem 0 2.4rem;
}De la izquierda puntualmente
main section#inicio .izquierda{
display: grid;
gap:1.5rem;
}
main section#inicio .subtitulo{
max-width: 760px;
font-size: clamp(1rem, 2vw, 1.2rem);
color: #bdbdbd;
}
main section#inicio .botones{
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
}Completamos la parte derecha en el html
<div class="derecha">
<aside class="hero-note" aria-label="Idea central de Menger">
<p class="cita">“El valor no es una propiedad inherente de las cosas; expresa la importancia que atribuimos a su disponibilidad para satisfacer nuestras necesidades.”</p>
<p class="autor">Síntesis de la teoría de Menger, no una cita literal.</p>
</aside>
<aside class="hero-note" aria-label="Idea central de Menger">
<p class="cita">“ La idea central es que la economía debe partir de la relación causal entre necesidades, disponibilidad de bienes y decisiones concretas de las personas.” </p>
<p class="autor"> Síntesis de la teoría de Menger, no una cita literal. </p>
</aside>
<div class="redes"></div>
</div>Le damos estilo Agregamos estas variables que vamos a usar
en el root
--texto-gris-claro-1:#a3a3a3;
--texto-gris-claro-2: #737373;
--texto-tarjeta:#e8e8e8;
--radio:18px;
--color-strong:#fff;
en el cambio
--texto-gris-claro-1:#333;
--texto-gris-claro-2: #434343;
--texto-tarjeta:#080808;
--color-strong:#000;y estas
en el root
--color-thumb:#363636;
--fondo-boton-secundario:#0b0b0b;
--fondo-hover-secundario:#131313;
--tarjeta-degradado-1:#111;
--tarjeta-degradado-2:#090909;
--brillo:rgba(0, 229, 255, 0.45);
en el cambio
--color-thumb:#999;
--fondo-boton-secundario:#f9f9f9;
--fondo-hover-secundario:#f3f3f3;
--tarjeta-degradado-1:#f1f1f1;
--tarjeta-degradado-2:#f9f9f9;
--brillo:rgba(0,168,232,0.45); main section#inicio .derecha aside{
padding: 24px;
border: 1px solid var(--color-borde-header);
border-radius: 18px;
background: linear-gradient(180deg, var(--tarjeta-degradado-1), var(--tarjeta-degradado-2));
box-shadow: var(--sombra);
margin-bottom: 1rem;
user-select: none;
cursor: default;
transition: 0.2s linear;
}
main section#inicio .derecha aside p { margin: 0 0 14px; font-size: 1.02rem; }
main section#inicio .derecha aside .cita { color: var( --texto-tarjeta); }
main section#inicio .derecha aside .autor { color: var(--texto-gris-claro-2); font-size: .82rem; }
main section#inicio .derecha aside:hover{
background: linear-gradient(to bottom, var(--brillo) 0%, rgba(0,0,0,0) 98%);
border-bottom: 4px solid var(--color-resaltador);
}Ajustamos para celulares
main section#inicio{
grid-template-columns:1fr;
}● Las redes
1- Primero agregamos en la parte superior el link de los íconos que usamos. Al link lo copiamos del siguiente sitio web buscando la versión 6.4.2, con otras no funciona y esta es gratis, https://cdnjs.com/libraries/font-awesome/6.4.2
<head>
...
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
...
</head>2- Completamos el html
<div class="redes">
<div class="wrapper">
<a href="https://facebook.com" class="button" target="_blank">
<div class="icon">
<i class="fa-brands fa-facebook-f"></i>
</div>
<span>Facebook</span>
</a>
<a href="https://instagram.com" class="button" target="_blank">
<div class="icon">
<i class="fa-brands fa-square-instagram"></i>
</div>
<span>Instagram</span>
</a>
<a href="https://youtube.com" class="button" target="_blank">
<div class="icon">
<i class="fa-brands fa-youtube"></i>
</div>
<span>Youtube</span>
</a>
<a href="https://x.com" class="button" target="_blank">
<div class="icon">
<i class="fa-brands fa-x-twitter"></i>
</div>
<span>Twitter</span>
</a>
</div>
</div>3- Le damos estilo para que se abra con el hover
main section#inicio .redes{
display: grid;
height: 100%;
width: 100%;
place-items: center;
margin-top: 4rem;
}
main section#inicio .redes .wrapper .button{
display: block;
height: 50px;
width: 50px;
float: left;
text-decoration: none;
margin: 0 5px;
overflow: hidden;
background-color: var(--color-resaltador);
border-radius: 50px;
cursor: pointer;
box-shadow:0 10px 10px rgba(0,0,0,0.1);
transition: 0.3s ease-in-out;
}
main section#inicio .redes .wrapper .button:hover{
width: 200px;
}
main section#inicio .redes .wrapper .button .icon{
display: inline-block;
height: 50px;
width: 50px;
color: #000;
text-align: center;
border-radius: 50px;
box-sizing: border-box;
line-height: 58px;
transition: 0.3s ease-in-out;
}
main section#inicio .redes .wrapper .button .icon i{
font-size: 22px;
color:#000 ;
}
main section#inicio .redes .wrapper .button span{
color: #000;
font-size: 20px;
font-weight: 500;
line-height: 60px;
margin-left: 5px;
transition: 0.3s ease-out;
padding-bottom: 15px;
}
● Línea divisoria
En el html entre la seccion Inicio y la de id mapa escribimos lo siguiente
<div class="division"></div>en el css
main .division{
height: 1px;
background: linear-gradient(90deg, transparent, var(--borde), transparent);
margin: 25px 0;
}Se genera una suave línea divisoria que se percibirá cuando desarrollemos la próxima sección
● Sección Mapa
1- En todas las secciones vamos a tener lo mismo, un sección título y un article dedicado al tema desarrollado
<section id="mapa" class="contenedor">
<div class="titulo">
<span class="pretitulo">Mapa conceptual</span>
<h2>Del bienestar al dinero</h2>
<p>El libro avanza como una cadena causal. Primero explica qué son los bienes y cuándo son económicos; luego deriva el valor, el intercambio, el precio, la vendibilidad y finalmente el dinero.</p>
</div>
<article></article>
</section>2- Vamos a dar el estilo a la sección título que se usará siempre
/*Para varias secciones*/
main section:not(#inicio){
/* Esto aplicará en todas menos en la inicio */
padding: 2rem 0;
}
main .titulo{
display: grid;
gap: 0.94rem;
max-width: 53rem;
margin-bottom: 2.5rem;
}
main .titulo p{
color: var(--texto-gris-claro-1);
font-size: 1.03rem;
letter-spacing: -0.02em;
margin: 0;
}3- Continuamos con el html del article
<article>
<div class="tarjeta-cadena">
<span class="numeracion">01 · ORIGEN</span>
<h3 style="margin-top:12px">Necesidades</h3>
<p class="texto-gris-claro-1">La vida y el bienestar dependen de determinadas satisfacciones.</p>
</div>
<div class="tarjeta-cadena">
<span class="numeracion">02 · MEDIOS</span>
<h3 style="margin-top:12px">Bienes</h3>
<p class="texto-gris-claro-1">Algo es un bien cuando existe una relación causal conocida con una necesidad.</p>
</div>
<div class="tarjeta-cadena">
<span class="numeracion">03 · ESCASEZ</span>
<h3 style="margin-top:12px">Economización</h3>
<p class="texto-gris-claro-1">Cuando las cantidades disponibles no alcanzan para cubrir todas las necesidades, aparece la elección económica.</p>
</div>
<div class="tarjeta-cadena">
<span class="numeracion">04 · MERCADO</span>
<h3 style="margin-top:12px">Intercambio → precio</h3>
<p class="texto-gris-claro-1">La valoración individual se conecta con las valoraciones ajenas mediante el comercio.</p>
</div>
</article>4- Las clases de este article solo aplicarán aquí, no serán generales, por lo que:
main section#mapa article{
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
align-items: stretch;
}
main section#mapa article .tarjeta-cadena{
position: relative;
min-height: 160px;
padding: 19px ;
border: 1px solid var(--borde);
border-radius: 15px;
background:linear-gradient(180deg, var(--tarjeta-degradado-1), var(--tarjeta-degradado-2));
}
main section#mapa article .numeracion{
font-size: .72rem;
color: var(--color-resaltador);
font-weight: 900;
letter-spacing: .1em;
}5- Descargamos la flecha desde https://fonts.google.com/. Desde icons, la opción “Line End Arrow Notch”, es la que elegí yo, puede ser cualquiera. De color #00baeb para que sirve para el modo claro y oscuro. Con height=48px y width=48px
main section#mapa article .tarjeta-cadena:not(:last-child)::after{
content: url('imagenes/flecha.svg');
position: absolute;
right: -25px;
top: 55%;
transform: translateY(-50%);
font-weight: 900;
z-index: 2;
}6- Para que aparezca en pantalla , hay que salir de Go Live y volver a entrar.
● Sección Bienestar
1-Organizamos el html. Esta es la sección más grande que tendremos
<section id="bienestar" class="contenedor">
<div class="titulo"></div>
<article class="grid-2"></article>
<article class="grid-3" style="margin-top: 18px;"></article>
<article class="pie-seccion" style="margin-top: 18px;"></article>
<div class="tarjeta" style="margin-top:24px"></div>
</section>Observar que se pueden poner estilos directamente en el html 2- Desarrollamos el título de manera estáandar.
<div class="titulo">
<span class="pretitulo">Fundamento</span>
<h2>Bienestar económico</h2>
<p>En Menger, el punto de partida no es el precio. Es la satisfacción de necesidades y la conciencia de que ciertas cantidades de bienes son necesarias para conservar la vida y mejorar el bienestar.</p>
</div>Observar que se arma solo, porque aplicamos las clases generales. 3- Desarrollamos el primer article de dos tarjetas.
<article class="grid-2">
<div class="tarjeta"></div>
<div class="tarjeta"></div>
</article>4- La clase tarjeta aunque en su interior sean distintas (los hijos). La tarjeta en sí será una clase general.
<article class="grid-2">
<div class="tarjeta">
<div class="titulo-tarjeta">1 · Necesidad</div>
<h3>Lo que importa directamente</h3>
<p class="texto-gris-claro-1">El bien no es valioso “por sí mismo”. Lo que tiene importancia directa es la satisfacción de una necesidad. El bien recibe valor porque la persona entiende que depende de él para lograr esa satisfacción.</p>
<div class="destacado"><strong>Clave:</strong> la conexión económica va de <strong>necesidad → satisfacción → bien</strong>, y no en sentido contrario.</div>
</div>
<div class="tarjeta">
<div class="titulo-tarjeta">2 · Disponibilidad</div>
<h3>Abundancia y escasez cambian todo</h3>
<p class="texto-gris-claro-1">Una cosa puede ser extremadamente útil y, sin embargo, no tener valor económico para una persona si existe en una cantidad tan abundante que perder una unidad no afecta ninguna satisfacción.</p>
<div class="destacado"><strong>Ejemplo:</strong> agua ilimitadamente disponible frente a agua escasa en una región seca.</div>
</div>
</article>En la parte de celulares
@media (max-width:970px) {
...
main .grid-2, main .grid-3{
grid-template-columns: 1fr;
}
}5- A la clase grid-2 ya la habíamos escrito al inicio, por eso se ordena directamente, pero falta darle estilo a la tarjeta
main .tarjeta{
padding: 24px;
border: 1px solid var(--borde);
border-radius: var(--radio);
background: linear-gradient(180deg, var(--tarjeta-degradado-1), var(--tarjeta-degradado-2));
/* Para alinear el interior de la tarjeta */
height: 100%;
display: flex;
flex-direction: column;
}
main .tarjeta:hover {
border-color: var(--tarjeta-hover);
}
main .tarjeta p:last-child {
margin-bottom: 0;
}
main .tarjeta .titulo-tarjeta {
color: var(--color-resaltador);
font-size: .78rem;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
margin-bottom: 11px;
}6- La clase text-gris-claro la usaremos en cualquier parte del documento
.texto-gris-claro-1{
color: var(--texto-gris-claro-1);
padding-block: 1rem;
font-size: 0.9rem;
}
.texto-gris-claro-1 strong{
color: var(--color-strong);
}7- Al destacado como lo vamos a usar dentro y fuera de la tarjeta en otras secciones, lo escribiremos como general dentro del main. Antes debemos agregar colores en variables que usamos en esta clase destacado.
/*en el root*/
--color-resaltador-suave:rgba(0, 229, 255, .11);
--degradado-resumen:rgba(0,229,255,.025);
--borde-resumen:rgba(0,229,255,.24);
--tarjeta-hover:#353535;
--fondo-flujo-escalon:#0b0b0b;
--etiqueta-precio:#d2d2d2;
--verde: #6ee7b7;
--naranja: #fbbf24;
--rojo: #fb7185;
/*en el cambio*/
--color-resaltador-suave:rgba(220, 220, 220, 0.5);
--degradado-resumen:rgba(220,220,220,0.35);
--borde-resumen:rgba(220,220,220,.94);
--tarjeta-hover:#00baeb;
--fondo-flujo-escalon:#fbfbfb;
--etiqueta-precio:#444;
--verde: green;
--naranja: orangered;
--rojo: red; main .destacado{
padding: 20px 22px;
border: 1px solid var(--borde-resumen);
border-left: 4px solid var(--color-resaltador);
border-radius: 14px;
background: linear-gradient(90deg, var(--color-resaltador-suave), var(--degradado-resumen));
/* Para que esten alineados entre tarjetas */
margin-top: auto;
}
main .destacado strong {
color:var(--color-strong) ;
}8- Continuamos con la sección de 3 tarjetas
<article class="grid-3" style="margin-top: 18px;">
<div class="tarjeta"></div>
<div class="tarjeta"></div>
<div class="tarjeta"></div>
</article>Observar que apenas escribimos la clase tarjeta, ya se va formando porque ya tenemos escrito la clase grid-3 y la clase tarjeta. Armamos su interior.
<article class="grid-3" style="margin-top: 18px;">
<div class="tarjeta">
<div class="numero">01</div>
<h4 style="margin-top:8px">Conocimiento</h4>
<p class="texto-gris-claro-1">La persona debe conocer la relación causal entre el bien y la satisfacción.</p>
</div>
<div class="tarjeta">
<div class="numero">02</div>
<h4 style="margin-top:8px">Necesidad</h4>
<p class="texto-gris-claro-1">Debe existir una necesidad cuya satisfacción sea relevante para la persona.</p>
</div>
<div class="tarjeta">
<div class="numero">03</div>
<h4 style="margin-top:8px">Control</h4>
<p class="texto-gris-claro-1">La persona necesita poder disponer del bien para usar esa relación causal.</p>
</div>
</article>Ya quedó armada por usar las clases anterior. Solo cambiaremos el numero.
main article .numero{
font-size: 2.2rem;
font-weight: 850;
letter-spacing: -.06em;
color: var(--color-strong);
}● Pie de sección
Este article se va a repetir en varias secciones. Escribimos primero el html
<article class="pie-seccion" style="margin-top: 18px;">
<h3>Bien de primer orden y bienes de orden superior</h3>
<p class="texto-gris-claro-1">Menger distingue los bienes según su posición en la cadena causal de producción. Los bienes de <strong>primer orden</strong> satisfacen necesidades directamente: alimentos, ropa, una vivienda o un servicio final. Los bienes de órdenes superiores sirven para producir otros bienes: harina, máquinas, materias primas, herramientas, tierra o servicios de trabajo.</p>
<p class="texto-gris-claro-1">La idea decisiva es que la valoración puede “subir” por esa cadena: el valor esperado de un bien final permite explicar por qué los medios necesarios para producirlo pueden adquirir valor.</p>
</article>y su css
main section .pie-seccion{
max-width: 850px;
}
main section .pie-seccion h3{
margin-top: 2rem;
}Solamente eso, porque la clase texto-gris-claro-1 ya la escribimos de manera general.
● Tarjeta con un flujo
en el html
<div class="tarjeta" style="margin-top:24px">
<div class="titulo-tarjeta">Cadena causal</div>
<div class="flujo">
<div class="escalon-flujo"><strong>Necesidad humana</strong><span class="texto-gris-claro-1">Hambre, abrigo, transporte, salud, entretenimiento.</span></div>
<div class="escalon-flujo"><strong>Bien de 1.er orden</strong><span class="texto-gris-claro-1">Pan listo para consumir.</span></div>
<div class="escalon-flujo"><strong>Bien de 2.º orden</strong><span class="texto-gris-claro-1">Harina, horno y otros medios directamente vinculados.</span></div>
<div class="escalon-flujo"><strong>Órdenes superiores</strong><span class="texto-gris-claro-1">Trigo, tierra, herramientas, maquinaria y tiempo productivo.</span></div>
</div>
</div>Es un título, cuya clase ya está escrita y un flujo, con sus escalones a los que debemos darle estilo.
main section .flujo{
display: grid;
gap: 10px;
}
main section .flujo .escalon-flujo {
position: relative;
padding: 17px 18px;
border: 1px solid var(--borde);
border-radius: 14px;
background: var(--fondo-flujo-escalon);
margin-top: 12px;
}
main section .flujo .escalon-flujo strong{
display: block;
margin-bottom: 4px;
}y nos falta agregar la flecha, para lo cual, primero descargamos el SVG desde fonts.google.com en la opción de icons, seleccionamos “Keyboard Double Arrow Down” en color #00e5ff con un height y un width de 48px (altura y ancho)
main section .flujo .escalon-flujo:not(:last-child)::after {
content: url('imagenes/flecha-abajo.svg');
position: absolute;
left: 50%;
bottom: -35px;
transform: translateX(-50%);
color: var(--color-resaltador);
font-size: 1rem;
z-index: 2;
}Y para verlo funcionar, recordemos, cancelar y volver activar el Live Server
● Ajustes celulares
Antes de continuar, ajustemos las clases generales para las pantallas de menor tamaño
@media (max-width:970px) {
/* main */
main section#inicio{
grid-template-columns: 1fr;
}
main section#inicio .redes .wrapper .button:hover{
width: 50px;
}
main section#mapa article {
grid-template-columns: repeat(2, 1fr);
}
main section#mapa article .tarjeta-cadena:not(:last-child)::after{
display: none;
}
main .grid-2{
grid-template-columns: 1fr;
}
main .grid-3,.grid-4{
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 760px) {
.contenedor{
width: min(calc(100% - 22px), 1180px);
}
main section#mapa article {
grid-template-columns:1fr;
}
main .grid-3, main .grid-4{
grid-template-columns: 1fr;
}
}● Ajustes link
En el html, configuremos los href, así podemos ir probando
...
<a href="#" id="logo" class="logo"><span>M</span><span>Menger/Economía</span></a>
...
<li><a href="#mapa">Mapa</a></li>
...
<li><a href="#resumen">Resumen</a></li>Para que haga scroll suavemente, que la selección de texto y la barra lateral combine con nuestro diseño
html{
scroll-behavior: smooth;
scroll-padding-top: 88px;
}
::selection{
/* A la inversa de como está en el documento */
background-color: var(--color-texto);
color: var(--color-fondo);
}
::-webkit-scrollbar{
width: 0.5rem;
}
::-webkit-scrollbar-track{
background: transparent;
}
::-webkit-scrollbar-thumb{
background: var(--color-thumb);
border-radius: 2rem;
}● Sección valor
1- Organizo el HTML general de la sección
<section id="valor" class="contenedor">
<div class="titulo"></div>
<div class="grid-2"></div>
<div class="grid-2"></div>
<div class="pie-seccion"></div>
</section>2- Subdivido más
<section id="valor" class="contenedor">
<div class="titulo">
<div class="pretitulo"></div>
<h2></h2>
<p></p>
</div>
<div class="grid-2">
<div class="tarjeta"></div>
<div class="tarjeta"></div>
</div>
<div class="grid-2" style="margin-top:18px">
<div class="tarjeta"></div>
<div class="tarjeta"></div>
</div>
<div class="pie-seccion" style="margin-top:24px"></div>
</section>3- Continúo con el detalle del titulo y observo cómo se va armando solo.
<div class="titulo">
<span class="pretitulo">Teoría del valor</span>
<h2>El valor es subjetivo, concreto y marginal</h2>
<p>Menger desplaza el análisis desde una propiedad objetiva de los bienes hacia el juicio que realiza una persona sobre la importancia de disponer de una cantidad concreta.</p>
</div>4- Armamos las tarjetas del primer grid-2
<article class="grid-2">
<div class="tarjeta">
<div class="titulo-tarjeta">Subjetividad</div>
<h3>No existe un valor idéntico para todos</h3>
<p class="texto-gris-claro-1">La misma cosa puede tener diferente valor para dos personas porque sus necesidades, conocimientos, cantidades disponibles y circunstancias no son iguales.</p>
</div>
<div class="tarjeta">
<div class="titulo-tarjeta">Concreción</div>
<h3>No valoramos “la clase” en abstracto</h3>
<p class="texto-gris-claro-1">La valoración recae sobre unidades concretas o cantidades concretas que están efectivamente bajo control del individuo.</p>
</div>
</article>También queda armado porque son clases ya escritas. 5- Armamos el segundo grid-2
<div class="grid-2" style="margin-top:18px">
<div class="tarjeta">
<div class="titulo-tarjeta">Principio marginal</div>
<h3>La última unidad disponible marca la importancia relevante</h3>
<p class="texto-gris-claro-1">Cuando varias unidades iguales están disponibles, las primeras pueden destinarse a necesidades muy urgentes y las adicionales a usos progresivamente menos urgentes. La pérdida de una unidad obliga a sacrificar, en el margen, la satisfacción menos importante que esa cantidad estaba asegurando.</p>
</div>
<div class="tarjeta">
<div class="titulo-tarjeta">Consecuencia</div>
<h3>Valor ≠ utilidad total</h3>
<p class="texto-gris-claro-1">Un bien puede ser indispensable para la vida y, aun así, una unidad adicional tener poca importancia si la oferta disponible es enorme. Inversamente, un bien menos esencial puede tener una valoración marginal elevada cuando es escaso.</p>
</div>
</div>6- Seguimos con el pie de sección y volvemos a las tarjetas para agregar la tabla y los ejemplos
<div class="pie-seccion" style="margin-top:24px">
<h3>¿Qué rechaza Menger?</h3>
<p class="texto-gris-claro-1">Menger discute la idea de que el valor de un bien pueda explicarse fundamentalmente por el trabajo incorporado, por su costo de producción o por el hecho de ser objeto de intercambio. Su argumento causal es inverso: los bienes de producción adquieren valor en función del valor esperado de los bienes que pueden ayudar a producir; el costo no crea por sí solo el valor del producto.</p>
<p class="texto-gris-claro-1">Esto no significa que los costos sean irrelevantes para la economía. Significa que, para explicar el <strong>origen del valor</strong>, no sirven como causa última. La referencia última sigue siendo la relación entre necesidades humanas y bienes disponibles.</p>
</div>7- Retomamos la tarjeta 1 del segundo grid-2 para hacer una tabla
<table style="margin-top:18px" >
<thead class="m-head">
<tr>
<th>Unidad</th>
<th>Uso</th>
<th>Importancia</th>
<th>Ejemplo</th>
<th>Lectura</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: center;">1</td>
<td>Supervivencia</td>
<td style="color:var(--verde)">Muy alta</td>
<td>Beber</td>
<td>Crítica</td>
</tr>
<tr>
<td style="text-align: center;">2</td>
<td>Necesidad diario</td>
<td style="color:var(--verde);">Alta</td>
<td>Cocinar</td>
<td>Prioritaria</td>
</tr>
<tr>
<td style="text-align: center;">3</td>
<td>Confort</td>
<td style="color:var(--naranja );">Media</td>
<td>Higiene</td>
<td>Importante</td>
</tr>
<tr>
<td style="text-align: center;">4</td>
<td>Uso secundario</td>
<td style="color:var(--naranja );">Menor</td>
<td>Jardín</td>
<td>Postergable</td>
</tr>
<tr>
<td style="text-align: center;">5</td>
<td>Uso Marginal</td>
<td style="color:var(--rojo);">Baja</td>
<td>Lavar</td>
<td>Prescindible</td>
</tr>
</tbody>
</table>y le damos estilo
table{
margin-bottom: 3rem;
width: 100%;
border-collapse: collapse;
border: 1px solid var(--borde);
}
table td{
padding: 12px;
}
table th{
padding: 14px 12px;
font-size: 1rem;
font-weight: 500;
border-left:1px solid var(--borde)
}
table td{
border: 1px solid var(--borde);
}
table thead{
background-color: var(--color-fondo-opcion);
font-size: 1.02rem;
}
table tbody{
font-size: 0.9rem;
}En pantallas menores, no la mostramos, se podría , pero el ejercicio se hace muy largo.
@media (max-width:970px) {
...
table{
display: none;
}
}8- En la tarjeta 2 del grid-2, tenemos 2 rectangulos con estilo igual, pero diferente contenido. Los llamaremos ejemplo. Después de hacer el html y el css, veremos de donde sacamos la imagen y cómo le cambiamos el color para que combine con nuestro diseño.
...
<div class="tarjeta">
<div class="titulo-tarjeta">Consecuencia</div>
<h3>Valor ≠ utilidad total</h3>
<p class="texto-gris-claro-1">Un bien puede ser indispensable para la vida y, aun así, una unidad adicional tener poca importancia si la oferta disponible es enorme. Inversamente, un bien menos esencial puede tener una valoración marginal elevada cuando es escaso.</p>
<div class="ejemplo">
<div class="titulo-ejemplo">Ejemplo didáctico: agua</div>
<p class="texto-gris-claro-1" style="margin:0">En una situación de abundancia, las unidades adicionales se destinan a usos menos urgentes. En una situación de escasez, la unidad marginal se desplaza hacia usos mucho más importantes.</p>
</div>
<div class="ejemplo">
<div class="titulo-ejemplo">Ejemplo didáctico: recreación</div>
<img src="imagenes/jugador.svg" alt="Ejemplo">
</div>
</div>
...Le damos estilo a la clase ejemplo
main section .ejemplo {
margin-top: 22px;
padding: 20px;
border: 1px dashed var(--borde);
border-radius: 14px;
background: var(--color-fondo);
}
main section .titulo-ejemplo {
font-weight: 800;
margin-bottom: 7px;
}
main section .ejemplo p {
color: var(--texto-gris-claro-1);
padding-block: 1rem;
font-size: 0.9rem;
}9- Vamos al sitio web de https://undraw.co
Buscamos la ilustración que nos guste. En este caso:“Goal”. Elegimos “download svg for your projects”, es decir descargar.
La descargamos y guardamos en imagenes. En nuestro caso con el nombre de jugador.svg porque ya pusimos así en el html.
Nos situamos sobre el archivo y lo abrimos con Open with - Text editor default. Veremos muchas letras y números. No asustarse.
Seleccionamos el color hexadecimal violeta #6cb3ff y hacemos ctrl H, aparece en una ventana y en la segunda parte donde dice replace, escribimos #00e5ff (que es nuestro color), luego hacemos click en la segunda opción donde dice ac que es para reemplazar todos los que encuentre. Automaticamente la imagen queda en nuestro tono.
Verificar en el navegador. Cerrar la imagen.
● Sección Intercambio
En esta sección, tendremos un titulo, un grid-2 con 2 tarjetas, una tabla , un destacado y un pie de sección.
Probemos con estas secciones y veamos como queda.
en el html
<section id="intercambio" class="contenedor">
<div class="titulo"></div>
<article class="grid-2">
<div class="tarjeta"></div>
<div class="tarjeta"></div>
</article>
<table></table>
<div class="destacado"></div>
<article class="pie-seccion"></article>
</section>1- Completemos cada parte
<section id="intercambio" class="contenedor">
<div class="titulo">
<span class="pretitulo">Teoría del intercambio</span>
<h2>Se intercambia porque ambos esperan ganar</h2>
<p>Para Menger, el intercambio económico no requiere que dos bienes tengan el mismo valor para ambas partes. Precisamente lo contrario hace posible el comercio: cada participante valora más lo que recibe que lo que entrega.</p>
</div>
<article class="grid-2">
<div class="tarjeta">
<div class="titulo-tarjeta">Antes del intercambio</div>
<h3>Valuaciones diferentes</h3>
<p class="texto-gris-claro-1">Ana posee trigo y valora poco una unidad adicional, mientras que valora mucho la herramienta que posee Bruno. Bruno vive la relación opuesta.</p>
</div>
<div class="tarjeta">
<div class="titulo-tarjeta">Después del intercambio</div>
<h3>Mejor posición para ambos</h3>
<p class="texto-gris-claro-1">El comercio se realiza si cada uno cree que su situación mejorará. Por eso el intercambio voluntario puede generar un beneficio mutuo sin que exista una igualdad previa de valor.</p>
</div>
</article>
<table border="1" style="margin-top:22px">
<thead>
<tr>
<th>Participante A</th>
<th>Participante B</th>
</tr>
</thead>
<tbody>
<tr>
<td>Valora más el bien que recibe</td>
<td>Valora más el bien que recibe</td>
</tr>
<tr>
<td>Valora relativamente menos lo que entrega</td>
<td>Valora relativamente menos lo que entrega</td>
</tr>
<tr>
<td>Intercambio favorable esperado</td>
<td>Intercambio favorable esperado</td>
</tr>
</tbody>
</table>
<div class="destacado" style="margin-top:22px"><strong>Idea decisiva:</strong> la igualdad de valores no es la condición del intercambio; la <strong>diferencia de valoraciones</strong> es la que abre el espacio para una transacción mutuamente ventajosa.</div>
<article class="pie-seccion" style="margin-top:34px">
<h3>Los límites del intercambio</h3>
<p class="texto-gris-claro-1">El intercambio no puede expandirse indefinidamente. Está limitado por las valoraciones subjetivas de quienes compran y venden: cada parte tiene un punto a partir del cual seguir entregando unidades deja de ser conveniente. El rango dentro del cual ambas partes pueden ganar determina el espacio de intercambio posible.</p>
<p class="texto-gris-claro-1">En mercados con más participantes, esas valoraciones se enfrentan entre sí. La teoría del precio estudia cómo ese proceso transforma valoraciones individuales en precios observables.</p>
</article>
</section>Sin tocar el css, ya nos quedó armado.
● Sección Precio
1- Iniciamos con el html general, a modo de advertir que clases ya tenemos hechas y podemos volver a usar y solo hacer lo nuevo que necesitemos en css.
<section id="precio" class="contenedor">
<div class="titulo">
</div>
<article class="grid-3">
<div class="tarjeta"></div>
<div class="tarjeta"></div>
<div class="tarjeta"></div>
</article>
<article class="tarjeta" style="margin-top:18px"></article>
<article class="pie-seccion" style="margin-top:34px"></article>
</section>2- Más detalladamente
<section id="precio" class="contenedor">
<div class="titulo">
<span class="pretitulo"></span>
<h2></h2>
<p></p>
</div>
<article class="grid-3">
<div class="tarjeta">
<div class="titulo-tarjeta"></div>
<h3></h3>
<p class="texto-gris-claro-1"></p>
</div>
<div class="tarjeta">
<div class="titulo-tarjeta"></div>
<h3></h3>
<p class="texto-gris-claro-1"></p>
</div>
<div class="tarjeta">
<div class="titulo-tarjeta"></div>
<h3></h3>
<p class="texto-gris-claro-1"></p>
</div>
</article>
<article class="tarjeta" style="margin-top:18px">
<div class="titulo-tarjeta"></div>
<h3></h3>
<p class="texto-gris-claro-1"></p>
<!-- NUEVO -->
<div class="escalera-precios" style="margin-top:22px">
</div>
</article>
<article class="pie-seccion" style="margin-top:34px">
<h3></h3>
<p class="texto-gris-claro-1"></p>
<h4></h4>
<p class="texto-gris-claro-1"></p>
</article>
</section>3- Solamente, tenemos que desarrollar la escalera-precios. Al resto solo colocarle la información correspondiente.
<section id="precio" class="contenedor">
<div class="titulo">
<span class="pretitulo">Teoría del precio</span>
<h2>El precio es el resultado del proceso de intercambio</h2>
<p>El precio no es el valor mismo. Es una relación cuantitativa de intercambio, especialmente visible cuando un bien se cambia por dinero. Menger analiza cómo se forma según las valoraciones y las condiciones de mercado.</p>
</div>
<article class="grid-3">
<div class="tarjeta">
<div class="titulo-tarjeta">Precio aislado</div>
<h3>Intercambio entre pocos</h3>
<p class="texto-gris-claro-1">Con pocos participantes, el resultado depende de sus valoraciones y del margen dentro del cual ambos pueden mejorar.</p>
</div>
<div class="tarjeta">
<div class="titulo-tarjeta">Competencia</div>
<h3>Más compradores y vendedores</h3>
<p class="texto-gris-claro-1">La presencia de más agentes limita el poder de cada participante y hace converger las oportunidades de intercambio.</p>
</div>
<div class="tarjeta">
<div class="titulo-tarjeta">Monopolio</div>
<h3>Una posición de oferta privilegiada</h3>
<p class="texto-gris-claro-1">La formación del precio cambia cuando un solo vendedor controla la oferta disponible para un conjunto de compradores.</p>
</div>
</article>
<article class="tarjeta" style="margin-top:18px">
<div class="titulo-tarjeta">Rango de formación</div>
<h3>Entre la valoración del comprador y la del vendedor</h3>
<p class="texto-gris-claro-1">El precio concreto depende del encuentro entre las valoraciones de las partes y de cómo están organizadas las oportunidades de intercambio. No hay que confundir el precio con una “cantidad de valor” material contenida en el bien.</p>
<div class="escalera-precios" style="margin-top:22px">
</div>
</article>
<article class="pie-seccion" style="margin-top:34px">
<h3>Precio no significa “valor objetivo”</h3>
<p class="texto-gris-claro-1">Una misma mercancía puede tener valores subjetivos diferentes para múltiples personas y, sin embargo, venderse a un precio monetario concreto. El precio comprime en una cifra observable una relación de intercambio; no revela por sí solo cuánto “vale realmente” la mercancía para cada participante.</p>
<h4>Por qué importan los márgenes</h4>
<p class="texto-gris-claro-1">En la explicación de Menger, los participantes llegan al intercambio comparando la importancia de lo que entregan con la importancia de lo que reciben. La unidad marginal y la posición relativa de compradores y vendedores son esenciales para entender por qué un intercambio puede suceder a un precio situado entre sus valoraciones.</p>
</article>
</section>4- Desarrolllamos la división de la escalera-precios. Primero el html
<div class="escalera-precios" style="margin-top:22px">
<div class="fila-precios">
<span class="etiqueta-precio">Vendedor A</span>
<div class="barra"><span style="width:22%"></span></div>
<span class="valor-precio">mín.</span>
</div>
<div class="fila-precios">
<span class="etiqueta-precio">Vendedor B</span>
<div class="barra"><span style="width:39%"></span></div>
<span class="valor-precio">↓</span>
</div>
<div class="fila-precios">
<span class="etiqueta-precio">Zona de trato</span>
<div class="barra"><span style="width:61%"></span></div>
<span class="valor-precio">precio</span></div>
<div class="fila-precios">
<span class="etiqueta-precio">Comprador B</span>
<div class="barra"><span style="width:78%"></span>
</div><span class="valor-precio">↑</span>
</div>
<div class="fila-precios">
<span class="etiqueta-precio">Comprador A</span>
<div class="barra"><span style="width:94%"></span></div>
<span class="valor-precio">máx.</span>
</div>
</div>5- Ahora el CSS
main section#precio .escalera-precios {
display: grid;
gap: 9px;
}
main section#precio .fila-precios {
display: grid;
grid-template-columns: 120px 1fr 70px;
gap: 12px;
align-items: center;
}
main section#precio .etiqueta-precio {
color: var(--etiqueta-precio);
font-size: .84rem;
}
main section#precio .barra {
height: 10px;
border-radius: 999px;
background: var(--color-fondo-opcion);
overflow: hidden;
}
main section#precio .barra > span {
display: block;
height: 100%;
background: linear-gradient(90deg, #0f3a42, var(--color-resaltador));
border-radius: inherit;
}
main .valor-precio {
text-align: right;
color: var(--texto-gris-claro-1);
font-size: .82rem;
}6 - Adaptamos en la parte de celulares
...
@media (max-width: 760px) {
...
.fila-precios { grid-template-columns: 90px 1fr 52px; }
}● Sección Dinero
1- Desarrollamos el HTML general
<section id="dinero" class="contenedor">
<div class="titulo">
<span class="pretitulo"></span>
<h2></h2>
<p class="texto-gris-claro-1"></p>
</div>
<article class="grid-2">
<div class="tarjeta">
<div class="titulo-tarjeta"></div>
<h3></h3>
<p class="texto-gris-claro-1"></p>
<!-- NUEVO -->
<div class="claves">
</div>
<img src="" alt="">
</div>
<div class="tarjeta">
<div class="titulo-tarjeta"></div>
<h3></h3>
<p class="texto-gris-claro-1"></p>
<div class="flujo" style="margin-top:18px">
<div class="escalon-flujo">
<strong></strong>
<span class="texto-gris-claro-1"></span>
</div>
<div class="escalon-flujo">
<strong></strong>
<span class="texto-gris-claro-1"></span>
</div>
<div class="escalon-flujo">
<strong></strong>
<span class="texto-gris-claro-1"></span>
</div>
<div class="escalon-flujo">
<strong></strong>
<span class="texto-gris-claro-1"></span>
</div>
</div>
</div>
</article>
<article class="destacado" style="margin-top:22px">
<strong></strong>
<strong></strong>
</article>
<article class="pie-seccion" style="margin-top:34px">
<h3></h3>
<p class="texto-gris-claro-1"></p>
<h4></h4>
<p class="texto-gris-claro-1"></p>
</article>
</section>2- Solamente es nuevo la división de claves. El resto con solo completar los datos en el HTML, el documento se forma solo debido que son clases ya existentes.
<section id="dinero" class="contenedor">
<div class="titulo">
<span class="pretitulo">Teoría de la mercancía y del dinero</span>
<h2>De la vendibilidad al dinero</h2>
<p>Los últimos capítulos conectan las diferencias en la facilidad de venta de las mercancías con la aparición del dinero. La idea central es que algunas mercancías son mucho más vendibles que otras y pueden convertirse progresivamente en medios de intercambio.</p>
</div>
<article class="grid-2">
<div class="tarjeta">
<div class="titulo-tarjeta">Vendibilidad</div>
<h3>¿Qué tan fácil es vender una mercancía?</h3>
<p class="texto-gris-claro-1">Menger estudia la <strong>Absatzfähigkeit</strong>: la capacidad de una mercancía para colocarse en el mercado de manera rápida, amplia y con menor sacrificio respecto de su valor esperado.</p>
<div class="claves">
</div>
<br>
<img src="imagenes/comprar.svg" alt="" style="margin:0 auto;">
</div>
<div class="tarjeta">
<div class="titulo-tarjeta">Origen del dinero</div>
<h3>Un proceso espontáneo</h3>
<p class="texto-gris-claro-1">Menger sostiene que el dinero puede surgir sin que un diseñador central lo invente. Los participantes descubren que ciertos bienes son más fácilmente intercambiables y comienzan a aceptarlos no para consumirlos, sino para usarlos después en nuevos intercambios.</p>
<div class="flujo" style="margin-top:18px">
<div class="escalon-flujo"><strong>1 · Trueque</strong><span class="texto-gris-claro-1">Es necesario encontrar una coincidencia de necesidades.</span></div>
<div class="escalon-flujo"><strong>2 · Bienes muy vendibles</strong><span class="texto-gris-claro-1">Algunos bienes encuentran compradores con mayor facilidad.</span></div>
<div class="escalon-flujo"><strong>3 · Uso como intermediario</strong><span class="texto-gris-claro-1">Se aceptan para volver a intercambiarlos, aunque no se necesiten directamente.</span></div>
<div class="escalon-flujo"><strong>4 · Dinero</strong><span class="texto-gris-claro-1">El medio más vendible se consolida como medio general de intercambio.</span></div>
</div>
</div>
</article>
<article class="destacado" style="margin-top:22px"><strong>La tesis institucional:</strong> para Menger, el dinero es una <strong>institución social de origen espontáneo</strong>: emerge del comportamiento descentralizado de individuos que buscan mejorar la eficiencia de sus intercambios.</article>
<article class="pie-seccion" style="margin-top:34px">
<h3>¿Por qué el dinero reduce el problema del trueque?</h3>
<p class="texto-gris-claro-1">En un intercambio directo, cada persona necesita encontrar a alguien que tenga exactamente lo que desea y, al mismo tiempo, desee lo que ella posee. Un medio de intercambio general rompe esa coincidencia estricta. Una persona puede vender primero por dinero y comprar después otro bien.</p>
<h4>El círculo de la vendibilidad</h4>
<p class="texto-gris-claro-1">Cuando una mercancía es aceptada por muchos participantes, aumenta su utilidad comercial: más personas están dispuestas a recibirla porque saben que podrán usarla después. Esa expectativa puede reforzar su aceptación y hacerla todavía más vendible.</p>
</article>
</section>3- Nos enfocamos en la división nueva claves
<div class="claves">
<div class="clave"><span class="vineta"></span><span>Cuántas personas quieren comprarla.</span></div>
<div class="clave"><span class="vineta"></span><span>Qué tan amplia es la zona geográfica del mercado.</span></div>
<div class="clave"><span class="vineta"></span><span>Qué tan fácil es transportarla, dividirla o conservarla.</span></div>
<div class="clave"><span class="vineta"></span><span>Qué tan probable es encontrar rápidamente un comprador.</span></div>
</div>4- y su css
.claves {
display: grid;
gap: 10px;
margin-top: 22px;
}
.clave {
display: flex;
gap: 14px;
align-items: flex-start;
padding: 14px;
border: 1px solid var(--borde);
border-radius: 12px;
background: var(--fondo-flujo-escalon);
}
.clave .vineta {
width: 7px;
height: 7px;
margin-top: 9px;
border-radius: 50%;
background: var(--color-resaltador);
flex: 0 0 auto;
}5- Quedó pendiente la búsqueda de una ilustración tipo SVG, desde el sitio web gratuito https://undraw.co. (la imagen se llama Add to Cart) Descargamos la imagen en nuestra carpeta imagenes. Lo abrimos situándonos sobre la imagen, botón derecho, open width - editor text default. Con ctrl H reemplazamos #6c63ff por el nuestro #00e5ff.
<img src="imagenes/comprar.svg" alt="" style="margin:0 auto;">● Sección Capitulos
1- Desarrollamos el HTML general
<section id="capitulos" class="contenedor">
<div class="titulo">
<span class="pretitulo"></span>
<h2></h2>
<p class="texto-gris-claro"></p>
</div>
<article class="grid-4">
<div class="tarjeta" id="cap1"></div>
<div class="tarjeta" id="cap2"></div>
<div class="tarjeta" id="cap3"></div>
<div class="tarjeta" id="cap4"></div>
<div class="tarjeta" id="cap5"></div>
<div class="tarjeta" id="cap6"></div>
<div class="tarjeta" id="cap7"></div>
<div class="tarjeta" id="cap8"></div>
</article>
</section>3- Completamos, pero como las tarjetas tendrán hijos diferentes a las que usamos antes, le agregamos una clase específica capitulo-tarjeta
<section id="capitulos" class="contenedor">
<div class="titulo">
<span class="pretitulo">Las 8 partes del libro</span>
<h2>Recorrido capítulo por capítulo</h2>
<p>Una estructura inspirada en la organización de <em>Principles of Economics</em>, desde la teoría general del bien hasta la teoría del dinero.</p>
</div>
<article class="grid-4">
<div class="tarjeta capitulo-tarjeta" id="cap1">
<div>
<div class="capitulo-numero">Capítulo I</div>
<h3 style="margin-top:12px">Teoría general del bien</h3>
<p>Define las condiciones que hacen que una cosa sea un bien y presenta los órdenes de bienes según su posición causal.</p>
</div>
<a class="capitulo-link" href="#bienestar">Ir al concepto</a>
</div>
<div class="tarjeta capitulo-tarjeta" id="cap2">
<div>
<div class="capitulo-numero">Capítulo II</div>
<h3 style="margin-top:12px">Economía y bienes económicos</h3>
<p>Explica la escasez: cuando las necesidades superan las cantidades disponibles, las personas deben economizar.</p>
</div>
<a class="capitulo-link" href="#bienestar">Ir al concepto</a>
</div>
<div class="tarjeta capitulo-tarjeta" id="cap3">
<div>
<div class="capitulo-numero">Capítulo III</div>
<h3 style="margin-top:12px">Teoría del valor</h3>
<p>Desarrolla la valoración subjetiva, la importancia marginal y la imputación del valor a bienes de órdenes superiores.</p>
</div>
<a class="capitulo-link" href="#valor">Ir al concepto</a>
</div>
<div class="tarjeta capitulo-tarjeta" id="cap4">
<div><div class="capitulo-numero">Capítulo IV</div><h3 style="margin-top:12px">Teoría del intercambio</h3><p>Muestra que el intercambio sucede cuando cada parte espera obtener una situación mejor que antes.</p></div><a class="capitulo-link" href="#intercambio">Ir al concepto</a>
</div>
<div class="tarjeta capitulo-tarjeta" id="cap5">
<div><div class="capitulo-numero">Capítulo V</div><h3 style="margin-top:12px">Teoría del precio</h3><p>Analiza cómo las valoraciones de los participantes se convierten en relaciones de intercambio observables.</p></div><a class="capitulo-link" href="#precio">Ir al concepto</a>
</div>
<div class="tarjeta capitulo-tarjeta" id="cap6">
<div><div class="capitulo-numero">Capítulo VI</div><h3 style="margin-top:12px">Uso e intercambio</h3><p>Distingue entre uso directo e intercambio: dos manifestaciones relacionadas de la importancia económica de los bienes.</p></div><a class="capitulo-link" href="#valor">Ir al concepto</a>
</div>
<div class="tarjeta capitulo-tarjeta" id="cap7">
<div><div class="capitulo-numero">Capítulo VII</div><h3 style="margin-top:12px">Teoría de la mercancía</h3><p>Profundiza en la vendibilidad y explica por qué algunas mercancías son superiores como medios comerciales.</p></div><a class="capitulo-link" href="#dinero">Ir al concepto</a>
</div>
<div class="tarjeta capitulo-tarjeta" id="cap8">
<div>
<div class="capitulo-numero">Capítulo VIII</div>
<h3 style="margin-top:12px">Teoría del dinero</h3>
<p>Explica la emergencia del dinero como resultado no planificado de intercambios repetidos y diferencias de vendibilidad.</p>
</div>
<a class="capitulo-link" href="#dinero">Ir al concepto</a>
</div>
</article>
</section>4- Desarrollamos el css
.capitulo-tarjeta {
position: relative;
min-height: 290px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.capitulo-numero {
font-size: .76rem;
color: var(--color-resaltador);
font-weight: 900;
letter-spacing: .11em;
text-transform: uppercase;
}
.capitulo-tarjeta p {
color: var(--texto-gris-claro-1);
font-size: 0.9rem;
margin-block: 1rem;
}
.capitulo-link {
margin-top: 20px;
color: var(--color-strong);
font-weight: 750;
position: relative; }
.capitulo-link::after {
content: url('imagenes/click.svg');
color: var(--color-resaltador);
position: absolute;
top:-50%
}5- Buscamos el ícono en https://fonts.google.com (llamado Left Click), lo descargamos modificando el tamaño a 48px y el color a #00e5ff en nuestra carpeta imagenes. Para que coincida con el css, lo llamamos click.svg
● Sección Resumen
1- Completamos el HTML y la sección se arma sola.
<section id="resumen" class="contenedor">
<div class="titulo">
<span class="pretitulo">Síntesis final</span>
<h2>La lógica completa de Menger</h2>
<p>Una forma de comprender el libro es seguir esta secuencia: necesidades → bienes → escasez → economización → valor → intercambio → precio → vendibilidad → dinero.</p>
</div>
<article class="grid-2">
<div class="tarjeta">
<div class="titulo-tarjeta">10 ideas para recordar</div>
<div class="claves">
<div class="clave"><span class="vineta"></span><span>El punto de partida es la necesidad humana y su satisfacción.</span></div>
<div class="clave"><span class="vineta"></span><span>Los bienes dependen de una relación causal conocida con las necesidades.</span></div>
<div class="clave"><span class="vineta"></span><span>La escasez convierte la disponibilidad de bienes en un problema de elección.</span></div>
<div class="clave"><span class="vineta"></span><span>El valor no es una propiedad física inherente a las cosas.</span></div>
<div class="clave"><span class="vineta"></span><span>Las personas valoran cantidades concretas en circunstancias concretas.</span></div>
<div class="clave"><span class="vineta"></span><span>La importancia marginal depende del uso menos importante que queda asegurado.</span></div>
<div class="clave"><span class="vineta"></span><span>Los bienes de producción reciben valor en función de los bienes finales que pueden generar.</span></div>
<div class="clave"><span class="vineta"></span><span>El intercambio voluntario ocurre porque las partes valoran de manera diferente lo que entregan y reciben.</span></div>
<div class="clave"><span class="vineta"></span><span>El precio expresa una relación de intercambio; no equivale al valor subjetivo.</span></div>
<div class="clave"><span class="vineta"></span><span>El dinero emerge porque algunas mercancías son mucho más vendibles que otras.</span></div>
</div>
</div>
<div class="tarjeta">
<div class="titulo-tarjeta">Fórmula mental</div>
<h3>Necesidades → bienes → valor → mercado</h3>
<p class="texto-gris-claro-1">El mercado, visto desde Menger, no empieza con una tabla de precios. Empieza con personas que tienen necesidades, poseen determinados bienes y descubren oportunidades de intercambio.</p>
<div class="ejemplo">
<div class="titulo-ejemplo">Una pregunta para cada nivel</div>
<p class="texto-gris-claro-1" style="margin:0">¿Qué necesito? → ¿Qué bien puede ayudarme? → ¿Qué importancia tiene una unidad más? → ¿Qué puedo intercambiar? → ¿A qué relación de intercambio? → ¿Qué medio de intercambio es más fácil de volver a vender?</p>
</div>
<div class="destacado" style="margin-top:18px"><strong>Resultado:</strong> una explicación causal que conecta psicología económica, escasez, teoría del valor, intercambio, formación del precio e institución monetaria.</div>
<div class="">
<img src="imagenes/acuerdo.svg" alt="">
</div>
</div>
</article>
<article class="pie-seccion">
<h3>Qué aporta históricamente el libro</h3>
<p class="texto-gris-claro-1"><em>Principles of Economics</em>, publicado en 1871, fue una de las obras que impulsaron el giro marginalista en economía. La contribución distintiva de Menger fue elaborar la teoría de manera cualitativa y causal, centrada en las decisiones de individuos concretos, en lugar de construir la explicación a partir de magnitudes agregadas o ecuaciones.</p>
<p class="texto-gris-claro-1">Su enfoque se convirtió en un punto de partida de la tradición austríaca posterior y ejerció influencia sobre desarrollos posteriores en valor, capital, mercado y teoría monetaria.</p>
</article>
</section>● Sección Fuentes
1-Armamos el HTML
<section id="fuentes" class="contenedor">
<div class="titulo">
<span class="pretitulo">Lecturas</span>
<h2>Para profundizar</h2>
<p>Este sitio es una guía educativa y no reemplaza la lectura del texto de Menger. Para estudiar con mayor precisión, conviene contrastar cada concepto con la obra original y con estudios históricos sobre la revolución marginalista.</p>
</div>
<article class="grid-3">
<div class="tarjeta-brilla">
<div class="lines"></div>
<div class="contenido">
<h3>Principles of Economics</h3>
<p class="texto-gris-claro-1">Carl Menger, 1871. Texto fundamental para estudiar directamente la estructura de su teoría.</p>
</div>
</div>
<div class="tarjeta-brilla">
<div class="lines"></div>
<div class="contenido">
<h3>Traducciones y ediciones</h3>
<p class="texto-gris-claro-1">Las traducciones inglesas permiten revisar capítulos sobre valor, intercambio, precio, mercancía y dinero.</p>
</div>
</div>
<div class="tarjeta-brilla">
<div class="lines"></div>
<div class="contenido">
<h3>Contexto histórico</h3>
<p class="texto-gris-claro-1">La obra se estudia habitualmente junto a Jevons y Walras dentro de la revolución marginalista de 1871.</p>
</div>
</div>
</article>
</section>2-Aplicamos el CSS
.tarjeta-brilla{
position: relative;
height: 150px;
padding: 2rem;
border: 1px solid var(--borde);
border-radius: var(--radio);
background: linear-gradient(180deg, var(--tarjeta-degradado-1), var(--tarjeta-degradado-2));
}
.tarjeta-brilla .lines{
position: absolute;
inset: 0;
background-color: var(--color-fondo);
border-radius: var(--radio);
overflow: hidden;
}
.tarjeta-brilla .lines::before{
content: "";
position: absolute;
top:50%;
left: 50%;
width: 600px;
height: 120px;
background: linear-gradient(transparent, #00e5ff,#45f3ff,#00e5ff,transparent);
animation: animateCard 4s linear infinite;
}
@keyframes animateCard{
0%{
transform: translate(-50%,-50%) rotate(0deg);
}
100%{
transform: translate(-50%,-50%) rotate(360deg);
}
}
.tarjeta-brilla .lines::after{
content: "";
position: absolute;
inset: 3px;
background-color: var(--color-fondo);
border-radius: var(--radio);
}
.tarjeta-brilla .contenido{
position: absolute;
width: 100%;
height: 100%;
left:10px;
right: 10px;
border-radius: var(--radio);
background-color: transparent;
letter-spacing: -0.02px;
padding-right: 1.5rem;
padding-bottom: 1rem;
}3- Para que parezca que brilla, es un juego entre las capas que se agregan en una etiqueta. Tiene un fondo básico, pero con before, le agregamos uno de color más grande que está girando permanentemente por la animación aplicada (@keyframes) y luego lo tapamos con nuestro contenido, que es un poco más pequeño, pudiéndose ver el azul girar.
● Footer
1-El HTML
<footer class="contenedor">
<div>
<a href="#" class="logo"><span aria-hidden="true">M</span><span>Menger/Economía</span></a>
<p class="nota">Material educativo inspirado en <em>Principles of Economics</em> (1871). Las formulaciones del sitio son explicaciones y síntesis pedagógicas, no transcripciones extensas de la obra.</p>
</div>
<div class="links">
<a href="#inicio">Inicio</a>
<a href="#valor">Valor</a>
<a href="#intercambio">Intercambio</a>
<a href="#precio">Precio</a>
<a href="#dinero">Dinero</a>
</div>
</footer>2- En el CSS
...
header nav a.logo, footer a.logo{
display: flex;
align-items: center;
gap:0.5rem;
font-size: 0.93rem;
font-weight: 750;
letter-spacing: -0.03em;
}
header nav a.logo span:first-child, footer a.logo span:first-child{
width: 30px;
height: 30px;
line-height: 80px;
border: 1px solid var(--borde) ;
white-space: nowrap;
border-radius: 8px;
display: grid;
place-items:center ;
color: var(--color-resaltador);
background: var(--fondo-logo);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.025);
}
...
/* footer */
footer{
border-top: 1px solid var(--borde);
padding: 50px 0 80px;
/* Para los hijos */
display: grid;
grid-template-columns: 1fr auto;
gap: 20px;
align-items: end;
}
footer .nota {
max-width: 680px;
color: var(--texto-gris-claro-1);
font-size: .84rem;
}
footer .links {
display: flex;
flex-wrap: wrap;
gap: 14px;
justify-content:
flex-end;
color: var(--texto-gris-claro-2);
font-size: .85rem;
}
footer .links a:hover { color: var(--color-strong); }
/* Fin footer */
@media (max-width: 760px) {
...
footer{ grid-template-columns: 1fr; align-items: start; }
footer .links { justify-content: flex-start; }
}● Cerrar Menú
1- Para cerrar el menú automáticamente al presionar una opción , necesitamos javascript. En la parte inferior del HTML, dentro del body, escribimos
<script>
// Para cerrar el menú lateral en celulares
window.onscroll = ()=>{
document.getElementById('menu-btn').checked = false;
}
// para cerrar en computadoras grandes el submenu
const subopciones = document.querySelectorAll(".subopciones li a");
const menusuperior = document.querySelector(".opciones");
const megasuperior = document.querySelector(".mega-opcion");
const megasubopciones = document.querySelectorAll(".mega-subopcion li a");
subopciones.forEach(opcion =>{
opcion.addEventListener("click",()=>{
menusuperior.style.pointerEvents = 'none';
})
});
subopciones.forEach(opcion =>{
opcion.addEventListener("mouseleave",()=>{
menusuperior.style.pointerEvents = 'auto';
})
});
megasubopciones.forEach(opcion =>{
opcion.addEventListener("click",()=>{
megasuperior.style.display = 'none';
})
});
megasubopciones.forEach(opcion =>{
opcion.addEventListener("mouseleave",()=>{
megasuperior.style.display = 'block';
})
});
</script>
Finalizamos el proyecto.😅