🎓 SMK School Website Template

Welcome to the SMK School Website Template, a free and open‑source HTML/CSS/Bootstrap 5 template designed for vocational high schools (SMK). Feel free to use, modify, and adapt this template to suit your needs!

🚀 Features

Responsive Design: Built with Bootstrap 5 for mobile‑first layouts.
Easy Customization: Clear HTML structure, utility classes, for quick theme tweaks
Modern Aesthetics: Clean, minimal layout featuring navbar, hero section, cards, and footer
Demo Data: Includes placeholder content (school name, images, events) so you can see layout in action

🛠️ Technologies

HTML 5
CSS 3
Bootstrap 5
Lightbox for Boostrap 5

📦 Installation & Usage

Create a project folder
- Open your terminal or command prompt
- Navigate to your desired parent directory (e.g., cd ~/projects)
- Create and enter a new folder:
```
mkdir smk-school-website-template
cd smk-school-website-template
```

Clone the repository

git clone "https://github.com/Miawwh/smk-school-website-template.git"

Note: Make sure you have Git installed on your system.

Open the project in Visual Studio Code
```
code .
```
This command launches VS Code in the current directory
View the template in your browser
- Open the index.html file directly in your browser.
- (Optional) Install and use the Live Server extension in VS Code for instant reloads
Customize content and styles in the assets/ folder:
- assets/css/ for styles (edit .css files to change colors, typography, etc.)
- assets/img/ for images (replace placeholder graphics and screenshots)
Deploy your static site:
- 🔹 Free options:
  - GitHub Pages: Push to a gh-pages branch or enable Pages in repo settings.
  - Netlify: Drag & drop the project folder or connect via Git.
  - Vercel: Import your GitHub repository and deploy instantly.
- 🔸 Paid hosting: Upload the index.html and assets/ folder to any static file–capable server
Need more guidance? If you're still a bit confused, watch this YouTube tutorial:
https://youtu.be/q9wc7hUrW8U?si=lHNXVNABfwGBCxNu

✏️ Customization

Change school name, logo, or images by editing the HTML files directly (e.g., index.html or other page templates)
Adjust colors and other style tweaks in the CSS files located in assets/css/
Swap out placeholder text & images in the HTML content to match your own data
Add new sections or components by following the existing Bootstrap 5 structure

💡 Demo & Video Tutorial

Live Demo: Preview the template
Note: All content is placeholder and for demonstration only
Video Tutorial: Coming soon on YouTube!
Stay tuned — the video guide will be published once the template is finalized

📝 Feedback & Contributions

Found a bug, typo, or have suggestions? Feel free to reach out:

GitHub: @Miawwh
Email: miawhhh6@gmail.com

Contributions are welcome! Submit a pull request or open an issue

⚖️ License

This project is open source and free. Use it for personal, educational, or commercial projects. Modify as you wish!

Miawwh/smk-school-website-template