Football Coaching Template
Preview
Edit
Download
Run
Download Options
HTML File
Download as .html file
CSS File
Download as .css file
JavaScript File
Download as .js file
Combined HTML
All code in one HTML file
Project ZIP
All files in a ZIP archive
Cancel
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Elite Football Coaching | Coach Marco</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <link rel="stylesheet" href="styles.css"> </head> <body> <!-- Header/Navigation --> <header class="header"> <div class="container"> <a href="#" class="logo">Coach<span>Marco</span></a> <nav class="navbar"> <a href="#home">Home</a> <a href="#about">About</a> <a href="#services">Services</a> <a href="#philosophy">Philosophy</a> <a href="#testimonials">Testimonials</a> <a href="#gallery">Gallery</a> <a href="#achievements">Achievements</a> <a href="#contact">Contact</a> </nav> <div class="menu-btn"> <div class="bar"></div> <div class="bar"></div> <div class="bar"></div> </div> </div> </header> <!-- Hero Section --> <section class="hero" id="home"> <div class="container"> <div class="hero-content"> <h1 class="hero-title">Elevate Your <span>Football</span> Game</h1> <p class="hero-subtitle">Professional coaching to take your skills to the next level</p> <div class="hero-btns"> <a href="#contact" class="btn btn-primary">Book Session</a> <a href="#services" class="btn btn-secondary">Learn More</a> </div> </div> <div class="hero-image"> <img src="https://images.unsplash.com/photo-1574629810360-7efbbe195018?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1896&q=80" alt="Football Coach" class="animated-img"> <div class="floating-elements"> <div class="element-1"></div> <div class="element-2"></div> <div class="element-3"></div> </div> </div> </div> <div class="scroll-down"> <span></span> <span></span> <span></span> </div> </section> <!-- About Section --> <section class="about section" id="about"> <div class="container"> <div class="about-image"> <img src="https://images.unsplash.com/photo-1540747913346-19e32dc3e97e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1605&q=80" alt="Coach Marco" class="about-img"> <div class="experience-badge"> <span class="years">15+</span> <span class="text">Years Experience</span> </div> </div> <div class="about-content"> <h2 class="section-title">About <span>Coach Marco</span></h2> <p class="section-subtitle">Professional Football Coach & Tactical Analyst</p> <p class="about-text">With over 15 years of professional coaching experience, I've helped hundreds of players improve their technical skills, tactical understanding, and mental approach to the game. My coaching journey has taken me across Europe and South America, working with players from youth academies to professional leagues.</p> <div class="about-stats"> <div class="stat-item"> <h3>250+</h3> <p>Players Trained</p> </div> <div class="stat-item"> <h3>12</h3> <p>Professional Clubs</p> </div> <div class="stat-item"> <h3>5</h3> <p>Coaching Certifications</p> </div> </div> <a href="#philosophy" class="btn btn-primary">My Coaching Philosophy</a> </div> </div> </section> <!-- Services Cards Section --> <section class="services section" id="services"> <div class="container"> <div class="section-header"> <h2 class="section-title">Training <span>Programs</span></h2> <p class="section-subtitle">Customized coaching for all levels</p> </div> <div class="services-grid"> <div class="service-card"> <div class="card-icon"> <i class="fas fa-futbol"></i> </div> <h3>Individual Training</h3> <p>One-on-one sessions focused on your specific needs and development areas.</p> <ul> <li>Technical skill development</li> <li>Position-specific training</li> <li>Video analysis</li> </ul> <a href="#contact" class="btn btn-card">Learn More</a> </div> <div class="service-card"> <div class="card-icon"> <i class="fas fa-users"></i> </div> <h3>Group Sessions</h3> <p>Small group training to develop skills in game-like situations.</p> <ul> <li>Small-sided games</li> <li>Tactical understanding</li> <li>Team chemistry</li> </ul> <a href="#contact" class="btn btn-card">Learn More</a> </div> <div class="service-card"> <div class="card-icon"> <i class="fas fa-trophy"></i> </div> <h3>Elite Performance</h3> <p>Advanced program for competitive players looking to reach the next level.</p> <ul> <li>High-intensity training</li> <li>Mental preparation</li> <li>Scouting preparation</li> </ul> <a href="#contact" class="btn btn-card">Learn More</a> </div> </div> </div> </section> <!-- Coaching Philosophy Scroller --> <section class="philosophy section" id="philosophy"> <div class="container"> <div class="section-header"> <h2 class="section-title">Coaching <span>Philosophy</span></h2> <p class="section-subtitle">The principles that guide my approach</p> </div> <div class="philosophy-scroller"> <div class="scroller-track"> <div class="philosophy-item"> <div class="item-number">01</div> <h3>Player-Centered Approach</h3> <p>Every player is unique. I tailor my coaching to individual learning styles, strengths, and development areas.</p> </div> <div class="philosophy-item"> <div class="item-number">02</div> <h3>Holistic Development</h3> <p>Technical skills are just the beginning. I focus on tactical understanding, physical conditioning, and mental resilience.</p> </div> <div class="philosophy-item"> <div class="item-number">03</div> <h3>Game Intelligence</h3> <p>Developing football IQ through situational awareness, decision-making drills, and video analysis.</p> </div> <div class="philosophy-item"> <div class="item-number">04</div> <h3>Positive Environment</h3> <p>Creating a supportive atmosphere where players feel challenged but not overwhelmed, building confidence through achievement.</p> </div> </div> </div> <div class="scroller-controls"> <button class="scroller-btn prev-btn"><i class="fas fa-chevron-left"></i></button> <div class="scroller-dots"></div> <button class="scroller-btn next-btn"><i class="fas fa-chevron-right"></i></button> </div> </div> </section> <!-- Testimonials Slider --> <section class="testimonials section" id="testimonials"> <div class="container"> <div class="section-header"> <h2 class="section-title">Player <span>Testimonials</span></h2> <p class="section-subtitle">What my players say about the training</p> </div> <div class="testimonials-slider"> <div class="slider-track"> <div class="testimonial-slide active"> <div class="testimonial-content"> <div class="quote-icon"><i class="fas fa-quote-left"></i></div> <p class="testimonial-text">Coach Marco completely transformed my game. After just 3 months of training, I earned a spot on my college team. His attention to detail and ability to break down complex movements is incredible.</p> <div class="testimonial-author"> <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Alex Johnson"> <div class="author-info"> <h4>Alex Johnson</h4> <p>College Player</p> </div> </div> </div> </div> <div class="testimonial-slide"> <div class="testimonial-content"> <div class="quote-icon"><i class="fas fa-quote-left"></i></div> <p class="testimonial-text">The tactical sessions with Coach Marco gave me a whole new understanding of the game. I now see things on the pitch I never noticed before, and my decision-making has improved dramatically.</p> <div class="testimonial-author"> <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Sarah M."> <div class="author-info"> <h4>Sarah M.</h4> <p>Semi-Pro Player</p> </div> </div> </div> </div> <div class="testimonial-slide"> <div class="testimonial-content"> <div class="quote-icon"><i class="fas fa-quote-left"></i></div> <p class="testimonial-text">As a parent, I appreciate how Coach Marco connects with my son. He's not just teaching football skills but also important life lessons about discipline, perseverance, and teamwork.</p> <div class="testimonial-author"> <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="David Thompson"> <div class="author-info"> <h4>David Thompson</h4> <p>Parent</p> </div> </div> </div> </div> </div> <div class="slider-dots"></div> </div> </div> </section> <!-- Gallery Section --> <section class="gallery section" id="gallery"> <div class="container"> <div class="section-header"> <h2 class="section-title">Training <span>Gallery</span></h2> <p class="section-subtitle">Moments from our sessions</p> </div> <div class="gallery-grid"> <div class="gallery-item"> <img src="https://images.unsplash.com/photo-1522778119026-d647f0596c20?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80" alt="Training Session"> <div class="gallery-overlay"> <h3>Technical Drills</h3> <p>Ball control and passing exercises</p> </div> </div> <div class="gallery-item"> <img src="https://images.unsplash.com/photo-1579952363873-27f3bade9f55?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80" alt="Small-sided Game"> <div class="gallery-overlay"> <h3>Small-Sided Games</h3> <p>Developing game intelligence</p> </div> </div> <div class="gallery-item"> <img src="https://images.unsplash.com/photo-1543351611-58f69d7c1781?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80" alt="Fitness Training"> <div class="gallery-overlay"> <h3>Fitness Training</h3> <p>Building athletic performance</p> </div> </div> <div class="gallery-item"> <img src="https://images.unsplash.com/photo-1574629810360-7efbbe195018?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1896&q=80" alt="One-on-One"> <div class="gallery-overlay"> <h3>Individual Coaching</h3> <p>Personalized attention</p> </div> </div> <div class="gallery-item"> <img src="https://images.unsplash.com/photo-1576808905159-cc7ec5d2b8d3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80" alt="Tactical Session"> <div class="gallery-overlay"> <h3>Tactical Analysis</h3> <p>Understanding the game</p> </div> </div> <div class="gallery-item"> <img src="https://images.unsplash.com/photo-1551958219-acbc608c6377?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80" alt="Celebration"> <div class="gallery-overlay"> <h3>Celebrating Success</h3> <p>The joy of improvement</p> </div> </div> </div> </div> </section> <!-- Achievements Counter --> <section class="achievements section" id="achievements"> <div class="container"> <div class="section-header"> <h2 class="section-title">Player <span>Achievements</span></h2> <p class="section-subtitle">Success stories from my players</p> </div> <div class="achievements-grid"> <div class="achievement-item"> <div class="counter" data-target="42">0</div> <p>Players signed to academies</p> </div> <div class="achievement-item"> <div class="counter" data-target="18">0</div> <p>College scholarships earned</p> </div> <div class="achievement-item"> <div class="counter" data-target="7">0</div> <p>Professional contracts</p> </div> <div class="achievement-item"> <div class="counter" data-target="96">0</div> <p>Players improved 1+ levels</p> </div> </div> </div> </section> <!-- Contact Section --> <section class="contact section" id="contact"> <div class="container"> <div class="contact-content"> <div class="contact-info"> <h2 class="section-title">Get In <span>Touch</span></h2> <p class="section-subtitle">Ready to elevate your game? Contact me to schedule a session.</p> <div class="info-item"> <div class="info-icon"> <i class="fas fa-map-marker-alt"></i> </div> <div class="info-text"> <h3>Location</h3> <p>123 Soccer Way, Football City, FC 12345</p> </div> </div> <div class="info-item"> <div class="info-icon"> <i class="fas fa-phone-alt"></i> </div> <div class="info-text"> <h3>Phone</h3> <p>(123) 456-7890</p> </div> </div> <div class="info-item"> <div class="info-icon"> <i class="fas fa-envelope"></i> </div> <div class="info-text"> <h3>Email</h3> <p>coach@marcofootball.com</p> </div> </div> <div class="social-links"> <a href="#"><i class="fab fa-facebook-f"></i></a> <a href="#"><i class="fab fa-twitter"></i></a> <a href="#"><i class="fab fa-instagram"></i></a> <a href="#"><i class="fab fa-linkedin-in"></i></a> </div> </div> <div class="contact-form"> <form id="contactForm"> <div class="form-group"> <input type="text" id="name" placeholder="Your Name" required> </div> <div class="form-group"> <input type="email" id="email" placeholder="Your Email" required> </div> <div class="form-group"> <input type="tel" id="phone" placeholder="Phone Number"> </div> <div class="form-group"> <select id="service" required> <option value="" disabled selected>Select Service</option> <option value="individual">Individual Training</option> <option value="group">Group Sessions</option> <option value="elite">Elite Performance</option> <option value="other">Other Inquiry</option> </select> </div> <div class="form-group"> <textarea id="message" rows="5" placeholder="Your Message" required></textarea> </div> <button type="submit" class="btn btn-primary">Send Message</button> </form> </div> </div> </div> </section> <!-- Footer --> <footer class="footer"> <div class="container"> <div class="footer-content"> <div class="footer-about"> <a href="#" class="logo">Coach<span>Marco</span></a> <p>Professional football coaching to develop complete players both on and off the pitch.</p> </div> <div class="footer-links"> <h3>Quick Links</h3> <ul> <li><a href="#home">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#services">Services</a></li> <li><a href="#philosophy">Philosophy</a></li> <li><a href="#contact">Contact</a></li> </ul> </div> <div class="footer-services"> <h3>Services</h3> <ul> <li><a href="#services">Individual Training</a></li> <li><a href="#services">Group Sessions</a></li> <li><a href="#services">Elite Performance</a></li> <li><a href="#services">Tactical Analysis</a></li> </ul> </div> <div class="footer-newsletter"> <h3>Newsletter</h3> <p>Subscribe for training tips and updates</p> <form id="newsletterForm"> <input type="email" placeholder="Your Email" required> <button type="submit"><i class="fas fa-paper-plane"></i></button> </form> </div> </div> <div class="footer-bottom"> <p>© 2023 Coach Marco. All Rights Reserved.</p> <div class="legal-links"> <a href="#">Privacy Policy</a> <a href="#">Terms of Service</a> </div> </div> </div> </footer> <script src="script.js"></script> </body> </html>
CSS
/* Google Fonts */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap'); /* Variables */ :root { --primary-color: #2c3e50; --secondary-color: #e74c3c; --accent-color: #3498db; --light-color: #ecf0f1; --dark-color: #2c3e50; --text-color: #333; --text-light: #777; --white: #fff; --black: #000; --transition: all 0.3s ease; --box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); --border-radius: 8px; } /* Base Styles */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; font-size: 62.5%; } body { font-family: 'Poppins', sans-serif; color: var(--text-color); background-color: var(--white); line-height: 1.6; overflow-x: hidden; } h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.2; } a { text-decoration: none; color: inherit; } ul { list-style: none; } img { max-width: 100%; height: auto; } .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 2rem; } .btn { display: inline-block; padding: 1.2rem 2.5rem; border-radius: var(--border-radius); font-weight: 600; font-size: 1.6rem; text-align: center; transition: var(--transition); border: none; cursor: pointer; } .btn-primary { background-color: var(--secondary-color); color: var(--white); } .btn-primary:hover { background-color: #c0392b; transform: translateY(-3px); box-shadow: var(--box-shadow); } .btn-secondary { background-color: transparent; color: var(--secondary-color); border: 2px solid var(--secondary-color); } .btn-secondary:hover { background-color: var(--secondary-color); color: var(--white); transform: translateY(-3px); box-shadow: var(--box-shadow); } .btn-card { background-color: var(--primary-color); color: var(--white); padding: 1rem 2rem; font-size: 1.4rem; } .btn-card:hover { background-color: #1a252f; transform: translateY(-3px); box-shadow: var(--box-shadow); } .section { padding: 8rem 0; } .section-title { font-size: 3.5rem; margin-bottom: 1.5rem; position: relative; display: inline-block; } .section-title span { color: var(--secondary-color); } .section-title::after { content: ''; position: absolute; bottom: -10px; left: 0; width: 50px; height: 3px; background-color: var(--secondary-color); } .section-subtitle { font-size: 1.6rem; color: var(--text-light); margin-bottom: 3rem; } /* Header */ .header { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; background-color: rgba(255, 255, 255, 0.9); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); transition: var(--transition); } .header.scrolled { background-color: var(--white); box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); padding: 1rem 0; } .header .container { display: flex; justify-content: space-between; align-items: center; height: 8rem; } .logo { font-size: 2.5rem; font-weight: 800; color: var(--primary-color); } .logo span { color: var(--secondary-color); } .navbar a { font-size: 1.6rem; font-weight: 600; margin-left: 3rem; position: relative; transition: var(--transition); } .navbar a::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 2px; background-color: var(--secondary-color); transition: var(--transition); } .navbar a:hover::after { width: 100%; } .navbar a:hover { color: var(--secondary-color); } .menu-btn { display: none; flex-direction: column; justify-content: space-between; width: 3rem; height: 2.5rem; cursor: pointer; } .menu-btn .bar { width: 100%; height: 3px; background-color: var(--primary-color); transition: var(--transition); } .menu-btn.active .bar:nth-child(1) { transform: translateY(10px) rotate(45deg); } .menu-btn.active .bar:nth-child(2) { opacity: 0; } .menu-btn.active .bar:nth-child(3) { transform: translateY(-10px) rotate(-45deg); } /* Hero Section */ .hero { height: 100vh; display: flex; align-items: center; background: linear-gradient(135deg, rgba(44, 62, 80, 0.9) 0%, rgba(52, 152, 219, 0.7) 100%); color: var(--white); position: relative; overflow: hidden; } .hero .container { display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 1; } .hero-content { flex: 1; max-width: 600px; animation: fadeInUp 1s ease; } .hero-title { font-size: 5.5rem; margin-bottom: 2rem; line-height: 1.2; } .hero-title span { color: var(--secondary-color); } .hero-subtitle { font-size: 1.8rem; margin-bottom: 3rem; opacity: 0.9; } .hero-btns { display: flex; gap: 2rem; } .hero-image { flex: 1; position: relative; animation: fadeInRight 1s ease; } .hero-image img { border-radius: var(--border-radius); box-shadow: var(--box-shadow); transform: perspective(1000px) rotateY(-15deg); transition: var(--transition); max-width: 100%; height: auto; } .hero-image:hover img { transform: perspective(1000px) rotateY(0deg); } .floating-elements { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } .element-1, .element-2, .element-3 { position: absolute; background-color: rgba(231, 76, 60, 0.2); border-radius: 50%; animation: float 6s infinite ease-in-out; } .element-1 { width: 100px; height: 100px; top: 20%; left: 10%; animation-delay: 0s; } .element-2 { width: 150px; height: 150px; bottom: 15%; right: 10%; animation-delay: 2s; } .element-3 { width: 70px; height: 70px; top: 60%; left: 30%; animation-delay: 4s; } .scroll-down { position: absolute; bottom: 3rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; cursor: pointer; animation: bounce 2s infinite; } .scroll-down span { display: block; width: 2px; height: 2rem; background-color: var(--white); margin-bottom: 0.5rem; } .scroll-down span:nth-child(2) { height: 1.5rem; } .scroll-down span:nth-child(3) { height: 1rem; } /* About Section */ .about .container { display: flex; align-items: center; gap: 5rem; } .about-image { flex: 1; position: relative; } .about-img { border-radius: var(--border-radius); box-shadow: var(--box-shadow); animation: fadeInLeft 1s ease; } .experience-badge { position: absolute; bottom: -2rem; right: -2rem; background-color: var(--secondary-color); color: var(--white); padding: 2rem; border-radius: 50%; text-align: center; box-shadow: var(--box-shadow); animation: pulse 2s infinite; } .years { font-size: 3rem; font-weight: 700; display: block; line-height: 1; } .text { font-size: 1.2rem; display: block; margin-top: 0.5rem; } .about-content { flex: 1; animation: fadeInRight 1s ease; } .about-text { font-size: 1.6rem; margin-bottom: 3rem; color: var(--text-light); } .about-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-bottom: 3rem; } .stat-item { text-align: center; padding: 2rem; background-color: var(--light-color); border-radius: var(--border-radius); transition: var(--transition); } .stat-item:hover { transform: translateY(-5px); box-shadow: var(--box-shadow); } .stat-item h3 { font-size: 3rem; color: var(--secondary-color); margin-bottom: 0.5rem; } .stat-item p { font-size: 1.4rem; color: var(--text-light); } /* Services Section */ .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 3rem; margin-top: 5rem; } .service-card { background-color: var(--white); border-radius: var(--border-radius); padding: 3rem; box-shadow: var(--box-shadow); transition: var(--transition); border-top: 4px solid var(--secondary-color); animation: fadeInUp 1s ease; } .service-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); } .card-icon { width: 6rem; height: 6rem; background-color: rgba(231, 76, 60, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 2rem; font-size: 2.5rem; color: var(--secondary-color); } .service-card h3 { font-size: 2rem; margin-bottom: 1.5rem; } .service-card p { font-size: 1.5rem; color: var(--text-light); margin-bottom: 2rem; } .service-card ul { margin-bottom: 3rem; } .service-card ul li { font-size: 1.4rem; margin-bottom: 1rem; position: relative; padding-left: 2rem; } .service-card ul li::before { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; left: 0; color: var(--secondary-color); } /* Philosophy Section */ .philosophy { background-color: var(--light-color); } .philosophy-scroller { position: relative; overflow: hidden; margin-top: 5rem; } .scroller-track { display: flex; transition: transform 0.5s ease; } .philosophy-item { min-width: 100%; padding: 4rem; background-color: var(--white); border-radius: var(--border-radius); box-shadow: var(--box-shadow); margin-right: 2rem; transition: var(--transition); } .item-number { font-size: 5rem; font-weight: 800; color: rgba(231, 76, 60, 0.1); margin-bottom: 1rem; line-height: 1; } .philosophy-item h3 { font-size: 2.2rem; margin-bottom: 1.5rem; color: var(--primary-color); } .philosophy-item p { font-size: 1.6rem; color: var(--text-light); } .scroller-controls { display: flex; justify-content: center; align-items: center; margin-top: 3rem; gap: 2rem; } .scroller-btn { width: 5rem; height: 5rem; border-radius: 50%; background-color: var(--white); color: var(--primary-color); border: none; font-size: 1.6rem; cursor: pointer; box-shadow: var(--box-shadow); transition: var(--transition); display: flex; align-items: center; justify-content: center; } .scroller-btn:hover { background-color: var(--secondary-color); color: var(--white); } .scroller-dots { display: flex; gap: 1rem; } .scroller-dot { width: 1.2rem; height: 1.2rem; border-radius: 50%; background-color: #ccc; cursor: pointer; transition: var(--transition); } .scroller-dot.active { background-color: var(--secondary-color); transform: scale(1.2); } /* Testimonials Section */ .testimonials { background-color: var(--primary-color); color: var(--white); } .testimonials .section-title, .testimonials .section-subtitle { color: var(--white); } .testimonials .section-title::after { background-color: var(--white); } .testimonials-slider { position: relative; margin-top: 5rem; overflow: hidden; } .slider-track { display: flex; transition: transform 0.5s ease; } .testimonial-slide { min-width: 100%; padding: 0 1rem; } .testimonial-content { background-color: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); padding: 4rem; border-radius: var(--border-radius); position: relative; transition: var(--transition); } .testimonial-slide.active .testimonial-content { background-color: rgba(255, 255, 255, 0.2); } .quote-icon { font-size: 5rem; color: rgba(255, 255, 255, 0.2); position: absolute; top: 2rem; right: 3rem; } .testimonial-text { font-size: 1.8rem; font-style: italic; margin-bottom: 3rem; position: relative; z-index: 1; } .testimonial-author { display: flex; align-items: center; gap: 2rem; } .testimonial-author img { width: 7rem; height: 7rem; border-radius: 50%; object-fit: cover; border: 3px solid var(--secondary-color); } .author-info h4 { font-size: 1.8rem; margin-bottom: 0.5rem; } .author-info p { font-size: 1.4rem; opacity: 0.8; } .slider-dots { display: flex; justify-content: center; gap: 1rem; margin-top: 3rem; } .slider-dot { width: 1.2rem; height: 1.2rem; border-radius: 50%; background-color: rgba(255, 255, 255, 0.3); cursor: pointer; transition: var(--transition); } .slider-dot.active { background-color: var(--white); transform: scale(1.2); } /* Gallery Section */ .gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; margin-top: 5rem; } .gallery-item { position: relative; border-radius: var(--border-radius); overflow: hidden; height: 250px; animation: fadeInUp 1s ease; } .gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition); } .gallery-overlay { position: absolute; bottom: -100%; left: 0; width: 100%; padding: 2rem; background: linear-gradient(transparent, rgba(231, 76, 60, 0.9)); color: var(--white); transition: var(--transition); } .gallery-item:hover .gallery-overlay { bottom: 0; } .gallery-overlay h3 { font-size: 2rem; margin-bottom: 0.5rem; } .gallery-overlay p { font-size: 1.4rem; } /* Achievements Section */ .achievements { background-color: var(--light-color); } .achievements-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 3rem; margin-top: 5rem; text-align: center; } .achievement-item { padding: 3rem 2rem; background-color: var(--white); border-radius: var(--border-radius); box-shadow: var(--box-shadow); transition: var(--transition); } .achievement-item:hover { transform: translateY(-10px); } .counter { font-size: 5rem; font-weight: 700; color: var(--secondary-color); margin-bottom: 1rem; } .achievement-item p { font-size: 1.6rem; color: var(--text-light); } /* Contact Section */ .contact-content { display: flex; gap: 5rem; margin-top: 5rem; } .contact-info { flex: 1; } .info-item { display: flex; gap: 2rem; margin-bottom: 3rem; } .info-icon { width: 6rem; height: 6rem; background-color: rgba(231, 76, 60, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2rem; color: var(--secondary-color); } .info-text h3 { font-size: 1.8rem; margin-bottom: 0.5rem; } .info-text p { font-size: 1.5rem; color: var(--text-light); } .social-links { display: flex; gap: 1.5rem; margin-top: 3rem; } .social-links a { width: 4rem; height: 4rem; border-radius: 50%; background-color: rgba(231, 76, 60, 0.1); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; color: var(--secondary-color); transition: var(--transition); } .social-links a:hover { background-color: var(--secondary-color); color: var(--white); transform: translateY(-5px); } .contact-form { flex: 1; background-color: var(--white); padding: 4rem; border-radius: var(--border-radius); box-shadow: var(--box-shadow); } .form-group { margin-bottom: 2rem; } .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 1.5rem; border: 1px solid #ddd; border-radius: var(--border-radius); font-size: 1.6rem; font-family: inherit; transition: var(--transition); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--secondary-color); outline: none; } .form-group textarea { resize: vertical; min-height: 15rem; } /* Footer */ .footer { background-color: var(--primary-color); color: var(--white); padding: 8rem 0 0; } .footer-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 5rem; margin-bottom: 5rem; } .footer-about .logo { color: var(--white); margin-bottom: 2rem; display: inline-block; } .footer-about p { font-size: 1.5rem; opacity: 0.8; margin-bottom: 2rem; } .footer-links h3, .footer-services h3, .footer-newsletter h3 { font-size: 2rem; margin-bottom: 2rem; position: relative; padding-bottom: 1rem; } .footer-links h3::after, .footer-services h3::after, .footer-newsletter h3::after { content: ''; position: absolute; bottom: 0; left: 0; width: 50px; height: 2px; background-color: var(--secondary-color); } .footer-links ul li, .footer-services ul li { margin-bottom: 1.5rem; } .footer-links ul li a, .footer-services ul li a { font-size: 1.5rem; opacity: 0.8; transition: var(--transition); } .footer-links ul li a:hover, .footer-services ul li a:hover { opacity: 1; color: var(--secondary-color); padding-left: 5px; } .footer-newsletter p { font-size: 1.5rem; opacity: 0.8; margin-bottom: 2rem; } .footer-newsletter form { display: flex; } .footer-newsletter input { flex: 1; padding: 1.2rem; border: none; border-radius: var(--border-radius) 0 0 var(--border-radius); font-size: 1.4rem; } .footer-newsletter button { padding: 0 1.5rem; background-color: var(--secondary-color); color: var(--white); border: none; border-radius: 0 var(--border-radius) var(--border-radius) 0; cursor: pointer; transition: var(--transition); } .footer-newsletter button:hover { background-color: #c0392b; } .footer-bottom { padding: 2rem 0; border-top: 1px solid rgba(255, 255, 255, 0.1); text-align: center; font-size: 1.4rem; opacity: 0.8; } .legal-links { margin-top: 1rem; } .legal-links a { margin: 0 1rem; transition: var(--transition); } .legal-links a:hover { color: var(--secondary-color); } /* Animations */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInDown { from { opacity: 0; transform: translateY(-50px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInLeft { from { opacity: 0; transform: translateX(-50px); } to { opacity: 1; transform: translateX(0); } } @keyframes fadeInRight { from { opacity: 0; transform: translateX(50px); } to { opacity: 1; transform: translateX(0); } } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0) translateX(-50%); } 40% { transform: translateY(-20px) translateX(-50%); } 60% { transform: translateY(-10px) translateX(-50%); } } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } /* Responsive Styles */ @media (max-width: 992px) { .hero .container { flex-direction: column; text-align: center; } .hero-content { margin-bottom: 5rem; max-width: 100%; } .hero-btns { justify-content: center; } .about .container { flex-direction: column; } .about-image { margin-bottom: 5rem; } .contact-content { flex-direction: column; } } @media (max-width: 768px) { .navbar { position: fixed; top: 8rem; left: -100%; width: 100%; height: calc(100vh - 8rem); background-color: var(--white); flex-direction: column; align-items: center; justify-content: center; transition: var(--transition); } .navbar.active { left: 0; } .navbar a { margin: 1.5rem 0; font-size: 2rem; } .menu-btn { display: flex; } .hero-title { font-size: 4.5rem; } .section-title { font-size: 3rem; } .about-stats { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 576px) { .hero-title { font-size: 3.5rem; } .hero-btns { flex-direction: column; gap: 1.5rem; } .btn { width: 100%; } .about-stats { grid-template-columns: 1fr; } .services-grid { grid-template-columns: 1fr; } }
JavaScript
document.addEventListener('DOMContentLoaded', function() { // Mobile Menu Toggle const menuBtn = document.querySelector('.menu-btn'); const navbar = document.querySelector('.navbar'); menuBtn.addEventListener('click', function() { menuBtn.classList.toggle('active'); navbar.classList.toggle('active'); }); // Close mobile menu when clicking a link const navLinks = document.querySelectorAll('.navbar a'); navLinks.forEach(link => { link.addEventListener('click', function() { menuBtn.classList.remove('active'); navbar.classList.remove('active'); }); }); // Header scroll effect window.addEventListener('scroll', function() { const header = document.querySelector('.header'); if (window.scrollY > 100) { header.classList.add('scrolled'); } else { header.classList.remove('scrolled'); } }); // Philosophy Scroller const philosophyScroller = document.querySelector('.philosophy-scroller .scroller-track'); const philosophyItems = document.querySelectorAll('.philosophy-item'); const prevBtn = document.querySelector('.prev-btn'); const nextBtn = document.querySelector('.next-btn'); const dotsContainer = document.querySelector('.scroller-dots'); let currentIndex = 0; const itemWidth = 100; // Percentage // Create dots philosophyItems.forEach((_, index) => { const dot = document.createElement('div'); dot.classList.add('scroller-dot'); if (index === 0) dot.classList.add('active'); dot.addEventListener('click', () => { goToSlide(index); }); dotsContainer.appendChild(dot); }); const dots = document.querySelectorAll('.scroller-dot'); function goToSlide(index) { philosophyScroller.style.transform = `translateX(-${index * itemWidth}%)`; currentIndex = index; // Update dots dots.forEach(dot => dot.classList.remove('active')); dots[index].classList.add('active'); } prevBtn.addEventListener('click', function() { currentIndex = (currentIndex > 0) ? currentIndex - 1 : philosophyItems.length - 1; goToSlide(currentIndex); }); nextBtn.addEventListener('click', function() { currentIndex = (currentIndex < philosophyItems.length - 1) ? currentIndex + 1 : 0; goToSlide(currentIndex); }); // Auto-scroll for philosophy scroller let scrollerInterval = setInterval(() => { currentIndex = (currentIndex < philosophyItems.length - 1) ? currentIndex + 1 : 0; goToSlide(currentIndex); }, 5000); // Pause auto-scroll on hover philosophyScroller.addEventListener('mouseenter', () => { clearInterval(scrollerInterval); }); philosophyScroller.addEventListener('mouseleave', () => { scrollerInterval = setInterval(() => { currentIndex = (currentIndex < philosophyItems.length - 1) ? currentIndex + 1 : 0; goToSlide(currentIndex); }, 5000); }); // Testimonials Slider const testimonialSlider = document.querySelector('.testimonials-slider .slider-track'); const testimonialSlides = document.querySelectorAll('.testimonial-slide'); const testimonialDotsContainer = document.querySelector('.slider-dots'); let testimonialCurrentIndex = 0; // Create dots for testimonials testimonialSlides.forEach((_, index) => { const dot = document.createElement('div'); dot.classList.add('slider-dot'); if (index === 0) dot.classList.add('active'); dot.addEventListener('click', () => { goToTestimonial(index); }); testimonialDotsContainer.appendChild(dot); }); const testimonialDots = document.querySelectorAll('.slider-dot'); function goToTestimonial(index) { testimonialSlider.style.transform = `translateX(-${index * 100}%)`; testimonialCurrentIndex = index; // Update active slide and dots testimonialSlides.forEach(slide => slide.classList.remove('active')); testimonialSlides[index].classList.add('active'); testimonialDots.forEach(dot => dot.classList.remove('active')); testimonialDots[index].classList.add('active'); } // Auto-slide for testimonials let testimonialInterval = setInterval(() => { testimonialCurrentIndex = (testimonialCurrentIndex < testimonialSlides.length - 1) ? testimonialCurrentIndex + 1 : 0; goToTestimonial(testimonialCurrentIndex); }, 6000); // Pause auto-slide on hover testimonialSlider.addEventListener('mouseenter', () => { clearInterval(testimonialInterval); }); testimonialSlider.addEventListener('mouseleave', () => { testimonialInterval = setInterval(() => { testimonialCurrentIndex = (testimonialCurrentIndex < testimonialSlides.length - 1) ? testimonialCurrentIndex + 1 : 0; goToTestimonial(testimonialCurrentIndex); }, 6000); }); // Counter Animation const counters = document.querySelectorAll('.counter'); const speed = 200; function animateCounters() { counters.forEach(counter => { const target = +counter.getAttribute('data-target'); const count = +counter.innerText; const increment = target / speed; if (count < target) { counter.innerText = Math.ceil(count + increment); setTimeout(animateCounters, 1); } else { counter.innerText = target; } }); } // Intersection Observer for animations const observerOptions = { threshold: 0.1 }; const observer = new IntersectionObserver((entries, observer) => { entries.forEach(entry => { if (entry.isIntersecting) { if (entry.target.classList.contains('achievements-grid')) { animateCounters(); } // Add animation classes if (entry.target.classList.contains('section')) { const animatedElements = entry.target.querySelectorAll('.service-card, .gallery-item, .about-img, .about-content, .hero-content, .hero-image'); animatedElements.forEach((element, index) => { setTimeout(() => { element.style.opacity = '1'; element.style.transform = 'translateY(0)'; }, index * 200); }); } observer.unobserve(entry.target); } }); }, observerOptions); // Observe sections document.querySelectorAll('.section').forEach(section => { observer.observe(section); }); // Smooth scrolling for anchor links document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function(e) { e.preventDefault(); const targetId = this.getAttribute('href'); const targetElement = document.querySelector(targetId); if (targetElement) { window.scrollTo({ top: targetElement.offsetTop - 80, behavior: 'smooth' }); } }); }); // Form submission const contactForm = document.getElementById('contactForm'); if (contactForm) { contactForm.addEventListener('submit', function(e) { e.preventDefault(); // Get form values const name = document.getElementById('name').value; const email = document.getElementById('email').value; const message = document.getElementById('message').value; // Here you would typically send the form data to a server // For demonstration, we'll just show an alert alert(`Thank you, ${name}! Your message has been sent. We'll get back to you soon.`); // Reset form this.reset(); }); } const newsletterForm = document.getElementById('newsletterForm'); if (newsletterForm) { newsletterForm.addEventListener('submit', function(e) { e.preventDefault(); const email = this.querySelector('input[type="email"]').value; alert(`Thank you for subscribing with ${email}!`); this.reset(); }); } });
Output Preview
Desktop
Mobile
Fullscreen
