-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
62 lines (48 loc) · 2.63 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!DOCTYPE html> <!-- Declares the document type as HTML5 -->
<html lang="en"> <!-- Sets the language of the document to English -->
<head>
<meta charset="utf-8"> <!-- Defines character encoding as UTF-8 for broad character support -->
<!-- Links an external CSS file for styling -->
<link rel="stylesheet" href="styles.css">
<!-- Imports the Inconsolata font from Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@500&display=swap"
rel="stylesheet">
<!-- Loads the Anime.js library for animations -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.js"></script>
<!-- Loads the JS Confetti library for confetti effects -->
<script src="https://cdn.jsdelivr.net/npm/js-confetti@latest/dist/js-confetti.browser.js"></script>
<!-- Loads jQuery for easier JavaScript manipulation -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
<!-- Links an external JavaScript file for interactivity -->
<script src="index.js"></script>
<title>Valentine?</title> <!-- Sets the title of the page displayed in the browser tab -->
</head>
<body>
<div id="main"> <!-- Main container for the page content -->
<section id="question"> <!-- Section displaying the main question -->
<h1>Will you be my Valentine?</h1> <!-- Main heading -->
<img id="cat-heart" src="resources/img/cat-with-heart.jpg" alt="Cat with heart">
<!-- Image of a cat with a heart -->
</section>
<p class="example-class"></p>
<p id="example-id"></p>
<section id="answers"> <!-- Section containing answer buttons -->
<div id="yes-button">
<button id="yes-btn">Yes</button> <!-- Button for "Yes" response -->
</div>
<div id="no-button">
<button id="no-btn">No</button> <!-- Button for "No" response -->
</div>
</section>
<section id="celebration" class="hidden"> <!-- Hidden section for celebration if "Yes" is clicked -->
<h1>Happy Valentine's Day Family & Friends!!!! LETS GOOOOOOOOOOOO</h1> <!-- Excited response -->
<!-- Embedded GIF from Giphy -->
<iframe id="cat-gif" src="https://giphy.com/embed/GeimqsH0TLDt4tScGw" width="480" height="320"
frameBorder="0" class="giphy-embed" allowFullScreen></iframe>
</section>
<div id="reset-container" class="hidden"> <!-- Hidden reset button to restart the interaction -->
<button id="reset-btn">Reset</button>
</div>
</div>
</body>
</html>