-
Notifications
You must be signed in to change notification settings - Fork 0
/
gift.html
128 lines (117 loc) · 5.25 KB
/
gift.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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gift</title>
<link rel="stylesheet" href="gift.css">
</head>
<body>
<div class="surprisePopup hidden" id="surprisePop">
<div id="closesurprisePop"><div class="close-btn">×</div></div>
<div id="photosurprisePop"></div>
<div id="messagesurprisePop"><span>Congratulations Angelina!</span></div>
</div>
<header>
<nav>
<div class="logo">
<img src="images/transparent-birthday-cake-64d7171857b366.2050293116918177523592-removebg-preview.png"
alt="" id="cake" draggable="false">
<img src="images/final-logo.png" id="ang-logo" draggable="false">
</div>
<div class="options">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="message.html">Messages</a></li>
<li><a href="gift.html">Surprise Gift!</a></li>
</ul>
</div>
</nav>
</header>
<main>
<div class="inner-div">
<div class="surprise">
<div class="giftlines">
<div class="giftpage-welcome">
Welcome my Friend!
</div>
<div class="giftpage-welcome-second">
Now let us play a Game
</div>
<div class="giftpage-welcome-third">
In the below there are some surprise cards. now you need to choose Any one card among them. The one
you choose will given to you as a gift by us.So, let's Enjoy!
</div>
</div>
<div class="giftpage-gift">
<div class="flip-container" data-index="1">
<div class="flipper">
<div class="front">Tap to see</div>
<div class="back" style="background-image: url(images/cycle.jpg);"></div>
</div>
</div>
<div class="flip-container" data-index="2">
<div class="flipper">
<div class="front">Tap to see</div>
<div class="back" style="background-image: url(images/iphone.jpeg);"></div>
</div>
</div>
<div class="flip-container" data-index="3">
<div class="flipper">
<div class="front">Tap to see</div>
<div class="back" style="background-image: url(images/mug.jpg);"></div>
</div>
</div>
<div class="flip-container" data-index="4">
<div class="flipper">
<div class="front">Tap to see</div>
<div class="back" style="background-image: url(images/movieticket.webp);"></div>
</div>
</div>
<div class="flip-container" data-index="5">
<div class="flipper">
<div class="front">Tap to see</div>
<div class="back" style="background-image: url(images/teddy.jpg);"></div>
</div>
</div>
<div class="flip-container" data-index="6">
<div class="flipper">
<div class="front">Tap to see</div>
<div class="back" style="background-image: url(images/laptop.avif);"></div>
</div>
</div>
<div class="flip-container" data-index="7">
<div class="flipper">
<div class="front">Tap to see</div>
<div class="back" style="background-image: url(images/showpiece.jpg);"></div>
</div>
</div>
<div class="flip-container" data-index="8">
<div class="flipper">
<div class="front">Tap to see</div>
<div class="back" style="background-image: url(images/car.webp);"></div>
</div>
</div>
<div class="flip-container" data-index="9">
<div class="flipper">
<div class="front">Tap to see</div>
<div class="back" style="background-image: url(images/celebrationpack.jpg);"></div>
</div>
</div>
</div>
</div>
</div>
</main>
<footer>
<div class="footersec">
<div class="love">
<p>Made with</p><i class="fa-solid fa-heart"></i>
</div>
<p>© 2024 Angelina by Jegtheme. All rights reserved.</p>
</p>
</div>
</footer>
<script src="gift.js"></script>
</body>
</html>