Vinyl Records Website

A comprehensive 3-page website for a vinyl records shop created using HTML5, CSS, XML, DTD, and XSL, without any JavaScript. This project was developed as part of the CST1340 Information in Organisations coursework.

Project Overview

Vinyl Records is a modern, Claude-inspired static website featuring a complete vinyl record shop experience across four interconnected pages:

• Home Page: The main landing page showcasing store information and featured records
• Catalog Page: A comprehensive collection of vinyl records organized by category
• About Us Page: Information about the store's history, team, and upcoming events
• Program Page: Displaying top songs data using XML and XSL transformation

The design emphasizes Claude's signature dark theme with orange accents, creating a sleek and professional user experience for vinyl enthusiasts with a cohesive navigation system across all pages.

Project Structure

• main.html: The homepage with featured records, store benefits, and opening hours.
• catalog.html: A detailed catalog page with multiple record categories and filtering options.
• about.html: Information about the store's history, mission, team, and upcoming events.
• program.xml: XML file containing song data, transformed using XSL.
• styles.css: CSS stylesheet for styling all pages with Spotify-inspired design.
• data.dtd: DTD file for validating the XML structure.
• style.xsl: XSL file for transforming XML data into an HTML table.

Features

• Multi-Page Structure: A four-page website with a logical user journey and clear navigation.
• Vinyl Record Shop Focus: Featured records sections, store benefits, and curated music genres.
• Spotify-Inspired Design: Dark theme with vibrant green accents mimicking Spotify's brand identity.
• Modern UI Elements: Clean, minimalist design with icons and glass morphism effects.
• Responsive Layout: All pages adapt to different screen sizes with media queries.
• Consistent Navigation: Unified header and footer across all pages for seamless navigation.
• XML Data Management: Song data is stored in a structured XML format.
• DTD Validation: The XML structure is validated using a Document Type Definition.
• XSL Transformation: XML data is transformed into an HTML table using XSL.

Implementation Details

Home Page (main.html)

• Showcases featured vinyl records with pricing information
• Contains a "Why Shop With Us" section highlighting store benefits
• Includes contact details with icons, opening times table, and music genres
• Uses vinyl record themed icons for a more authentic record store feel
• Features prominent links to other pages to encourage exploration

Catalog Page (catalog.html)

• Displays an extensive collection of vinyl records organized by categories
• Includes a filtering system for browsing by genre
• Presents records in an elegant grid layout with hover effects
• Implements pagination for navigating through multiple pages of records

About Us Page (about.html)

• Tells the story of the store's founding and history
• Features the store's mission and values through visually appealing cards
• Introduces team members with their specialties and roles
• Provides information about upcoming events and workshops
• Creates a personal connection with customers through storytelling

Program Page (program.xml)

• Stores information about top songs in XML format
• Displays the song data in a table using XSL transformation with Spotify-themed styling
• Maintains consistent navigation with the HTML pages for a seamless experience

User Journey

The website is designed with a clear user journey in mind:

1. Users land on the homepage to get an overview of what the store offers
2. They can navigate to the catalog to browse the full collection of records
3. The about page provides background information to build trust and connection
4. The top songs page highlights popular music using XML/XSL technology

Each page contains links to all other pages through a consistent navigation bar, allowing users to move freely throughout the site without getting lost.

Viewing the Website

1. Open main.html in a web browser to view the home page.
2. Use the navigation bar to explore the catalog, about us, and top songs pages.
3. Navigate between pages using the consistent header and footer links.

Technologies Used

• HTML5
• CSS3
• XML
• DTD
• XSL
• Font Awesome (for icons)

Browser Compatibility

The website has been tested and is compatible with:

• Google Chrome
• Mozilla Firefox
• Microsoft Edge