MEDINOVA is a multi-page hospital and healthcare website template focused on clarity, trust, and fast navigation. The project delivers marketing pages (hero, services, pricing, testimonials) and utility pages (search, appointments, blog) using semantic HTML, modular CSS, and light JavaScript for interactivity.
- Sahra Iidle (sahraiidle)
- Abdirahim Bassam (Abdirahimbassam)
The landing page (index.html) sits at the root. All other content pages live in pages/. Assets are grouped under assets/ with page-scoped CSS in assets/css/ and shared JavaScript in assets/js/main.js. A global styles.css provides tokens for colors, typography, spacing, and layout utilities.
- Home (index.html): Hero, key services, call-to-action buttons, testimonials preview, and footer contact summary.
- About (pages/about.html): Mission, values, leadership highlights, and facility overview with supporting imagery.
- Services (pages/service.html): Service catalog with descriptions, pricing callouts, and CTAs to book or learn more.
- Pricing (pages/price.html): Plans and price tiers with feature breakdowns to guide selection.
- Appointment (pages/appointment.html): Appointment request form with input validation cues and contact details.
- Contact (pages/contact.html): Direct contact methods, embedded map, and a short inquiry form for quick outreach.
- Search (pages/search.html): Search UI for articles or services with results layout.
- Team (pages/the-team.html): Clinician profiles with roles and specialties.
- Blog Grid (pages/blog-grid.html): Article grid with categories and summaries.
- Blog Detail (pages/blog-detail.html): Long-form article layout with related content.
- Testimonials (pages/testimonial.html): Extended testimonials layout.
- HTML5: Semantic structure for accessibility and SEO.
- CSS3: Page-level styles plus shared tokens for color, typography, spacing, and responsive breakpoints; flexbox and grid for layout.
- JavaScript (main.js): Light interactivity (e.g., menu toggles, minor DOM enhancements) without heavy dependencies.
- Tooling: No build step required; pure static assets for easy hosting on any static server or CDN.
- Clone the repository:
git clone https://github.com/dugsiiyeinc/MEDINOVA.git
- Navigate to the project directory:
cd MEDINOVA - Open
index.htmlin your browser (double-click or serve via a simple static server, e.g.,python -m http.server 8000).
- Responsive layout: Uses grids, flexbox, and breakpoint-based adjustments to adapt across mobile, tablet, and desktop.
- Consistent design tokens: Centralized colors, typography, and spacing in
styles.csskeep pages cohesive. - Grid and flex composition: CSS Grid for complex sections (pricing, cards) and flexbox for navigation, hero alignment, and testimonials.
- Reusable components: Buttons, cards, and section spacers reused across pages to reduce duplication.
- Static hosting ready: No compilation step; deployable to GitHub Pages, Netlify, Vercel, or any static host.
- Conversion-focused flows: Clear CTAs on hero, services, and pricing pages funnel visitors toward booking or contacting.
- Trust signals: Testimonials, clinician bios, and facility highlights support credibility for prospective patients.
- Contact-first design: Contact and appointment forms surface frequently with validation cues and alternative channels.
- Performance-aware: Lightweight, dependency-free stack keeps load times low on slow connections.
- Accessibility mindset: Semantic HTML, labeled form controls, and keyboard-friendly navigation.
- Fork the repository and create a feature branch.
- Keep HTML semantic and accessible (labels for form controls, alt text for images, logical heading order).
- Keep styles modular: prefer page-specific CSS plus shared tokens; avoid inline styles.
- Test responsiveness at common breakpoints (375px, 768px, 1024px, 1440px) before submitting a PR.
We extend our gratitude to our mentor on this project, Ustad Mohamed Ahmed, for guidance and support.