-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
207 lines (207 loc) · 13.7 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
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Cool Navbars</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/master.min.css">
<link rel="stylesheet" href="css/cool-navbars.min.css">
<link href="https://unpkg.com/ionicons@4.5.0/dist/css/ionicons.min.css" rel="stylesheet">
</head>
<body>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<nav id="main-nav">
<div class="logo">
<span>Cool</span>
<span>Navbars</span>
</div>
<details>
<summary>
<div class="closed">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
<div class="open">
<span class="bar"></span>
<span class="bar"></span>
</div>
</summary>
<ul>
<li><a class="active" href="#jellyfish">Jellyfish</a></li>
<li><a href="#neon">Neon</a></li>
<li><a href="#skateboarding">Skateboarding</a></li>
<li><a href="#road-lights">Road Lights</a></li>
<li><a href="#umbrella">Umbrella</a></li>
</ul>
</details>
</nav>
<a href="https://github.com/jestov/cool-navbars" class="github">
<i class="icon ion-logo-github"></i>
</a>
<section id="jellyfish" data-tab="#jellyfish" class="active">
<nav class="cool-navbar jellyfish">
<ul>
<li><a href="#jellyfish-home" class="active"><span>Home</span> <div class="indicator"></div></a></li>
<li><a href="#jellyfish-about"><span>About</span> <div class="indicator"></div></a></li>
<li><a href="#jellyfish-species"><span>Species</span> <div class="indicator"></div></a></li>
<li><a href="#jellyfish-more-data"><span>More Data</span> <div class="indicator"></div></a></li>
</ul>
</nav>
<div class="box" id="jellyfish-home" data-target="#jellyfish-home">
<h2>Jellyfish</h2>
<h3>Typically, medusozoan cnidarians have a pelagic, predatory jellyfish stage in their life cycle; staurozoans are the exceptions.</h3>
</div>
<div class="box" id="jellyfish-about" data-target="#jellyfish-about">
<h4>About</h4>
<p>Jellyfish are not a clade, as they include most of the Medusozoa, barring some of the Hydrozoa. The medusozoan groups included by authorities are indicated on the following phylogenetic tree by the presence of citations. Names of included jellyfish, in English where possible, are shown in boldface; the presence of a named and cited example indicates that at least that species within its group has been called a jellyfish.</p>
</div>
<div class="box" id="jellyfish-species" data-target="#jellyfish-species">
<h4>Species</h4>
<p>There are over 200 species of Scyphozoa, about 50 species of Staurozoa, about 20 species of Cubozoa, and the Hydrozoa includes about 1000–1500 species that produce medusae, but many more species that do not.</p>
</div>
<div class="box" id="jellyfish-more-data" data-target="#jellyfish-more-data">
<h4>More Data</h4>
<p>Since jellyfish have no hard parts, fossils are rare. The oldest conulariid scyphozoans appeared between 635 and 577 mya in the Neoproterozoic of the Lantian Formation in China; others are found in the youngest Ediacaran rocks of the Tamengo Formation of Brazil, c. 505 mya, through to the Triassic. Cubozoans and hydrozoans appeared in the Cambrian of the Marjum Formation in Utah, USA, c. 540 mya.</p>
</div>
</section>
<section id="neon" data-tab="#neon">
<nav class="cool-navbar neon">
<ul>
<li><a href="#neon-home" class="active"><span>Home</span> <div class="indicator"></div></a></li>
<li><a href="#neon-about"><span>About</span> <div class="indicator"></div></a></li>
<li><a href="#neon-applications"><span>Applications</span> <div class="indicator"></div></a></li>
<li><a href="#neon-more-data"><span>More Data</span> <div class="indicator"></div></a></li>
</ul>
</nav>
<div class="box" id="neon-home" data-target="#neon-home">
<h2>Neon</h2>
<h3>Neon is a noble gas. It is chemical element 10 on the periodic table. Its symbol is Ne.</h3>
</div>
<div class="box" id="neon-about" data-target="#neon-about">
<h4>About</h4>
<p>
Neon is a colorless, odorless, inert monatomic gas under standard conditions, with about two-thirds the density of air.
Neon is the second lightest inert gas. Neon has three stable isotopes: <sup>20</sup>Ne (90.48%), <sup>21</sup>Ne (0.27%) and <sup>22</sup>Ne (9.25%).
</p>
</div>
<div class="box" id="neon-applications" data-target="#neon-applications">
<h4>Applications</h4>
<p>
Neon gas is used in gas discharge lamps. When electricity goes through the neon, it lights up red. Due to this quality, it is used in signs. Similar signs use other gases to make other colors, but they are also often called "neon signs".
</p>
</div>
<div class="box" id="neon-more-data" data-target="#neon-more-data">
<h4>More Data</h4>
<p>
The word "neon" comes from the Greek word meaning "new". It was discovered by William Ramsay and Morris W. Travers in 1898.
Neon does not react with other elements, so it is found by itself. There is not much neon in the air, and it is clear, so we do not see it.
</p>
</div>
</section>
<section id="skateboarding" data-tab="#skateboarding">
<nav class="cool-navbar skateboarding">
<ul>
<li><a href="#skateboarding-home" class="active"><span>Home</span> <div class="indicator"></div></a></li>
<li><a href="#skateboarding-about"><span>About</span> <div class="indicator"></div></a></li>
<li><a href="#skateboarding-trick-stacking"><span>Trick Skating</span> <div class="indicator"></div></a></li>
<li><a href="#skateboarding-more-data"><span>More Data</span> <div class="indicator"></div></a></li>
</ul>
</nav>
<div class="box" id="skateboarding-home" data-target="#skateboarding-home">
<h2>Skate<br>boarding</h2>
<h3>Skateboarding is an action sport which involves riding and performing tricks using a skateboard.</h3>
</div>
<div class="box" id="skateboarding-about" data-target="#skateboarding-about">
<h4>About</h4>
<p>
Skateboarding is as well as a recreational activity, an art form, a entertainment industry job, and a method of transportation. Skateboarding has been shaped and influenced by many skateboarders throughout the years
</p>
</div>
<div class="box" id="skateboarding-trick-stacking" data-target="#skateboarding-trick-stacking">
<h4>Trick Skating</h4>
<p>
With the evolution of skateparks and ramp skating, the skateboard began to change. Early skate tricks had consisted mainly of two-dimensional freestyle manoeuvres like riding on only two wheels ("wheelie" or "manual"), spinning only on the back wheels (a "pivot"), high jumping over a bar and landing on the board again, also known as a "hippie jump", long jumping from one board to another.
</p>
</div>
<div class="box" id="skateboarding-more-data" data-target="#skateboarding-more-data">
<h4>More Data</h4>
<p>
A 2009 report found that the skateboarding market is worth an estimated $4.8 billion in annual revenue with 11.08 million active skateboarders in the world. In 2016, it was announced that skateboarding will be represented at the 2020 Summer Olympics in Tokyo.
</p>
</div>
</section>
<section id="road-lights" data-tab="#road-lights">
<nav class="cool-navbar road-lights">
<ul>
<li><a href="#road-lights-home" class="active"><span>Home</span> <div class="indicator"></div></a></li>
<li><a href="#road-lights-about"><span>About</span> <div class="indicator"></div></a></li>
<li><a href="#road-lights-recreational-purpose"><span>Recreational Purpose</span> <div class="indicator"></div></a></li>
<li><a href="#road-lights-more-data"><span>More Data</span> <div class="indicator"></div></a></li>
</ul>
</nav>
<div class="box" id="road-lights-home" data-target="#road-lights-home">
<h2>Road<br>Lights</h2>
<h3>A road trip is a long distance journey on the road. Typically, road trips are long distances traveled by automobile.</h3>
</div>
<div class="box" id="road-lights-about" data-target="#road-lights-about">
<h4>About</h4>
<p>
The world's first recorded long distance road trip by automobile took place in Germany in August 1888 when Bertha Benz, the wife of Karl Benz, the inventor of the first patented motor car (the Benz Patent-Motorwagen), travelled from Mannheim to Pforzheim (a distance of 106 km (66 mi)).
</p>
</div>
<div class="box" id="road-lights-recreational-purpose" data-target="#road-lights-recreational-purpose">
<h4>Recreational Purpose</h4>
<p>
Many people may go on road trips for recreational purpose (e.g. sightseeing or to reach a desired location, typically during a vacation period (e.g., in the US, driving to Disneyland from Oregon)). Other motivations for long distance travel by automobile include visitation of relatives, who may live far away, or relocation of one's permanent living space.
</p>
</div>
<div class="box" id="road-lights-more-data" data-target="#road-lights-more-data">
<h4>More Data</h4>
<p>
Generally, while road trips can occur in any mass of land, large masses of land are most common for road trips. The most popular locations for road trips include Canada, Mainland U.S., and Central Europe.
</p>
</div>
</section>
<section id="umbrella" data-tab="#umbrella">
<nav class="cool-navbar umbrella">
<ul>
<li><a href="#umbrella-home" class="active"><span>Home</span> <div class="indicator"></div></a></li>
<li><a href="#umbrella-about"><span>About</span> <div class="indicator"></div></a></li>
<li><a href="#umbrella-categories"><span>Categories</span> <div class="indicator"></div></a></li>
<li><a href="#umbrella-more-data"><span>More Data</span> <div class="indicator"></div></a></li>
</ul>
</nav>
<div class="box" id="umbrella-home" data-target="#umbrella-home">
<h2>Umbrella</h2>
<h3>Is a folding canopy supported by wooden or metal ribs, which is usually mounted on a wooden, metal, or plastic pole.</h3>
</div>
<div class="box" id="umbrella-about" data-target="#umbrella-about">
<h4>About</h4>
<p>
It is designed to protect a person against rain or sunlight. Umbrellas and parasols are primarily hand-held portable devices sized for personal use. The largest hand-portable umbrellas are golf umbrellas. Umbrellas are now a consumer product with a large global market.
</p>
</div>
<div class="box" id="umbrella-categories" data-target="#umbrella-categories">
<h4>Categories</h4>
<p>
Umbrellas can be divided into two categories: fully collapsible umbrellas, in which the metal pole supporting the canopy retracts, making the umbrella small enough to fit in a handbag; and non-collapsible umbrellas, in which the support pole cannot retract and only the canopy can be collapsed.
</p>
</div>
<div class="box" id="umbrella-more-data" data-target="#umbrella-more-data">
<h4>More Data</h4>
<p>
Umbrellas continue to be actively developed. In the US, so many umbrella-related patents are being filed that the U.S. Patent Office employs four full-time examiners to assess them. As of 2008, the office registered 3000 active patents on umbrella-related inventions.
</p>
</div>
</section>
<footer>
Made with <i class="icon ion-md-heart"></i> by <a href="https://github.com/jestov">jestov</a>
</footer>
<script src="js/scrollspy.min.js"></script>
<script src="js/tabs.js"></script>
</body>
</html>