<font color="black">
<font face="OpenDyslexic">
<h1 align="center"><i>Capítulo 2</i></h1>
<h2 align="center">Entre viajes e historias</h2>
<img src="https://1930.utec.edu.uy/wp-content/uploads/1930_twine/src/p2.png" alt="Trulli" width="570" height="500">
<div class="grupo-botones">
<button class="button">
[[Unas cuantas anécdotas ]]
</button>
</div>
[CSS]
/* Estilos imágenes */
img{
border: 4px solid #A52CDA !important;
border-radius: 8px !important;
box-shadow: 0.25rem 0.25rem #000000;
margin-bottom: 20px !important;
}
/* Fin estilos imágenes */
/* Estilos audios */
.audio-prueba {
display: flex !important;
justify-content: center !important;
margin: auto;
margin-bottom: 20px !important;
width: 100%;
border: 1px solid #000000;
border-radius: 4px;
background-color: #56AEFF;
transform: translate(-0.25rem,-0.25rem);
box-shadow: 0.25rem 0.25rem #000000;
margin-top: 15px;
}
audio::-webkit-media-controls-panel {
background-color: #56AEFF;
}
.texto-audio {
width: 100%;
font-size: 14px;
margin: -25px 0 10px 0;
}
/* Fin de estilos audio */
/* Estilos botones */
.grupo-botones {
position: relative;
bottom: 0;
width: 100%;
}
.button:hover {
color: var(--hover-text);
background: var(--bg);
transform: translate(0rem,0rem);
box-shadow: none;
}
.button:active {
transform: translate(0);
box-shadow: none;
}
.button a{
color: white !important;
background: none !important;
text-decoration-color: white !important;
font-weight: bold !important;
font-family: "OpenDyslexic";
width: 100%;
}
.button a:hover{
color: white !important;
background: none !important;
text-decoration-color: white !important;
font-weight: bold !important;
}
.center {
position: absolute;
top: 25vh;
bottom: 75vh;
left: 40vw;
}
.button {
--bg: #000;
--hover-bg: #A52CDA;
--hover-text: #000000;
color: #ffffff !important;
border: 1px solid var(--bg);
border-radius: 40px;
padding: 0.8em 2em;
transform: translate(-0.25rem,-0.25rem);
background: var(--hover-bg);
box-shadow: 0.25rem 0.25rem var(--bg);
transition: 0.2s;
display: flex !important;
justify-content: center !important;
margin: auto !important;
margin-bottom: 20px !important;
width: 100%;
font-family: OpenDyslexic;
font-size: 16px;
}
/* Fin estilos botones */
[continued]
<font face="OpenDyslexic">
<p style="color: black;">
Tomassino saca la carta que dice : 1930: Uruguay.
<img src="https://1930.utec.edu.uy/wp-content/uploads/1930_twine/src/p21.png" alt="Trulli" width="570" height="500">
<span style="color:red;">Antonella: </span>─De eso me acuerdo muy bien ─comienza Antonella y mira a cada uno como si estuviera reviviendo la despedida.
<span style="color:orange;">Tomassino: </span>─Estábamos en la cubierta del Conte Verde, y empezamos a ver la ciudad: Montevideo ─continúa Tomassino con ojos brillantes.
<span style="color:red;">Antonella: </span>─Y cuando Javier nos preguntó si veíamos la Torre de las Comunicaciones y otras cosas más… nos dimos cuenta de que cuando el buque atracara, llegaríamos a la misma ciudad, pero en tiempos distintos ─relata Antonella y se estruja las manos, nerviosa.
<div class="grupo-botones">
<button class="button">
[[ Antonella y Tomassino en Peñarol ]]
</button>
</div>
<audio controls class="audio-prueba">
<source src="https://1930.utec.edu.uy/wp-content/uploads/1930_twine/src/audios/2.1.m4a">
</audio>
<div class="texto-audio">
<p>
Audio de lectura.
</p>
</div>
[CSS]
/* Estilos imágenes */
img{
border: 4px solid #A52CDA !important;
border-radius: 8px !important;
box-shadow: 0.25rem 0.25rem #000000;
margin-bottom: 20px !important;
}
/* Fin estilos imágenes */
/* Estilos audios */
.audio-prueba {
display: flex !important;
justify-content: center !important;
margin: auto;
margin-bottom: 20px !important;
width: 100%;
border: 1px solid #000000;
border-radius: 4px;
background-color: #56AEFF;
transform: translate(-0.25rem,-0.25rem);
box-shadow: 0.25rem 0.25rem #000000;
margin-top: 15px;
}
audio::-webkit-media-controls-panel {
background-color: #56AEFF;
}
.texto-audio {
width: 100%;
font-size: 14px;
margin: -25px 0 10px 0;
}
/* Fin de estilos audio */
/* Estilos botones */
.grupo-botones {
position: relative;
bottom: 0;
width: 100%;
}
.button:hover {
color: var(--hover-text);
background: var(--bg);
transform: translate(0rem,0rem);
box-shadow: none;
}
.button:active {
transform: translate(0);
box-shadow: none;
}
.button a{
color: white !important;
background: none !important;
text-decoration-color: white !important;
font-weight: bold !important;
font-family: "OpenDyslexic";
width: 100%;
}
.button a:hover{
color: white !important;
background: none !important;
text-decoration-color: white !important;
font-weight: bold !important;
}
.center {
position: absolute;
top: 25vh;
bottom: 75vh;
left: 40vw;
}
.button {
--bg: #000;
--hover-bg: #A52CDA;
--hover-text: #000000;
color: #ffffff !important;
border: 1px solid var(--bg);
border-radius: 40px;
padding: 0.8em 2em;
transform: translate(-0.25rem,-0.25rem);
background: var(--hover-bg);
box-shadow: 0.25rem 0.25rem var(--bg);
transition: 0.2s;
display: flex !important;
justify-content: center !important;
margin: auto !important;
margin-bottom: 20px !important;
width: 100%;
font-family: OpenDyslexic;
font-size: 16px;
}
/* Fin estilos botones */
[continued]
<font face="OpenDyslexic">
<p style="color: black;">
<span style="color:green;">Federica: </span>─Sí, y nos prometimos volver a vernos. Javier y yo tomamos el tren eléctrico a Peñarol… y ustedes… ─dice Federica y mira a Tomassino.
<span style="color:orange;">Tomassino: </span>─Nos metimos entre el gentío que venía a recibir a las selecciones, había periodistas y un gran alboroto. Así que nadie nos prestó atención y salimos del puerto ─cuenta Tomassino y vuelve a sentir los gritos y los aplausos de la gente aglomerada cerca del Conte Verde, agitando banderitas y gritando “Uruguay, Uruguay”.
<span style="color:red;">Antonella: </span>─Vimos a una señora mayor, que caminaba a unos pasos de nosotros, y le preguntamos dónde tomar el ferrocarril a Peñarol, y nos ayudó. Nos acompañó hasta la estación y nos compró los pasajes. Y llegamos al barrio de ustedes ─recuerda Antonella.
<span style="color:blue;">Narradora: </span>- Los mira un poco confundida:
<span style="color:red;">Antonella: </span>─A este barrio, pero hace cien años ─agrega dudando. Todavía le cuesta comprender lo de viajar en el tiempo.
<img src="https://1930.utec.edu.uy/wp-content/uploads/1930_twine/src/p22.png" alt="Trulli" width="570" height="500">
<div class="grupo-botones">
<button class="button">
[[ Don Beppo ]]
</button>
</div>
<audio controls class="audio-prueba">
<source src="https://1930.utec.edu.uy/wp-content/uploads/1930_twine/src/audios/2.2.m4a">
</audio>
<div class="texto-audio">
<p>
Audio de lectura.
</p>
</div>
[CSS]
/* Estilos imágenes */
img{
border: 4px solid #A52CDA !important;
border-radius: 8px !important;
box-shadow: 0.25rem 0.25rem #000000;
margin-bottom: 20px !important;
}
/* Fin estilos imágenes */
/* Estilos audios */
.audio-prueba {
display: flex !important;
justify-content: center !important;
margin: auto;
margin-bottom: 20px !important;
width: 100%;
border: 1px solid #000000;
border-radius: 4px;
background-color: #56AEFF;
transform: translate(-0.25rem,-0.25rem);
box-shadow: 0.25rem 0.25rem #000000;
margin-top: 15px;
}
audio::-webkit-media-controls-panel {
background-color: #56AEFF;
}
.texto-audio {
width: 100%;
font-size: 14px;
margin: -25px 0 10px 0;
}
/* Fin de estilos audio */
/* Estilos botones */
.grupo-botones {
position: relative;
bottom: 0;
width: 100%;
}
.button:hover {
color: var(--hover-text);
background: var(--bg);
transform: translate(0rem,0rem);
box-shadow: none;
}
.button:active {
transform: translate(0);
box-shadow: none;
}
.button a{
color: white !important;
background: none !important;
text-decoration-color: white !important;
font-weight: bold !important;
font-family: "OpenDyslexic";
width: 100%;
}
.button a:hover{
color: white !important;
background: none !important;
text-decoration-color: white !important;
font-weight: bold !important;
}
.center {
position: absolute;
top: 25vh;
bottom: 75vh;
left: 40vw;
}
.button {
--bg: #000;
--hover-bg: #A52CDA;
--hover-text: #000000;
color: #ffffff !important;
border: 1px solid var(--bg);
border-radius: 40px;
padding: 0.8em 2em;
transform: translate(-0.25rem,-0.25rem);
background: var(--hover-bg);
box-shadow: 0.25rem 0.25rem var(--bg);
transition: 0.2s;
display: flex !important;
justify-content: center !important;
margin: auto !important;
margin-bottom: 20px !important;
width: 100%;
font-family: OpenDyslexic;
font-size: 16px;
}
/* Fin estilos botones */
[continued]
<font face="OpenDyslexic">
<p style="color: black;">
<span style="color:orange;">Tomassino: </span>─Y en la estación conocimos a Don Beppo. Se dio cuenta de que éramos inmigrantes y cuando nos vio solos y desorientados, se ofreció a ayudarnos. Nos invitó a quedarnos con él en su casa, como si fuéramos sus nietos. Increíble, le debemos todo; el techo, el trabajo que me consiguió y el cariño. Deberían conocerlo ─continúa Tomassino con voz emocionada.
<span style="color:red;">Antonella: </span>─Y, además, Don Beppo nos ayudó a conocer a la familia de tu bisabuelo, Javier. A Massimo Scalante, y a su hermanita Bianca, un solcito muy simpático ─cuenta Antonella muy contenta.
<img src="https://1930.utec.edu.uy/wp-content/uploads/1930_twine/src/p23.png" alt="Trulli" width="570" height="500">
<div class="grupo-botones">
<button class="button">
[[ El tano ]]
</button>
</div>
<audio controls class="audio-prueba">
<source src="https://1930.utec.edu.uy/wp-content/uploads/1930_twine/src/audios/2.3.m4a">
</audio>
<div class="texto-audio">
<p>
Audio de lectura.
</p>
</div>
[CSS]
/* Estilos imágenes */
img{
border: 4px solid #A52CDA !important;
border-radius: 8px !important;
box-shadow: 0.25rem 0.25rem #000000;
margin-bottom: 20px !important;
}
/* Fin estilos imágenes */
/* Estilos audios */
.audio-prueba {
display: flex !important;
justify-content: center !important;
margin: auto;
margin-bottom: 20px !important;
width: 100%;
border: 1px solid #000000;
border-radius: 4px;
background-color: #56AEFF;
transform: translate(-0.25rem,-0.25rem);
box-shadow: 0.25rem 0.25rem #000000;
margin-top: 15px;
}
audio::-webkit-media-controls-panel {
background-color: #56AEFF;
}
.texto-audio {
width: 100%;
font-size: 14px;
margin: -25px 0 10px 0;
}
/* Fin de estilos audio */
/* Estilos botones */
.grupo-botones {
position: relative;
bottom: 0;
width: 100%;
}
.button:hover {
color: var(--hover-text);
background: var(--bg);
transform: translate(0rem,0rem);
box-shadow: none;
}
.button:active {
transform: translate(0);
box-shadow: none;
}
.button a{
color: white !important;
background: none !important;
text-decoration-color: white !important;
font-weight: bold !important;
font-family: "OpenDyslexic";
width: 100%;
}
.button a:hover{
color: white !important;
background: none !important;
text-decoration-color: white !important;
font-weight: bold !important;
}
.center {
position: absolute;
top: 25vh;
bottom: 75vh;
left: 40vw;
}
.button {
--bg: #000;
--hover-bg: #A52CDA;
--hover-text: #000000;
color: #ffffff !important;
border: 1px solid var(--bg);
border-radius: 40px;
padding: 0.8em 2em;
transform: translate(-0.25rem,-0.25rem);
background: var(--hover-bg);
box-shadow: 0.25rem 0.25rem var(--bg);
transition: 0.2s;
display: flex !important;
justify-content: center !important;
margin: auto !important;
margin-bottom: 20px !important;
width: 100%;
font-family: OpenDyslexic;
font-size: 16px;
}
/* Fin estilos botones */
[continued]
<font face="OpenDyslexic">
<p style="color: black;">
<span style="color:magenta;">Javier: </span>─Sí, claro, y Don Beppo te contactó con El Tano, en los talleres del ferrocarril, donde conseguiste trabajo en la imprenta, ¿te acordás, Tomassino? ─agrega Javier y recuerda cuando lo fueron a buscar a los talleres y la impresión que se llevó al ver las locomotoras y los ferrocarriles, la placa giratoria y la estación que parecía salida de un juego.
<span style="color:orange;">Tomassino: </span>─Sí, y en el taller escuché la conversación entre dos obreros que hablaban de algo que iba a pasar pronto, a mediados de julio. Algo así como un sabotaje ─dice Tomassino y al recordar la situación palidece un poco.
<img src="https://1930.utec.edu.uy/wp-content/uploads/1930_twine/src/p24.png" alt="Trulli" width="570" height="500">
<div class="grupo-botones">
<button class="button">
[[Nueva Carta ]]
</button>
</div>
<audio controls class="audio-prueba">
<source src="https://1930.utec.edu.uy/wp-content/uploads/1930_twine/src/audios/2.4.m4a">
</audio>
<div class="texto-audio">
<p>
Audio de lectura.
</p>
</div>
[CSS]
/* Estilos imágenes */
img{
border: 4px solid #A52CDA !important;
border-radius: 8px !important;
box-shadow: 0.25rem 0.25rem #000000;
margin-bottom: 20px !important;
}
/* Fin estilos imágenes */
/* Estilos audios */
.audio-prueba {
display: flex !important;
justify-content: center !important;
margin: auto;
margin-bottom: 20px !important;
width: 100%;
border: 1px solid #000000;
border-radius: 4px;
background-color: #56AEFF;
transform: translate(-0.25rem,-0.25rem);
box-shadow: 0.25rem 0.25rem #000000;
margin-top: 15px;
}
audio::-webkit-media-controls-panel {
background-color: #56AEFF;
}
.texto-audio {
width: 100%;
font-size: 14px;
margin: -25px 0 10px 0;
}
/* Fin de estilos audio */
/* Estilos botones */
.grupo-botones {
position: relative;
bottom: 0;
width: 100%;
}
.button:hover {
color: var(--hover-text);
background: var(--bg);
transform: translate(0rem,0rem);
box-shadow: none;
}
.button:active {
transform: translate(0);
box-shadow: none;
}
.button a{
color: white !important;
background: none !important;
text-decoration-color: white !important;
font-weight: bold !important;
font-family: "OpenDyslexic";
width: 100%;
}
.button a:hover{
color: white !important;
background: none !important;
text-decoration-color: white !important;
font-weight: bold !important;
}
.center {
position: absolute;
top: 25vh;
bottom: 75vh;
left: 40vw;
}
.button {
--bg: #000;
--hover-bg: #A52CDA;
--hover-text: #000000;
color: #ffffff !important;
border: 1px solid var(--bg);
border-radius: 40px;
padding: 0.8em 2em;
transform: translate(-0.25rem,-0.25rem);
background: var(--hover-bg);
box-shadow: 0.25rem 0.25rem var(--bg);
transition: 0.2s;
display: flex !important;
justify-content: center !important;
margin: auto !important;
margin-bottom: 20px !important;
width: 100%;
font-family: OpenDyslexic;
font-size: 16px;
}
/* Fin estilos botones */
[continued]
<font face="OpenDyslexic">
<p style="color: black;">
<span style="color:blue;">Narradora: </span> Sin que nadie le diga nada, Javier saca una carta: 1930 Peñarol: El sabotaje, una nueva misión de Erre.
<span style="color:magenta;">Javier: </span> ─¿Quién dice cuál era la misión y cómo se resolvió? ─quiere saber Javier y mira a sus amigos con tanta seriedad que impresiona bastante.
<span style="color:green;">Federica: </span>─Esperen: me acuerdo clarito de lo que pasó. Erre llegó otra vez y me saludó, quiere decir que me reconoció de alguna foto, ejem─ casi grita el Fede muy orgullosa. ─y nos dio una misión súper misteriosa, que no entendimos.
<div style="width: 100%;"><div style="position: relative; padding-bottom: 56.25%; padding-top: 0; height: 0;"><iframe title="1930: el orígen carta 6" frameborder="0" width="1200" height="675" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src="https://view.genially.com/664397b8514557001453f3c4" type="text/html" allowscriptaccess="always" allowfullscreen="true" scrolling="yes" allownetworking="all"></iframe>
</div>
</div>
<br>
<div class="grupo-botones">
<button class="button">
[[ Conoce la misión ]]
</button>
</div>
<audio controls class="audio-prueba">
<source src="https://1930.utec.edu.uy/wp-content/uploads/1930_twine/src/audios/2.6.m4a">
</audio>
<div class="texto-audio">
<p>
Audio de lectura.
</p>
</div>
[CSS]
/* Estilos imágenes */
img{
border: 4px solid #A52CDA !important;
border-radius: 8px !important;
box-shadow: 0.25rem 0.25rem #000000;
margin-bottom: 20px !important;
}
/* Fin estilos imágenes */
/* Estilos audios */
.audio-prueba {
display: flex !important;
justify-content: center !important;
margin: auto;
margin-bottom: 20px !important;
width: 100%;
border: 1px solid #000000;
border-radius: 4px;
background-color: #56AEFF;
transform: translate(-0.25rem,-0.25rem);
box-shadow: 0.25rem 0.25rem #000000;
margin-top: 15px;
}
audio::-webkit-media-controls-panel {
background-color: #56AEFF;
}
.texto-audio {
width: 100%;
font-size: 14px;
margin: -25px 0 10px 0;
}
/* Fin de estilos audio */
/* Estilos botones */
.grupo-botones {
position: relative;
bottom: 0;
width: 100%;
}
.button:hover {
color: var(--hover-text);
background: var(--bg);
transform: translate(0rem,0rem);
box-shadow: none;
}
.button:active {
transform: translate(0);
box-shadow: none;
}
.button a{
color: white !important;
background: none !important;
text-decoration-color: white !important;
font-weight: bold !important;
font-family: "OpenDyslexic";
width: 100%;
}
.button a:hover{
color: white !important;
background: none !important;
text-decoration-color: white !important;
font-weight: bold !important;
}
.center {
position: absolute;
top: 25vh;
bottom: 75vh;
left: 40vw;
}
.button {
--bg: #000;
--hover-bg: #A52CDA;
--hover-text: #000000;
color: #ffffff !important;
border: 1px solid var(--bg);
border-radius: 40px;
padding: 0.8em 2em;
transform: translate(-0.25rem,-0.25rem);
background: var(--hover-bg);
box-shadow: 0.25rem 0.25rem var(--bg);
transition: 0.2s;
display: flex !important;
justify-content: center !important;
margin: auto !important;
margin-bottom: 20px !important;
width: 100%;
font-family: OpenDyslexic;
font-size: 16px;
}
/* Fin estilos botones */
[continued]
<font face="OpenDyslexic">
<p style="color: black;">
<span style="color:magenta;">Javier: </span> Erre nos dio a entender que algo lo preocupaba, lo que nos había contado Tomassino. Iba a ser en la mitad del mundial, pero no sabíamos cuándo. Así que al Fede se le ocurrió la brillante idea de revisar los diarios de esas fechas, en el anexo del Palacio Legislativo para ver si había noticias sobre un sabotaje durante el mundial. Y allí fuimos ─agrega Javier.
<span style="color:blue;">Narradora: </span>Los saboteadores eran obreros uruguayos que iban a poner explosivos en la placa giratoria de los ferrocarriles para denunciar a Gran Bretaña y llamar la atención de la prensa mundial.
<span style="color:green;">Federica: </span>─Y revisamos los diarios, pero no había nada. Así que eso quería decir que Tomassino había evitado el sabotaje y así se salvó tu tatarabuelo, Javier. Si no, era un problemón ─aplaude Fede y mira a Tomassino como si fuera un superhéroe.
<span style="color:red;">Antonella: </span>─Entonces, que cuente mi hermano ─sugiere Antonella y lo mira con devoción.
<div class="grupo-botones">
<button class="button">
[[ ¿Cómo se resolvió el sabotaje? ]]
</button>
</div>
<audio controls class="audio-prueba">
<source src="https://1930.utec.edu.uy/wp-content/uploads/1930_twine/src/audios/2.7.m4a">
</audio>
<div class="texto-audio">
<p>
Audio de lectura.
</p>
</div>
[CSS]
/* Estilos imágenes */
img{
border: 4px solid #A52CDA !important;
border-radius: 8px !important;
box-shadow: 0.25rem 0.25rem #000000;
margin-bottom: 20px !important;
}
/* Fin estilos imágenes */
/* Estilos audios */
.audio-prueba {
display: flex !important;
justify-content: center !important;
margin: auto;
margin-bottom: 20px !important;
width: 100%;
border: 1px solid #000000;
border-radius: 4px;
background-color: #56AEFF;
transform: translate(-0.25rem,-0.25rem);
box-shadow: 0.25rem 0.25rem #000000;
margin-top: 15px;
}
audio::-webkit-media-controls-panel {
background-color: #56AEFF;
}
.texto-audio {
width: 100%;
font-size: 14px;
margin: -25px 0 10px 0;
}
/* Fin de estilos audio */
/* Estilos botones */
.grupo-botones {
position: relative;
bottom: 0;
width: 100%;
}
.button:hover {
color: var(--hover-text);
background: var(--bg);
transform: translate(0rem,0rem);
box-shadow: none;
}
.button:active {
transform: translate(0);
box-shadow: none;
}
.button a{
color: white !important;
background: none !important;
text-decoration-color: white !important;
font-weight: bold !important;
font-family: "OpenDyslexic";
width: 100%;
}
.button a:hover{
color: white !important;
background: none !important;
text-decoration-color: white !important;
font-weight: bold !important;
}
.center {
position: absolute;
top: 25vh;
bottom: 75vh;
left: 40vw;
}
.button {
--bg: #000;
--hover-bg: #A52CDA;
--hover-text: #000000;
color: #ffffff !important;
border: 1px solid var(--bg);
border-radius: 40px;
padding: 0.8em 2em;
transform: translate(-0.25rem,-0.25rem);
background: var(--hover-bg);
box-shadow: 0.25rem 0.25rem var(--bg);
transition: 0.2s;
display: flex !important;
justify-content: center !important;
margin: auto !important;
margin-bottom: 20px !important;
width: 100%;
font-family: OpenDyslexic;
font-size: 16px;
}
/* Fin estilos botones */
[continued]
<font face="OpenDyslexic">
<p style="color: black;">
<span style="color:orange;">Tomassino: </span>─Hablé con el Tano y le conté lo que había escuchado, en el taller gráfico sobre algo que se estaba planeando. Como el tatarabuelo de Javier era el jefe de la cuadrilla de la placa giratoria, iba a quedar como culpable. Así que lo esperó a la entrada del taller, antes de que sonara la campana y lo invitó a tomar un café. Allí le dio a entender que era mejor que avisara que estaba enfermo. Creo que tu tatarabuelo se dio cuenta de lo que pensaba el Tano y aceptó el favor. A cambio de eso, renunció a trabajar en los talleres. Y en ese momento, aparecieron los carros de la policía ─cuenta Tomassino con los ojos brillantes.
<span style="color:magenta;">Javier: </span>─La verdad es que nunca vamos a saber si mi tatarabuelo estaba al tanto del sabotaje, pero al menos no fue preso. De no haber sido así, la historia de mi familia Scalante sería muy distinta ─comenta Javier aliviado.
<div class="grupo-botones">
<button class="button">
[[ Final ]]
</button>
</div>
<audio controls class="audio-prueba">
<source src="https://1930.utec.edu.uy/wp-content/uploads/1930_twine/src/audios/2.8.m4a">
</audio>
<div class="texto-audio">
<p>
Audio de lectura.
</p>
</div>
[CSS]
/* Estilos imágenes */
img{
border: 4px solid #A52CDA !important;
border-radius: 8px !important;
box-shadow: 0.25rem 0.25rem #000000;
margin-bottom: 20px !important;
}
/* Fin estilos imágenes */
/* Estilos audios */
.audio-prueba {
display: flex !important;
justify-content: center !important;
margin: auto;
margin-bottom: 20px !important;
width: 100%;
border: 1px solid #000000;
border-radius: 4px;
background-color: #56AEFF;
transform: translate(-0.25rem,-0.25rem);
box-shadow: 0.25rem 0.25rem #000000;
margin-top: 15px;
}
audio::-webkit-media-controls-panel {
background-color: #56AEFF;
}
.texto-audio {
width: 100%;
font-size: 14px;
margin: -25px 0 10px 0;
}
/* Fin de estilos audio */
/* Estilos botones */
.grupo-botones {
position: relative;
bottom: 0;
width: 100%;
}
.button:hover {
color: var(--hover-text);
background: var(--bg);
transform: translate(0rem,0rem);
box-shadow: none;
}
.button:active {
transform: translate(0);
box-shadow: none;
}
.button a{
color: white !important;
background: none !important;
text-decoration-color: white !important;
font-weight: bold !important;
font-family: "OpenDyslexic";
width: 100%;
}
.button a:hover{
color: white !important;
background: none !important;
text-decoration-color: white !important;
font-weight: bold !important;
}
.center {
position: absolute;
top: 25vh;
bottom: 75vh;
left: 40vw;
}
.button {
--bg: #000;
--hover-bg: #A52CDA;
--hover-text: #000000;
color: #ffffff !important;
border: 1px solid var(--bg);
border-radius: 40px;
padding: 0.8em 2em;
transform: translate(-0.25rem,-0.25rem);
background: var(--hover-bg);
box-shadow: 0.25rem 0.25rem var(--bg);
transition: 0.2s;
display: flex !important;
justify-content: center !important;
margin: auto !important;
margin-bottom: 20px !important;
width: 100%;
font-family: OpenDyslexic;
font-size: 16px;
}
/* Fin estilos botones */
[continued]
<font face="OpenDyslexic">
<p style="color: black;">
<span style="color:blue;">Narradora: </span> Los cuatro se ríen, Antonella todavía con cierta timidez, pero los demás encantados con recordar todas esas historias. Tomassino agarra la caja del juego y le echa una mirada, sin prestar demasiada atención a la ilustración que la decora. Federica saca una carta, todavía entre risas, y se la queda mirando, muy sorprendida. No creyó que el juego también incluyera a…
En la carta solo se ve un logo, precioso, irisado, de la torre de los Homenajes, bordeada por triángulos de distintos colores. Cuando los movés, parece que fueran el arcoíris. Una belleza realmente. Entonces, Tomassino señala el logo que hay en la tapa del juego.
<span style="color:orange;">Tomassino: </span> ─¿Qué significa esto? ─quiere saber, con mucha curiosidad.
<span style="color:magenta;">Javier </span> y <span style="color:green;">Federica: </span> ─Aaaahh ─dicen Javier y Federica a la vez, y se ríen con fuerza.
<div class="grupo-botones">
<button class="button">
[[ Capítulo 3 ]]
</button>
</div>
<div class="grupo-botones">
<button class="button">
[[ Revive el CapÍtulo 2 ]]
</button>
</div>
<audio controls class="audio-prueba">
<source src="https://1930.utec.edu.uy/wp-content/uploads/1930_twine/src/audios/2.9.m4a">
</audio>
<div class="texto-audio">
<p>
Audio de lectura.
</p>
</div>
[CSS]
/* Estilos imágenes */
img{
border: 4px solid #A52CDA !important;
border-radius: 8px !important;
box-shadow: 0.25rem 0.25rem #000000;
margin-bottom: 20px !important;
}
/* Fin estilos imágenes */
/* Estilos audios */
.audio-prueba {
display: flex !important;
justify-content: center !important;
margin: auto;
margin-bottom: 20px !important;
width: 100%;
border: 1px solid #000000;
border-radius: 4px;
background-color: #56AEFF;
transform: translate(-0.25rem,-0.25rem);
box-shadow: 0.25rem 0.25rem #000000;
margin-top: 15px;
}
audio::-webkit-media-controls-panel {
background-color: #56AEFF;
}
.texto-audio {
width: 100%;
font-size: 14px;
margin: -25px 0 10px 0;
}
/* Fin de estilos audio */
/* Estilos botones */
.grupo-botones {
position: relative;
bottom: 0;
width: 100%;
}
.button:hover {
color: var(--hover-text);
background: var(--bg);
transform: translate(0rem,0rem);
box-shadow: none;
}
.button:active {
transform: translate(0);
box-shadow: none;
}
.button a{
color: white !important;
background: none !important;
text-decoration-color: white !important;
font-weight: bold !important;
font-family: "OpenDyslexic";
width: 100%;
}
.button a:hover{
color: white !important;
background: none !important;
text-decoration-color: white !important;
font-weight: bold !important;
}
.center {
position: absolute;
top: 25vh;
bottom: 75vh;
left: 40vw;
}
.button {
--bg: #000;
--hover-bg: #A52CDA;
--hover-text: #000000;
color: #ffffff !important;
border: 1px solid var(--bg);
border-radius: 40px;
padding: 0.8em 2em;
transform: translate(-0.25rem,-0.25rem);
background: var(--hover-bg);
box-shadow: 0.25rem 0.25rem var(--bg);
transition: 0.2s;
display: flex !important;
justify-content: center !important;
margin: auto !important;
margin-bottom: 20px !important;
width: 100%;
font-family: OpenDyslexic;
font-size: 16px;
}
/* Fin estilos botones */
[continued]