Scribd
Upload
8 views3 pages

Presentinho

This document is an HTML webpage designed to display a meme with the question 'Uma mamadinha?' and two buttons for user interaction. One button links to a YouTube video, while the other button moves randomly around the screen when hovered over or touched. The page is styled for a responsive design with a dark background and centered content.

Uploaded by

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

Presentinho

This document is an HTML webpage designed to display a meme with the question 'Uma mamadinha?' and two buttons for user interaction. One button links to a YouTube video, while the other button moves randomly around the screen when hovered over or touched. The page is styled for a responsive design with a dark background and centered content.

Uploaded by

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

<!

DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
width: 100vw;
}
a{
text-decoration: none;
color: blue;
}
.box {
font-size: 20px;
color: white;
height: 100vh; /* Ocupa 100% da altura da tela */
width: 100vw; /* Ocupa 100% da largura da tela */
background: #191919;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.box img {
max-width: 100%;
height: auto;
display: block;
}
.buttons-container {
display: flex;
justify-content: space-around;
width: 100%;
max-width: 200px;
margin-top: 20px;
}
button {
height: 40px;
width: 60px;
background-color: white;
color: blue;
font-weight: bold;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s, transform 0.3s;
}
button:hover {
background-color: #eee;
transform: scale(1.1);
}
</style>
</head>
<body>
<div class="box">
<img src="https://content.imageresizer.com/images/memes/morpheus-matrix-blue-pill-red-pill-meme-6.jpg">
<h1>Uma mamadinha?</h1>
<div class="buttons-container">
<button>
<a href="https://www.youtube.com/watch?v=gsSo1ra9y2E" target="_blank">Sim</a>
</button>
<button id="no">Não</button>
</div>
</div>
<script>
const button = document.getElementById('no');

// Definindo os limites para evitar que o botão vá para fora da tela


function moveButton() {
const maxHeight = window.innerHeight - 50;
const maxWidth = window.innerWidth - 50;

const randomY = Math.random() * maxHeight;


const randomX = Math.random() * maxWidth;

button.style.position = "absolute";
button.style.top = `${randomY}px`;
button.style.left = `${randomX}px`;
}

// Evento de mouseover (desktop) e touchstart (mobile) para mover o botão


button.addEventListener('mouseover', moveButton);
button.addEventListener('touchstart', function(e) {
e.preventDefault(); // Evitar que o botão seja clicado no toque
moveButton();
});
</script>
</body>
</html>

You might also like