Skip to content

This is a simple and responsive website template for community events. It’s built with HTML, CSS, JavaScript, and Bootstrap. You can easily change the content, add your own images, and connect the contact form using Web3Forms. Great for NGOs or any local group wanting to share events and info online.

Notifications You must be signed in to change notification settings

krosseyez/NGO-WEBSITE-TEMPLATE

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

17 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Community Event Website Template

This is a responsive template for a community-focused event website. It's built with HTML, CSS, and vanilla JavaScript, using the Bootstrap framework for easy styling and layout. The project is designed to be easily customizable for any organization or event.

Features

  • Responsive Design: Looks great on all devices, from mobile phones to desktop computers.
  • Dynamic Content: Sections for showcasing events, services, and an image gallery.
  • Contact Form: Includes a working contact form that can be configured with your own API key.
  • Easy to Customize: Built with clean code and clear instructions for personalization.
  • Translation-Ready: Includes a Google Translate widget to make your content accessible to a wider audience.

Getting Started

To get started with this template, simply clone the repository or download the files to your local machine.

git clone https://github.com/krosseyez/NGO-WEBSITE-TEMPLATE.git

Once you have the files, you can open index.html in your web browser to see the website.

Customization

1. Update Content and Branding

  • Logo: Replace the placeholder logo in the assets/images/ directory with your own logo file. You can also update the logo path in index.html and the event pages.
  • Text: All text content can be updated directly in the HTML files (index.html, html/events/event1.html, etc.).
  • Images: Replace the placeholder images in the gallery and other sections with your own images. The placeholders are from https://placehold.co/.

2. Configure the Contact Form

The contact form uses Web3Forms to handle submissions. To receive messages from the form, you need to:

  1. Sign up for a free account at Web3Forms.
  2. Create a new access key.
  3. Open index.html and replace "YOUR_ACCESS_KEY" with your own key in the contact form section:
<input type="hidden" name="access_key" value="YOUR_ACCESS_KEY">

3. Modify Styles

You can customize the website's appearance by editing the css/style.css file. This file contains custom styles that override the default Bootstrap styles.

Project Structure

.
├── assets
│   └── images/       # Store your images here
├── css
│   └── style.css     # Custom stylesheets
├── html
│   └── events/       # Event-specific pages
├── js
│   └── main.js       # Custom JavaScript
├── index.html        # Main landing page
└── README.md         # This file

License

This project is open-source and available under the MIT License.

About

This is a simple and responsive website template for community events. It’s built with HTML, CSS, JavaScript, and Bootstrap. You can easily change the content, add your own images, and connect the contact form using Web3Forms. Great for NGOs or any local group wanting to share events and info online.

Resources

Stars

Watchers

Forks

Packages

No packages published