Adaptación a todas las pantallas
En este ejercicio agregamos el cambio de modo claro/oscuro y el menú hamburguesa para dispositivos pequeños. Transformamos una tabla en listado de filas para celulares y varias etiquetas html y propiedades css nuevas.
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. Opcional.
- 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. Opcional.
- 9.Escribimos la propiedad de font-family en el style.css. Opcional.
- 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:
Paso 1
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" href="imagenes/icono.svg" type="image/x-icon">
<title>Ejercicio 2 - Economía</title>
</head>
<body>
<header>
<h1>Economía y Acción Humana</h1>
<p>Aprendiendo a escribir un documento web en <strong>HTML5 - CSS</strong></p>
<ul>
<li><a href="#introduccion">Introducción</a></li>
<li><a href="#accion">Acción Humana</a></li>
<li><a href="#valor">Valor</a></li>
<li><a href="#mercado">Mercado</a></li>
<li><a href="#ejemplo">Ejemplo</a></li>
<li><a href="#resumen">Resumen</a></li>
<li><a href="#conclusion ">Conclusión</a></li>
</ul>
</header>
<main>
<section id="introduccion">
<h2>¿Qué es la economía?</h2>
<article>
<p>La economía estudia cómo las personas utilizan los recursos disponibles para alcanzar los objetivos que consideran importantes. No se limita al dinero, a las empresas o a los gobiernos, sino que analiza las decisiones que cada individuo toma todos los días.</p>
<p>Cada persona posee necesidades, deseos, conocimientos y recursos diferentes. Debido a que el tiempo y los bienes son <strong>escasos</strong>, siempre es necesario <u>elegir</u> entre distintas alternativas.</p>
<h3>Ideas principales</h3>
<ul>
<li>Los recursos son limitados.</li>
<li>Las personas tienen objetivos distintos.</li>
<li>Toda elección implica renunciar a otra opción.</li>
<li>Las decisiones tienen consecuencias.</li>
</ul>
</article>
</section>
<section id="accion">
<h2>La acción Humana</h2>
<article>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Hic vero quis eaque accusantium maxime suscipit labore repellendus architecto asperiores consequuntur corporis, rem quasi totam sint.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Hic vero quis eaque accusantium maxime suscipit labore repellendus architecto asperiores consequuntur corporis, rem quasi totam sint.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Hic vero quis eaque accusantium maxime suscipit labore repellendus architecto asperiores consequuntur corporis, rem quasi totam sint.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Hic vero quis eaque accusantium maxime suscipit labore repellendus architecto asperiores consequuntur corporis, rem quasi totam sint.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Hic vero quis eaque accusantium maxime suscipit labore repellendus architecto asperiores consequuntur corporis, rem quasi totam sint.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Hic vero quis eaque accusantium maxime suscipit labore repellendus architecto asperiores consequuntur corporis, rem quasi totam sint.</p>
<p><u>Consideración metodológica:</u>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis iusto libero animi adipisci sit maxime dolor sint omnis assumenda impedit.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis iusto libero animi adipisci sit maxime dolor sint omnis assumenda impedit.</p>
<aside>
<p><strong>Importante:</strong>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed, modi!</p>
</aside>
</article>
</section>
<section id="valor">
<h2>El valor de los bienes y servicios</h2>
<article>
<p>El valor no se encuentra dentro de los objetos o en el servicio que se presta, sino en la importancia que cada individuo les asigna según sus propias necesidades y circunstancias.</p>
<p>Un vaso de agua puede tener poco valor para quien tiene abundancia, pero puede resultar extremadamente valioso para quien atraviesa el desierto.</p>
<h3>Factores que influyen en el valor</h3>
<ol>
<li>Las necesidades personales.</li>
<li>La cantidad disponible del bien.</li>
<li>Las preferencias individuales.</li>
<li>El momento y el lugar.</li>
</ol>
</article>
</section>
<section id="mercado">
<h2>El intercambio y el mercado</h2>
<article>
<p>Cuando dos personas intercambian voluntariamente un bien o un servicio, ambas esperan obtener un beneficio según su propia valoración.</p>
<p>El mercado no es únicamente un lugar físico. También es el conjunto de relaciones donde millones de personas cooperan mediante compras, ventas y contratos.</p>
<blockquote>
<p><i>Los precios transmiten información sobre la escasez de los bienes y ayudan a coordinar las decisiones de productores y consumidores.</i></p>
</blockquote>
</article>
</section>
<section id="ejemplo">
<h2>Aplicación en la vida cotidiana</h2>
<article>
<h3>Un estudiante</h3>
<p>Un estudiante dispone de cuatro horas libres. Puede descansar, estudiar, practicar un deporte o trabajar.</p>
<p>Como el tiempo es limitado, deberá decidir qué alternativa considera más conveniente según sus objetivos personales.</p>
<h3>Un comerciante</h3>
<p>Un comerciante observa que aumenta la demanda de un producto. Decide comprar más unidades para satisfacer a sus clientes. Esa decisión surge de interpretar la información disponible y anticipar las necesidades de otras personas.</p>
</article>
</section>
<section id="resumen">
<h2>Resumen de conceptos</h2>
<article>
<table border="1">
<caption>Conceptos básicos de economía</caption>
<thead>
<tr>
<th>Concepto</th>
<th>Descripción</th>
<th>Ejemplo</th>
</tr>
</thead>
<tbody>
<!-- una fila -->
<tr>
<td>Escasez</td>
<td>Los recursos son limitados.</td>
<td>Tiempo disponible</td>
</tr>
<!-- una fila -->
<tr>
<td>Elección</td>
<td>Los recursos son limitados.</td>
<td>Tiempo disponible</td>
</tr>
<!-- una fila -->
<tr>
<td>Valor</td>
<td>Los recursos son limitados.</td>
<td>Tiempo disponible</td>
</tr>
<!-- una fila -->
<tr>
<td>Intercambio</td>
<td>Los recursos son limitados.</td>
<td>Tiempo disponible</td>
</tr>
</tbody>
<tfoot></tfoot>
</table>
</article>
</section>
<section id="conclusion">
<h2>Conclusión</h2>
<article>
<p>Comprender la economía permite interpretar muchas situaciones de la vida diaria. Cada decisión representa una elección entre distintas alternativas, utilizando recursos limitados para alcanzar objetivos personales.</p>
<p>Desde elegir una carrera hasta administrar un negocio, ahorrar dinero o dedicar tiempo a aprender una habilidad, las personas constantemente toman decisiones económicas.</p>
<p>La economía, entendida de esta manera, estudia el comportamiento humano, las decisiones individuales y la cooperación entre personas dentro de la sociedad.</p>
<img src="imagenes/economia.jpg" alt="economia">
<button class="btn" command="show-modal" commandfor="modal">¿Qué representa esta imagen</button>
<dialog id="modal">
<h2>Intercambio</h2>
<p>Esta imagen representa el <strong>MERCADO</strong> como <strong>INTERCAMBIO</strong> a través de un bien indirecto que es el <i>dinero</i></p>
<form method="dialog">
<button class="btn">Cerrar</button>
</form>
</dialog>
</article>
</section>
<section>
<h2>Formulario de Autoevaluación Rápida</h2>
<form action="">
<fieldset>
<legend>¿Se explicó bien el concepto?</legend>
<label for="opciones">¿Qué factores influyen en el valor de los objetos o servicios</label>
<br>
<select id="opciones">
<option value="necesidades">Necesidades personales</option>
<option value="escasez">Escasez del bien o servicio</option>
<option value="preferencias">Preferencias individuales</option>
</select>
<!-- salto de renglon facil en HTML- antiguo -->
<br><br>
<label for="sino">
<input type="checkbox" id="sino"> El tema fue bien explicado.
</label>
<br>
<button type="button" class="btn" onclick="alert('Correcto!')">Enviar Respuesta</button>
</fieldset>
</form>
</section>
<section>
<h2>Contenido Multimedia Informativo</h2>
<details>
<summary>Hacé click aquí para ver resumen en audio y video.</summary>
<p>En un entorno real, aquí escucharías un resumen del contenido del documento web.</p>
<audio controls >
<source src="imagenes/audio.mp3" type="audio/mpeg">
Tu navegador no soporta el elemento audio.
</audio>
<video controls width="320" height="250">
<source src="imagenes/video.mp4" type="video/mp4">
Tu navegador no soporta el elemento video
</video>
</details>
</section>
</main>
<footer>
<a class="btn" href="#introduccion">↑ Inicio</a>
<!-- Una línea en html -->
<hr>
<address>
Documento educativo de HTLM5 para fines didácticos.
</address>
<p>Basado en la visión de la economía desarrollada por <strong>Ludwing Von Mises</strong>, especialmente en su análisis de la acción humana y la cooperación social.</p>
<small>Ejemplo de uso de etiquetas semánticas modernas de HTML5</small>
</footer>
</body>
</html>CSS
/* Primero- determinamos las variables de color */
:root{
--color-fondo:white;
--color-texto:#333;
--color-texto-claro:#666;
--color-resaltador:#000;
--boton-borde:#000;
--boton-primario-texto:#fff;
--boton-primario-fondo:#000;
--boton-secundario-texto:#000;
--boton-secundario-fondo:#fff;
--sombra:0 10px 30px rgba(0,0,0,0.05);
--sombra-aside: 2px 2px 4px rgba(0,0,0,0.05);
--gris-suave:rgba(0,0,0,0.05);
--tabla-par:#fafafa;
--tabla-hover:#f2f2f2;
}
/* Qué pasa si el sistema ya está en modo oscuro */
@media (prefers-color-scheme: dark) {
/* entra oscuro */
.contenedor-app{
--color-fondo:#111;
--color-texto:white;
--color-texto-claro:#999;
--color-resaltador:#d3d3d3;
--boton-borde:#fff;
--boton-primario-texto:#000;
--boton-primario-fondo:#fff;
--boton-secundario-texto:#fff;
--boton-secundario-fondo:#000;
--sombra:0 10px 30px rgba(255,255,255,0.5);
--sombra-aside: 2px 2px 4px rgba(255,255,255,0.5);
--gris-suave:rgba(255,255,255,0.5);
--tabla-par:#3a3a3a;
--tabla-hover:#6a6a6a;
}
/* y al hacer click, cambia a claro */
#cambiar-color:checked ~ .contenedor-app{
--color-fondo:white;
--color-texto:#333;
--color-texto-claro:#666;
--color-resaltador:#000;
--boton-borde:#000;
--boton-primario-texto:#fff;
--boton-primario-fondo:#000;
--boton-secundario-texto:#000;
--boton-secundario-fondo:#fff;
--sombra:0 10px 30px rgba(0,0,0,0.05);
--sombra-aside: 2px 2px 4px rgba(0,0,0,0.05);
--gris-suave:rgba(0,0,0,0.05);
--tabla-par:#fafafa;
--tabla-hover:#f2f2f2;
}
}
/* Pero si está en claro, dejamos que entro con lo que se establece por defecto en el root y cambia al hacer click */
@media (prefers-color-scheme: light) {
/* Entra con fondo blanco y letras negras, pero si hago click en color, se activa el input y cambia */
#cambiar-color:checked ~ .contenedor-app{
--color-fondo:#111;
--color-texto:white;
--color-texto-claro:#999;
--color-resaltador:#d3d3d3;
--boton-borde:#fff;
--boton-primario-texto:#000;
--boton-primario-fondo:#fff;
--boton-secundario-texto:#fff;
--boton-secundario-fondo:#000;
--sombra:0 10px 30px rgba(255,255,255,0.5);
--sombra-aside: 2px 2px 4px rgba(255,255,255,0.5);
--gris-suave:rgba(255,255,255,0.5);
--tabla-par:#3a3a3a;
--tabla-hover:#6a6a6a;
}
}
/* Configuración básica general que aplica a todas las etiquetas para inicializarlas */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html{
scroll-behavior: smooth;
scroll-padding-top: 5rem;
}
::-webkit-scrollbar{
width: 0.5rem;
}
::-webkit-scrollbar-track{
background-color: #fff;
}
::-webkit-scrollbar-thumb{
background-color: #000;
border-radius: 2rem;
}
::selection{
background-color: #000;
color: #fff;
}
/* Las propiedades heredables */
body{
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
a{
text-decoration: none;
color: currentColor;
}
input#cambiar-color,input#icono-menu{
display: none;
}
.contenedor-app{
color: var(--color-texto);
background-color: var(--color-fondo);
}
/* Clases que se aplican en varias secciones */
.contenedor{
max-width: min(1170px,98%);
/* Para centrarlo */
margin: 0 auto;
padding: clamp(12px, 3vw, 24px);
}
.btn{
padding: 1rem 2rem;
border-radius: 1rem;
font-size: 1.3rem;
border:1px solid var(--boton-borde);
transition: 0.2s linear;
cursor: pointer;
}
.btn:hover{
transform: translateY(-5px);
box-shadow: var();
}
.primario{
color:var(--boton-primario-texto);
background-color: var(--boton-primario-fondo);
}
.secundario{
color: var(--boton-secundario-texto);
background-color: var(--boton-secundario-fondo);
}
header{
position: sticky;
top:0;
left: 0;
right: 0;
background-color: var(--color-fondo);
z-index: 10;
}
header nav{
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 4px solid var(--color-texto-claro);
}
header nav a#logo{
display: flex;
align-items: center;
}
header nav a#logo h1{
text-transform: uppercase;
letter-spacing: -3px;
}
header nav a#logo:hover h1
{
color: var(--color-resaltador);
}
header nav a#logo:hover svg{
fill:var(--color-resaltador);
}
header nav ul#opciones{
list-style: none;
display: flex;
gap:3rem;
align-items: center;
}
header nav ul#opciones li a{
white-space: nowrap;
/* con respecto a */
position: relative;
}
header nav ul#opciones li a:hover{
color: var(--color-resaltador);
}
header nav ul#opciones li a::after{
content: "";
position: absolute;
bottom:-3px;
left: 0;
width: 0;
height: 2px;
background-color: var(--color-texto);
border-radius: 1rem;
transition: 0.2s linear;
}
header nav ul#opciones li a:hover::after{
width: 100%;
}
header nav .iconos{
position: relative;
}
header nav .iconos label{
position: absolute;
cursor: pointer;
}
header nav .iconos label:hover svg{
fill:var(--color-resaltador);
}
header nav .iconos #icono-menu-label,
header nav .iconos #icono-cerrar-menu{
right: 1rem;
top:-1rem;
opacity: 0;
visibility: hidden;
transition: 0.2s linear;
}
header nav .iconos #cambiar-color-label{
right: 3.5rem;
top: -0.9rem;
}
/* Inicio */
main{
padding: 2rem 0;
}
main section#inicio h1 {
font-size: 5rem;
text-align: center;
font-weight: 800;
letter-spacing: -4px;
color: var(--color-resaltador);
line-height: 4.5rem;
user-select: none;
}
main section#inicio p {
color: var(--color-texto-claro);
font-size: 1.4rem;
line-height: 1.8;
text-align: center;
margin: 4rem 0;
}
main section#inicio .botones{
display: flex;
flex-wrap: wrap;
justify-content: center;
gap:2rem;
}
main section#inicio .botones button{
width: 15rem;
}
/* Estas propiedades se van a aplicar a todas las section que tengan la clase cuadrado */
main section.cuadrado{
border: 1px solid var(--gris-suave);
border-radius: 1rem;
box-shadow: var(--sombra);
padding: 2rem;
margin-top: 2rem;
transition: 0.2s linear;
}
main section.cuadrado:hover {
transform: translateY(-4px);
}
main section.cuadrado h2{
/* Toma como valor para arrancar 5vw que es el 5% del tamaño de la pantalla. Verifica que sea mayor q 1.6rem o menor a 2rem, caso contrario toma alguno de esos valores. */
font-size: clamp(1.6rem,5vw,2rem);
font-weight: 700;
color: var(--color-resaltador);
margin-bottom: 3rem;
cursor: default;
}
main section.cuadrado article{
/* Considera 1 columna, porque no escribimos más. Es útil para separar los páarrafos. */
display: grid;
gap:1rem;
}
main section.cuadrado article p{
font-size: 1rem;
line-height: 1.6;
text-align: justify;
}
main section.cuadrado article h3{
font-size: clamp(1.2rem, 4vw, 1.6rem);
margin-top: 2rem;
}
main section.cuadrado article ul,main section.cuadrado article ol{
padding-left: 3rem;
}
main section.cuadrado article ul{
list-style-type: square;
}
main section.cuadrado article ul li,main section.cuadrado article ol li{
margin: 1rem 0;
font-size: 1.1rem;
}
main section.tarjetas{
display: flex;
flex-wrap: wrap;
gap:2rem;
justify-content: center;
}
main section.tarjetas article{
/* La propiedad flex controla cómo un elemento flexible crece, se encoge y cuál es su tamaño base dentro de un contenedor con display: flex.(el padre debe decir display:flex;) */
/* 250px es el tamaño inicial de referencia del elemento antes de repartir o recortar el espacio sobrante */
/* Los 1 1 significan que puede crecer o disminuir */
/* Primero intenta armar todo con 250px dentro del tamaño del padre que lo fija la clase .contendor donde pusimos 90% o 1170px. Los que no entran bajan porque está activado el wrap. Los que quedan se agrandan o achican según lo disponible. */
flex:1 1 250px;
border: 1px solid var(--gris-suave);
background-color: var(--color-fondo);
padding: 2rem;
border-radius: 0 2rem 0 2rem;
box-shadow: var(--sombra);
transition: 0.2s linear;
user-select: none;
max-width: fit-content;
}
main section.tarjetas article:hover{
transform: translateY(-5px);
}
main section.tarjetas article .titulo{
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1rem;
}
main section.tarjetas article .imagen{
background-color: var(--color-texto);
border-radius: 50%;
padding: 0.5rem;
}
main section.tarjetas article .titulo h3{
font-size: 2rem;
}
main section.tarjetas article p{
text-align: center;
line-height: 1.6;
max-width: 40rem;
}
main section aside{
margin-top: 3rem;
color: var(--color-texto);
padding: 2rem;
border-radius: 1.5rem;
box-shadow: var(--sombra-aside);
border-left: 5px solid var(--color-resaltador);
background-color: var(--tabla-par);
}
main section.precios{
margin: 5rem auto;
padding: 5rem;
border: 2px solid var(--gris-suave);
border-radius: 0 4rem 0 4rem;
}
main section#resumen table{
border-collapse: collapse;
width: 100%;
overflow: hidden;
border-radius: 1rem;
}
main section#resumen caption{
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 1.2rem;
}
main section#resumen thead{
background-color: var(--color-resaltador);
color: var(--boton-primario-texto);
}
main section#resumen table th, table td{
padding: 1.1rem;
border: 1px solid var(--gris-suave);
text-align: left;
}
/* even=par odd= par */
main section#resumen table tr:nth-child(even){
background-color: var(--tabla-par);
}
main section#resumen tbody tr:hover{
background-color: var(--tabla-hover);
}
main section#conclusion img{
width: 70%;
height: 350px;
object-fit: cover;
margin: 0 auto;
border-radius: 1rem;
}
main section#conclusion button{
margin: 0 auto;
font-size: 1rem;
}
main section#conclusion dialog{
position: fixed;
/* Sus coordenadas (0,0) están en el centro de la pantalla */
top:50%;
left:50%;
/* Al trasladarla en un 50% de su medida, se centra */
transform: translate(-50%,-50%);
max-height: 85vh ;
overflow: auto;
padding: 2rem;
border-radius: 1.2rem;
background-color: var(--color-fondo);
color: var(--color-texto);
/* aparicion */
opacity: 0;
scale: 0.8;
transition:
opacity 400ms ease,
scale 400ms ease,
display 400ms allow-discrete,
overlay 400ms allow-discrete;
}
main section#conclusion dialog[open]{
opacity: 1;
scale: 1;
@starting-style{
opacity:0;
scale:0.8;
}
}
main section#conclusion dialog button{
margin-top: 1rem;
}
main section#conclusion dialog p strong{
color: var(--color-resaltador);
}
main section#conclusion dialog::backdrop {
/* Color con transparencia */
background-color: rgba(0,0,0,0.45);
/* Difuminamos */
backdrop-filter: blur(15px);
/* aparicion */
opacity: 0;
scale: 0.8;
transition:
opacity 400ms ease,
display 400ms allow-discrete,
overlay 400ms allow-discrete;
}
main section#conclusion dialog[open]::backdrop {
opacity: 1;
@starting-style{
opacity:0;
}
}
form fieldset{
border:1px solid var(--gris-suave);
border-radius: 1rem;
padding: 2rem;
display: grid;
gap:2rem;
}
form legend{
font-weight: 700;
padding: 0 0.5rem;
}
form select{
color: var(--color-texto);
background-color: var(--color-fondo);
padding: 1rem;
border-radius: 0.8rem;
border: 1px solid var(--gris-suave);
width: fit-content;
max-width: 100%;
padding-right: 40px;
appearance: none;
background-image: url('imagenes/flecha-select.svg');
background-repeat: no-repeat;
background-position: right 18px center;
}
form input[type="checkbox"]{
transform: scale(1.2);
accent-color: var(--color-resaltador);
}
form button{
width: fit-content;
}
/* Para el video */
main section#seccion-video{
height: 80vh;
margin: 2rem auto;
position: relative;
display: grid;
place-items: center;
}
/* Para oscurecer el fondo a modo de que se vea bien las letras */
main section#seccion-video::after{
content: "";
position: absolute;
/* equivale a poner top-bottom-left y right en 0 */
inset: 0;
margin: 0 5%;
background-color: rgba(0,0,0,0.3);
z-index: 2;
}
.contenedor-video{
position: absolute;
width: 90%;
height: 100%;
object-fit: cover;
}
main section#seccion-video h1{
color: white;
z-index: 5;
font-size: clamp(2rem,10vw,5rem);
}
/* Para el botón encendido */
main section#seccion-video #encender-btn{
position: absolute;
bottom: 7%;
left: 7%;
width: 9rem;
height: 2rem;
padding: 0.5rem;
border-radius: 0.5rem;
border: none;
background-color: var(--color-fondo);
display: flex;
align-items: center;
justify-content: space-around;
transition: 0.2s linear;
z-index: 5;
}
main section#seccion-video #encender-btn span{
display: inline-block;
font-size: 0.85rem;
cursor: pointer;
text-transform:capitalize;
color: var(--color-resaltador);
}
.boton-encendedor{
position: absolute;
top:0;
left:0;
width: 50%;
height: 100%;
background-color: var(--color-resaltador);
border-radius: 0.5rem;
margin: 0;
display: block;
transition: 0.2s linear;
}
/* Para usar con javascript */
.mover-boton .boton-encendedor{
left:50%;
}
details{
border: 1px solid var(--gris-suave);
padding: 1rem;
border-radius: 0.5rem;
}
details summary{
cursor: pointer;
font-weight: 700;
font-size: 1.05rem;
}
audio{
display: block;
margin: 0 auto;
margin-top: 1rem;
}
footer{
background-color: var(--color-fondo);
}
footer .contenedor{
margin-top: 2rem;
display: grid;
gap:1rem;
}
footer p strong{
color: var(--color-resaltador);
}
footer a{
width: fit-content;
}
/* Para que sea responsivo */
@media (max-width:991px) {
html{
/* Disminuye todas las medidas REM */
font-size: 85%;
}
header nav{
position: relative;
}
/* Las opciones del menú hamburguesa */
header nav ul#opciones{
position: absolute;
top:99%;
left:0;
right: 0;
display: inline-block;
background-color: var(--color-fondo);
border-bottom: 1px solid lightgray;
border-top: 1px solid lightgray;
padding-left: 4rem;
padding-bottom: 1rem;
clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
transition: 0.2s linear;
}
#icono-menu:checked ~ #opciones{
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
#icono-menu:checked ~ .iconos #icono-menu-label{
opacity: 0;
visibility: hidden;
}
#icono-menu:checked ~ .iconos #icono-cerrar-menu{
opacity: 1;
visibility: visible;
}
header nav ul#opciones li{
margin: 1rem 0;
}
header nav .iconos #icono-menu-label{
opacity: 1;
visibility: visible;
}
}
@media (max-width:600px) {
table thead{
display: none;
}
table tr, table td{
display: block;
}
main section#resumen table tr{
margin: 1rem;
border: 2px solid var(--color-resaltador);
border-radius: 1rem;
background-color: var(--color-fondo);
overflow: hidden;
}
main section#resumen table tr:nth-child(even){
background-color: var(--color-fondo);
}
tbody tr:hover{
background-color: var(--tabla-hover);
}
tbody td{
display: grid;
/* Son 2 columnas- una para el titulo y otra para la data */
grid-template-columns: 1fr 1fr;
color: var(--color-texto-claro);
}
tbody td::before{
content: attr(data-label);
font-weight: 700;
color: var(--color-resaltador);
}
}
@media (max-width:450px) {
html{
/* Disminuye todas las medidas REM */
font-size: 80%;
}
}Recursos
Íconos: https://fonts.google.com