-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex6.html
218 lines (172 loc) · 10.7 KB
/
index6.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
<!DOCTYPE html>
<html lang="de-DE">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="index.css" type="text/css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap" rel="stylesheet">
<title>ABOVE THE CLOUDS</title>
</head>
<body>
<div id="page">
<header>
<div class="header_row">
<div class="header_text">
<h1>
<span class="first_letter">A</span>bove
<span class="first_letter">T</span>he
<span class="first_letter">C</span>louds
</h1>
<p>Airplanes In The Sky</p>
</div>
<div class="header_icons">
<div class="row_1">
<a href="#"><i class="fas fa-home"></i></a>
<a href="#"><i class="fas fa-info-circle"></i></a>
<a href="#"><i class="fas fa-question-circle"></i></a>
<a href="#"><i class="fas fa-envelope"></i></a>
</div>
<div class="row_2">
<a href="#"><i class="fab fa-facebook"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-youtube"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
</div>
</div>
</div>
<!-- Normales und Mobiles Menü -->
<div class="menue normal_menue">
<a href="index.html" class="not_active">Home</a>
<a href="index1.html" class="not_active">Primus</a>
<a href="index2.html" class="not_active">Secundus</a>
<a href="index3.html" class="not_active">Tertius</a>
<a href="index4.html" class="not_active">Quartus</a>
<a href="index5.html" class="not_active">Quintus</a>
<a href="index6.html" class="active">Sextus</a>
</div>
<button id="open_mobile_menue_button"><i id="open_mobile_menue_icon" class="fas fa-bars"></i></button>
<div class="menue mobile_menue">
<div class="mobileMenue_closed" id="mobile_menue">
<a href="index.html" class="not_active">Home</a>
<a href="index1.html" class="not_active">Primus</a>
<a href="index2.html" class="not_active">Secundus</a>
<a href="index3.html" class="not_active">Tertius</a>
<a href="index4.html" class="not_active">Quartus</a>
<a href="index5.html" class="not_active">Quintus</a>
<a href="index6.html" class="active">Sextus</a>
</div>
</div>
<div class="small_red_line"></div>
<div class="img_slider_box">
<div class="img_slider_div">
<div class="img_slider">
<figure>
<img src="images/img_slider/slider_img_01.jpg" alt="img_slider_picture01 - Propellerflugzeug auf einer Wiese">
</figure>
<figure>
<img src="images/img_slider/slider_img_02.jpg" alt="img_slider_picture02 - Altes Propellerflugzeug Nahaufnahme des Propellers">
</figure>
<figure>
<img src="images/img_slider/slider_img_03.jpg" alt="img_slider_picture03 - Bild einer Propellerflugzeug-Kabine in der Luft">
</figure>
<figure>
<img src="images/img_slider/slider_img_04.jpg" alt="img_slider_picture04 - Wolkenmeer">
</figure>
<figure>
<img src="images/img_slider/slider_img_05.jpg" alt="img_slider_picture05 - Flügel eines Flugzeugs">
</figure>
<figure>
<img src="images/img_slider/slider_img_06.jpg" alt="img_slider_picture06 - London von oben">
</figure>
<figure>
<img src="images/img_slider/slider_img_07.jpg" alt="img_slider_picture07 - Person auf Sitzbank im Flugzeug">
</figure>
<figure>
<img src="images/img_slider/slider_img_08.jpg" alt="img_slider_picture08 - Flughafen">
</figure>
<figure>
<img src="images/img_slider/slider_img_01.jpg" alt="img_slider_picture01 - Propellerflugzeug auf einer Wiese">
</figure>
</div>
</div>
</div>
<div class="small_red_line"></div>
</header>
<div class="all_parts">
<h1>Adipisicing elit</h1>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. A nemo aspernatur adipisci cumque ipsam ratione!
Eos ipsa, maiores alias perspiciatis sit consequuntur assumenda atque sint obcaecati voluptate,
quam fuga quidem. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Velit a ipsa illum
voluptates dolorum voluptatibus beatae adipisci officia libero, cupiditate cum aut ipsum voluptatum
voluptas? Veniam unde odit quae molestias.
</p>
<div class="show_images">
<div class="row">
<div class="img_box"><img onclick="openPhotoGallery(this)" src="images/index6.html_images/picture01.jpg" alt="Flugzeug am Himmel"></div>
<div class="img_box"><img onclick="openPhotoGallery(this)" src="images/index6.html_images/picture02.jpg" alt="Flugzeug auf einer Wiese. Seitenansicht."></div>
<div class="img_box"><img onclick="openPhotoGallery(this)" src="images/index6.html_images/picture03.jpg" alt="Flugzeug auf einem Flughafen"></div>
</div>
<div class="row">
<div class="img_box"><img onclick="openPhotoGallery(this)" src="images/index6.html_images/picture04.jpg" alt="Wolkenmeer von oben"></div>
<div class="img_box"><img onclick="openPhotoGallery(this)" src="images/index6.html_images/picture05.jpg" alt="Sport-Flugzeug auf einer Wiese"></div>
<div class="img_box"><img onclick="openPhotoGallery(this)" src="images/index6.html_images/picture06.jpg" alt="Flugzeug seitenansicht auf Vorderteil."></div>
</div>
</div>
<h1>Delectus aut quis repudiandae</h1>
<h2>Dolor ip sunast fro</h2>
<p>
Consectetur adipisicing elit. Ut, consequuntur unde sit possimus soluta excepturi fugit aperiam accusantium
maxime ipsa, beatae id esse eligendi accusamus aliquam at fuga voluptate eveniet? Lorem ipsum dolor sit amet
consectetur adipisicing elit. Atque sit impedit vitae consectetur sequi officia maiores unde distinctio
voluptatem? Sunt non in porro minus ab. Quia reprehenderit eligendi dolorem at? Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Reprehenderit velit delectus porro aspernatur, commodi necessitatibus. Distinctio
aut porro cumque nemo nulla commodi eum modi itaque magnam, tenetur doloribus iusto deserunt.
</p>
<p>
Ullamcorper sit amet risus nullam eget felis eget nunc lobortis. Suspendisse sed nisi lacus sed viverra tellus
in hac habitasse. Ullamcorper a lacus vestibulum sed arcu non odio euismod. Lectus nulla at volutpat diam ut
venenatis. Urna molestie at elementum eu facilisis sed odio morbi. Tempus iaculis urna id volutpat lacus
laoreet non. Odio morbi quis commodo odio. Laoreet suspendisse interdum consectetur libero id faucibus nisl
tincidunt. At risus viverra adipiscing at in tellus integer feugiat scelerisque. Lectus mauris ultrices eros
in cursus turpis massa tincidunt. Bibendum enim facilisis gravida neque. Justo nec ultrices dui sapien. In
tellus integer feugiat scelerisque varius morbi. Ultricies integer quis auctor elit sed. Ullamcorper a lacus
vestibulum sed.
</p>
<h2>Odio morbi quis commodo</h2>
<p>
Urna molestie at elementum eu facilisis sed odio morbi. Tempus iaculis urna id volutpat lacus
laoreet non. Odio morbi quis commodo odio. Laoreet suspendisse interdum consectetur libero id faucibus nisl
tincidunt.
</p>
</div>
<div class="photo_gallery photo_gallery_closed">
<img id="photo_gallery_main_image" src="noImage" alt="Image can't be load...">
<i class="fas fa-times close_photogallery"></i>
</div>
<div class="shade_site shade_site_closed"></div>
<div class="bottom_menue">
<a href="index.html" class="not_active"><i class="fas fa-home"></i></a>
<a href="index1.html" class="not_active">1</a>
<a href="index2.html" class="not_active">2</a>
<a href="index3.html" class="not_active">3</a>
<a href="index4.html" class="not_active">4</a>
<a href="index5.html" class="not_active">5</a>
<a href="index6.html" class="active">6</a>
<a href="#" class="not_active"><i class="fas fa-angle-double-up"></i></a>
</div>
<footer>
<div class="big_red_line"></div>
<div class="footer_text">
<a class="not_active_footer_button" href="impressum.html">Impressum</a>
<a class="not_active_footer_button" href="datenschutz.html">Datenschutz</a>
<a class="not_active_footer_button" href="disclaimer.html">Disclaimer</a>
<p>Above The Clouds</p>
</div>
</footer>
</div>
<script type="text/javascript" src="index.js"></script>
</body>
</html>