Estoy trabajando en la carga de contenidos en una plataforma Moodle, y muchos/as docentes me envían algunos cuadros en imágenes que podrían estar en texto. Por una cuestión de accesibilidad, siempre que el tiempo me alcanza, paso esos cuadros a código.
Voy a ir guardando en este posteo esos códigos, para volver a usarlos yo misma, y para compartir con quienes se encuentren en una situación similar.
Recuadrito a la derecha de un texto
<div style="float: right; width: 40%;background-color: #d5dfee; padding: 1.5em; margin: 2em; border: 1px #123872 solid; text-align: center;"><em>"He pasado una noche estupenda, pero no ha sido esta"</em></div>“He pasado una noche estupenda, pero no ha sido esta”
Recuadrito con bordes redondeados
<div style="float: right; width: 40%;background-color: #d5dfee; padding: 1.5em; margin: 2em; border: 1px #123872 solid; text-align: center; border-radius: 25px;"><em>"He pasado una noche estupenda, pero no ha sido esta"</em></div>“He pasado una noche estupenda, pero no ha sido esta”
Recuadro título de pestaña
<div style="width: 80%; border: 2px solid #012760; text-align: center; padding: 1em; margin-left: auto; margin-right: auto; background-color: #C6D2DD;">
<h4 style="color: rgb(1, 39, 96); text-align: center;">Clase 1</h4>
</div>
Clase 1
Imagen con pie de imagen a la derecha del texto
<div style="clear: both;"><div style="float: right; width: 20%;"><img src="https://irisfernandez.com.ar/betaweblog/wp-content/uploads/2023/04/405px-Tux.png" alt="tux"><p style="font-size: 70%; font-style: italic; text-align: center;" >Fuente: Wikipedia</p></div><p>Tux es el nombre de la mascota oficial de Linux. Creado por Larry Ewing en 1996, es un pequeño pingüino de aspecto risueño y cómico basado en una imagen que Linus Torvalds encontró en un servidor FTP. </p></div>
Fuente: Wikipedia
Tux es el nombre de la mascota oficial de Linux. Creado por Larry Ewing en 1996, es un pequeño pingüino de aspecto risueño y cómico basado en una imagen que Linus Torvalds encontró en un servidor FTP.
Lista de ítems
<br>
<div style="clear: both;">
<div style="float: left; border: 1px solid #000077; padding: 0.5%; margin: 0.9%; width: 5%; text-align: center; font-size: 300%; color: #000077;">1</div>
<div style="float: left; border: 1px solid #000077; padding: 1em; margin: 1em; width: 60%; text-align: center; ">
<p>Primer paso</p>
</div>
</div>
<div style="clear: both;">
<div style="float: left; border: 1px solid #000077; padding: 0.5%; margin: 0.9%; width: 5%; text-align: center; font-size: 300%; color: #000077;">2</div>
<div style="float: left; border: 1px solid #000077; padding: 1em; margin: 1em; width: 60%; text-align: center; ">
<p>Segundo paso</p>
</div>
</div>
<div style="clear: both;">
<div style="float: left; border: 1px solid #000077; padding: 0.5%; margin: 0.9%; width: 5%; text-align: center; font-size: 300%; color: #000077;">3</div>
<div style="float: left; border: 1px solid #000077; padding: 1em; margin: 1em; width: 60%; text-align: center; ">
<p>Tercer paso</p>
</div>
</div>
<div style="clear: both;">
<div style="float: left; border: 1px solid #000077; padding: 0.5%; margin: 0.9%; width: 5%; text-align: center; font-size: 300%; color: #000077;">4</div>
<div style="float: left; border: 1px solid #000077; padding: 1em; margin: 1em; width: 60%; text-align: center; ">
<p>Cuarto paso</p>
</div>
</div>1
Paso 1
2
Paso 2
3
Paso 3
4
Paso 4
