1
+ <!DOCTYPE html>
2
+ < html lang ="en ">
3
+
4
+ < head >
5
+ < script src ="/htmlimports.js "> </ script >
6
+ < title > Gleap Demo</ title >
7
+ < meta charset ="UTF-8 " />
8
+ < meta name ="viewport " content ="width=device-width, initial-scale=1, minimum-scale=1 " />
9
+ < link rel ="preconnect " href ="https://fonts.gstatic.com " />
10
+ < link href ="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,500;0,700;0,800;1,400&display=swap "
11
+ rel ="stylesheet " />
12
+ < link rel ="icon " type ="image/x-icon " href ="fav.png ">
13
+ < script src ="https://kit.fontawesome.com/0a1af2edbf.js " crossorigin ="anonymous "> </ script >
14
+ < meta name ="viewport " content ="height=device-height,
15
+ width=device-width, initial-scale=1.0,
16
+ minimum-scale=1.0, maximum-scale=1.0,
17
+ user-scalable=no, target-densitydpi=device-dpi ">
18
+ < link rel ="stylesheet " type ="text/css " media ="screen " href ="main.css " />
19
+ < link rel ="stylesheet " href ="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css " />
20
+ <!-- index.js as found in build/index.js -->
21
+ < script src ="build/cjs/index.js "> </ script >
22
+ < script src ="main.js "> </ script >
23
+ < style >
24
+ * {
25
+ box-sizing : border-box;
26
+ border : none;
27
+ padding : 0px ;
28
+ margin : 0px ;
29
+ font-family : "Montserrat" , sans-serif;
30
+ }
31
+
32
+ body ,
33
+ html {
34
+ background-color : # fff ;
35
+ margin : 0 ;
36
+ }
37
+
38
+ .header {
39
+ width : 100% ;
40
+ min-height : 500px ;
41
+ background-color : # eee ;
42
+ }
43
+
44
+ .header-container {
45
+ max-width : 650px ;
46
+ margin : auto;
47
+ padding-top : 200px ;
48
+ display : flex;
49
+ flex-direction : column;
50
+ justify-content : flex-start;
51
+ align-items : flex-start;
52
+ }
53
+
54
+ .header-container-image {
55
+ max-width : 850px ;
56
+ margin : auto;
57
+ margin-top : -200px ;
58
+ }
59
+
60
+ h1 {
61
+ color : # 000 ;
62
+ font-size : 32px ;
63
+ font-weight : 900 ;
64
+ background-color : # 000 ;
65
+ border-radius : 5px ;
66
+ opacity : 0.8 ;
67
+ }
68
+
69
+ .sub-headline {
70
+ font-size : 16px ;
71
+ color : transparent;
72
+ font-weight : 500 ;
73
+ margin-top : 8px ;
74
+ background-color : # 00000088 ;
75
+ border-radius : 5px ;
76
+ min-width : 350px ;
77
+ height : 30px ;
78
+ opacity : 0.4 ;
79
+ }
80
+
81
+ .sub-headline i {
82
+ color : red;
83
+ }
84
+
85
+ .sub-headline a {
86
+ color : # 00000088 ;
87
+ display : inline;
88
+ text-decoration : underline;
89
+ }
90
+
91
+ .logo {
92
+ position : absolute;
93
+ top : 40px ;
94
+ left : 40px ;
95
+ }
96
+
97
+ .logo i {
98
+ font-size : 40px ;
99
+ color : # fff ;
100
+ }
101
+
102
+ .head-image {
103
+ margin-top : 0px ;
104
+ width : 100% ;
105
+ height : auto;
106
+ max-height : 450px ;
107
+ border-radius : 10px ;
108
+ object-fit : cover;
109
+ object-position : top center;
110
+ }
111
+
112
+ .content {
113
+ max-width : 650px ;
114
+ margin : auto;
115
+ margin-top : 40px ;
116
+ margin-bottom : 40px ;
117
+ color : # 333 ;
118
+ font-size : 18px ;
119
+ line-height : 26px ;
120
+ font-weight : 300 ;
121
+ }
122
+
123
+ .content img {
124
+ width : 100% ;
125
+ max-width : 100% ;
126
+ height : auto;
127
+ }
128
+
129
+ a {
130
+ color : rgb (57 , 140 , 254 );
131
+ text-decoration : none;
132
+ display : block;
133
+ margin-top : 10px ;
134
+ margin-bottom : 10px ;
135
+ cursor : pointer;
136
+ }
137
+
138
+ .buttonlink {
139
+ display : inline-block;
140
+ width : fit-content;
141
+ font-size : 16px ;
142
+ font-weight : 600 ;
143
+ color : rgb (255 , 255 , 255 );
144
+ background-color : # 2142e7 ;
145
+ border-style : solid;
146
+ border-width : 0px ;
147
+ border-radius : 10px ;
148
+ padding : 15px 40px ;
149
+ text-decoration : none;
150
+ cursor : pointer;
151
+ }
152
+
153
+ @media only screen and (max-width : 600px ) {
154
+ .header-container {
155
+ padding-left : 40px ;
156
+ padding-right : 40px ;
157
+ padding-top : 150px ;
158
+ }
159
+
160
+ .head-image {
161
+ border-radius : 0px ;
162
+ }
163
+
164
+ .header {
165
+ min-height : initial;
166
+ }
167
+
168
+ .content {
169
+ margin-top : 0px ;
170
+ padding : 40px ;
171
+ }
172
+ }
173
+
174
+ .skeleton-text {
175
+ width : 100% ;
176
+ height : 0.7rem ;
177
+ margin-bottom : 0.5rem ;
178
+ border-radius : 0.25rem ;
179
+ background-color : # eee ;
180
+ }
181
+
182
+ .skeleton-text : nth-child (2 ) {
183
+ max-width : 95% ;
184
+ }
185
+
186
+ .skeleton-text : nth-child (3 ) {
187
+ max-width : 90% ;
188
+ }
189
+
190
+ .skeleton-text : nth-child (4 ) {
191
+ max-width : 95% ;
192
+ }
193
+
194
+ video {
195
+ border : 1px solid lightgray;
196
+ width : 100% ;
197
+ background-color : # eee ;
198
+ }
199
+
200
+ /* The Modal (background) */
201
+ .modal {
202
+ display : none;
203
+ /* Hidden by default */
204
+ position : fixed;
205
+ /* Stay in place */
206
+ z-index : 1 ;
207
+ /* Sit on top */
208
+ left : 0 ;
209
+ top : 0 ;
210
+ width : 100% ;
211
+ /* Full width */
212
+ height : 100% ;
213
+ /* Full height */
214
+ overflow : auto;
215
+ /* Enable scroll if needed */
216
+ background-color : rgb (0 , 0 , 0 );
217
+ /* Fallback color */
218
+ background-color : rgba (0 , 0 , 0 , 0.4 );
219
+ /* Black w/ opacity */
220
+ }
221
+
222
+ /* Modal Content */
223
+ .modal-content {
224
+ background-color : # fefefe ;
225
+ margin : 15% auto;
226
+ /* 15% from the top and centered */
227
+ padding : 20px ;
228
+ border : 1px solid # 888 ;
229
+ width : 80% ;
230
+ /* Could be more or less, depending on screen size */
231
+ }
232
+
233
+ /* The Close Button */
234
+ .close {
235
+ color : # aaa ;
236
+ float : right;
237
+ font-size : 28px ;
238
+ font-weight : bold;
239
+ }
240
+
241
+ .close : hover ,
242
+ .close : focus {
243
+ color : black;
244
+ text-decoration : none;
245
+ cursor : pointer;
246
+ }
247
+ </ style >
248
+ </ head >
249
+
250
+ < body >
251
+ < div class ="logo "> < i class ="fa-solid fa-earth-africa "> </ i > </ div >
252
+ < div class ="header ">
253
+ < div class ="header-container ">
254
+ < h1 > Off-Grid-it-Haus</ h1 >
255
+ < h2 class ="sub-headline ">
256
+ </ h2 >
257
+ </ div >
258
+ </ div >
259
+ < div class ="header-container-image ">
260
+ < img class ="head-image " src ="./pexels-pixabay-259588.jpg " />
261
+ </ div >
262
+ < input type ="button " value ="Start Tour " placeholder ="helloo "/>
263
+ < input type ="text " id ="userInput " placeholder ="Enter your name ">
264
+ < button onclick ="greetUser() "> Submit</ button >
265
+ < div class ="content " id ="haha "> </ div >
266
+ < a href ="/index3.html "> Index 3</ a >
267
+ < div class ="skeleton-text "> </ div >
268
+ < div class ="skeleton-text "> </ div >
269
+ < div class ="skeleton-text "> </ div >
270
+ < div class ="skeleton-text "> </ div >
271
+ < div class ="skeleton-text "> </ div >
272
+ < div class ="skeleton-text "> </ div >
273
+ < div class ="skeleton-text "> </ div >
274
+ </ div >
275
+
276
+ < script >
277
+ function greetUser ( ) {
278
+ var name = document . getElementById ( "userInput" ) . value ;
279
+ if ( name ) {
280
+ alert ( "Hello, " + name + "! Welcome to Off-Grid-it-Haus." ) ;
281
+ } else {
282
+ alert ( "Please enter your name." ) ;
283
+ }
284
+ }
285
+ </ script >
286
+ </ body >
287
+
288
+ </ html >
0 commit comments