-
Notifications
You must be signed in to change notification settings - Fork 0
/
about.html
223 lines (177 loc) · 8.61 KB
/
about.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
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Us</title>
<!-- favicon -->
<link rel="shortcut icon" type="image/png" href="images/favicon.png">
<!-- font awesome -->
<link rel="stylesheet" href=" https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css
">
<!-- style -->
<link rel="stylesheet" href="style/headerANDfooter.css">
<link rel="stylesheet" href="style/about.css">
<style>
</style>
</head>
<body>
<a id="backToTop"><i class="fas fa-angle-up"></i></a>
<header>
<!-- SECTION 1 HEADER -->
<div class="theHeader container">
<!-- NAVIGATION BAR -->
<nav>
<div class="logo">
<img src="images/logo2.png" alt="logo">
</div>
<ul class="nav-links">
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="about.html">About</a>
</li>
<li>
<a href="media.html">Media</a>
</li>
<li>
<a href="faq.html">FAQ</a>
</li>
<li>
<a href="contact.html">Contact</a>
</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<!-- HEAD TITLE -->
<div class="mainTitles">
<p>Mardi Gras</p>
<h1>About Us</h1>
</div>
<!-- SCROLL DOWN BOTTON -->
<div class="scrollDownButton">
<div><button><a href="#ourHistory">History</a></button></div>
<div><button><a href="#ourTrad">Traditions</a></button></div>
<div><button><a href="#mayor">Our Mayor</a></button></div>
</div>
</header>
<!-- NEW SECTION - ABOUT US -->
<!-- OUR HISTORY -->
<section class="aboutUs">
<div id="ourHistory">
<h2>Our History</h2>
<div class="divider"> </div>
<p> Some think Mardi Gras may be linked with the ancient Roman pagan celebrations of spring and
fertility
such as Saturnalia, which dates back to 133–31 BC. This celebration honored the god of agriculture,
Saturn. It was observed in mid-December, before the sowing of winter crops.
<br><br> It was a week-long festival
when work and business came to a halt. Schools and courts of law closed, and the normal social
patterns
were suspended. On the Julian calendar, which the Romans adopted in 45 BC, the winter solstice fell
on December 25. Hence, the celebration gradually became associated with Christmas.
</p>
<img src="images/mardiGrasIndians.jpg" alt="indian mardi gras">
</div>
<!-- OUR TRADITIONS -->
<div id="ourTrad">
<h2>Our Traditions</h2>
<div class="divider"></div>
<p>Mardi Gras is about music, parades, picnics, floats and excitement. It's one big holiday in New
Orleans!<br><br>
Revelers know to wear costumes or at least dress in purple, green, and gold, and adorn themselves with
long beads caught from the floats of previous parades.<br><br> You'll see a lot of crazy costumes, kids
with their families are everywhere, and both locals and visitors having a great time. Parade goers will
sit on the ground, throw balls, play music, eat great food and watch the crowds walk by between parades.
On Mardi Gras day, the majority of non-essential businesses are shut down because of the celebration.
</p>
<img src="images/mardiGrasTrads.webp" alt="Mardi Gras Indians">
</div>
<!-- OUR MAYOR -->
<div id="mayor">
<h2>Mayor of New Orleans</h2>
<div class="divider"></div>
<p>As Mayor of the great City of New Orleans, I invite you to visit our city to experience the excitement of
Mardi Gras!<br><br>
The Carnival season officially begins each year on Jan. 6 -- the Feast of the Epiphany, also called
Twelfth Night or Kings’ Day. Traditional balls are held in the weeks leading up to the big event.
New Orleans, with its unmatched culture and world-famous music and cuisine, is an exciting place to be
at any time of the year. We invite everyone to experience Mardi Gras at least once in their lifetime.
Make your plans now to be a part of this great tradition and see firsthand why we say, "Laissez les bon
temps rouler!"
<br>
<strong>Sincerely,
LaToya Cantrell
Mayor of New Orleans
</strong>
</p>
<img src="images/MayorLaToyaCantrell.jfif" alt="New Orleans Mayor">
</div>
</section>
<!-- LAST SECTION - THE FOOTER -->
<footer>
<div class="footer-content">
<footer>
<div class="mainFooter">
<div><img src="images/logo2.png" alt="logo Mardi Gras" class="logoFooter"></div>
<div>
<h3>Quick Links</h3>
<ul>
<li><a href="https://www.mardigrasworld.com/tickets/" target=" _blank">Tickets</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="media.html">Media</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<div>
<h3>Sponsors</h3>
<ul>
<li><a href="http://www.museumofdeath.net/" target="_blank">Museum of Death</a></li>
<li><a href="https://locations.walk-ons.com/walk-ons-sports-bistreaux-new-orleans-fdb5f3647aa1?utm_source=google&utm_medium=Yext"
target="_blank">Walk
On's</a></li>
<li><a href="https://www.acehotel.com/neworleans/" target="_blank">ACE hotel</a></li>
<li><a href="https://www.lcm.org/" target="_blank">Children's Museum</a></li>
</ul>
</div>
<div>
<h3>Social Media</h3>
<ul>
<li><a href="https://twitter.com/nolamardigras?lang=en" target="_blank"><i
class="fab fa-twitter">  Twitter</i>
</a></li>
<li><a href="https://www.facebook.com/MardiGrasNewOrleans/" target="_blank"><i
class="fab fa-facebook">  Facebook</i>
</a></li>
<li><a href="https://www.instagram.com/mardigrasneworleans/?hl=en" target="_blank"><i
class="fab fa-instagram">  Instagram</i>
</a></li>
</ul>
</div>
<div class="newsletter">
<h3>Subscribe</h3>
<p>Enter your email to stay tuned</p>
<form action="">
<input type="text" id="subscribe" placeholder="Email">
<input type="button" value="Subscribe" class="formBtn">
</form>
</div>
</div>
<hr>
<div class="copyright">
<p>Mardi Gras</p>
<p>Copyright © 2021</p>
<p>Created by Chen Gutt</p>
</div>
</div>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>