-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
97 lines (97 loc) · 10.5 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
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<header class="text-gray-400 bg-[#f8f8f8] body-font">
<div class="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center"><a class="flex title-font font-medium items-center text-white mb-4 md:mb-0"><a href="index.html"><img src="logo.png" class="w-[75px] h-[50px]"></a>
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path></svg>
</a>
<nav class="md:ml-auto flex flex-wrap items-center text-base justify-center">
<a href="index.html" class="mr-5 ">Home</a>
<a href="about.html" class="mr-5 ">About Us</a>
<a href="updates.html" class="mr-5 ">Updates</a>
<a href="contact.html" class="mr-5 ">Contact Us</a></nav>
</div>
</header>
<section class="p-6 ">
<div class="container grid gap-6 mx-auto text-center lg:grid-cols-2 xl:grid-cols-5 border-gray-800">
<div class="w-full px-6 py-16 rounded-md sm:px-12 md:px-16 xl:col-span-2 border-gray-800"><span class="block mb-2 ">Sangharshseal Jan Kalyan Seva Samiti</span>
<h1 class="text-5xl font-extrabold text-gray-500">“For it is in giving that we receive.” </h1>
<p class="my-8"><span class="font-medium text-gray-500">SJKSS </span>is a charitable organisation which does various kinds of social work in rural areas in North India, particularly in the Delhi NCR region. </p>
<form novalidate="" action="" class="self-stretch space-y-3 ng-untouched ng-pristine ng-valid border-solid border-4 px-4 py-2 border-gray-300 bg-gray-300 rounded-md">
<div><label for="name" class="text-sm sr-only border-gray-800">Your name</label><input id="name" type="text" placeholder="Your name" class="w-full px-2 py-2 rounded-md focus:ring focus:ring-[#A4DEF9] border-gray-900 bg-gray-300"></div>
<div><label for="lastname" class="text-sm sr-only">Enter Amount</label><input id="lastname" type="text" placeholder="₹500" class="w-full px-2 py-2 rounded-md focus:ring focus:ring-[#a4def9] border-gray-900 bg-gray-300"></div>
<div class="grid grid-cols-2 gap-2"><a href="index.html"><button type="button" class="w-full my-2 self-center px-4 py-2 text-md rounded focus:ring hover:ring focus:ring-opacity-75 bg-[#465775] text-[#f8f8f8] focus:ring-green-500 hover:ring-[#a4def9]">Donate</button></a><a href="contact.html"><button type="button" class="w-full my-2 self-center px-4 py-2 text-md rounded focus:ring hover:ring focus:ring-opacity-75 bg-[#465775] text-[#f8f8f8] focus:ring-green-500 hover:ring-[#a4def9]">Donate in Kind </button></a></div>
</form>
</div><img src="https://images.unsplash.com/photo-1487811566627-ecd6321dfd2b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTd8fGluZGlhbnxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60" alt="" class="object-cover w-full h-[550px] rounded-md xl:col-span-3 ">
</div>
</section>
<div class="bg-gray-700">
<div class="px-4 mx-auto sm:max-w-xl md:max-w-full lg:max-w-screen-xl md:px-24 lg:px-8 lg:py-20 text-[#f8f8f8]">
<h2 class="mb-8 text-4xl font-bold leading-none text-center">Our Aims</h2>
<ul class="grid gap-3 md:grid-cols-2 lg:grid-cols-3">
<li class="flex items-center space-x-2"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="w-5 h-5 fill-[#f8f8f8] text-[#465775]">
<path d="M426.072,86.928A238.75,238.75,0,0,0,88.428,424.572,238.75,238.75,0,0,0,426.072,86.928ZM257.25,462.5c-114,0-206.75-92.748-206.75-206.75S143.248,49,257.25,49,464,141.748,464,255.75,371.252,462.5,257.25,462.5Z"></path>
<polygon points="221.27 305.808 147.857 232.396 125.23 255.023 221.27 351.063 388.77 183.564 366.142 160.937 221.27 305.808"></polygon>
</svg><span>Sending more than 18 million studnets to back to school </span></li>
<li class="flex items-center space-x-2"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="w-5 h-5 fill-[#f8f8f8] text-[#465775]">
<path d="M426.072,86.928A238.75,238.75,0,0,0,88.428,424.572,238.75,238.75,0,0,0,426.072,86.928ZM257.25,462.5c-114,0-206.75-92.748-206.75-206.75S143.248,49,257.25,49,464,141.748,464,255.75,371.252,462.5,257.25,462.5Z"></path>
<polygon points="221.27 305.808 147.857 232.396 125.23 255.023 221.27 351.063 388.77 183.564 366.142 160.937 221.27 305.808"></polygon>
</svg><span>Provide good quality roads and houses to more than 60,000 villagers</span></li>
<li class="flex items-center space-x-2"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="w-5 h-5 fill-[#f8f8f8] text-[#465775]">
<path d="M426.072,86.928A238.75,238.75,0,0,0,88.428,424.572,238.75,238.75,0,0,0,426.072,86.928ZM257.25,462.5c-114,0-206.75-92.748-206.75-206.75S143.248,49,257.25,49,464,141.748,464,255.75,371.252,462.5,257.25,462.5Z"></path>
<polygon points="221.27 305.808 147.857 232.396 125.23 255.023 221.27 351.063 388.77 183.564 366.142 160.937 221.27 305.808"></polygon>
</svg><span>Providing fod for the needy</span></li>
<li class="flex items-center space-x-2"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="w-5 h-5 fill-[#f8f8f8] text-[#465775]">
<path d="M426.072,86.928A238.75,238.75,0,0,0,88.428,424.572,238.75,238.75,0,0,0,426.072,86.928ZM257.25,462.5c-114,0-206.75-92.748-206.75-206.75S143.248,49,257.25,49,464,141.748,464,255.75,371.252,462.5,257.25,462.5Z"></path>
<polygon points="221.27 305.808 147.857 232.396 125.23 255.023 221.27 351.063 388.77 183.564 366.142 160.937 221.27 305.808"></polygon>
</svg><span>Planting 50 million trees till 2025</span></li>
<li class="flex items-center space-x-2"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="w-5 h-5 fill-[#f8f8f8] text-[#465775]">
<path d="M426.072,86.928A238.75,238.75,0,0,0,88.428,424.572,238.75,238.75,0,0,0,426.072,86.928ZM257.25,462.5c-114,0-206.75-92.748-206.75-206.75S143.248,49,257.25,49,464,141.748,464,255.75,371.252,462.5,257.25,462.5Z"></path>
<polygon points="221.27 305.808 147.857 232.396 125.23 255.023 221.27 351.063 388.77 183.564 366.142 160.937 221.27 305.808"></polygon>
</svg><span>Providing employment to more than 10,000 people each year</span></li>
<li class="flex items-center space-x-2"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="w-5 h-5 fill-[#f8f8f8] text-[#465775]">
<path d="M426.072,86.928A238.75,238.75,0,0,0,88.428,424.572,238.75,238.75,0,0,0,426.072,86.928ZM257.25,462.5c-114,0-206.75-92.748-206.75-206.75S143.248,49,257.25,49,464,141.748,464,255.75,371.252,462.5,257.25,462.5Z"></path>
<polygon points="221.27 305.808 147.857 232.396 125.23 255.023 221.27 351.063 388.77 183.564 366.142 160.937 221.27 305.808"></polygon>
</svg><span>Reconstructing ruined areas </span></li>
</ul>
</div>
</div>
<section class="py-6 sm:py-12 bg-[#f8f8f8] text-gray-500">
<div class="container p-6 mx-auto space-y-8">
<div class="space-y-2 text-center">
<h2 class="text-3xl font-bold">Recent Activities </h2>
</div>
<div class="grid grid-cols-1 gap-x-4 gap-y-8 md:grid-cols-2 lg:grid-cols-3">
<article class="flex flex-col bg-gray-200 px-2 py-2 rounded-md"><a rel="noopener noreferrer" href="#" aria-label="Te nulla oportere reprimique his dolorum"><img alt="" class="object-cover w-full h-52" src="./Images/SJKS_Sankhol_Media11.jpeg "></a>
<div class="flex flex-col flex-1 p-6"><a rel="noopener noreferrer" href="#" aria-label="Te nulla oportere reprimique his dolorum"></a><a rel="noopener noreferrer" href="#" class="text-xs tracking-wider uppercase hover:underline text-[#465775]">Awareness Drive</a>
<h3 class="flex-1 py-2 text-lg font-semibold leading-snug">Our team visited Gandhi vihar village and educated the people about ways to harvest rain water </h3>
<div class="flex flex-wrap justify-between pt-3 space-x-2 text-xs text-gray-400"><span>October 2, 2022</span></div>
</div>
</article>
<article class="flex flex-col bg-gray-200 px-2 py-2 rounded-md"><a rel="noopener noreferrer" href="#" aria-label="Te nulla oportere reprimique his dolorum"><img alt="" class="object-cover w-full h-52 bg-gray-500" src="Images/SJKS_Sankhol_Media18.jpeg"></a>
<div class="flex flex-col flex-1 p-6"><a rel="noopener noreferrer" href="#" aria-label="Te nulla oportere reprimique his dolorum"></a><a rel="noopener noreferrer" href="#" class="text-xs tracking-wider uppercase hover:underline text-[#465775]">Plantation Drive</a>
<h3 class="flex-1 py-2 text-lg font-semibold leading-snug">Our Team visited SushantPur village and planted more than 150 trees</h3>
<div class="flex flex-wrap justify-between pt-3 space-x-2 text-xs text-gray-400"><span>May 5, 2022</span></div>
</div>
</article>
<article class="flex flex-col bg-gray-200 px-2 py-2 rounded-md"><a rel="noopener noreferrer" href="#" aria-label="Te nulla oportere reprimique his dolorum"><img alt="" class="object-cover w-full h-52 bg-gray-500" src="Images/SJKS_Sankhol_Media1.jpeg"></a>
<div class="flex flex-col flex-1 p-6"><a rel="noopener noreferrer" href="#" aria-label="Te nulla oportere reprimique his dolorum"></a><a rel="noopener noreferrer" href="#" class="text-xs tracking-wider uppercase hover:underline text-[#465775]">Road Reconstruction</a>
<h3 class="flex-1 py-2 text-lg font-semibold leading-snug">Our Team reconstructed the main road joining village Shakur Pur and Sukhdev Nagar</h3>
<div class="flex flex-wrap justify-between pt-3 space-x-2 text-xs text-gray-400"><span>June 3, 2022</span></div>
</div>
</article>
</div>
</div>
</section>
<section class="py-6 bg-gray-700 text-gray-50">
<div class="container mx-auto flex flex-col items-center justify-center p-4 space-y-8 md:p-10 lg:space-y-0 lg:flex-row lg:justify-between">
<h1 class="text-3xl font-semibold leading-tight text-center lg:text-left">Want to read more ?</h1><a href="updates.html"><button class="px-8 py-3 text-lg font-semibold rounded bg-[#f8f8f8] text-[#465775] focus:ring hover:ring focus:ring-opacity-75 focus:ring-green-300 hover:ring-[#a4def9]">Click Here</button></a>
</div>
</section>
</body>
</html>