-
Notifications
You must be signed in to change notification settings - Fork 0
/
home.html
328 lines (303 loc) · 16.1 KB
/
home.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
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
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home Page</title>
<link rel="stylesheet" href="home1.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
</head>
<body>
<div class="box1">
<div class="box1_content">
<p>Mail:[email protected]</p>
<div class="vertical_line1"></div>
<p>Contact No: +92-334-9878-525</p>
<div class="vertical_line1"></div>
<p>Address: xxx-xxxx-lahore</p>
<div class="social">
<a href="#">
<i id="instagram" class="fab fa-instagram"></i>
</a>
<a href="#">
<i id="snap" class="fab fa-snapchat"></i>
</a>
<a href="#">
<i id="twitter" class="fab fa-twitter"></i>
</a>
<a href="#">
<i id="facebook" class="fab fa-facebook-f"></i>
</a>
<a href="#">
<i id="linkedin" class="fab fa-linkedin"></i>
</a>
<a href="#">
<i id="github" class="fab fa-github"></i>
</a>
</div>
</div>
</div>
<div class="topnav" id="myTopnav">
<img src="data:image/jpeg;base64,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" alt="">
<a href="#Home">Home</a>
<a href="#Cases">Cases</a>
<div class="dropdown">
<button class="dropbtn">Blog
</button>
<div class="dropdown-content">
<a href="#">Blog</a>
<a href="#">Blog Detail</a>
<a href="#">Element</a>
</div>
</div>
<a href="#Contact Us">Contact Us</a>
<a href="#About Us">About</a>
<a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">☰</a>
</div>
<div id="slider">
<input type="radio" name="slider" id="slide1" checked>
<input type="radio" name="slider" id="slide2">
<input type="radio" name="slider" id="slide3">
<input type="radio" name="slider" id="slide4">
<div id="slides">
<div id="overflow">
<div class="inner">
<div class="slide slide_1">
<div class="slide-content">
<h2>Donate For Better Cause</h2>
<p>Connms amnsdbamsbdamsbdasmhbdmhasb Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium obcaecati vero esse iste cupiditate fuga magnam quia illo deserunt, ipsum sed nisi? Nesciunt, voluptatibus id! Dolore ipsa laborum odit consequuntur!</p>
</div>
</div>
<div class="slide slide_2">
<div class="slide-content">
<h2>Donate For Better Cause</h2>
<p>Content for Slide 2</p>
</div>
</div>
<div class="slide slide_3">
<div class="slide-content">
<h2>Slide 3</h2>
<p>Content for Slide 3</p>
</div>
</div>
<div class="slide slide_4">
<div class="slide-content">
<h2>Slide 4</h2>
<p>Content for Slide 4</p>
</div>
</div>
</div>
</div>
</div>
<div id="controls">
<label for="slide1"></label>
<label for="slide2"></label>
<label for="slide3"></label>
<label for="slide4"></label>
</div>
<div id="bullets">
<label for="slide1"></label>
<label for="slide2"></label>
<label for="slide3"></label>
<label for="slide4"></label>
</div>
</div>
<div class="tittle">
<h1>Welcome To Our Rehabilitation Center</h1>
<div class="line"></div>
</div>
<div class="header3_custom">
<h3>Adventure tourism gains much of its excitement by allowing the tourist to step outside their comfort zone. This may be from experiencing culture shock or through the performance of acts that required some degree of risk whether real or perceived. It is also about connecting with a new culture or a new landscape and being physically active at the same time. It is not only about being risky or pushing your boundaries. In fact, it is especially important to know and respect your limits while you are in an unfamiliar area. Adventure travel is a leisure activity that takes place in an unusual, exotic, remote, or wilderness destination. It tends to be associated with high levels of activity by the participant, most of it outdoors. Adventure tourists expect to experience various levels of risk, excitement, and tranquillity and be personally tested. In particular, they are explorers of unspoiled, exotic parts of the planet and also seek personal challenges. The main factor distinguishing adventure tourism from all other forms of tourism is the planning and preparation involved.</h3>
<button id="ReadMore">Read More</button>
</div>
<div class="wrap_box">
<div class="card2">
<img src="vis.png" alt="Dummy" style="width:50%">
<h1 style="line-height:70px">Become a Volunteer</h1>
<div style="margin:24px 0">
<a href="#">
<i class="fa fa-dribbble"></i>
</a>
<a href="#">
<i class="fa fa-twitter"></i>
</a>
<a href="#">
<i class="fa fa-linkedin"></i>
</a>
<a href="#">
<i class="fa fa-facebook"></i>
</a>
</div>
</div>
<div class="card2">
<img src="vis.png" alt="Dummy" style="width:50%">
<h1 style="line-height:70px">Become a Volunteer</h1>
<div style="margin:24px 0">
<a href="#">
<i class="fa fa-dribbble"></i>
</a>
<a href="#">
<i class="fa fa-twitter"></i>
</a>
<a href="#">
<i class="fa fa-linkedin"></i>
</a>
<a href="#">
<i class="fa fa-facebook"></i>
</a>
</div>
</div>
<div class="card2">
<img src="vis.png" alt="Dummy" style="width:50%">
<h1 style="line-height:70px">Become a Volunteer</h1>
<div style="margin:24px 0">
<a href="#">
<i class="fa fa-dribbble"></i>
</a>
<a href="#">
<i class="fa fa-twitter"></i>
</a>
<a href="#">
<i class="fa fa-linkedin"></i>
</a>
<a href="#">
<i class="fa fa-facebook"></i>
</a>
</div>
</div>
</div>
<div class="container">
<div class="box_five">
<h1>Our Misson</h1>
</div>
<div class="box_five1">
<h1>Our Misson</h1>
</div>
</div>
<div class="container2">
<div class="forth_box">
<img src="https://preview.colorlib.com/theme/chariter/assets/img/gallery/about.jpg" alt="">
</div>
<div class="forth_box1">
<h2>Who We Are?</h2>
<div class="line2"></div>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore veritatis est facilis a quaerat hic eum et odit officiis aut. Tempora fugiat quibusdam itaque error consequuntur, magnam vitae tempore culpa!</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore veritatis est facilis a quaerat hic eum et odit officiis aut. Tempora fugiat quibusdam itaque error consequuntur, magnam vitae tempore culpa!</p>
<button id="btn">Donate Us</button>
</div>
</div>
<div class="row">
<div class="column">
<img src="vis.png" alt="">
<h2>Column 1</h2>
<p>Some text..</p>
<hr>
</div>
<div class="column1">
<img src="vis1.png" alt="">
<h2>Column 2</h2>
<p>Some text..</p>
<hr>
</div>
<div class="column2">
<img src="vis3.png" alt="">
<h2>Column 3</h2>
<p>Some text..</p>
<hr>
</div>
<div class="column3">
<img src="vis4.png" alt="">
<h2>Column 4</h2>
<p>Some text..</p>
<hr>
</div>
</div>
<div class="sixth_boxcontent">
<h1>We serve for peoples</h1>
<div class="line3"></div>
<p>Sedac odio aliquet, fringilla odio eget, tincidunt nunc duis aliquet
pulvinar ante.</p>
</div>
<div class="sixth_Box">
<div class="sixth_Boxcontent">
<img src="pic1.png" alt="">
<h2>Pure Food & Water</h2>
<p>Odio aliquet, fringilla odio eget, tincidunt nunc duis aliquet pulvinar ante employees and organizations to support.</p>
</div>
<div class="seventh_Boxcontent">
<img src="pic2.png" alt="">
<h2>Health & Medicine</h2>
<p>Odio aliquet, fringilla odio eget, tincidunt nunc duis aliquet pulvinar ante employees and organizations to support.</p>
</div>
<div class="eighth_Boxcontent">
<img src="pic3.png" alt="">
<h2>Education</h2>
<p>Odio aliquet, fringilla odio eget, tincidunt nunc duis aliquet pulvinar ante employees anda anna and organizations to support.</p>
</div>
</div>
<div class="ninthBox">
<div class="ninthBox_content">
<h1>They Need Your Help</h1>
<div class="line"></div>
<p>Sedac odio aliquet, fringilla odio eget, tincidunt nunc. Duis aliquet pulvinar ante tempor etiam lacus eros</p>
<p>Sedac odio aliquet, fringilla odio eget, tincidunt nunc. Duis aliquet pulvinar ante tempor etiam lacus eros</p>
<button id="btn1">Donate Us</button>
</div>
</div>
<footer>
<div class="container3">
<div class="row1">
<div class="col">
<h5>Services</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error facere pariatur placeat sit modi quasi, assumenda culpa cumque tenetur laudantium id dolorem libero harum, sed laborum ipsa dicta, nobis numquam.</p>
</div>
<div class="col">
<h3>Services</h3>
<div class="links">
<a href="#">Illustration</a>
<a href="#">Creatives</a>
<a href="#">Poster Design</a>
<a href="#">Card Design</a>
</div>
</div>
<div class="col" id="useful-links">
<h3>Links</h3>
<div class="links">
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Our Policy</a>
<a href="#">Help</a>
</div>
</div>
<div class="col" id="useful-links">
<h3>Links</h3>
<div class="links">
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Our Policy</a>
<a href="#">Help</a>
</div>
</div>
</div>
<div class="row2">
<div class="col" id="company">
<p>We are specialized in designings, make your business a brand.
Try our premium services.</p>
<div class="social1">
<i class="fab fa-facebook" style="color: rgb(75, 100, 180);" ></i>
<i class="fab fa-instagram" style="color: red;"></i></a>
<i class="fab fa-youtube" style="color: rgb(255, 0, 0);" ></i>
<i class="fab fa-twitter" style="color: rgb(61, 170, 224);" ></i>
<i class="fab fa-linkedin" style="color: rgb(28, 105, 194);" ></i>
</div>
</div>
</div>
</div>
<div class="last_footer">
<div class="last_footercontent">
<h2 class="copyright">This code is Developed in 2023 By "HR Developer"©</h2>
</div>
</div>
<script src="home11.js" ></script>
</body>
</html>