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