Build a small demonstration website for a fictional children's performing arts school called: StageSpark Performing Arts Assume that the customer has supplied: - written copy - a logo/brand direction - three photographs - class information TECHNOLOGY Build the site using plain: - HTML5 - CSS3 - a small amount of vanilla JavaScript Do not use React, Next.js, Bootstrap, Tailwind or other frameworks. The finished site must work as a simple static website suitable for deployment to Cloudflare Pages. Create: / index.html street-dance.html actors-studio.html book.html assets/ css/ styles.css js/ main.js images/ hero-performing-arts.jpg street-dance.jpg actors-studio.jpg StageSparkLogo.png Use semantic HTML, accessible navigation, meaningful alt text, sensible heading hierarchy and responsive images. DESIGN DIRECTION Create a friendly, energetic and professional children's performing arts website. It should feel modern rather than corporate. Use: - lots of white space - large confident headings - dark charcoal/navy text - a bright coral/red primary accent - a warm yellow secondary accent - rounded cards - subtle shadows - large photography - playful but restrained decorative shapes - clear call-to-action buttons HEADER Create a responsive header containing: StageSpark Performing Arts Navigation: Home Street Dance Actors Studio Book a Class On mobile use a simple accessible hamburger menu. Every "Book a Class", "Book a Trial" or similar CTA should link to book.html. HOME PAGE Create a large hero area using: assets/images/hero-performing-arts.jpg Hero heading: Find your confidence. Find your creativity. Find your stage. Add the logo - assets/images/StageSparkLogo.jpg Intro text: StageSpark gives young performers a welcoming place to move, perform, create and make friends. Our small-group classes are designed to help every student develop confidence while learning practical performance skills. Primary button: Book a trial class Secondary button: Explore our classes Add a small line beneath the hero: Confidence • Creativity • Community INTRODUCTION SECTION Heading: A place for every young performer Text: Whether they love dancing, acting or simply want to try something new, StageSpark gives children and teenagers the freedom to express themselves in a friendly and supportive environment. Our sessions combine professional teaching with plenty of fun. Smaller groups mean instructors have time to encourage each student individually and help them progress at their own pace. CLASS CARDS Show two large cards. CARD 1 Title: Street Dance Image: assets/images/street-dance.jpg Text: High-energy classes combining rhythm, choreography and performance. Students learn routines, develop coordination and build confidence while dancing as part of a group. Ages: 7–16 Location: Rosewick Community Hall Button: Discover Street Dance Link to: street-dance.html CARD 2 Title: Actors Studio Image: assets/images/actors-studio.jpg Text: A lively weekly acting class covering improvisation, character work, storytelling, scripts and stagecraft. Ideal for young performers who want to build confidence and explore acting. Ages: 10–16 Location: Cedarford Arts Centre Button: Discover Actors Studio Link to: actors-studio.html WHY STAGESPARK SECTION Heading: More than performing Create four short benefit cards: Confidence Encouraging young people to speak up, perform and believe in their ideas. Creativity Giving students space to imagine, experiment and create. Teamwork Learning how to listen, collaborate and perform as part of a group. Friendship A relaxed environment where students can meet people with similar interests. TESTIMONIAL SECTION These must be obviously fictional demo testimonials. Use three cards: "She came home after the first class talking about it all evening. It has been wonderful seeing her confidence grow." — Demo parent, Rosewick "The class manages to be organised and professional while still feeling relaxed and fun." — Demo parent, Cedarford "Our son was nervous about joining but was made to feel welcome straight away." — Demo parent, Rosewick Add a small note below: Sample testimonials used for demonstration purposes. HOME PAGE CTA Heading: Ready to give it a try? Text: Come along to a trial session and discover what StageSpark is all about. Button: Book a trial class STREET DANCE PAGE Hero title: Street Dance Subtitle: Big moves. Great music. Plenty of confidence. Use: assets/images/street-dance.jpg Main copy: Our Street Dance sessions are energetic, inclusive and designed to get young people moving. Students learn choreography in manageable sections before bringing everything together into full routines. Classes develop rhythm, coordination, musicality and performance skills, but the main aim is simple: enjoy dancing and feel confident doing it. CLASS INFORMATION Junior Street Ages 7–11 Tuesdays 5:00pm–5:45pm Senior Street Ages 12–16 Tuesdays 6:00pm–7:00pm Venue: Rosewick Community Hall Rosewick Add a "What to expect" section with: - warm-up and movement - technique - choreography - teamwork - performance practice - plenty of fun CTA: Book a Street Dance trial Link: book.html?class=street-dance ACTORS STUDIO PAGE Hero title: Actors Studio Subtitle: Imagine it. Explore it. Perform it. Use: assets/images/actors-studio.jpg Main copy: Actors Studio is a practical weekly acting class for young people who enjoy stories, characters and performance. Sessions use drama games, improvisation, scripts and character exercises to help students become more confident performers and communicators. Students do not need previous acting experience. The class should feel welcoming to both confident performers and young people who are trying drama for the first time. CLASS INFORMATION Actors Studio Ages 10–16 Thursdays 5:30pm–6:45pm Venue: Cedarford Arts Centre Cedarford Do not invent a postcode or use a real address. Add a "What we explore" section containing: - improvisation - character development - script work - voice and movement - storytelling - stagecraft CTA: Book an Actors Studio trial Link: book.html?class=actors-studio BOOKING PAGE Create a polished fictional booking page. At the top clearly display: DEMO BOOKING PAGE This website is a demonstration. No booking or personal information is actually submitted. Create a form containing: Class - Street Dance - Actors Studio Student name Student age Parent or guardian name Email address Telephone number Preferred session Anything we should know? Checkbox: I understand this is a demonstration form. Button: Request trial class If the URL contains: book.html?class=street-dance automatically select Street Dance. If it contains: book.html?class=actors-studio automatically select Actors Studio. Use JavaScript to prevent the form being sent anywhere. When submitted, hide the form and show: Thanks — this is where a real booking request would be sent. No information has been transmitted because this is a demonstration website. FOOTER Include: StageSpark Performing Arts Demo website created to demonstrate a customer website build from supplied content and imagery. Links: Home Street Dance Actors Studio Book a Class Do NOT include genuine telephone numbers, email addresses, social media accounts or business addresses. RESPONSIVE DESIGN The site must look good at: - 375px mobile width - tablets - normal laptops - wide desktop screens Use responsive CSS with sensible max-width containers. Avoid excessively large text on mobile. Images should crop well using object-fit: cover. ACCESSIBILITY Include: - keyboard accessible navigation - visible focus states - descriptive image alt text - sufficient colour contrast - form labels associated with controls - aria-expanded on the mobile menu button - reduced-motion support where appropriate SEO Give every page: - an appropriate title - meta description - canonical-style internal structure - one clear H1 - descriptive page headings Do not add structured data for a real business because this is fictional. IMAGE HANDLING Treat the images in assets/images as customer-supplied photographs. Do not hotlink external images. Do not add text, fake logos or graphic overlays directly into the photographs. Any text should be HTML layered by the website. If an image is missing, keep the layout stable and show a tasteful neutral fallback background. FINISHING REQUIREMENTS Make this feel like a complete small website rather than a coding exercise. Use reusable CSS classes rather than duplicating styling. Keep JavaScript minimal. Check all internal links. Make sure every booking CTA goes to the demo booking page. Do not create additional locations, staff biographies, holiday camps, parties, nursery services or other pages. The scope is deliberately limited to: - Home - Street Dance - Actors Studio - Demo booking page After building it, review the site for: - responsive layout problems - broken links - inconsistent spacing - accessibility issues - spelling mistakes - content accidentally referring to a real business