-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
180 lines (121 loc) · 5.62 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Charity Application using Blockchain</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<meta name="viewport" content="width=device-width, initial-sacle=1.0">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=BhuTuka+Expanded+One&family=Poppins&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=BhuTuka+Expanded+One&family=Dancing+Script:wght@700&family=Poppins&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=BhuTuka+Expanded+One&family=Dancing+Script:wght@700&family=Nunito+Sans:wght@200;300&family=Poppins&display=swap" rel="stylesheet">
</head>
<body>
<div class="top-container">
<nav class="navbar">
<img src="images/logo.png" alt="logo">
<h2 class="logo">Care<span class="connect">Connect</span></h2>
<ul>
<li><a href="#Causes">Causes</a></li>
<li><a href="#Donation">Donation</a></li>
<li><a href="#Mission">Mission</a></li>
</ul>
<!-- <a href="index1.html" target="_blank"><button class="btn1"><span class="btn">view Campaigns</span></button></a> -->
<a id="react" href="./client/index.html" target="_blank"><button class="btn1"><span class="btn">view Campaigns</span></button></a>
</nav>
<h1 class="heading1">We help all people in need</h1>
<h1 class="heading2">around the World</h1>
<h4 class="quote">
<span class="qtn"><img src="images/q-left.png">[</span> It's not how much we give , but how much love we put into giving<span class="qtn">] <img src="images/q-right.png"> </span>
</h4>
<p>~Mother Teresa</p>
<a href="#working"><button class="btn2"><span class="btn">Read more</span></button></a>
</div>
<!-- how its work section -->
<section class="working" id="working">
<h1 class="heading">How it Works</h1>
<div class="box-container">
<div class="box">
<img src="images/NGO.jpg" alt="NGO">
<div class="info">
<h1>01</h1>
<p>Careconnect connects doners willing to extend their support with NGOs in need of funding,enabling assistance to reach those who are in dire need.</p>
</div>
</div>
<div class="box">
<img src="images/ngo_collage.jpg" alt="NGO">
<div class="info">
<h1>02</h1>
<p>Doners have the option to choose a charitable cause that holds personal significance to them,such as natural disaster relief,healthcare and education for underprivileged communities,wildlife conservation,and various other causes.</option></p>
</div>
</div>
<div class="box">
<img src="images/donating-cryp.jpg" alt="NGO">
<div class="info">
<h1>03</h1>
<p>Doners contribute to their chosen causes by making their donation payments using cryptocurrency,which enables secure,low-fee donations,enabling transparent and accountable contributions.</p>
</div>
</div>
</div>
</section>
<!-- ending of how its work section -->
<!-- causes section -->
<section class="causes" id="Causes">
<h1 class="heading">Causes our Charity helps</h1>
<div class="container">
<div class="card">
<img src="images/Animals.jpg" alt="amimals">
<div class="intro">
<h1>Animals</h1>
<p>Stray animals roam the streets of the country withour food,veterinary care or refuge from the elements.Help us give them a chance.</p>
</div>
</div>
<div class="card">
<img src="images/earhquack.jpg" alt="earthquack">
<div class="intro">
<h1>Natural disaster</h1>
<p>Charities play an important role in supporting the victims of natural disasters -from providing food and shelter to counselling those who make have lost loved ones.</p>
</div>
</div>
<div class="card">
<img src="images/Education.jpg" alt="education for kids">
<div class="intro">
<h1>Education for kids</h1>
<p>Your small donation can make a Difference in the lives of the underprivileged children.Not only will giving to charities that help children benefit the children themselves, but it will also positively affect our society.</p>
</div>
</div>
</div>
</section>
<!-- end of causes section -->
<!-- Donation section -->
<section class="donation" id="Donation">
<h1 class="heading">Donation Options</h1>
<div class="donation-container">
<div class="box1">
<div class="card1">
<img src="images/One-Time_Donation.png" class="img1" alt="One-Time_Donation">
<p>Doners have the flexibility to make One-Time donation, supporting causes without making long-term commitments,according to varied giving preferences.</p>
</div>
</div>
<div class="box1">
<div class="card1">
<img src="images/give-recurring-donations.png" class="img1"alt="give-recurring-donations">
<p>Doners have the flexibility to set up recurring donations,providing ongoing support to their chosen on a regular basis.</p>
</div>
</div>
</div>
</section>
<!-- end of donation section -->
<!-- Mission section -->
<section class="Mission" id="Mission">
<h1 class="heading">Mission</h1>
<div class="">
</div>
</section>
<!-- end of Mission section -->
<script src="./index.js"></script>
</body>
</html>