-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathpopup.html
100 lines (89 loc) · 3.15 KB
/
popup.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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<!--
This HTML file represents a popup container with a coffee image and banking information.
It includes styles for the popup container, the popup text, and the popup image.
The popup is triggered when the user hovers over the container.
The banking information is displayed in the popup text.
The coffee image is displayed within the popup container.
The logic for handling the popup is implemented in an external JavaScript file.
-->
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>U-Cursedn't</title>
<style>
/* Styles for the popup container */
.popup {
position: relative;
display: inline-block;
cursor: pointer;
}
/* Styles for the popup text */
.popup .popuptext {
visibility: hidden;
width: 200px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 15px 0;
position: absolute;
z-index: 1;
bottom: 125%; /* Positions the popup */
left: 50%;
margin-left: -100px;
opacity: 0;
transition: opacity 0.3s;
}
/* Styles for the popup arrow */
.popup .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Show the popup when hovering over the container */
.popup:hover .popuptext {
visibility: visible;
opacity: 1;
}
/* Styles for the popup image */
.popup img {
width: 128px;
height: 128px;
}
</style>
</head>
<body>
<!-- Main title of the page -->
<h2 style="text-align: center;">Gracias por descargar U-Cursedn't 💌</h2>
<!-- Opens changelog html file using h3 -->
<h3 style="text-align: center;"><a href="changelog.html" target="_blank">🆕 Changelog</a></h3>
<!-- Sponsor -->
<h4 style="text-align: center;">Se acepta un cafecito ☕</h4>
<!-- Popup container -->
<div class="popup" id="popup">
<!-- Popup text -->
<span class="popuptext" id="myPopup">Datos bancarios 🤑</span>
<!-- Popup image -->
<img src="icons/cafecito.webp" alt="Imagen">
</div>
<!-- Separator -->
<h4> </h4>
<!-- About info: Clickable image with h4 text, both centered -->
<div style="text-align: center;">
<a href="https://github.com/matias-saavedra-g/ucursednt" target="_blank">
<h4>Acerca de
<img src="icons/icon.png" alt="About U-Cursedn't" width="16" height="16">
</h4>
</a>
</div>
<!-- External script for handling the popup logic -->
<script src="js/popup.js"></script>
</body>
</html>