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.
- 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.
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.
- Logo: Replace the placeholder logo in the
assets/images/
directory with your own logo file. You can also update the logo path inindex.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/
.
The contact form uses Web3Forms to handle submissions. To receive messages from the form, you need to:
- Sign up for a free account at Web3Forms.
- Create a new access key.
- 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">
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.
.
├── 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
This project is open-source and available under the MIT License.