Abishek Silva, Oceayra, student 1

Home Page

Technical Description

The Home page (home.html) serves as the primary landing experience for Oceayra. The hero section uses a full-width video element with autoplay, muted, and loop attributes to display an ambient ocean backdrop. An absolutely-positioned .main-text div is layered on top using position: absolute; top: 25%; left: 50%; transform: translate(-50%, -50%); centring the headline and badge. The main heading uses the Cormorant Garamond serif typeface to evoke an editorial, ocean-inspired aesthetic.

Beneath the hero, an .info-line statistics strip displays key ocean facts using CSS Flexbox (justify-content: space-between) inside a gradient-background container with a dark navy colour scheme. Thin hr dividers separate each statistic.

The page's three issue cards (Plastic Crisis, Coral Reef Collapse, Overfishing) are laid out with CSS Grid inside a .cards-container. Each article card contains a card image, a category tag, an h3 heading, a body paragraph, and a ul action list. The "Watch & Learn" video section links to a YouTube video via a thumbnail image wrapped in an a tag with a CSS-styled play-button overlay (.playbutton). Finally, the .content-section research topics grid uses CSS Grid with four .content-box tiles, each containing an image and a .tile-label overlay styled with a gradient background on hover.

An animated .info-slider uses a CSS @keyframes fadeSlide animation with staggered animation-delay values on six child elements to cycle ocean facts in and out of view without any JavaScript.

Accessibility

The background video is muted by default and does not include any audio track, removing the risk of unexpected sound for users. All images, including card images and the YouTube thumbnail, have descriptive alt attributes (e.g., "Plastic bottles and marine debris polluting a sandy beach"). Interactive call-to-action buttons are coded as a tags with clearly descriptive link text ("Launch the Simulator", "Share Your Feedback") rather than generic labels like "click here". The page uses semantic HTML5 elements including header, main, section, article, and footer to give the document a well-structured, machine-readable outline for screen readers. Heading levels follow a proper hierarchy (h2 for section titles, h3 for card headings).

Link to the validation page

View the Home page validation evidence.

Link to the page

Open the Home page.

Technical Description

The Gallery page (gallery.html) presents a responsive image grid using CSS Grid: grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)). This single rule creates a fluid multi-column layout that automatically reflows from three columns on wide screens down to a single column on narrow mobile viewports, with no media-query breakpoints needed. Each card is a div class="thumb-item" element that holds a img class="thumb-img" a text overlay (.thumb-info), and an invisible hover-overlay div (.thumb-hover-overlay).

Hovering a card triggers a CSS transform: translateY(-6px) scale(1.02) combined with a deepened box-shadow, giving tactile visual feedback. The thumbnail image itself scales with transform: scale(1.07) and dims slightly via filter: brightness(0.85). Both transitions use a 0.35s ease duration for a smooth feel.

Clicking any card opens a modal lightbox. The modal is implemented as a div id="modalBackdrop" that is hidden by default (display: none) and shown by toggling the .open class with JavaScript. It uses position: fixed; inset: 0 with a semi-transparent dark backdrop and backdrop-filter: blur(6px) to dim the page content behind it. Inside the modal, a .customise-bar section gives users interactive Light/Dark colour-mode buttons and Sans/Serif font-toggle buttons, applied via JS functions applyColour() and applyFont(). All card data (title, image path, description) is stored directly on the HTML element as data-* attributes and injected into the modal by openModal().

Accessibility

Each thumbnail card has tabindex="0" and handles the keydown event for Enter and Space, making the gallery fully keyboard-navigable. :focus-visible CSS adds a visible cyan outline only for keyboard focus, avoiding visual noise for mouse users. The modal backdrop carries aria-modal="true" and role="dialog", and focus is programmatically moved to the close button when the modal opens. Pressing Escape closes the modal via a document.keydown listener. The customisation buttons use aria-pressed attributes that are toggled by JS to communicate the active state to assistive technologies. Every image has a descriptive alt text that conveys the photographic content.

Link to the validation page

View the Gallery validation evidence.

Link to the page

Open the Gallery page.

Content Page

Technical Description

The Ocean Pollution content page (content_ST1.html) is built around a clear vertical reading flow. At the top, a section class="section-title" block contains an h1 heading, a short introductory paragraph, and a decorative .divider-line styled with CSS to visually separate the hero area from the body.

Below the hero, an in-page nav class="content-navigation" element provides anchor links to the four main sections: Introduction, The Plastic Epidemic, Impact on Marine Life, and What You Can Do. Each section is wrapped in a div class="intro" container with a corresponding id attribute so the anchor links function correctly. The CSS for .intro uses a max-width and auto side-margins to keep the reading column comfortably centred on wide screens.

Images are placed inline inside each section using semantic img tags with descriptive alt attributes. CSS controls their max-width: 100% and border-radius so they scale responsively and match the site's rounded visual style. Bullet-point lists (ul / li) are used in the Plastic Epidemic and What You Can Do sections to present concise facts. The bottom of the page includes a call-to-action .c-down-button div containing Previous / Next navigation links styled as buttons using anchor tags with the CSS classes .previous-button and .next-button.

Accessibility

All images carry meaningful alt text that describes the visual content rather than just labelling the file (e.g. "ocean pollution affected animals"). The in-page navigation uses a native nav landmark element so screen readers can identify it as a navigation region. Heading levels follow a strict hierarchy: h1 for the page title, h2 for each major section, ensuring a logical document outline. Colour contrast between the body text and the dark ocean-themed background meets WCAG AA standards as defined in the shared Style.css. The "Go top" link at the bottom of the page provides keyboard users with a quick way to return to the top without excessive tabbing.

Link to the validation page

View the Content Page validation evidence.

Link to the page

Open the Content Page.

Challenges and Lessons Learned

One of the main challenges was implementing the gallery modal so that it worked correctly on both mouse and keyboard interactions. Initially, focus was not being transferred to the close button when the modal opened, which broke keyboard navigation. This was resolved by wrapping the focus() call inside a short setTimeout to allow the CSS display transition to complete first.

Achieving a fully responsive layout for the Home page hero — particularly keeping the animated text overlay correctly centred as viewport width changed — required careful use of transform: translate(-50%, -50%) combined with position: absolute rather than relying on padding alone. This taught me the value of transform-based centring for overlaid elements. Working across all three pages reinforced how a shared stylesheet (Style.css) dramatically reduces code duplication but also requires discipline to avoid unintended style conflicts between pages.

Compliance

The pages I developed for this coursework were designed in accordance with responsible web publishing practices expected within institutions connected to the JANET network. JANET is the UK research and education network provided by Jisc, and institutions using this network must follow ethical, lawful, and secure practices when developing online resources.

First, the content of the pages was created to be appropriate for an academic environment. The website focuses on Sustainable Development Goal 14 (Life Below Water) and is intended for educational purposes. No harmful, offensive, or misleading material is included, which supports the ethical use of network resources required by the JANET Acceptable Use Policy.

Second, I ensured responsible use of external resources. Images used within the website are intended to come from royalty-free or appropriately licensed sources. All external materials are referenced in the References section to respect copyright rules and maintain academic integrity.

Third, the pages do not collect or process personal data from users. This avoids potential issues related to GDPR and the UK Data Protection Act 2018. Since the website is an educational project, it does not require storing personal information or user accounts.

Accessibility was also considered during development. Images include alternative text, headings are structured using semantic HTML elements, and content is written clearly to support readability. These practices align with UK accessibility expectations and help ensure that digital resources are usable by a wider range of users.

Finally, the project follows good academic and professional practice. All content was written originally, external sources are acknowledged, and the website does not include malicious scripts or unsafe code. These steps help ensure that the website respects the security, ethical, and legal principles expected when using JANET-connected institutional systems.

Group Meetings and Individual Contribution Log

Group Meetings and Contribution Log
Meeting Date & Time Format Objective Attended Your Individual Contribution
1 15 Feb 2026 Face-to-face Agree SDG and assign roles Yes Agreed on SDG 14 as the website topic, selected the team name OCEAN, accepted responsibility for Student 2 pages, and helped set up the shared working structure
2 17 Feb 2026 Online Design planning Yes Gave feedback on the colour palette, typography, and layout direction, and reviewed how the SDG 14 theme should connect across the website.
3 25 Feb 2026 Hybrid Progress review Yes Reported progress on the Splash Screen and AIS, discussed how to implement JavaScript features, and checked navigation consistency across pages.
4 2 Mar 2026 Face-to-face Testing and layout fixes Yes Took part in cross-browser testing, reviewed mobile responsiveness, and helped finalise how shared footer elements would be organised.
5 10 Mar 2026 Face-to-face Accessibility and validation Yes Checked accessibility features such as alt text and keyboard navigation, and reviewed validation results for my implemented pages
6 25 Mar 2026 Face-to-face Final review and submission prep Yes Reviewed final versions of my pages, completed the Page Editor and Validation Page, and helped prepare the project for submission.

References

Provide links to resources you used following a consistent format (e.g., APA, MLA, or a simplified style). For example:

Go top