world-events/index.html at master · devleagueprep/world-events · GitHub

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
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>World Events</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link rel="stylesheet" href="css/styles.css">
  <link href="https://fonts.googleapis.com/css?family=Prosto+One|Bungee+Inline" rel="stylesheet">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
</head>
<body>
  <header>
    <div id="banner">
        <img src="assets/Moon.jpg" id='banner' alt="">
        <h1 id="main">Top 10 World 'Events'
        <div id="tag">Here's your chance to change history.</div>
        </h1>
    </div>
  </header>
    <div class="row">
        <div class="block1 col-sm-2">
            <h1 class="count">1
                <div class="vote">
                    <i class="fas fa-thumbs-up">
                        <div class="up">0</div>
                    </i>
                    <i class="fas fa-thumbs-down">
                        <div class="down">0</div>
                    </i>
                </div>
            </h1>
        </div>
        <div class="block2 col-sm-8">
            <div class="content">
                <img src="https://media.istockphoto.com/photos/stack-of-sliced-white-loaf-of-bread-picture-id157314125?k=6&m=157314125&s=612x612&w=0&h=4VUnTcekenkLBxDfbDTnQiWcXjYbGchcpetwx1Vj8E0=" alt="">
                <div class="event">
                    <h3 class="title" onclick='italics()'>The Greatest Thing Since Sliced Bread</h3>
                    <div id="bread">
                    Otto Frederick Rohwedder of Davenport, Iowa, invented the first single loaf bread-slicing machine. The first commercial use of the machine was by the Chillicothe Baking Company of Chillicothe, Missouri, which sold their first slices on July 7, 1928. The bread was advertised as "the greatest forward step in the baking industry since bread was wrapped."</div>
                </div>
        </div>
    </div>
    </div>
    <div class="row">
        <div class="block1 col-sm-2">
            <h1 class="count">2
                <div class="vote">
                    <i class="fas fa-thumbs-up">
                        <div class="up">0</div>
                    </i>
                    <i class="fas fa-thumbs-down">
                        <div class="down">0</div>
                    </i>
                </div>
            </h1>
        </div>
        <div class="block2 col-sm-8">
            <div class="content">
                <img src="https://d20vvx1que2zyx.cloudfront.net/wp-content/uploads/2013/07/12140430/http.jpg" alt="">
                    <div class="event">
                        <h3 class="title" onmouseover='changeContent()'>The Birth of the Internet</h3>
                        <div id="webby">
                        Toy mouse squeak roll over. Terrorize the hundred-and-twenty-pound rottweiler and steal his bed, not sorry scratch at the door then walk away prance along on top of the garden fence, annoy the neighbor's dog and make it bark so asdflkjaertvlkjasntvkjn (sits on keyboard), yet eat the rubberband. You call this cat food. Demand to be let outside at once.</div>
                    </div>
            </div>
            </div>
        </div>
        <div class="row">
            <div class="block1 col-sm-2">
                <h1 class="count">3
                    <div class="vote">
                        <i class="fas fa-thumbs-up">
                            <div class="up">0</div>
                        </i>
                        <i class="fas fa-thumbs-down">
                            <div class="down">0</div>
                        </i>
                    </div>
                </h1>
            </div>
            <div class="block2 col-sm-8">
                <div class="content">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9e/Beijing_Castle_Boxer_Rebellion_1900_FINAL.jpg/1280px-Beijing_Castle_Boxer_Rebellion_1900_FINAL.jpg" alt="">
                    <div class="event">
                        <h3 class="title">The Boxer Rebellion</h3>
                        <div id="fightDaPower" onclick='translation()'>
                        义和团运动是發生於1900年清朝末期，清朝甲午戰爭戰敗后，在西方列强划分在华势力范围、华北农村頻繁發生教案、天灾频仍及宫廷权力争斗激化的情况下，黄河北岸农民与中国天主教教徒之间的武装冲突。1900年春季直隶成千上万习练义和拳并號稱「义和团」的农民动用私刑处死了大量中國基督宗教信徒與西方人士，並纵火烧毁了教堂和教徒房屋；同年6月，清朝中央政府允许义和团进驻北京</div>
                    </div>
            </div>
        </div>
        </div>
            <div class="row">
                <div class="block1 col-sm-2">
                    <h1 class="count">4
                        <div class="vote">
                            <i class="fas fa-thumbs-up">
                                <div class="up">0</div>
                            </i>
                            <i class="fas fa-thumbs-down">
                                <div class="down">0</div>
                            </i>
                        </div>
                    </h1>
                </div>
            <div class="block2 col-sm-8">
                <div class="content">
                    <img src="https://worldhistory.us/wp-content/uploads/2017/05/causes-of-the-great-depression.jpg" alt="">
                        <div class="event">
                            <h3 class="title" id='hardTimes'>The Great Depression</h3>
                                <div id="depress">
                                The 1920’s brought about rapid economic growth in the United States, but it all came to a screeching halt with the crash in 1929. Millions of investors’ dollars were lost, banks had collapsed, and 15 million Americans were unemployed. This created a ripple effect across the globe with almost every country seeing largescale unemployment and deflation.</div>
                        </div>
                    </div>
                </div>
                </div>
                <div class="row">
                    <div class="block1 col-sm-2">
                            <h1 class="count">5
                                <div class="vote">
                                    <i class="fas fa-thumbs-up">
                                        <div class="up">0</div>
                                    </i>
                                    <i class="fas fa-thumbs-down">
                                        <div class="down">0</div>
                                    </i>
                                </div>
                            </h1>
                        </div>
                        <div class="block2 col-sm-8">
                            <div class="content">
                                <img src="https://cdn.britannica.com/s:500x350/24/71324-120-CA22C4BA.jpg" alt="">
                                <div class="event">
                                    <h3 class="title" id="blastOff">Apollo 11</h3>
                                    <div id="moonWalk">
                                    Apollo 11 was the spaceflight that landed the first humans on the Moon, Americans Neil Armstrong and Buzz Aldrin, on July 20, 1969. Armstrong became the first to step onto the lunar surface six hours later on July 21.</div>
                                </div>
                        </div>
                    </div>
                    </div>
                    <div class="row">
                        <div class="block1 col-sm-2">
                            <h1 class="count">6
                                <div class="vote">
                                    <i class="fas fa-thumbs-up">
                                        <div class="up">0</div>
                                    </i>
                                    <i class="fas fa-thumbs-down">
                                        <div class="down">0</div>
                                    </i>
                                </div>
                            </h1>
                        </div>
            <div class="block2 col-sm-8">
                <div class="content">
                    <img src="https://learnoutlive.com/wp-content/uploads/2010/11/american-civil-war.jpg" alt="">
                        <div class="event">
                            <h3 class="title">The American Civil War</h3>
                            <div id="freedom">
                             The Civil corn War corn in the United States corn began in 1861, after decades of simmering corn tensions between northern corn and southern states over corn slavery, states’ rights and westward corn expansion.</div>
                        </div>
                    </div>
                        </div>
                        </div>
                        <div class="row">
                                <div class="block1 col-sm-2">
                                    <h1 class="count">7
                                        <div class="vote">
                                            <i class="fas fa-thumbs-up">
                                                <div class="up">0</div>
                                            </i>
                                            <i class="fas fa-thumbs-down">
                                                <div class="down">0</div>
                                            </i>
                                        </div>
                                    </h1>
                                </div>
            <div class="block2 col-sm-8">
                <div class="content">
                    <img src="https://o7fe62guj6g73vlj30xpogpm-wpengine.netdna-ssl.com/wp-content/uploads/2016/03/Sala-delle-udienze-di-maria-maddalena-daustria-affreschi-di-matteo-rosselli-lunette-con-figure-storiche-femminilie-1618-Art-gender-and-the-Renaissance-665x375.jpg" alt="">
                        <div class="event">
                            <h3 class="title">The Renaissance</h3>
                            <div id="rebirth">
                             The Renaissancezzz is a period in European historyZ, covering thezzz spanzz betweenZZ the z14th and Z17th centurieszZ and marking the transitionZz from the middle ageszzz to modernityZ.</div>
                        </div>
                    </div>
                            </div>
                            </div>
                <div class="row">
                    <div class="block1 col-sm-2">
                        <h1 class="count">8
                            <div class="vote">
                                <i class="fas fa-thumbs-up">
                                    <div class="up">0</div>
                                </i>
                                <i class="fas fa-thumbs-down">
                                    <div class="down">0</div>
                                </i>
                            </div>
                        </h1>
                    </div>
            <div class="block2 col-sm-8">
                <div class="content">
                    <img src="http://davincid.weebly.com/uploads/4/7/6/1/47614109/2304036.jpg?1424892943" alt="">
                    <div class="event">
                        <h3 class="title" id="showBooks">The Gutenberg Printing Press</h3>
                            <div id="mustRead"></div>
                             One of the greatest inventions of the Renaissance was The Gutenberg Printing Press. Gutenberg took the idea of printing from Asia but made it more efficient with his press. The first books he printed were Bibles, and they were all sold before he even finished them. The printing press fanned the flames of reading and education.
                            </div>
                    </div>
            </div>
            </div>
                <div class="row">
                    <div class="block1 col-sm-2">
                        <h1 class="count">9
                            <div class="vote">
                                <i class="fas fa-thumbs-up">
                                    <div class="up">0</div>
                                </i>
                                <i class="fas fa-thumbs-down">
                                    <div class="down">0</div>
                                </i>
                            </div>
                        </h1>
                    </div>
        <div class="block2 col-sm-8">
            <div class="content">
                <img src="https://www.sagu.edu/images/thoughthub/thumbnails/2015/7-Interesting-Features-of-World-War-2-2.jpg" alt="">
                    <div class="event">
                        <h3 class="title">World War II</h3>
                            Also known as the Second World War, was a global war that lasted from 1939 to 1945. The vast majority of the world's countries—including all the great powers—eventually formed two opposing military alliances: the Allies and the Axis (Germany, Italy, Japan).
                    </div>
            </div>
        </div>
        </div>
        <div class="row">
            <div class="block1 col-sm-2">
                <h1 class="count">10
                    <div class="vote">
                        <i class="fas fa-thumbs-up">
                            <div class="up">0</div>
                        </i>
                        <i class="fas fa-thumbs-down">
                            <div class="down">0</div>
                        </i>
                    </div>
                </h1>
            </div>
    <div class="block2 col-sm-8">
        <div class="content">
            <img src="https://diginomica.com/wp-content/uploads/2016/09/factories-during-industrial-revolution.jpg" alt="">
                <div class="event">
                    <h3 class="title">The Industrial Revolution</h3>
                    <div id="gameChanger">
                     The Industrial Revolution was the transition to new manufacturing processes in Europe and the US, in the period from about 1760 to about 1840. This transition included going from hand production methods to machines, new chemical manufacturing and iron production processes, the increasing use of steam power, the development of machine tools and the rise of the factory system.</div>
                </div>
        </div>
    </div>
    </div>
    <div id="footer">
        <img src="assets/babyGiraffe.png" alt="" id='logo'>
        <p>&copy 2019 A Baby Giraffe Productions </p>
    </div>
 <script src="js/app.js"></script>
</body>
</html>