Arabic environmental educational website for the Student Activities Garden at the College of Computer Science and Information Technology – University of Anbar.
This website presents the garden as a digital, interactive, and educational experience. It allows visitors to explore plant information, project photos, rehabilitation stages, the project location, and the participating student team.
The project is connected to a printed QR code displayed at the university, allowing visitors to scan the code before visiting the garden.
https://bilalzamilahmed.page/Garden/This link is kept stable because the project is connected to a printed QR code displayed at the university.
ميدان النشاطات الطلابية is an environmental and educational student project created inside the College of Computer Science and Information Technology at the University of Anbar.
The website was built to document the project digitally and make the garden easier to explore through a clean Arabic interface. It includes information about the plants, a photo gallery, a location map, a rehabilitation video, and the names of the students who participated in the work.
The purpose of this project is to combine technology, environmental awareness, and student activity in one practical university project.
The website helps visitors learn about:
- The idea of the Student Activities Garden
- The plants used in the garden
- The rehabilitation and development stages
- The exact location of the project
- The student team behind the work
- The environmental value of green spaces inside the university
This project is not only a practice website. It is connected to a printed QR code displayed at the Student Activities Garden inside the College of Computer Science and Information Technology, University of Anbar.
Visitors can scan the QR code before entering the garden to open the website and explore:
- Plant details
- Project gallery
- Rehabilitation video
- Garden location
- Student participants
- Project information
This makes the website a real-world digital companion for a physical university project.
- Arabic RTL interface
- Responsive design for desktop and mobile
- Sticky header and navigation bar
- Interactive navigation between sections
- Home section with a project hero image
- Embedded YouTube video for rehabilitation stages
- Google Maps embedded location
- Interactive plant encyclopedia
- Detailed plant cards with images
- Modal window for plant information
- Scientific names for plants
- Environmental impact details
- Project photo gallery
- Fullscreen image lightbox
- Next and previous gallery controls
- Participants section
- About section describing the project
- Clean modern UI using Tailwind CSS
- Icons powered by Lucide Icons
- Arabic font using Google Fonts Tajawal
The home section includes:
- Main project image
- Welcome message
- Rehabilitation stages video
- Embedded Google Maps location
- Custom map marker design
The plants section contains an interactive encyclopedia of the plants used in the garden.
Each plant card includes:
- Arabic plant name
- Scientific name
- Plant category
- Short description
- Full description
- Environmental impact
- Plant details such as height, season, leaves, temperature, and type
The gallery section documents the project through many images. It includes:
- Grid layout
- Lazy-loaded images
- Fullscreen lightbox
- Image counter
- Next and previous controls
This section lists the students who participated in the project.
The about section explains the idea of the project, its environmental value, and its role as a student activity inside the university.
- HTML5
- CSS3
- JavaScript
- Tailwind CSS
- Lucide Icons
- Google Fonts – Tajawal
- Google Maps Embed
- YouTube Embed
- Imgur Image Hosting
- GitHub Pages
Garden/
├── index.html
└── README.mdThe project is currently built as a single-page static website using one main HTML file.
University of Anbar
College of Computer Science and Information Technology
Student Activities Garden
Student Activities DivisionIdea and Design:
- Malak Mazen Yousif
- Bilal Zamil Ahmed
Project Type:
Environmental educational university website connected to a real student activity project.
- Clone the repository:
git clone https://github.com/bilalcodes1/Garden.git- Open the project folder:
cd Garden- Open
index.htmlin your browser.
No backend, database, or installation is required.
html
css
javascript
tailwindcss
arabic-website
rtl
university-project
environmental-website
anbar-university
student-activities
qr-code
github-pagesScreenshots can be added later to show the website interface.
Example:
This project was created for educational and university activity purposes.
© 2025 Student Activities Garden – University of Anbar.