Skip to content

Instantly share code, notes, and snippets.

@delineas
Created January 24, 2024 20:17
Show Gist options
  • Save delineas/b08ede6c9b38bb5bbc0474e991d65162 to your computer and use it in GitHub Desktop.
Save delineas/b08ede6c9b38bb5bbc0474e991d65162 to your computer and use it in GitHub Desktop.
Reto: Apuesta al clic
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Apuesta al clic</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 20px;
}
/* Estilo para el título */
h1 {
font-size: 2rem;
margin-bottom: 20px;
}
/* Estilo para el botón rojo */
.red-button {
background-color: red;
color: white;
padding: 20px;
border-radius: 50%; /* Hace el botón redondo */
font-size: 1.5rem;
border: none;
cursor: pointer;
transition: transform 0.3s ease, background-color 0.3s ease; /* Transición suave */
}
/* Efecto hover para el botón rojo */
.red-button:hover {
background-color: darkred;
color: yellow;
transform: scale(1.5); /* Escala el botón */
}
/* Estilo para el contador */
.counter {
font-size: 1.5rem;
margin: 20px;
}
/* Estilo para el botón de apuesta */
.bet-button {
background-color: #4CAF50;
color: white;
padding: 15px 30px;
font-size: 1.5rem;
border: none;
cursor: pointer;
}
.bet-button:hover {
background-color: darkgreen;
}
</style>
</head>
<body>
<h1>Apuesta al clic</h1>
<!-- Contador de clics -->
<div class="counter">
Clics: <span id="counter">0</span>
</div>
<!-- Botón rojo grande y redondo -->
<button class="red-button">Clic</button>
<hr />
<!-- Botón para hacer la apuesta con emojis -->
<button class="bet-button">🎲 Apuesta 🎲</button>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment