Covid-19-NGO-Website-HTML-CSS-JAVASCRIPT-

KO | EN

gitlite — search

#react #ai #llm #golang #go #linux #docker #nodejs #awesome #kubernetes #awesome-list #vue #security #mcp

Covid-19-NGO-Website-HTML-CSS-JAVASCRIPT-

(★ 12)

HTML-CSS-JAVASCRIPT Based website

Covid-19-NGO-Website-HTML-CSS-JAVASCRIPT- 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Covid-19-NGO-Website-HTML-CSS-JAVASCRIPT-

Defining this repository is tricky. I hope you like it and if you can improve a component leave me an issue.

I really appreciate if you leave me a star, this repository is free and i don't have any kind of license. I have simply created it with the HTML,CSS and Javascript.

This project aims at being a complete, end-to-end solution for the functioning, and management of the NGO, which is a not-for-profit organization founded in order to improve the lives and livelihoods of people from the vulnerable, marginalized and under-developed sections of the society.

The intent of this project is to provide an efficient tool from the persective of the 5 different types of users: Donors, Volunteers, Fundraisers ,poor and the needy ones and the Management.

Visit the website https://shikha12264.github.io/Covid-19-NGO-Website-HTML-CSS-JAVASCRIPT-/

(NGO’s website)	
1.         Home Page	 			         2. About Us Page
3.         How it works Page	    	4. Donation Page
5.         Gallery Page		        	6. Contact Us Page

# HOME PAGE 
![image](https://user-images.githubusercontent.com/64529469/105627556-a64d8600-5e5d-11eb-8468-c0eab2dc2992.png)

Menu and Slideshow

![image](https://user-images.githubusercontent.com/64529469/105627723-8bc7dc80-5e5e-11eb-9f38-5956d350c176.png)

Description Glowing Text & Cards used

![image](https://user-images.githubusercontent.com/64529469/105630221-f3395880-5e6d-11eb-9e69-e39c700bd342.png)

After clicking helpline number a page will be opened and it will contain helpline numbers of all states of India

![image](https://user-images.githubusercontent.com/64529469/105630261-224fca00-5e6e-11eb-942a-098f70c2ce78.png)

After clicking updates a page will be opened and it will contain Corona updates i.e. Corona cases in India

![image](https://user-images.githubusercontent.com/64529469/105630274-3a274e00-5e6e-11eb-810e-76ec7feb42f8.png)

This is how you’ll able to see corona updates, death, recovered cases, etc.

![image](https://user-images.githubusercontent.com/64529469/105630293-51fed200-5e6e-11eb-932d-a394a2c7a41e.png)

After clicking donate you’ll be directed to donation page

![image](https://user-images.githubusercontent.com/64529469/105630313-78bd0880-5e6e-11eb-8b92-f65d60f40ca2.png)

(home pg) after clicking on explore a page will be opened and it will show covid’s information with symptoms (with video) and preventions (with video).

![image](https://user-images.githubusercontent.com/64529469/105630355-b9b51d00-5e6e-11eb-8f1b-b56ba237174d.png)

![image](https://user-images.githubusercontent.com/64529469/105630366-c8033900-5e6e-11eb-8cfe-fecfe45223ce.png)

![image](https://user-images.githubusercontent.com/64529469/105630373-d6515500-5e6e-11eb-9456-fb09ff969718.png)

here comes the Slider

![image](https://user-images.githubusercontent.com/64529469/105630420-2203fe80-5e6f-11eb-83c9-36e7dca04d16.png)

Stories Of Hope

![image](https://user-images.githubusercontent.com/64529469/105630437-3e07a000-5e6f-11eb-8c6b-4c92132f362b.png)

After clicking on read…

![image](https://user-images.githubusercontent.com/64529469/105630477-7f984b00-5e6f-11eb-84b9-014997757ea9.png)
![image](https://user-images.githubusercontent.com/64529469/105630498-9c348300-5e6f-11eb-866e-b76e51c1d2d6.png)
![image](https://user-images.githubusercontent.com/64529469/105630546-e74e9600-5e6f-11eb-8c68-a0023a053413.png)
![image](https://user-images.githubusercontent.com/64529469/105630556-f3d2ee80-5e6f-11eb-82a6-e263d85b6337.png)
![image](https://user-images.githubusercontent.com/64529469/105630577-064d2800-5e70-11eb-8b60-03cea744ce7c.png)

Small message with video (home pg)

![image](https://user-images.githubusercontent.com/64529469/105630596-20870600-5e70-11eb-9b19-113edf8811d8.png)

Slideshow of Corona Warriors with appreciation/thank you note

![image](https://user-images.githubusercontent.com/64529469/105630617-3694c680-5e70-11eb-9b62-6f6b8da00efd.png)
![image](https://user-images.githubusercontent.com/64529469/105630634-4b715a00-5e70-11eb-99fc-7059d266ff19.png)

After clicking on Visit Our Gallery you’ll be directed to gallery page

![image](https://user-images.githubusercontent.com/64529469/105630653-6643ce80-5e70-11eb-85fd-d4d68f0f39ce.png)

Flip cards and impact used here

![image](https://user-images.githubusercontent.com/64529469/105630674-84113380-5e70-11eb-8ad1-8e7a19ffdfa6.png)
![image](https://user-images.githubusercontent.com/64529469/105630684-97240380-5e70-11eb-87ce-d4421858952e.png)

Footer

![image](https://user-images.githubusercontent.com/64529469/105630705-aefb8780-5e70-11eb-9f72-27634d0ab4b6.png)

# HOW IT WORKS Page

Navigation  and Menu :

![image](https://user-images.githubusercontent.com/64529469/105630909-a788ae00-5e71-11eb-95be-d6dd0fdcee8b.png)

Description:

![image](https://user-images.githubusercontent.com/64529469/105630929-bc654180-5e71-11eb-9c2c-e148a96e2ec3.png)

List of Activities done by our organization and how this NGO actually works and operates , all the information of the following activities is given below:

![image](https://user-images.githubusercontent.com/64529469/105630947-d2730200-5e71-11eb-91c8-392d567e0686.png)

Main goal and purpose of this organization :

![image](https://user-images.githubusercontent.com/64529469/105630963-e3bc0e80-5e71-11eb-8f2b-cfe9eb9e77e4.png)

Image and description :

![image](https://user-images.githubusercontent.com/64529469/105630980-fa626580-5e71-11eb-8116-27ed1c244e00.png)

Image and Description :

![image](https://user-images.githubusercontent.com/64529469/105631006-2251c900-5e72-11eb-828d-8b7baa51cd90.png)

Origin of your NGO :

![image](https://user-images.githubusercontent.com/64529469/105631021-47463c00-5e72-11eb-931e-913f251d9f28.png)
![image](https://user-images.githubusercontent.com/64529469/105631033-54fbc180-5e72-11eb-8773-f7aa2c25ff13.png)

Description :

![image](https://user-images.githubusercontent.com/64529469/105631055-765cad80-5e72-11eb-8ccd-276f57e05d26.png)
![image](https://user-images.githubusercontent.com/64529469/105631071-88d6e700-5e72-11eb-8d46-c607b7c7f40b.png)

Registration form to become  a Volunteer of our NGO :

![image](https://user-images.githubusercontent.com/64529469/105631093-a1470180-5e72-11eb-9f04-c72df156470a.png)

Footer ;

![image](https://user-images.githubusercontent.com/64529469/105631110-b7ed5880-5e72-11eb-8b70-097fde615280.png)

# ABOUT US Page

Navigation and Menu:-

![image](https://user-images.githubusercontent.com/64529469/105631127-d2bfcd00-5e72-11eb-93c1-5e5ae20f0fb2.png)

Our History and how our idea of NGO was turned into reality:-

![image](https://user-images.githubusercontent.com/64529469/105631141-eb2fe780-5e72-11eb-9eb9-7689b0ce1523.png)

How will your Donations be beneficial to the Organisation:-

![image](https://user-images.githubusercontent.com/64529469/105631158-fedb4e00-5e72-11eb-8be9-c67d360481b1.png)

The various Projects undertaken by our NGO:-

![image](https://user-images.githubusercontent.com/64529469/105631167-14507800-5e73-11eb-926c-de635d0159f7.png)

Images of our Volunteers helping needy people:-

![image](https://user-images.githubusercontent.com/64529469/105631174-27fbde80-5e73-11eb-87c4-9eb42f0c4d12.png)

Footer:-

![image](https://user-images.githubusercontent.com/64529469/105631191-3d710880-5e73-11eb-9c32-0d357dea8c15.png)

# DONATION PAGE
Navigation:

When we click on the donate button it directs to donation form below.

![image](https://user-images.githubusercontent.com/64529469/105631205-4feb4200-5e73-11eb-9a6a-6b9bbc90cd5a.png)

Latest Donations:
It shows the cards of the people that donated recently, when we hover there’s a shadow effect. At the bottom there’s a scroll bar.

![image](https://user-images.githubusercontent.com/64529469/105631220-698c8980-5e73-11eb-9654-418424414a96.png)

About the NGO:
It has a card that again directs you to the donation forms. And shows the amount raised and the number of donors.

![image](https://user-images.githubusercontent.com/64529469/105631236-7f9a4a00-5e73-11eb-9d68-afb312eccf26.png)

The address at bottom has a typewriter effect:

![image](https://user-images.githubusercontent.com/64529469/105631255-95a80a80-5e73-11eb-9c1c-aea61bc3e44f.png)

In this section, when we click on the image is displayed as follows:

![image](https://user-images.githubusercontent.com/64529469/105631267-afe1e880-5e73-11eb-8fa8-d03575311374.png)
![image](https://user-images.githubusercontent.com/64529469/105631298-e0298700-5e73-11eb-9cb1-4b0eec0d6624.png)
![image](https://user-images.githubusercontent.com/64529469/105631322-02bba000-5e74-11eb-8f0d-cc2a21abb602.png)

This section displays by how people can make an online payment.

![image](https://user-images.githubusercontent.com/64529469/105631344-18c96080-5e74-11eb-826e-dd80bba63a89.png)

Donation forms:
There are two forms. When we choose a option it displays the amount in the Total donation box.
If the donation button is clicked without entering data it directs you to the empty. All the important fields are set to required.

![image](https://user-images.githubusercontent.com/64529469/105631388-44e4e180-5e74-11eb-80e1-22b789fcd1f4.png)

Details about the online payment and about donate through cheque:

![image](https://user-images.githubusercontent.com/64529469/105631404-5928de80-5e74-11eb-8ee3-60c0e8e9d8c4.png)

Photos:
When the “VIEW OUR GALLERY” button is clicked it directs to the gallery page. When the images are clicked they are displayed.

![image](https://user-images.githubusercontent.com/64529469/105631433-6f369f00-5e74-11eb-844a-21b920259f94.png)
![image](https://user-images.githubusercontent.com/64529469/105631445-81b0d880-5e74-11eb-8a16-b0f6ac512dde.png)

Be a Volunteer Form;

![image](https://user-images.githubusercontent.com/64529469/105631474-9b522000-5e74-11eb-9136-2a3d89d3cf68.png)

Footer:

![image](https://user-images.githubusercontent.com/64529469/105631487-b0c74a00-5e74-11eb-8943-5a6818ccc557.png)

# GALLERY PAGE
Used Menu, Image with Transparent text block :
Text block with linear gradients, section frames with circular images.

![image](https://user-images.githubusercontent.com/64529469/105631509-d2c0cc80-5e74-11eb-9e4c-b3149c73b01b.png)

This gallery section includes all the coverages and footages of our Ngo’s contribution towards helping the poor and the needy during this pandemic situation.
So, here are the two sections – consisting of photo gallery section and video gallery section

![image](https://user-images.githubusercontent.com/64529469/105631542-fbe15d00-5e74-11eb-93d1-5eb7c1570148.png)

On clicking photo gallery you’ll be directed to the page including images of charities and donation drives at our foundation.
Photo gallery page:

Menu with previous button, Image with hover effect

![image](https://user-images.githubusercontent.com/64529469/105631606-44007f80-5e75-11eb-8275-7bb5901d1ef0.png)

Lightbox (Modal Image Gallery) including hover images, slides, previous and next buttons :

![image](https://user-images.githubusercontent.com/64529469/105631630-6397a800-5e75-11eb-8552-5d66d23bcf06.png)
![image](https://user-images.githubusercontent.com/64529469/105631655-74e0b480-5e75-11eb-89e2-fe684ae9267a.png)

On clicking on any image, a lightbox would appear as shown below.
(which would include images with text description below and slideshow including slides with previous and next buttons to view these slides)

![image](https://user-images.githubusercontent.com/64529469/105631669-8fb32900-5e75-11eb-8aae-f17c41d1e8c6.png)

Video Gallery
On clicking video gallery a page will be opened that will showcase all the coverages of our donation drives, achievements and accomplishments.

![image](https://user-images.githubusercontent.com/64529469/105631687-b1141500-5e75-11eb-9c54-94b98f6346b9.png)
![image](https://user-images.githubusercontent.com/64529469/105631732-e9b3ee80-5e75-11eb-9b80-83757d43c424.png)
![image](https://user-images.githubusercontent.com/64529469/105631742-f89aa100-5e75-11eb-850b-d5a3daf88b1e.png)

So,this is how these further videos will appear with the description below.
After clicking the video, you’ll be able to view that particular video.

![image](https://user-images.githubusercontent.com/64529469/105631766-19fb8d00-5e76-11eb-8933-2c5d6f01905f.png)
![image](https://user-images.githubusercontent.com/64529469/105631769-1d8f1400-5e76-11eb-8349-daec0d8e8f30.png)
![image](https://user-images.githubusercontent.com/64529469/105631772-24b62200-5e76-11eb-916a-5a2946071dfa.png)

Featured Missions – 
This section gives you a journey of what exactly our Ngo believes in and implements on.
On clicking “Donate for the underprivileged” you will be directed to the donation page 
Mission 1 –

![image](https://user-images.githubusercontent.com/64529469/105631799-44e5e100-5e76-11eb-9771-99ab898edf21.png)

After clicking on read more >>
You will be directed towards a page including all the information regarding that particular mission and how you can come forward as a fundraiser for the mission.
Menu with pagination, Image , section frames with text cards , sticky donation button at the bottom.

![image](https://user-images.githubusercontent.com/64529469/105631820-60e98280-5e76-11eb-809a-49e6de178291.png)
![image](https://user-images.githubusercontent.com/64529469/105631822-647d0980-5e76-11eb-94cc-2b40354c58ab.png)
![image](https://user-images.githubusercontent.com/64529469/105631828-6ba41780-5e76-11eb-879e-3210e0bef229.png)

Iframes cards including image and text (alignment using tables)

![image](https://user-images.githubusercontent.com/64529469/105631850-8bd3d680-5e76-11eb-95f7-3ae07e4bb82e.png)

Images besides text

![image](https://user-images.githubusercontent.com/64529469/105631877-a27a2d80-5e76-11eb-9df8-68ead6ca32c1.png)

Mission 2 –

![image](https://user-images.githubusercontent.com/64529469/105631916-d2c1cc00-5e76-11eb-996a-54078a26c2ce.png)

After clicking on read more >>

![image](https://user-images.githubusercontent.com/64529469/105631941-ed944080-5e76-11eb-96dc-23f625086b4e.png)
![image](https://user-images.githubusercontent.com/64529469/105631947-f1c05e00-5e76-11eb-85b2-67b8f13c6287.png)
![image](https://user-images.githubusercontent.com/64529469/105631953-f7b63f00-5e76-11eb-8eab-219d417f8501.png)
![image](https://user-images.githubusercontent.com/64529469/105631964-00a71080-5e77-11eb-97c9-c75a569d27bf.png)
![image](https://user-images.githubusercontent.com/64529469/105631971-069cf180-5e77-11eb-9490-4eb0ccb4e408.png)
![image](https://user-images.githubusercontent.com/64529469/105631982-0f8dc300-5e77-11eb-9a2e-0c8e64596284.png)
![image](https://user-images.githubusercontent.com/64529469/105631987-13b9e080-5e77-11eb-8d4b-f7c111774708.png)

all the further 5 missions can be visited using these

![image](https://user-images.githubusercontent.com/64529469/105632043-41068e80-5e77-11eb-8dd4-3a9843be5467.png)

Focused Areas of Work – 
Image (converted to rounded image), text wrapped around circular image.
Right image alignment

![image](https://user-images.githubusercontent.com/64529469/105632062-5e3b5d00-5e77-11eb-9fa5-b0a114c47411.png)

Left image alignment

![image](https://user-images.githubusercontent.com/64529469/105632077-7612e100-5e77-11eb-866c-3ed774545c50.png)

Footer

![image](https://user-images.githubusercontent.com/64529469/105632101-9e9adb00-5e77-11eb-8591-d77ca71ea26c.png)

# Contact Us Page

![image](https://user-images.githubusercontent.com/64529469/105632248-2da7f300-5e78-11eb-867f-901cfe5bf5e3.png)
![image](https://user-images.githubusercontent.com/64529469/105632282-46b0a400-5e78-11eb-85e4-a4280cd62686.png)
![image](https://user-images.githubusercontent.com/64529469/105632304-5b8d3780-5e78-11eb-9e74-a53daea121f1.png)

Covid-19-NGO-Website-HTML-CSS-JAVASCRIPT-

Covid-19-NGO-Website-HTML-CSS-JAVASCRIPT- 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Covid-19-NGO-Website-HTML-CSS-JAVASCRIPT-

Covid-19-NGO-Website-HTML-CSS-JAVASCRIPT- 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README