commit 624d5a464dfa8838648735e5d27bc18a8f52352f Author: AgentZero Date: Thu Mar 19 11:52:34 2026 +0000 Initial commit: Modernized 5A Studios website with improved image slider diff --git a/index.html b/index.html new file mode 100644 index 0000000..c9e6b8a --- /dev/null +++ b/index.html @@ -0,0 +1,274 @@ + + + + + + 5A Studios | London Sound & Picture Post Production + + + +
+ + +
+ +
+
+
+
+
+ Ted Lasso +
+

Ted Lasso

+

Starring Jason Sudeikis, produced by Apple TV+

+

ADR Recording

+
+
+
+ Schumacher +
+

Schumacher

+

Official Trailer

+

5.1 Sound mix

+
+
+
+ Eating our way to Extinction +
+

Eating our way to Extinction

+

Directed by Ludo Brockway & Otto Brockway. Narrated by Kate Winslet.

+

Full Sound Post Production

+
+
+
+ The Sandman +
+

The Sandman

+

Starring Tom Sturridge, Boyd Holbrook, Vivienne Acheampong & Patton Oswalt

+

ADR recording

+
+
+
+ Money Heist +
+

Money Heist

+

Official Trailer

+

5.1 Sound mix

+
+
+
+ Inside Job +
+

Inside Job

+

Created by Shion Takeuchi for Netflix with the voices of Lizzie Caplan and Christian Slater

+

Voice recording

+
+
+
+
+ + +
+
+
+
+ +
+

About 5A Studios

+
+
+

Personalised Eco-Friendly Audio Post Production

+

5A was established in 2004 with the commitment to produce the highest standards in post production, a commitment that remains as strong today, backed up with over twenty years of experience. We believe integrity is the key to good business, so we extend that to our premises – we recycle, use renewable energy, and we do not buy products tested on animals.

+

The truthful realisation of your ideas and requirements will always be our goal.

+

At 5A we maintain flexibility in our approach so that we can accommodate any changing needs as smoothly as possible.

+

We are always here to help

+
+
+

Call us on +44 (0)20 8969 0914

+

We look forward to working with you.

+
+
+
+ +
+

Our Team

+
+

Marcus Fielding

+

Managing Partner

+
+
+ +
+

Our Services

+
+
+

Re-recording | Mixing

+

Dolby Atmos, 5.1 & 7.1 Surround, Binaural Stereo

+
+
+

ADR | Voice over recording

+

via SourceConnect, Skype, Google Hangouts and telephone patch

+
+
+

Binaural recording

+

Neumann KU 100 Dummy Head with Binaural Stereo Microphone

+
+
+

Dialogue Editing

+

Including audio restoration

+
+
+

Sound Design & Tracklaying

+

Bespoke sound design and libraries with hundreds of thousands sound effects.

+
+
+

Foley

+

Recording, editing and mixing

+
+
+

Reversioning

+

Script adaptations for lip-synch, casting, voice direction, recording, editing and mixing

+
+
+

Colour Grading

+

DaVinci Resolve suite with monitor or projector

+
+
+

Online Editing

+

Fully air-conditioned suites with Avid, Premiere Pro or Final Cut Pro

+
+
+
+ +
+

Our Studios

+

Great sound post production is a joyful marriage of the technical and the artistic. From the very start we have invested in the highest standard of equipment possible, but what use is a finely-tuned racing car without an equally talented driver?

+
+
+

Studio 1

+

Dolby Atmos, 7.1 & 5.1 Surround mixing, ADR & Loop Group Recording

+
+
+

Studio 3

+

ADR & Voice-over recording, Mixing

+
+
+
+ +
+

Our Projects

+
+ + + + + + +
+
+
+ Tuca & Bertie +

Tuca & Bertie

+
+
+ The Knight & The Princess +

The Knight & The Princess

+
+
+ Red Bull – Levels +

Red Bull – Levels

+
+
+ Rang Tan – Greenpeace +

Rang Tan – Greenpeace

+
+
+ Wiener Dog +

Wiener Dog

+
+
+ End Of Sentence +

End Of Sentence

+
+
+ A Dark Song +

A Dark Song

+
+
+ The New Pope +

The New Pope

+
+
+
+ +
+

Contact Us

+
+
+ + + + + + + + +
+
+
+
+

Camden

+

193-199 Queen's Crescent, London, NW5 4DS

+

+44 (0)20 89690914

+
+
+

Central London

+

11 Charlotte Mews, London, W1T 4EQ

+

+44 (0)20 89690914

+
+
+
+
+ + + + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..749b10e --- /dev/null +++ b/script.js @@ -0,0 +1,159 @@ +// Modern Image Slider with Portrait/Landscape Support + +document.addEventListener('DOMContentLoaded', function() { + // Slider elements + const slider = document.querySelector('.slider'); + const slides = document.querySelectorAll('.slide'); + const prevBtn = document.querySelector('.prev'); + const nextBtn = document.querySelector('.next'); + const indicatorsContainer = document.querySelector('.slider-indicators'); + + // Slider state + let currentSlide = 0; + let slideInterval; + const slideCount = slides.length; + + // Initialize slider + function initSlider() { + // Create indicators + slides.forEach((_, index) => { + const indicator = document.createElement('div'); + indicator.classList.add('indicator'); + if (index === 0) indicator.classList.add('active'); + indicator.addEventListener('click', () => goToSlide(index)); + indicatorsContainer.appendChild(indicator); + }); + + // Start auto-sliding + startSlideInterval(); + + // Add event listeners + prevBtn.addEventListener('click', prevSlide); + nextBtn.addEventListener('click', nextSlide); + + // Handle keyboard navigation + document.addEventListener('keydown', (e) => { + if (e.key === 'ArrowLeft') prevSlide(); + if (e.key === 'ArrowRight') nextSlide(); + }); + + // Pause on hover + slider.addEventListener('mouseenter', pauseSlideInterval); + slider.addEventListener('mouseleave', startSlideInterval); + } + + // Go to specific slide + function goToSlide(index) { + currentSlide = index; + updateSlider(); + } + + // Previous slide + function prevSlide() { + currentSlide = (currentSlide - 1 + slideCount) % slideCount; + updateSlider(); + } + + // Next slide + function nextSlide() { + currentSlide = (currentSlide + 1) % slideCount; + updateSlider(); + } + + // Update slider display + function updateSlider() { + // Update active slide + slides.forEach((slide, index) => { + slide.classList.toggle('active', index === currentSlide); + }); + + // Update indicators + const indicators = document.querySelectorAll('.indicator'); + indicators.forEach((indicator, index) => { + indicator.classList.toggle('active', index === currentSlide); + }); + + // Reset auto-slide timer + pauseSlideInterval(); + startSlideInterval(); + } + + // Start auto-sliding + function startSlideInterval() { + clearInterval(slideInterval); + slideInterval = setInterval(nextSlide, 5000); + } + + // Pause auto-sliding + function pauseSlideInterval() { + clearInterval(slideInterval); + } + + // Handle responsive behavior + function handleResponsive() { + const windowWidth = window.innerWidth; + + if (windowWidth < 768) { + // Mobile view - show slide content below image + slides.forEach(slide => { + const img = slide.querySelector('img'); + const content = slide.querySelector('.slide-content'); + + if (img && content) { + img.style.maxHeight = '60vh'; + content.style.position = 'static'; + content.style.marginTop = '1rem'; + } + }); + } else { + // Desktop view - show content overlay + slides.forEach(slide => { + const img = slide.querySelector('img'); + const content = slide.querySelector('.slide-content'); + + if (img && content) { + img.style.maxHeight = '80vh'; + content.style.position = 'absolute'; + content.style.marginTop = '0'; + } + }); + } + } + + // Initialize on load + initSlider(); + handleResponsive(); + + // Handle window resize + window.addEventListener('resize', handleResponsive); + + // Contact form submission + const contactForm = document.getElementById('contactForm'); + if (contactForm) { + contactForm.addEventListener('submit', function(e) { + e.preventDefault(); + alert('Thank you for your message! We will get back to you soon.'); + this.reset(); + }); + } + + // Project filtering + const filterBtns = document.querySelectorAll('.filter-btn'); + const projects = document.querySelectorAll('.project'); + + filterBtns.forEach(btn => { + btn.addEventListener('click', () => { + filterBtns.forEach(b => b.classList.remove('active')); + btn.classList.add('active'); + + const filter = btn.dataset.filter; + projects.forEach(project => { + if (filter === 'all' || project.classList.contains(filter)) { + project.style.display = 'block'; + } else { + project.style.display = 'none'; + } + }); + }); + }); +}); diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..5341518 --- /dev/null +++ b/styles.css @@ -0,0 +1,369 @@ +/* Modern CSS Reset */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + line-height: 1.6; + color: #333; + background-color: #f5f5f5; +} + +/* Header Styles */ +header { + background-color: #fff; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); + position: fixed; + width: 100%; + z-index: 1000; + padding: 1rem 2rem; + display: flex; + justify-content: space-between; + align-items: center; +} + +.logo img { + height: 60px; +} + +nav ul { + display: flex; + list-style: none; +} + +nav ul li { + margin-left: 2rem; +} + +nav ul li a { + text-decoration: none; + color: #333; + font-weight: 500; + transition: color 0.3s; +} + +nav ul li a:hover { + color: #007bff; +} + +/* Hero Section and Slider */ +.hero-section { + padding-top: 80px; + min-height: 100vh; + display: flex; + align-items: center; + justify-content: center; + background-color: #fff; +} + +.slider-container { + position: relative; + width: 100%; + max-width: 1200px; + margin: 0 auto; +} + +.slider { + position: relative; + height: 70vh; + overflow: hidden; +} + +.slide { + position: absolute; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity 1s ease-in-out; +} + +.slide.active { + opacity: 1; +} + +.slide img { + max-width: 100%; + max-height: 100%; + object-fit: contain; +} + +.slide.portrait img { + max-height: 80vh; +} + +.slide.landscape img { + max-width: 90vw; +} + +.slide-content { + position: absolute; + bottom: 2rem; + left: 2rem; + background-color: rgba(0, 0, 0, 0.7); + color: white; + padding: 1rem; + border-radius: 5px; + max-width: 300px; +} + +.slider-controls { + position: absolute; + top: 50%; + width: 100%; + display: flex; + justify-content: space-between; + transform: translateY(-50%); +} + +.slider-controls button { + background-color: rgba(0, 0, 0, 0.5); + color: white; + border: none; + padding: 1rem; + font-size: 1.5rem; + cursor: pointer; + transition: background-color 0.3s; +} + +.slider-controls button:hover { + background-color: rgba(0, 0, 0, 0.8); +} + +.slider-indicators { + position: absolute; + bottom: 2rem; + left: 50%; + transform: translateX(-50%); + display: flex; + gap: 0.5rem; +} + +.indicator { + width: 12px; + height: 12px; + border-radius: 50%; + background-color: rgba(255, 255, 255, 0.5); + cursor: pointer; + transition: background-color 0.3s; +} + +.indicator.active { + background-color: white; +} + +/* Section Styles */ +section { + padding: 4rem 2rem; + max-width: 1200px; + margin: 0 auto; +} + +section h2 { + font-size: 2.5rem; + margin-bottom: 2rem; + color: #007bff; +} + +.about-content { + display: grid; + grid-template-columns: 2fr 1fr; + gap: 2rem; +} + +.services-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + gap: 2rem; +} + +.service { + background-color: #fff; + padding: 2rem; + border-radius: 8px; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); +} + +.service h3 { + color: #007bff; + margin-bottom: 1rem; +} + +.studio-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + gap: 2rem; +} + +.studio { + background-color: #fff; + padding: 2rem; + border-radius: 8px; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); +} + +.project-filters { + margin-bottom: 2rem; +} + +.filter-btn { + background-color: #f0f0f0; + border: none; + padding: 0.5rem 1rem; + margin-right: 0.5rem; + cursor: pointer; + border-radius: 4px; + transition: background-color 0.3s; +} + +.filter-btn.active { + background-color: #007bff; + color: white; +} + +.projects-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); + gap: 2rem; +} + +.project { + background-color: #fff; + border-radius: 8px; + overflow: hidden; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); +} + +.project img { + width: 100%; + height: 200px; + object-fit: cover; +} + +.project h3 { + padding: 1rem; +} + +.contact-form { + background-color: #fff; + padding: 2rem; + border-radius: 8px; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); +} + +.contact-form input, +.contact-form select, +.contact-form textarea { + width: 100%; + padding: 0.8rem; + margin-bottom: 1rem; + border: 1px solid #ddd; + border-radius: 4px; +} + +.contact-form textarea { + height: 150px; +} + +.contact-form button { + background-color: #007bff; + color: white; + border: none; + padding: 0.8rem 1.5rem; + border-radius: 4px; + cursor: pointer; + transition: background-color 0.3s; +} + +.contact-form button:hover { + background-color: #0056b3; +} + +.contact-locations { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + gap: 2rem; + margin-top: 2rem; +} + +.location { + background-color: #fff; + padding: 2rem; + border-radius: 8px; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); +} + +/* Footer Styles */ +footer { + background-color: #333; + color: white; + padding: 2rem; +} + +.footer-content { + max-width: 1200px; + margin: 0 auto; + display: grid; + grid-template-columns: 1fr 2fr 1fr; + gap: 2rem; +} + +.footer-logo img { + height: 100px; +} + +/* Responsive Design */ +@media (max-width: 768px) { + header { + flex-direction: column; + padding: 1rem; + } + + nav ul { + margin-top: 1rem; + flex-wrap: wrap; + justify-content: center; + } + + nav ul li { + margin: 0 0.5rem; + } + + .about-content { + grid-template-columns: 1fr; + } + + .slider-controls { + display: none; + } + + .slide-content { + position: static; + margin-top: 1rem; + background-color: rgba(0, 0, 0, 0.8); + } + + .footer-content { + grid-template-columns: 1fr; + text-align: center; + } +} + +@media (max-width: 480px) { + section { + padding: 2rem 1rem; + } + + .hero-section { + padding-top: 100px; + } + + .slider { + height: 50vh; + } +}