<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ты будешь моей девушкой?</title>
<style>
body {
text-align: center;
font-family: Arial, sans-serif;
background-color: #ffe4e1;
transition: background 0.5s;
}
.container {
margin-top: 50px;
}
.bear {
width: 200px;
}
.buttons {
margin-top: 20px;
}
button {
padding: 10px 20px;
font-size: 18px;
margin: 10px;
cursor: pointer;
border: none;
border-radius: 5px;
transition: 0.3s;
}
.yes {
background-color: #4CAF50;
color: white;
}
.no {
background-color: #f44336;
color: white;
position: absolute;
}
</style>
</head>
<body>
<div class="container">
<h1>Ты будешь моей девушкой?</h1>
<img src="https://i.imgur.com/JyHjzay.png" alt="Мишка" class="bear">
<div class="buttons">
<button class="yes" onclick="alert('Ура! ?')">Да</button>
<button class="no" onmouseover="moveButton()">Нет</button>
</div>
</div>
<script>
function moveButton() {
let button = document.querySelector('.no');
let x = Math.random() * (window.innerWidth - button.offsetWidth);
let y = Math.random() * (window.innerHeight - button.offsetHeight);
button.style.left = x + 'px';
button.style.top = y + 'px';
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ты будешь моей девушкой?</title>
<style>
body {
text-align: center;
font-family: Arial, sans-serif;
background-color: #ffe4e1;
transition: background 0.5s;
}
.container {
margin-top: 50px;
}
.bear {
width: 200px;
/* Здесь можно добавить дополнительные стили, например: */
height: auto;
margin: 20px auto;
}
</style>
</head>
<body>
<div class="container">
<h1>Привет!</h1>
<p>Ты будешь моей девушкой?</p>
<img src="bear.jpg" alt="Милый медведь" class="bear">
</div>
</body>
</html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ты будешь моей девушкой?</title>
<style>
body {
text-align: center;
font-family: Arial, sans-serif;
background-color: #ffe4e1;
transition: background 0.5s;
}
.container {
margin-top: 50px;
}
.bear {
width: 200px;