Scribd
Upload
11 views2 pages

Luh - HTML 5

Uploaded by

t3ixeira2008
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
11 views2 pages

Luh - HTML 5

Uploaded by

t3ixeira2008
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Um Pedido Especial</title>
<style>
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #ffcccb; /* Rosa suave */
color: #b22222; /* Vermelho mais delicado */
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
text-align: center;
}

#container {
max-width: 600px;
}

h1 {
font-size: 28px;
margin-bottom: 20px;
}

#buttons {
margin-top: 20px;
}

button {
padding: 12px 24px;
font-size: 18px;
border: none;
border-radius: 25px;
cursor: pointer;
margin: 10px;
transition: all 0.3s ease-in-out;
}

#sim {
background-color: #ff69b4; /* Rosa vivo */
color: white;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
}

#sim:hover {
background-color: #ff85c2;
}

#nao {
background-color: #f0f0f0;
color: #b22222;
position: absolute;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
}

#nao:hover {
background-color: #ffe4e1;
}

#message {
display: none;
font-size: 22px;
margin-top: 20px;
color: #b22222;
}
</style>
<script>
function moveNaoButton() {
const naoButton = document.getElementById('nao');
const screenWidth = window.innerWidth;
const screenHeight = window.innerHeight;

const newX = Math.random() * (screenWidth - naoButton.offsetWidth);


const newY = Math.random() * (screenHeight - naoButton.offsetHeight);

naoButton.style.left = `${newX}px`;
naoButton.style.top = `${newY}px`;
}

function showMessage() {
const message = document.getElementById('message');
message.style.display = 'block';

const buttons = document.getElementById('buttons');


buttons.style.display = 'none';
}
</script>
</head>
<body>
<div id="container">
<h1>Oi, linda! Só uma pergunta… Será que eu ganharia um beijo seu?</h1>
<div id="buttons">
<button id="sim" onclick="showMessage()">Sim</button>
<button id="nao" onclick="moveNaoButton()">Não</button>
</div>
<div id="message">
<p>Que incrível! Já estamos a um passo de algo especial. <br> Só falta
a gente marcar de sair! 💖</p>
</div>
</div>
</body>
</html>

You might also like