diff --git a/css/juego.css b/css/juego.css new file mode 100644 index 0000000..252da22 --- /dev/null +++ b/css/juego.css @@ -0,0 +1,119 @@ +* { + box-sizing: border-box; + margin: 0; + padding: 0; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + } + + body { + background-color: #f2f2f2; + display: flex; + flex-direction: column; + height: 100vh; + justify-content: space-between; + padding: 20px; + } + + /* Área de la Pregunta */ + .question-container { + background-color: white; + border-radius: 8px; + box-shadow: 0 4px 6px rgba(0,0,0,0.1); + padding: 30px; + text-align: center; + font-size: 24px; + font-weight: bold; + color: #333; + margin-bottom: 20px; + flex-grow: 0; + } + + /* Cuadrícula de Respuestas */ + .answers-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 15px; + flex-grow: 1; + } + + /* Botones de Respuesta Básicos */ + .btn-answer { + border: none; + border-radius: 8px; + color: white; + font-size: 22px; + font-weight: bold; + display: flex; + align-items: center; + padding: 20px; + cursor: pointer; + transition: transform 0.1s ease, filter 0.1s ease; + box-shadow: 0 6px 0 rgba(0,0,0,0.2); + text-align: left; + } + + .btn-answer:active { + transform: translateY(4px); + box-shadow: 0 2px 0 rgba(0,0,0,0.2); + } + + /* Variaciones de Color y Formas */ + .red { + background-color: #e21b3c; + } + .red:hover { filter: brightness(1.1); } + + .blue { + background-color: #1368ce; + } + .blue:hover { filter: brightness(1.1); } + + .yellow { + background-color: #d89e00; + } + .yellow:hover { filter: brightness(1.1); } + + .green { + background-color: #26890c; + } + .green:hover { filter: brightness(1.1); } + + /* Iconos Geométricos Simulados con CSS */ + .shape { + display: inline-block; + width: 30px; + height: 30px; + margin-right: 20px; + flex-shrink: 0; + background-color: white; + } + + .triangle { + clip-path: polygon(50% 0%, 0% 100%, 100% 100%); + } + + .diamond { + clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); + } + + .circle { + border-radius: 50%; + } + + .square { + /* Por defecto es un cuadrado */ + } + + /* Adaptabilidad para Móviles */ + @media (max-width: 768px) { + .answers-grid { + grid-template-columns: 1fr; + } + .question-container { + font-size: 20px; + padding: 20px; + } + .btn-answer { + font-size: 18px; + } + } \ No newline at end of file diff --git a/juego.php b/juego.php new file mode 100644 index 0000000..0a3bfcd --- /dev/null +++ b/juego.php @@ -0,0 +1,45 @@ + + + + + + + Proyecto Trivial + + + + + +
+ ¿Cuál es el planeta más grande de nuestro sistema solar? +
+ + +
+ + + + + + + +
+ + + + + \ No newline at end of file