Scribd
Upload
4 views4 pages

Document. HTML

This HTML document creates an interactive web page with a romantic theme, asking a question about love. It features a styled container with buttons for 'Yes' and 'No', where clicking 'Yes' displays a loving message, and 'No' moves the button randomly on the screen. The design includes a gradient background and responsive elements for an engaging user experience.

Uploaded by

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

Document. HTML

This HTML document creates an interactive web page with a romantic theme, asking a question about love. It features a styled container with buttons for 'Yes' and 'No', where clicking 'Yes' displays a loving message, and 'No' moves the button randomly on the screen. The design includes a gradient background and responsive elements for an engaging user experience.

Uploaded by

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

<!

DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”UTF-8”>

<meta name=”viewport” content=”width=device-width, initial-


scale=1.0”>

<title>A Question For You...</title>

<style>

Body {

Margin: 0;

Padding: 0;

Height: 100vh;

Display: flex;

Flex-direction: column;

Justify-content: center;

Align-items: center;

Background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 99%,


#fecfef 100%);

Font-family: ‘Arial’, sans-serif;

Text-align: center;

Overflow: hidden; /* Prevents scrollbars when the button moves */

.container {

Background: rgba(255, 255, 255, 0.2);

Padding: 40px;

Border-radius: 20px;

Box-shadow: 0 4px 15px rgba(0,0,0,0.1);

Backdrop-filter: blur(10px);

z-index: 1;

}
H1 { color: #fff; font-size: 3em; margin-bottom: 10px; }

H2 { color: #fff; font-size: 2em; margin-top: 0; }

P { color: #fff; font-size: 1.2em; font-weight: bold; }

.buttons {

Margin-top: 30px;

Display: flex;

Justify-content: center;

Gap: 20px;

Button {

Padding: 12px 30px;

Font-size: 1.2em;

Border: none;

Border-radius: 25px;

Cursor: pointer;

Font-weight: bold;

Transition: 0.2s;

#yesBtn {

Background-color: white;

Color: #ff9a9e;

Box-shadow: 0 4px 10px rgba(0,0,0,0.1);

#yesBtn:hover { transform: scale(1.1); }

#noBtn {

Background-color: transparent;

Color: white;

Border: 2px solid white;


Position: relative; /* Changed by JavaScript on hover */

</style>

</head>

<body>

<div class=”container” id=”mainCard”>

<p>From: [Your Name] 💘</p>

<h1>Will you forever be mine?</h1>

<h2>[Her Name] 💝</h2>

<p>Babyyyyyy, loveeee youuuu coohhh</p>

<p style=”font-size: 0.9em; font-weight: normal;”>Shhh, this is a


you-only game 🤫</p>

<div class=”buttons”>

<button id=”yesBtn” onclick=”sayYes()”>Yes ❤️</button>

<button id=”noBtn” onmouseover=”dodge()”>No 🥶</button>

</div>

</div>

<script>

Function dodge() {

Const noBtn = [Link](‘noBtn’);

// Change position to absolute so it can break out of the flexbox


layout

[Link] = ‘absolute’;

// Calculate random coordinates within the window

Const randomX = [Link]() * ([Link] –


[Link]);
Const randomY = [Link]() * ([Link] –
[Link]);

// Move the button

[Link] = randomX + ‘px’;

[Link] = randomY + ‘px’;

Function sayYes() {

// What happens when she clicks Yes

Const card = [Link](‘mainCard’);

[Link] = “<h1>Yay! ❤️</h1><h2>I love you


too!</h2><p>Screenshot this and send it to me!</p>”;

</script>

</body>

</html>

You might also like