C B Patel Computer College — Website

1. Tech Stack

Files

index.html
img/
  logo.png
  c-b-patel-computer-college-vesu-surat-colleges-s58BdkM11h.avif
  c-b-patel-computer-college-vesu-surat-colleges-s58BdkM11h.jpg
  campus-entrance.jpg
  campus-bca-event.jpg
  campus-classroom.jpg
  campus-courtyard.jpg
README.md
documentation.html

Everything needed to run the site is in index.html + img/. No server, database, or build tools are required — just open index.html in a browser, or upload the folder as-is to any static web host.

2. How the Page Is Built

The site is a single scrollable page made of five sections, in order:

1. Header — sticky Bootstrap navbar with the college logo/mark and an "About Us" link that jumps to the About section via an in-page anchor (#about).
2. Hero — headline, sub-headline, and a call-to-action button, paired with a real campus photograph (AVIF with a JPG fallback via <picture>) framed with a bronze accent border and a "Trust Founded · 1965" badge.
3. About Us — the college's history and mission, a three-item fact strip (1965 / 2001 / BCA), and a trust-statement card containing a quote plus an embedded Bootstrap image carousel of four campus photos (entrance, tech fest, classroom, courtyard).
4. CTA band — a second, shorter call-to-action strip before the footer.
5. Footer / Contact — phone (tel:) and email (mailto:) links, location with a Google Maps link, and affiliation details, laid out on the Bootstrap grid.

Key implementation choices

• Bootstrap grid throughout. Both index.html and this documentation page use Bootstrap's container / row / col-* system for layout, rather than hand-rolled CSS grid or flexbox wrappers — so spacing and breakpoints stay consistent across the whole project.
• One HTML file per page. CSS and JS are embedded rather than split into separate files, since the site is small and this keeps each deliverable self-contained and easy to review or host anywhere.
• CSS custom properties (--navy, --bronze, etc.) define the palette once at the top of each stylesheet, layered on top of Bootstrap's defaults, so every color used across the page traces back to a single source.
• Mobile-first responsive design. Bootstrap's grid (col-lg-*) stacks all multi-column sections into a single column on small screens; tables use Bootstrap's .table-responsive wrapper so wide content scrolls horizontally instead of breaking the layout; images carry the .img-fluid utility so they scale fluidly inside their containers; type sizes use clamp() so headings scale smoothly between mobile and desktop instead of jumping at breakpoints.
• Scroll-reveal animation is done with a small IntersectionObserver script — sections fade/slide in as they enter the viewport. It automatically disables itself when the browser's prefers-reduced-motion setting is on, so it doesn't affect users who've asked for reduced motion.
• Accessibility: semantic headings in order (h1 → h2), a "Skip to main content" link, visible keyboard focus states (:focus-visible), aria-labels on the carousel and icon-only buttons, and descriptive alt text on every image.
• Performance: the hero photo is served as AVIF (much smaller file size) with an automatic JPG fallback for browsers that don't support AVIF; all other images are compressed JPGs; only Bootstrap's own JS bundle is loaded, no extra libraries.
• Real contact details are wired as working links — tel: links for the two listed phone numbers, a mailto: link for the college email, and a Google Maps link opening in a new tab — so they're directly clickable/tappable on any device.

3. Color Palette

The palette was specified in the design brief and applied consistently through CSS variables:

Two supporting tones were derived from the palette for depth without introducing new colors: --navy-deep (a darker navy for the footer) and --bronze-soft (a lighter bronze for hover states and hairline accents).

4. Fonts

Two Google Fonts are loaded, each with a specific role:

Both are loaded via <link> from fonts.googleapis.com with preconnect hints for faster loading, and both include display=swap so text remains visible while the fonts load.

5. Design Rationale

The brief asked specifically to avoid generic AI-generated design patterns (gradient hero blobs, oversized rounded rectangles, generic SaaS visuals). Two choices were made to keep the page grounded in the subject rather than a template:

• A trust-focused signature element. The hero photo carries a small badge marking "1965 · Trust Founded," and the About section pairs a quote from the trust with a rotating photo carousel — tying the visual design directly to the brief's core trust statement (KANTHA VIBHAG NAVNIRMAN MANDAL, established 1965) instead of using decorative filler.
• Real campus photography throughout, rather than stock imagery or illustrations — the hero, and all four carousel slides, are actual photos of the D. C. Patel Educational Campus, its BCA event, a live classroom, and the courtyard.

6. Reference