-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
228 lines (215 loc) · 16.6 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
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
224
225
226
227
228
<!DOCTYPE html>
<html>
<head>
<title>Chicago</title>
<meta name="description" content="Chicago - one of the most beautiful cities...">
<meta name="keywords" content="chicago, city, history">
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
<meta name="robots" content="index, follow">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <link rel="stylesheet" type="text/css" href="outlines.css"> -->
<link rel="stylesheet" type="text/css" href="reset.css">
<link href="https://fonts.googleapis.com/css?family=Courier+Prime&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<div class="wrap">
<nav>
<ul class="header-grid-box">
<li class="header-grid-box__item"><a href="#chicago">About Chicago</a></li>
<li class="header-grid-box__item2"><a href="#six-facts">Six Facts</a></li>
<li class="header-grid-box__item3"><a href="#pictures">Pictures</a></li>
</ul>
</nav>
</div>
</header>
<main>
<div class="parallax-container">
<img class="background" src="img/background.jpg" alt="night chicago">
<h1 class="parallax-child">Chicago</h1>
<div class="flag" id="chicago"></div>
<div class="main-first parallax-child">
<div class="wrap">
<article>
<h2>What Is Chicago</h2>
<p>
Chicago, officially the City of Chicago, is the most populous city in the U.S. state of Illinois,
and the third most populous city in the United States.
</p>
<p>
With an estimated population of 2,705,994 (2018), it is also the most populous city
in the Midwestern United States. Chicago is the county seat of Cook County,
the second most populous county in the US, with a small portion of the northwest side
of the city extending into DuPage County near O'Hare Airport. Chicago is the principal
city of the Chicago metropolitan area, often referred to as Chicagoland. At nearly 10 million people,
the metropolitan area is the third most populous in the United States.
</p>
<p>
Located on the shores of freshwater Lake Michigan, Chicago was incorporated
as a city in 1837 near a portage between the Great Lakes and the Mississippi River
watershed and grew rapidly in the mid-19th century. After the Great Chicago Fire of 1871,
which destroyed several square miles and left more than 100,000 homeless, the city made
a concerted effort to rebuild. The construction boom accelerated population growth throughout
the following decades, and by 1900, less than 30 years after the great fire,
Chicago was the fifth-largest city in the world. Chicago made noted contributions to urban planning
and zoning standards, including new construction styles (including the Chicago School of architecture),
the development of the City Beautiful Movement, and the steel-framed skyscraper.
</p>
<p>
Chicago is an international hub for finance, culture, commerce, industry, education, technology,
telecommunications, and transportation. It is the site of the creation of the first standardized
futures contracts, issued by the Chicago Board of Trade, which today is the largest and most diverse
derivatives market in the world, generating 20% of all volume in commodities and financial futures alone.
Depending on the particular year, the city's O'Hare International Airport is routinely ranked as
the world's fifth or sixth busiest airport according to tracked data by the Airports Council
International.
</p>
<p>
The region also has the largest number of federal highways and is the nation's railroad hub.
Chicago was listed as an alpha global city by the Globalization and World Cities Research Network, and
it ranked seventh in the entire world in the 2017 Global Cities Index. The Chicago area has one of the
highest gross domestic products (GDP) in the world, generating $689 billion in 2018. In addition, the city
has one of the world's most diversified and balanced economies, with no single industry employing
more than 14% of the workforce. Chicago is home to several Fortune 500 companies, including Allstate,
Boeing, Exelon, Kraft Heinz, McDonald's, Mondelez International, Sears, United Airlines Holdings, and Walgreens.
</p>
<p>
Chicago's 58 million domestic and international visitors in 2018 made it the second most visited city
in the nation, as compared with New York City's 65 million visitors in 2018. The city was ranked first
in the 2018 Time Out City Life Index, a global quality of life survey of 15,000 people in 32 cities.
Landmarks in the city include Millennium Park, Navy Pier, the Magnificent Mile, the Art Institute
of Chicago, Museum Campus, the Willis (Sears) Tower, Grant Park, the Museum of Science and Industry,
and Lincoln Park Zoo.
</p>
<p>
Chicago's culture includes the visual arts, literature, film, theatre, comedy
(especially improvisational comedy), food, and music, particularly jazz, blues, soul, hip-hop, gospel,
and electronic dance music including house music. Of the area's many colleges and universities,
the University of Chicago, Northwestern University, and the University of Illinois at Chicago
are classified as "highest research" doctoral universities. Chicago has professional sports
teams in each of the major professional leagues, including two Major League Baseball teams.
</p>
</article>
</div>
</div>
<div class="flag flag--shifted" id="six-facts"></div>
<div class="main-second parallax-child">
<div class="wrap">
<article>
<h2>Six Interesting Facts</h2>
<ul class="second-grid-box main-second-facts">
<li class="second-grid-box__item main-second-facts__item">
<h3>Look out at four states from the Willis Tower</h3>
<p>
Receiving millions of visitors annually, the Willis Tower (formerly known as Sears Tower)
is one of Chicago’s most popular attractions. It is the second tallest building in
the Western Hemisphere. On a clear day, visitors can see four states from the Skydeck:
Illinois, Indiana, Wisconsin, and Michigan.
</p>
</li>
<li class="second-grid-box__item2 main-second-facts__item">
<h3>Spray paint was invented in Chicago</h3>
<p>
Where did the idea of putting paint in a can with a spray tip come from? Chicago paint salesman
Ed Seymour actually invented this artistic substance, which is now used to create colorful works
in public spaces all over the city.
</p>
</li>
<li class="second-grid-box__item3 main-second-facts__item">
<h3>Home of the Twinkie</h3>
<p>
Chicagoan Jimmy Dewar worked as a manager at the famed Hostess Brands factory. During that time,
Dewar wanted to create a pastry that was filled with cream. His invention, the Twinkie, launched
in 1930 and was named after an ad for “Twinkle Toe Shoes” that Dewar came across.
The original Twinkie was filled with banana cream, but was replaced with vanilla cream during WWII
when bananas became scarce.
</p>
</li>
<li class="second-grid-box__item4 main-second-facts__item">
<h3>The world’s first all-color television station</h3>
<p>
Chicago’s own NBC 5 Chicago/WMAQ television station has a rich history of innovation. After many months
of hard work, the channel became the first all-color station in the world on April 15, 1956.
Later, the station became the city’s first commercial station to broadcast in stereo in September 1986.
</p>
</li>
<li class="second-grid-box__item5 main-second-facts__item">
<h3>The only river in the world that flows backwards</h3>
<p>
Flowing through downtown Chicago, the Chicago River has a fascinating history. Not only does this river
run through various systems and canals, but it is also the only river in the world that flows backwards.
A reversal technique was introduced for sanitation reasons to divert the sewage away from Lake Michigan’s
water supply. The reversal of the river was recognized as being the largest public earth-moving project
ever completed. It was also acknowledged as a great engineering achievement.
</p>
</li>
<li class="second-grid-box__item6 main-second-facts__item">
<h3>Indulge in local fare at The Taste of Chicago</h3>
<p>
Last, but not least, Chicago loves to provide a taste of its excellent food and summer atmosphere.
Visitors gather from all around the world to indulge in local fare at the city’s largest outdoor
food festival: The Taste of Chicago. For five days in July, visitors can partake in not just food,
but music performances by local artists and celebrities, including Carlos Santana and Kenny Rogers.
</p>
</li>
</ul>
</article>
</div>
</div>
<div class="flag flag--shifted" id="pictures"></div>
<div class="main-third parallax-child">
<div class="wrap">
<article class="article-grid-box">
<h2 class="article-grid-box__item">Pictures</h2>
<button class="prev article-grid-box__item2" onclick="plusSlides(-1)"><</button>
<ul class="main-third-pictures slideshow-container article-grid-box__item3">
<li class="main-third-pictures__item mySlides"><img src="img/ch1.jpg" alt="chicago picture"></li>
<li class="main-third-pictures__item mySlides"><img src="img/ch2.jpg" alt="chicago picture"></li>
<li class="main-third-pictures__item mySlides"><img src="img/ch3.jpg" alt="chicago picture"></li>
<li class="main-third-pictures__item mySlides"><img src="img/ch4.jpg" alt="chicago picture"></li>
<li class="main-third-pictures__item mySlides"><img src="img/ch5.jpg" alt="chicago picture"></li>
<li class="main-third-pictures__item mySlides"><img src="img/ch6.png" alt="chicago picture"></li>
<li class="main-third-pictures__item mySlides"><img src="img/ch7.jpg" alt="chicago picture"></li>
<li class="main-third-pictures__item mySlides"><img src="img/ch8.jpg" alt="chicago picture"></li>
</ul>
<button class="next article-grid-box__item4" onclick="plusSlides(1)">></button>
</article>
<h4>Sity Series</h4>
</div>
<img class="second-background" src="img/bg2.jpg" alt="night chicago photo">
<footer>
<div class="wrap">
<h2>Contacts</h2>
<ul class="footer-grid-box">
<li class="footer-grid-box__item">Bogdan C. V.</li>
<li class="footer-grid-box__item2">+ 7 963 378 32 79</li>
<li class="footer-grid-box__item3">czorievbogdan@gmail.com</li>
</ul>
</div>
</footer>
</div>
</div>
</main>
<script>
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex-1].style.display = "inline-block";
}
</script>
</body>
</html>