Lo que hicimos en el aula

<div class="container">
    <div class="container__contenido">
        <div class="container__informaciones">
            <div class="container__texto">
                <h1></h1>
                <p class="texto__parrafo"></p>
            </div>
            <input type="number" min="1" max="10" class="container__input">
            <div class="chute container__botones">
                <button class="container__boton">Intentar</button>
                <button class="container__boton" id="reiniciar" disabled>Nuevo juego</button>
            </div>
        </div>
        <img src="./img/ia.png" alt="Una persona mirando a la izquierda" class="container__imagen-persona" />
    </div>
</div>




<script src="app.js" defer></script>

css

/* Importación de fuentes desde Google Fonts */ @import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@700&family=Inter:wght@400;700&display=swap');

/* Estilos generales */

• { box-sizing: border-box; margin: 0; padding: 0; color: white; }

body { background: linear-gradient(#1354A5 0%, #041832 33.33%, #041832 66.67%, #01080E 100%); height: 100vh; display: flex; align-items: center; justify-content: center; }

body::before { background-image: url("img/code.png"); background-repeat: no-repeat; background-position: right; content: ""; display: block; position: absolute; width: 100%; height: 100%; opacity: 0.4; }

.container { width: 1200px; height: 600px; display: flex; align-items: center; justify-content: space-between; border-radius: 24px; border: 1px solid #1875E8; box-shadow: 4px 4px 20px 0px rgba(1, 8, 14, 0.15); background-image: url("img/Ruido.png"); background-size: 100% 100%; position: relative; }

.container__contenido { display: flex; align-items: center; position: absolute; bottom: 0; }

.container__informaciones { flex: 1; padding: 3rem; }

.container__boton { border-radius: 16px; background: #1875E8; padding: 16px 24px; width: 100%; font-size: 24px; font-weight: 700; border: none; margin-top: 2rem; }

.container__boton:disabled { background: #898989; }

.container__texto { margin: 16px 0 16px 0; }

.container__texto-azul { color: #1875E8; }

.container__input { width: 100%; height: 72px; border-radius: 16px; background-color: #FFF; border: none; color: #1875E8; padding: 2rem; font-size: 24px; font-weight: 700; font-family: 'Inter', sans-serif; }

.container__botones { display: flex; gap: 2em; }

h1 { font-family: 'Chakra Petch', sans-serif; font-size: 72px; padding-bottom: 3rem; }

p, button { font-family: 'Inter', sans-serif; }

.texto__parrafo { font-size: 32px; font-weight: 400; }