ai-zone/ai-5a
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit: Modernized 5A Studios website with improved image slider

Browse Source
This commit is contained in:
AgentZero
2026-03-19 11:52:34 +00:00
commit 624d5a464d
3 changed files with 802 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+274
View File
@@ -0,0 +1,274 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>5A Studios | London Sound & Picture Post Production</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<div class="logo">
<img src="https://www.5astudios.co.uk/wp-content/uploads/2019/11/logo_5a_landscape_dddddd_transparent_600x300.png" alt="5A Studios Logo">
</div>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#team">Team</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#studios">Studios</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact Us</a></li>
</ul>
</nav>
</header>
<main>
<section id="home" class="hero-section">
<div class="slider-container">
<div class="slider">
<div class="slide portrait">
<img src="https://www.5astudios.co.uk/wp-content/uploads/2023/03/Apple_Ted-Lasso_hero_09192021_big.jpg.slideshow-xlarge_2x-scaled.jpg" alt="Ted Lasso">
<div class="slide-content">
<h2>Ted Lasso</h2>
<p>Starring Jason Sudeikis, produced by Apple TV+</p>
<p>ADR Recording</p>
</div>
</div>
<div class="slide landscape">
<img src="https://www.5astudios.co.uk/wp-content/uploads/2023/03/aaaabcygnwgbqidj1xhluocu443nax6mcmzeyotxqypbcyftpbcsfx0hgo33xjv77h_0gvktg2wn93p6xn-9nkkcqhethhccrlkdgacv.jpg" alt="Schumacher">
<div class="slide-content">
<h2>Schumacher</h2>
<p>Official Trailer</p>
<p>5.1 Sound mix</p>
</div>
</div>
<div class="slide landscape">
<img src="https://www.5astudios.co.uk/wp-content/uploads/2023/03/eating-our-way-to-extinction.png" alt="Eating our way to Extinction">
<div class="slide-content">
<h2>Eating our way to Extinction</h2>
<p>Directed by Ludo Brockway & Otto Brockway. Narrated by Kate Winslet.</p>
<p>Full Sound Post Production</p>
</div>
</div>
<div class="slide portrait">
<img src="https://www.5astudios.co.uk/wp-content/uploads/2023/03/the-sandman-what-we-know-so-far.jpg" alt="The Sandman">
<div class="slide-content">
<h2>The Sandman</h2>
<p>Starring Tom Sturridge, Boyd Holbrook, Vivienne Acheampong & Patton Oswalt</p>
<p>ADR recording</p>
</div>
</div>
<div class="slide landscape">
<img src="https://www.5astudios.co.uk/wp-content/uploads/2023/03/AAAAQec4BGt1YJPsUc1-DoL-7mcehXvL6x5zHwIEdruS-FdR00EI4W9bL7RgfvqPAdGluPv208wMarwcKu7OBJyklN_ajW0E4K9UUro20kVLG6PRO8SY1ZH3SqsMeYWb1Unfqou1-WwN0PgqjCLEG6qkTvKJzcQ.jpg" alt="Money Heist">
<div class="slide-content">
<h2>Money Heist</h2>
<p>Official Trailer</p>
<p>5.1 Sound mix</p>
</div>
</div>
<div class="slide landscape">
<img src="https://www.5astudios.co.uk/wp-content/uploads/2023/03/AAAABfRh9Ip-KEH5Altj8RcJj5lNhO_pOuZR_QDS6LFbjR-k35z-3OfnGaiUuEqzOIh3XwOe0KJiWRyTKHpWe3CnM2i_wk_VyaiAQi44.jpg" alt="Inside Job">
<div class="slide-content">
<h2>Inside Job</h2>
<p>Created by Shion Takeuchi for Netflix with the voices of Lizzie Caplan and Christian Slater</p>
<p>Voice recording</p>
</div>
</div>
</div>
<div class="slider-controls">
<button class="prev">❮</button>
<button class="next">❯</button>
</div>
<div class="slider-indicators"></div>
</div>
</section>
<section id="about" class="about-section">
<h2>About 5A Studios</h2>
<div class="about-content">
<div class="about-text">
<h3>Personalised Eco-Friendly Audio Post Production</h3>
<p>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.</p>
<p>The truthful realisation of your ideas and requirements will always be our goal.</p>
<p>At 5A we maintain flexibility in our approach so that we can accommodate any changing needs as smoothly as possible.</p>
<p>We are always here to help</p>
</div>
<div class="contact-info">
<p>Call us on +44 (0)20 8969 0914</p>
<p>We look forward to working with you.</p>
</div>
</div>
</section>
<section id="team" class="team-section">
<h2>Our Team</h2>
<div class="team-member">
<h3>Marcus Fielding</h3>
<p>Managing Partner</p>
</div>
</section>
<section id="services" class="services-section">
<h2>Our Services</h2>
<div class="services-grid">
<div class="service">
<h3>Re-recording | Mixing</h3>
<p>Dolby Atmos, 5.1 & 7.1 Surround, Binaural Stereo</p>
</div>
<div class="service">
<h3>ADR | Voice over recording</h3>
<p>via SourceConnect, Skype, Google Hangouts and telephone patch</p>
</div>
<div class="service">
<h3>Binaural recording</h3>
<p>Neumann KU 100 Dummy Head with Binaural Stereo Microphone</p>
</div>
<div class="service">
<h3>Dialogue Editing</h3>
<p>Including audio restoration</p>
</div>
<div class="service">
<h3>Sound Design & Tracklaying</h3>
<p>Bespoke sound design and libraries with hundreds of thousands sound effects.</p>
</div>
<div class="service">
<h3>Foley</h3>
<p>Recording, editing and mixing</p>
</div>
<div class="service">
<h3>Reversioning</h3>
<p>Script adaptations for lip-synch, casting, voice direction, recording, editing and mixing</p>
</div>
<div class="service">
<h3>Colour Grading</h3>
<p>DaVinci Resolve suite with monitor or projector</p>
</div>
<div class="service">
<h3>Online Editing</h3>
<p>Fully air-conditioned suites with Avid, Premiere Pro or Final Cut Pro</p>
</div>
</div>
</section>
<section id="studios" class="studios-section">
<h2>Our Studios</h2>
<p>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?</p>
<div class="studio-grid">
<div class="studio">
<h3>Studio 1</h3>
<p>Dolby Atmos, 7.1 & 5.1 Surround mixing, ADR & Loop Group Recording</p>
</div>
<div class="studio">
<h3>Studio 3</h3>
<p>ADR & Voice-over recording, Mixing</p>
</div>
</div>
</section>
<section id="projects" class="projects-section">
<h2>Our Projects</h2>
<div class="project-filters">
<button class="filter-btn active" data-filter="all">All</button>
<button class="filter-btn" data-filter="film">Film</button>
<button class="filter-btn" data-filter="drama">Drama</button>
<button class="filter-btn" data-filter="trailers">Trailers</button>
<button class="filter-btn" data-filter="documentaries">Documentaries</button>
<button class="filter-btn" data-filter="advertising">Advertising</button>
</div>
<div class="projects-grid">
<div class="project all film">
<img src="https://www.5astudios.co.uk/wp-content/uploads/2020/01/tuca-bertie-570x570.jpg" alt="Tuca & Bertie">
<h3>Tuca & Bertie</h3>
</div>
<div class="project all drama">
<img src="https://www.5astudios.co.uk/wp-content/uploads/2019/12/the-knight-and-the-princess-570x570.jpg" alt="The Knight & The Princess">
<h3>The Knight & The Princess</h3>
</div>
<div class="project all advertising">
<img src="https://www.5astudios.co.uk/wp-content/uploads/2019/11/redbull-levels-game-development-570x570.jpg" alt="Red Bull – Levels">
<h3>Red Bull – Levels</h3>
</div>
<div class="project all documentaries">
<img src="https://www.5astudios.co.uk/wp-content/uploads/2019/11/rang-tan1-570x570.jpg" alt="Rang Tan – Greenpeace">
<h3>Rang Tan – Greenpeace</h3>
</div>
<div class="project all film">
<img src="https://www.5astudios.co.uk/wp-content/uploads/2019/11/wiender-dog-570x570.jpg" alt="Wiener Dog">
<h3>Wiener Dog</h3>
</div>
<div class="project all drama">
<img src="https://www.5astudios.co.uk/wp-content/uploads/2019/11/end-of-sentence-570x570.jpg" alt="End Of Sentence">
<h3>End Of Sentence</h3>
</div>
<div class="project all drama">
<img src="https://www.5astudios.co.uk/wp-content/uploads/2019/11/a-dark-song-570x570.jpg" alt="A Dark Song">
<h3>A Dark Song</h3>
</div>
<div class="project all drama">
<img src="https://www.5astudios.co.uk/wp-content/uploads/2019/11/the-new-pope-570x570.jpg" alt="The New Pope">
<h3>The New Pope</h3>
</div>
</div>
</section>
<section id="contact" class="contact-section">
<h2>Contact Us</h2>
<div class="contact-form">
<form id="contactForm">
<input type="text" placeholder="Your name *" required>
<input type="text" placeholder="Company name *" required>
<input type="tel" placeholder="Your phone number *" required>
<input type="email" placeholder="Your email address *" required>
<input type="text" placeholder="Subject">
<select required>
<option value="" disabled selected>How did you hear about us? Please select an option</option>
<option value="google">Google</option>
<option value="facebook">Facebook</option>
<option value="twitter">Twitter</option>
<option value="instagram">Instagram</option>
<option value="seen-work">Seen our work</option>
<option value="recommended">Been recommended</option>
<option value="other">Other</option>
</select>
<textarea placeholder="Your message *" required></textarea>
<button type="submit">Submit</button>
</form>
</div>
<div class="contact-locations">
<div class="location">
<h3>Camden</h3>
<p>193-199 Queen's Crescent, London, NW5 4DS</p>
<p>+44 (0)20 89690914</p>
</div>
<div class="location">
<h3>Central London</h3>
<p>11 Charlotte Mews, London, W1T 4EQ</p>
<p>+44 (0)20 89690914</p>
</div>
</div>
</section>
</main>
<footer>
<div class="footer-content">
<div class="footer-logo">
<img src="https://www.5astudios.co.uk/wp-content/uploads/2019/08/logo_5a_portrait_white_transparent_400x479-251x300.png" alt="5A Studios Logo">
</div>
<div class="footer-info">
<p>193-199 Queens Crescent<br>London<br>NW5 4DS</p>
<p>Phone: 020 89690914</p>
<p>Email: info@5astudios.co.uk</p>
</div>
<div class="footer-legal">
<p>5A Studios Limited is a company registered in England with Company number 05133441 and VAT number GB 843 6677 92.</p>
<a href="/wp-content/uploads/2019/11/tc.pdf">Terms & Conditions</a>
<p>© 2024 5A Studios</p>
</div>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>
script.js
+159
View File
@@ -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';
}
});
});
});
});
styles.css
+369
View File
@@ -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;
}
}