-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
142 lines (135 loc) · 4.23 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/png" href="./assets/logo.png" />
<title>Build for Nepal</title>
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
/>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>
<div class="header-container">
<!-- Logo -->
<img src="./assets/logo.png" alt="Build for Nepal Logo" class="logo" />
<!-- Title and Subtitle -->
<div class="header-text">
<h1>Build for Nepal</h1>
<p>Explore Our Nepali Apps to Make Life Easier</p>
</div>
</div>
</header>
<div class="hero">
<h2>Welcome to Build for Nepal</h2>
<p>
Explore our collection of Nepali-focused applications designed to make
daily tasks simpler and more accessible for everyone!
</p>
<img src="./assets/image.png" alt="image" class="hero-image" />
</div>
<div class="sections">
<!-- Ad-BS Converter -->
<div class="section">
<h3>Ad-BS Converter</h3>
<p>
Convert Nepali dates between the Nepali (Bikram Sambat) and English
(Gregorian) calendars effortlessly. Ideal for tracking historical
events and personal dates.
</p>
<div class="btn-group">
<button class="btn" onclick="window.location.href='#'">
<i class="fa-solid fa-arrow-up-right-from-square"></i>
Try Now
</button>
<a
href="https://www.npmjs.com/package/ad-bs-converter"
target="_blank"
class="npm-link"
>
<i class="fa-brands fa-npm"></i>
NPM</a
>
<a
href="https://github.com/build-for-nepal/ad-bs-converter"
target="_blank"
class="github-link"
>
<i class="fa-brands fa-github"></i>
GitHub</a
>
</div>
</div>
<!-- Nepal Map -->
<div class="section">
<h3>Nepal Map</h3>
<p>
Get an interactive map of Nepal to explore the geography, cities, and
regions with ease. Perfect for anyone looking to discover Nepal.
</p>
<div class="btn-group">
<button class="btn" onclick="window.location.href='#'">
<i class="fa-solid fa-arrow-up-right-from-square"></i> Explore Map
</button>
<a
href="https://www.npmjs.com/package/nepal-map"
target="_blank"
class="npm-link"
>
<i class="fa-brands fa-npm"></i>
NPM</a
>
<a
href="https://github.com/build-for-nepal/nepal-map"
target="_blank"
class="github-link"
>
<i class="fa-brands fa-github"></i>
GitHub</a
>
</div>
</div>
<!-- Nepali Calendar -->
<div class="section">
<h3>Nepali Calendar</h3>
<p>
Keep track of Nepali dates with a detailed calendar. Know the month,
day, and year in Bikram Sambat with our easy-to-use Nepali Calendar
component.
</p>
<div class="btn-group">
<button class="btn" onclick="window.location.href='#'">
<i class="fa-solid fa-arrow-up-right-from-square"></i>
Check Calendar
</button>
<a
href="https://www.npmjs.com/package/nepali-calendar"
target="_blank"
class="npm-link"
>
<i class="fa-brands fa-npm"></i>
NPM</a
>
<a
href="https://github.com/build-for-nepal/bikram-samvat-calendar"
target="_blank"
class="github-link"
>
<i class="fa-brands fa-github"></i>
GitHub</a
>
</div>
</div>
</div>
<footer>
<p>© 2024 Build for Nepal. All Rights Reserved.</p>
</footer>
</body>
</html>