nuevo formato

AxelCotonGutierrez · Jan 25, 2024 · a9caf71 · a9caf71
1 parent 158798f
commit a9caf71
Show file tree

Hide file tree

Showing 8 changed files with 282 additions and 61 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # Contar hasta 10 usando dedos.
 
-![Juego de los dedos](https://axelcotongutierrez.github.io/learningmathematicas/assets/images//posts/Contar10/jcontar10de.jpg)
+![Juego de los dedos](https://axelcotongutierrez.github.io/learningmathematicas/assets/images//posts/04JContar10/jcontar10de.jpg)
 
 Dentro del blog: https://axelcotongutierrez.github.io/learningmathematicas/
 

diff --git a/cb.jpg b/cb.jpg
diff --git a/contar5.css b/contar5.css
@@ -7,22 +7,22 @@
 }
 
 body {
-  max-height: 80%;
   text-align: center;
   color: #0c4fe1;
+  height: 100%; 
 }
 
 h1 {
-  color: rgb(10, 10, 10);
+  color: #EABE3F;
   padding: 50px;
   font-size: 40px;
 }
 
 .container {
-  background-color: #ddff62;
+  background-color: none;
   max-width: 80%;
   margin: auto;
-  border: 3px solid #000;
+  border: 3px solid #EABE3F;
   border-radius: 20px;
   display: flex;
   flex-direction: column;
@@ -34,10 +34,10 @@ h1 {
 }
 
 .container2 {
-  background-color: #f0f3e9;
+  background-color: none;
   max-width: 80%;
   margin: auto;
-  border: 3px solid #000;
+  border: 3px solid #EABE3F;
   border-radius: 20px;
   display: flex;
   flex-direction: column;
@@ -49,11 +49,25 @@ h1 {
 }
 
 .textosuperior {
-  font-size: 30px;
+  font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 20px;
+  justify-content: center;
+  align-items: center;
+  color:black;
+  padding-right: 0.5em;
+  padding-left: 0.5em;
+}
+.pregunta {
+  font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 35px;
   justify-content: center;
   align-items: center;
+  padding-right: 0.5em;
+  padding-left: 0.5em;
 }
 
+
+
 .msj {
   font-size: 30px;
   height: 30px;
@@ -63,15 +77,16 @@ h1 {
   margin-top: 10px;
 }
 
+
 .guess-button {
-  width: 75px;
-  height: 75px;
+  width: 100px;
+  height: 100px;
   border: 2px solid #000;
-  font-size: 38px;
+  font-size: 50px;
   margin-bottom: 20px;
   border-radius: 50%;
   cursor: pointer;
-  background-color: #000;
+  background-color: #4285f4;
   color: white;
   display: inline-flex;
   flex-wrap: nowrap;
@@ -81,10 +96,10 @@ h1 {
 
 #play-again-button {
   background-color: #4285f4;
+  border: 2px solid #000;
   color: #fff;
   padding: 10px 20px;
   font-size: 16px;
-  border: none;
   border-radius: 5px;
   cursor: pointer;
   margin-top: 20px;
@@ -112,16 +127,24 @@ h1 {
   font-weight: bold;
 }
 
+/* Nuevo código para redimensionar imágenes en dispositivos móviles */
+
 @media (max-width: 768px) {
-  .container,
-  .container2 {
-    max-width: 90%; /* Ancho completo en dispositivos móviles */
+  .container, .container2 {
+    max-width: 80%; /* Ancho completo en dispositivos móviles */
+    flex-wrap: wrap; /* Permitir envolver las imágenes en múltiples líneas */
   }
 
   .guess-button {
     width: 50px;
     height: 50px;
     font-size: 25px;
     margin-bottom: 10px;
-  }
+}
+
+.pregunta {
+    font-size: 30px;
+}
+
+
 }
diff --git a/githubinverseicon.jpg b/githubinverseicon.jpg
diff --git a/icon.png b/icon.png
diff --git a/index.html b/index.html
@@ -5,40 +5,47 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<title>JUEGO DE LOS DEDOS</title>
 	<link rel="stylesheet" href="contar5.css">
+	<link rel="stylesheet" href="nav.css">
 	<link rel="icon" href="icon.png" type="image/png">
 </head>
 <body>
-	<header><a href="https://axelcotongutierrez.github.io/learningmathematicas/">
-		<img src="https://axelcotongutierrez.github.io/learningmathematicas/assets/images//top.jpg" alt="Blog Mathematica" style="display: block; margin: 0 auto; width: 100%; height: auto;">
-	  </a></header>
-	  <center> 
-		<table >
-		<tr>
-			<td valign="middle">
-				<div style="text-align: center;">
-					<h1>JUEGO DE LOS DEDOS</h1>
-					</div>
-			</td>
-			<td valign="middle">
-				<div style="text-align: center;">
-					<a title="Matemáticas" href="/learningmathematicas/assets/images/pages/figuras/Matematicas.png">
-					  <img class="center-block img-responsive" width="50" alt="Matemáticas" src="/learningmathematicas/assets/images/pages/figuras/Matematicas.png">
-					</a>
-					</div>
-			</td>
-			<td valign="middle">
-				<div style="text-align: center;">
-					<a title="Infantil" href="/learningmathematicas/assets/images/pages/figuras/infantil.png">
-					  <img class="center-block img-responsive" width="50" alt="Infantil" src="/learningmathematicas/assets/images/pages/figuras/infantil.png">
-					</a>
-					</div>
-			</td>
-
-		</tr>
-	  </table></center>
+	<header>
+		<div class="menu">
+			<button class="menu-toggle">☰</button>
+			<ul><li><a href="https://axelcotongutierrez.github.io/learningmathematicas/">
+				<img src="cb.jpg"> 
+			</a></li>
+				<li><a href="/learningmathematicas/projects/Cursos/">Cursos y Materias</a></li>
+				<li><a href="/learningmathematicas/projects/Niveles/">Niveles</a></li>
+				<li><a href="/learningmathematicas/">Entradas</a></li>
+				<li><a href="/learningmathematicas/tags">Etiquetas</a></li>
+				<li><a href="/learningmathematicas/about">Blog</a></li>
+				<li><a href="#">Utilidades</a>
+					<ul>
+						<li><a href="/learningmathematicas/projects/Utilidades/Glosario.html">Glosario</a></li>
+						<li><a href="/learningmathematicas/projects/Utilidades/Programacion.html">Programación</a></li>
+						<li><a href="/learningmathematicas/projects/Utilidades/Soroban.html">Soroban</a></li>
+					</ul>
+				</li>
+			</ul>
+		</div>
+		<a href="https://axelcotongutierrez.github.io/learningmathematicas/">
+			<img src="https://axelcotongutierrez.github.io/learningmathematicas/assets/images//top.jpg" alt="Blog Mathematica" style="display: block; margin: 0 auto; width: 100%; height: auto;">
+		  </a>
+		  <h1 style="text-align: center;">JUEGO DE LOS DEDOS</h1>
+		</header>
+	  <br>
+
+	  <p class="textosuperior" style="text-align: center;">Este contenido se vincula con el 
+		<b><a href="https://axelcotongutierrez.github.io/learningmathematicas/projects/Niveles/#level-7-detail" target="_blank">Nivel 7</a></b>
+		 de la materia <a title="Matemáticas" href="https://axelcotongutierrez.github.io/learningmathematicas/tags/?tag=matemáticas" target="_blank"><img class="center-block img-responsive" width="30" alt="Matemáticas" src="/learningmathematicas/assets/images/pages/figuras/Matematicas.png"></a>
+		 y es perteneciente al curso <a title="Infantil" href="https://axelcotongutierrez.github.io/learningmathematicas/tags/?tag=infantil" target="_blank"><img class="center-block img-responsive" style="display: inline-block;" width="30" alt="Infantil" src="/learningmathematicas/assets/images/pages/figuras/infantil.png"></a>
+		</p>
+	  <br>
+
 
 	<div class="container2">
-	<span class="textosuperior">¿Eres capaz de contar hasta diez usando los dedos de la mano?</span>
+	<span class="pregunta">¿Eres capaz de contar hasta diez usando los dedos de la mano?</span>
 	<button id="play-again-button" style="display: none;">Volver a jugar</button>
 	</div>
 	<div class="container">
@@ -56,24 +63,32 @@ <h1>JUEGO DE LOS DEDOS</h1>
 
 		</div>
 
-			<div id="image-container"></div>
-			<span class="msj" id="result">
-				<!-- Desplegamos el mensaje "Excelente o Inténtalo de nuevo"-->
-
-			 </span>
-			 <span class="msj" id="score">
-
-
-			 </span>
-		</div>
+		<div id="image-container"></div>
+		<span class="msj" id="result">
 
+
+		 </span>
+		 <br>
+		 <span class="msj" id="score">
+
+
+		 </span>
 	</div>
 
-	<script src="contar5.js"></script>
-	<!-- Llamamos a Java"-->
-	<br>
-	<div style="width: 80%; margin: 0 auto;">
-	<a href="https://commons.wikimedia.org/wiki/File:Index_finger_%3D_attention.JPG">Imágenes: Pogrebnoj-Alexandroff</a>, <a href="https://creativecommons.org/licenses/by-sa/3.0">CC BY-SA 3.0</a>, via Wikimedia Commons
+
+
+<script src="contar5.js"></script>
+<!-- Llamamos a Java"-->
+<br>
+<div style="width: 80%; margin: 0 auto;">
+<a href="https://commons.wikimedia.org/wiki/File:Index_finger_%3D_attention.JPG">Imágenes: Pogrebnoj-Alexandroff</a>, <a href="https://creativecommons.org/licenses/by-sa/3.0">CC BY-SA 3.0</a>, via Wikimedia Commons
 </div>
+<br>
+<footer class="footer">
+	<ul class="footer-links">
+		<li><a href="http://github.com/AxelCotonGutierrez"> <img src="githubinverseicon.jpg"></a></li>
+		<li><a href="https://www.youtube.com/@learningmathematicas"> <img src="youtubeinverseicon.jpg"></i></a></li>
+	</ul>
+</footer>
 </body>
 </html>