-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
208 lines (196 loc) · 7.38 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
---
layout: default
title: Gaon(Village)
permalink: /
thumbnail_path: thumbnail.jpg
---
<!-- Navigation-->
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="/">BARPAK</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive">
Menu <i class="icofont-listing-box"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto text-center">
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#highlights">Highlights</a></li>
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#about">About</a></li>
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#gallery">Gallery</a></li>
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#school">School</a></li>
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#contact">Contact</a></li>
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#credits">Credits</a></li>
</ul>
</div>
</div>
</nav>
<!-- Masthead-->
<header class="masthead">
<div class="container d-flex h-100 align-items-center">
<div class="mx-auto text-center">
<h4 class="mx-auto my-0 text-uppercase">Welcome to</h4>
<h1 class="mx-auto my-0 text-uppercase">BARPAK GAON</h1>
<h2 class="text-white-75 mx-auto mt-2 mb-5">A beautiful village in the northern Gorkha, Nepal</h2>
<a href="#youtubeVideoModal" data-src="https://www.youtube.com/embed/yQrK-tzgE1c?autoplay=1&rel=0"
data-toggle="modal" class="youtube-video-btn btn btn-primary px-4 watch-video">
<i class="far fa-play-circle"></i> Watch Video
</a>
</div>
</div>
</header>
<!-- Highlights -->
<section class="highlights bg-light" id="highlights">
<div class="container">
<!-- Featured Project Row-->
<div class="row align-items-center no-gutters mb-4 mb-lg-5">
<div class="col-lg-7">
<img class="img-fluid mb-3 mb-lg-0" src="{{ site.image_base_url }}/featured.jpg" alt="" />
</div>
<div class="col-xl-4 col-lg-5">
<div class="featured-text text-center text-lg-left">
<h4>Buddha Himal</h4>
<p class="text-black-50 mb-0">
A beautiful icy mountain which is part of the Himalaya range is clearly seen from Barpak. It is around 6692m above
sea level.
</p>
</div>
</div>
</div>
<h4 class="text-center highlight-caption">Highlights</h4>
<!-- Project One Row-->
<div class="row justify-content-center no-gutters">
<div class="col-lg-6">
<img class="img-fluid" src="{{ site.image_base_url }}/people.jpg" alt="Villagers" />
<div class="overlay">
<div class="caption">
Friendly People
</div>
</div>
</div>
<div class="col-lg-6">
<img class="img-fluid" src="{{ site.image_base_url }}/houses.jpg" alt="Structured Houses" />
<div class="overlay">
<div class="caption">
Structured Houses
</div>
</div>
</div>
</div>
<!-- Project Two Row-->
<div class="row justify-content-center no-gutters">
<div class="col-lg-6">
<img class="img-fluid" src="{{ site.image_base_url }}/waterfall.jpg" alt="Natural Beauties" />
<div class="overlay">
<div class="caption">
Natural Beauties
</div>
</div>
</div>
<div class="col-lg-6">
<img class="img-fluid" src="{{ site.image_base_url }}/surrounding.jpg" alt="Beautiful Surrounding" />
<div class="overlay">
<div class="caption">
Beautiful Surrounding
</div>
</div>
</div>
</div>
</div>
</section>
<!-- About -->
<section class="about text-center" id="about">
<div class="container">
<div class="row">
<div class="col-lg-8 mx-auto">
<h2 class="text-white mb-4">About Barpak</h2>
<p class="text-white-50 w-80 m-auto">
Barpak is a village located in Sulikot Gaunpalika in the northern part of the Gorkha district of
Nepal and around 1900m above from sea level. It is inhabited by Gurungs, Ghales, Sunars, Pariyars
and others. The main source of economy are agriculture, tourism and foreign employment.
It is one of the popular stopover village in route to Manasulu trekking.
<br><br>
Barpak was the epicenter of the 2015 Earthquake with a magnitude of 7.8 which took nearly nine
thousands lives all over Nepal. We are grateful to all the people and organization who helped us
during the earthquake crisis. At present, life has returned to normal and living as usual.
</p>
</div>
</div>
<img class="img-fluid" src="{{ site.image_base_url }}/about-bg.png" alt="" />
</div>
</section>
<!-- Gallery -->
<section id="gallery" class="py-8">
<h2 class="text-center mb-4">Gallery</h2>
<div class="container p-0">
<div class="row justify-content-center no-gutters">
{% for i in (1..9) %}
<div class="col-md-4 col-6 p-0">
<a class="gallery" href="{{ site.image_base_url }}/gallery/{{ i }}.jpg">
<img class="img-fluid" src="{{ site.image_base_url }}/gallery/{{ i }}.jpg?w=400" alt="" />
</a>
</div>
{% endfor %}
</div>
</div>
</section>
<!-- School -->
<section class="school text-center" id="school">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 mx-auto">
<h2 class="text-dark mb-0">Himalaya Secondary School</h2>
<p class="text-dark-75">
Source of knowledge to our children
</p>
</div>
</div>
<div class="row">
<img class="img-fluid" src="{{ site.image_base_url }}/school.jpg" alt="" />
</div>
</div>
</section>
<!-- Contact -->
<section class="contact py-8" id="contact">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8 text-center">
<h2 class="mt-0">Let's Get In Touch!</h2>
<hr class="divider my-4" />
<p class="text-muted mb-5">
Do you have any suggestion or comment or want to help in building this website?
</p>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<a class="d-block no-decoration" href="https://m.me/cooolbrg" target="_blank">
<i class="fab fa-facebook-messenger fa-lg"></i> Message Me
</a>
</div>
</div>
</div>
</section>
<!-- Credits -->
<section class="credits bg-secondary py-6" id="credits">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8 text-center">
<h2 class="mt-0 text-white">Credits</h2>
<p class="text-white mb-3">
Thanks to all the people who has created such wonderful content.
</p>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<ul class="credit-list">
<li class="credit-item">
<strong>Video: </strong>
<a href="https://www.youtube.com/channel/UC7ECx0FOLlxJFc3DaRtk6BA" target="_blank">
Dil Bahadur Ghale <i class="fab fa-youtube fa-lg"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</section>