-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
131 lines (127 loc) · 6.53 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width,initial scale=1.0">
<meta charset="UTF-8">
<title>Payment Gateway</title>
<link rel="stylesheet" href="styles.css">
<!--Google Fonts-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,700;1,400&family=Mukta:wght@300;400&display=swap" rel="stylesheet">
</head>
<body>
<nav>
<header>NON-PROFITABLE ORGANISATION</header>
<div class="navbar">
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#services">Services</a>
<a href="#contact">Contact</a>
</div>
</nav>
<!--Home Section-->
<section class="home" id="home">
<img src="bg.jpg" alt="Background Image">
<div class="content" data-0-top="opacity:0;left:100px;" data-200-top="opacity:1;left:0px;">
<h1> Serene Haven Society </h1>
<p>Your commitment to making someone's life better echoes the sentiment that, unless we care deeply, positive change may remain elusive.</p>
<br>
<!--Embed html code for payment donation button-->
<form> <script src="https://checkout.razorpay.com/v1/payment-button.js" data-payment_button_id="pl_HywdKUjSGWwI0t" async> </script> </form>
</div>
</section>
<!--About Section-->
<section class="about" id="about">
<div class="redbg">
<h2 data-center-center="opacity:1;left:0px;" data-0-bottom="opacity:0;left:500px;">Who we are</h2>
<p>Serene Haven Society is a non-profit organization established in 1980, passionately dedicated to making a positive impact on the lives of individuals facing adversity.
As the name "Serene Haven Society" suggests, an organization dedicated to providing a peaceful and secure environment for individuals in need.
Our mission revolves around providing essential services such as medical assistance, nutritious food, and secure shelter to individuals facing adversity.
We believe in creating a haven of tranquility, offering not only physical support but also fostering a sense of community and empowerment.
</p>
</div>
<div class="imgBx1"></div>
</section>
<!--Services Section-->
<section class="services" id="services">
<h2 class="heading" data-center-center="opacity:1;left:0px;" data-0-bottom="opacity:0;left:500px;">Our Services</h2>
<p>Furthering our cause is the most important goal of our organization. We seek to support, empower, and provide high quality resources to our community in a safe and secure environment.
Our success isn’t measured in terms of wealth or profit margin, but by the value we provide to those we serve.
</p>
<div class="container">
<div class="serviceBx">
<div>
<img src="icon2.png" alt="Food Donation Icon" class="icon1">
<h4>Food <br>Donation</h4>
</div>
</div>
<div class="serviceBx">
<div>
<img src="icon1.png" alt="Medical Assistance Icon" class="icon1">
<h4>Medical<br> Assistance</h4>
</div>
</div>
<div class="serviceBx">
<div>
<img src="icon3.png" alt="Homeless Outreach Icon" class="icon1">
<h4>Homeless<br> outreach</h4>
</div>
</div>
</div>
</section>
<section class="technology">
<div class="contentBx">
<h2>100% Safe Transaction!</h2>
<p>Secure online banking and payment applications like PayPal, net banking, and Google Pay, ensuring safety of transactions.
</p>
</div>
<div class="tech">
<img src="tech.png" alt="Technology Image">
</div>
</section>
<section class="testimonials">
<h2>Some quotes we live by</h2>
<div class="container">
<div class="contentBx">
<div>
<blockquote>"We make a living by what we get, but we make a life by what we give."
</blockquote><br>
<h3>~Winston Churchill</h3>
</div>
</div>
<div class="contentBx">
<div>
<blockquote>"The smallest act of kindness is worth more than the grandest intention."</blockquote>
<br>
<h3>~Oscar Wilde</h3>
</div>
</div>
</div>
</section>
<!--Contact Form-->
<section class="about" id="contact">
<div class="redbg">
<div class="form">
<h2>Contact Us</h2>
<input type="text" name="name" placeholder="Name" required>
<input type="email" name="email" pattern=".+@example\.com" size="30" placeholder="Email" required>
<input type="tel" name="phno" pattern="[0-9]{10}" placeholder="Contact No" required>
<textarea placeholder="Write your message here" rows="5" required></textarea>
<input type="submit" value="Send">
</div>
</div>
<div class="imgBx2"></div>
</section>
<!--Footer-->
<footer class="footer">
<p>**Done for Sparks Foundation**</p>
<ul>
<li>Follow us on:</li>
<li><a href="#"><img src="facebook.png" alt="Facebook Icon" class="icon"></a></li>
<li><a href="#"><img src="twitter.png" alt="Twitter Icon" class="icon"></a></li>
<li><a href="#"><img src="linkedin.png" alt="LinkedIn Icon" class="icon"></a></li>
</ul>
</footer>
</body>
</html>