-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
117 lines (109 loc) · 4.42 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta
name="description"
content="Everyone is invited to this exclusive stoop sale in Brooklyn!"
/>
<link href="index.css" rel="stylesheet" />
<title>Stoop Sale Invite</title>
</head>
<body>
<!-- Header Section -->
<header>
<h1>You're</h1>
<h1>invited!</h1>
<button><i class="fa-solid fa-down-long"></i></button>
</header>
<!-- Invitation Intro -->
<section>
<h1>Uncover <span class="em">Unique</span> Finds at Our Stoop Sale</h1>
<div id="date">
<h2>Saturday August 10th</h2>
<h2>10am - 4pm</h2>
</div>
</section>
<!-- Invitation Map -->
<script async defer>
((g) => {
var h,
a,
k,
p = "The Google Maps JavaScript API",
c = "google",
l = "importLibrary",
q = "__ib__",
m = document,
b = window;
b = b[c] || (b[c] = {});
var d = b.maps || (b.maps = {}),
r = new Set(),
e = new URLSearchParams(),
u = () =>
h ||
(h = new Promise(async (f, n) => {
await (a = m.createElement("script"));
e.set("libraries", [...r] + "");
for (k in g)
e.set(
k.replace(/[A-Z]/g, (t) => "_" + t[0].toLowerCase()),
g[k]
);
e.set("callback", c + ".maps." + q);
a.src = `https://maps.${c}apis.com/maps/api/js?` + e;
d[q] = f;
a.onerror = () => (h = n(Error(p + " could not load.")));
a.nonce = m.querySelector("script[nonce]")?.nonce || "";
m.head.append(a);
}));
d[l]
? console.warn(p + " only loads once. Ignoring:", g)
: (d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n)));
})({
key: "AIzaSyB92fiLb4TeBfUyIEiA3TRZmt3gS07uZvA",
v: "weekly",
});
</script>
<div id="map-and-desc">
<div id="fullMap">
<a
href="https://www.google.com/maps/place/Court+St,+Brooklyn,+NY/@40.6810643,-73.9978157,17z/data=!3m1!4b1!4m6!3m5!1s0x89c25a59afc74fe1:0x3dc42dbcd7f6d772!8m2!3d40.6810643!4d-73.9965256!16s%2Fg%2F1ypmn1jwc?entry=ttu"
>
<div id="map"></div>
</a>
<p id="map-caption">Corner of Court Street and 2nd Avenue, Carroll Gardens, Brooklyn, NY</p>
</div>
<!-- Invitation Description -->
<p id="desc">
Attention bargain hunters! This stoop sale in Brooklyn is an event you
won't want to miss. Name your prices for our gently used, high-quality clothing and homewear. Whether you're looking for unique pieces to add to your wardrobe or simply want to enjoy a fun day out, this is the event for you!
</p>
</div>
<!-- Invitation mages -->
<figure>
<div>
<img class="responsive-img" src="fashion02.jpg" alt="An illustration of various items of clothing." />
<figcaption>You never know what you'll find!</figcaption>
</div>
<div>
<img class="responsive-img" src="fashion07.jpg" alt="An illustration of a girl trying on shoes and taking a picture." />
<figcaption>Let everyone know you're coming!</figcaption>
</div>
</figure>
<!-- Buttons Section -->
<section class="btns">
<button onclick="toggleLike()" style="color: var(--accent-color);" id="heart-btn" class="btn"><i class="fa-solid fa-heart"></i></i></button>
<div id="share-btns">
<button><a class="link" target="blank"><i class="fa-solid fa-link"></i></a></button>
<button><a class="fb" target="blank"><i class="fa-brands fa-square-facebook"></i></a></button>
<button><a class="whatsApp" target="blank"><i class="fa-brands fa-square-whatsapp"></i></a></button>
<button><a class="x" target="blank"><i class="fa-brands fa-square-x-twitter"></i></a></button>
</div>
</section>
<!-- Other Scripts below -->
<script src="https://kit.fontawesome.com/d6f5b3e8a3.js" crossorigin="anonymous"></script>
<script src="index.js"></script>
</body>
</html>