Hisn Al-Mateen Institution Bloc (IBHM)
Our largest build: a trilingual newspaper front page, org charts and full membership
This website was built through the Mustashar Nonprofit Initiative.
The official website of the Hisn Al-Mateen Institution Bloc, a national institution of an associative nature, on its own domain almateen.org in Arabic, French and English — Mustashar's largest project to date. It gathers the Bloc's activity since 2024 into 349 news stories, 1,029 photos and 75 press items, opens a video archive of its TV and press coverage since 2021, shows every structure as an org chart and takes membership applications through a back office that gives accepted members a number and a print-ready card. The site was gifted as part of Mustashar's non-profit initiative.
The need
Founded by notarial deed in December 2023, the Bloc quickly expanded its work across the wilayas and into international forums, yet its record was scattered across hundreds of Facebook posts. It needed a trilingual institutional presence worthy of its national and diplomatic profile — one that preserves its activities and press coverage, and receives and tracks membership applications in an orderly way.
What we built
We turned the Facebook archive and the institution's photos into hundreds of edited news stories in Arabic, French and English, with more than a thousand photos, 75 press items and 33 videos, in a site generated by a Python script — 138 static pages plus one page per story in every language — which moved to its own domain, almateen.org, in October 2026. The identity draws on the national colours and gold: an arched hero framed by a golden rope with a turning seal, a newspaper-style front page with a ruqaa-script masthead, tricolour seams and a zellige pattern. Every structure became an org chart that folds into a vertical tree on phones; an indicators dashboard and a coordinations map update themselves with each new post, a film-strip video archive plays right on the site, the cause pages open onto photo albums and the statutes are published in three languages with PDFs. A PHP back office runs membership, news, press, the agenda and coordinations, with three user roles.
What sets this website apart?
Newspaper front page
A ruqaa-script masthead, an issue number that equals the count of published stories, the lead story, latest news and picture tiles, with filters by eight categories and by year.
The Bloc in the media
A film-strip archive arranged by year since 2021, gathering TV reports, newspaper coverage and wire stories; every item plays on the site in a cinema-style viewer that embeds YouTube and Facebook videos without re-hosting them.
An org chart per structure
From the general assembly to the executive bureau and the wilaya coordination: a branching tree on desktop and an indented vertical tree on phones.
Live indicators
Indicators computed automatically from published content: activities by month, category and year, press by type, most-visited places and a daily activity calendar.
Coordinations map
A map of all 58 wilayas marks the national headquarters, active coordinations and those open to be founded, updated from the back office.
Four-step membership form
Four membership types, up to three of the thirteen standing committees, two attachments and a reference number on submission.
Press and op-eds
75 press items — op-eds, interviews, statements, coverage and TV reports — shown as pinned newspaper clippings with the original pages, with video items playing in one click.
Photos, videos and albums
1,029 photos across the news, photo albums with a lightbox on the cause pages, 33 videos compressed to play quickly on phones, Facebook videos embedded in articles and a ready-to-use media kit for journalists.
A trilingual national identity
An arch framed by a golden rope cycling through activity photos with a turning seal, flag-coloured seams and a zellige pattern; right-to-left Arabic in Almarai and Noto Kufi Arabic, French and English in Playfair Display and Source Sans 3, with every story translated into all three languages.
Hisn Al-Mateen website launch video
Ten scenes that tell the site as it was built: a 3D laptop opening on the front page, a phone spinning through the news, the press-clipping wall, the Algeria map with its coordinations, the three languages, the org chart, then the admin layers and the member card.
Full control, no technical skills needed
- Membership applications with an HM-YY-NNNN reference, filters by status, type, wilaya and committee, a flow from “new” to “accepted”, notes and history
- An IBHM-YYYY-NNNN member number assigned on acceptance and a two-sided CR80 member card with a QR code from a built-in encoder, printable on A4 or a card printer
- Dashboard: a 60-day applications trend, top wilayas, breakdown by type and status, latest applications and messages
- Trilingual news editor: cover and gallery compressed to WebP in the browser before upload, drag-to-reorder, video and source links, pinning, featuring and drafts
- Press, agenda and wilaya-coordination management that feeds the map and the indicators
- Three roles (admin, editor, membership officer), Telegram or e-mail notifications, CSV export and an activity log
See the website on every screen
The full homepage
Scroll inside the frame to browse the homepage from top to bottom, exactly as it appears on desktop.
Want a website of this calibre?
Tell us about your project, and we'll suggest the structure and features that suit it.