Advocate Landing Page
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>Justice Law Firm | Expert Legal Advocates</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css"> <link rel="stylesheet" href="styles.css"> </head> <body> <!-- Preloader --> <div class="preloader"> <div class="scales"> <div class="scale-left"></div> <div class="scale-right"></div> </div> <p>JUSTICE LAW FIRM</p> </div> <!-- Navigation --> <nav class="navbar"> <div class="container"> <a href="#" class="logo">JUSTICE<span>LAW</span></a> <div class="nav-links"> <a href="#home">Home</a> <a href="#about">About</a> <a href="#services">Services</a> <a href="#team">Our Team</a> <a href="#cases">Case Studies</a> <a href="#testimonials">Testimonials</a> <a href="#blog">Blog</a> <a href="#contact">Contact</a> </div> <div class="nav-cta"> <a href="tel:+1234567890" class="phone"><i class="fas fa-phone"></i> +1 (234) 567-890</a> <div class="hamburger"> <span></span> <span></span> <span></span> </div> </div> </div> </nav> <!-- Hero Section --> <section class="hero" id="home"> <div class="container"> <div class="hero-content"> <h1 class="hero-title">YOUR TRUSTED <span>LEGAL ADVOCATES</span></h1> <p class="hero-subtitle">With over 25 years of combined experience, we provide exceptional legal representation tailored to your unique needs.</p> <div class="hero-buttons"> <a href="#contact" class="btn-primary">Free Consultation</a> <a href="#services" class="btn-secondary">Our Services</a> </div> <div class="hero-stats"> <div class="stat-item"> <h3>500+</h3> <p>Cases Won</p> </div> <div class="stat-item"> <h3>98%</h3> <p>Success Rate</p> </div> <div class="stat-item"> <h3>25+</h3> <p>Years Experience</p> </div> </div> </div> <div class="hero-image"> <img src="https://images.unsplash.com/photo-1589829545856-d10d557cf95f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Professional Lawyer" class="floating"> </div> </div> <div class="scroll-down"> <div class="mouse"></div> <div class="arrow"></div> </div> </section> <!-- Trusted By Section --> <section class="trusted-by"> <div class="container"> <h2>TRUSTED BY CLIENTS ACROSS INDUSTRIES</h2> <div class="scroller-container"> <div class="scroller"> <div class="scroller-inner"> <img src="https://via.placeholder.com/150x60/111/fff?text=FORTUNE+500" alt="Fortune 500"> <img src="https://via.placeholder.com/150x60/111/fff?text=STARTUPS" alt="Startups"> <img src="https://via.placeholder.com/150x60/111/fff?text=NONPROFITS" alt="Nonprofits"> <img src="https://via.placeholder.com/150x60/111/fff?text=GOVERNMENT" alt="Government"> <img src="https://via.placeholder.com/150x60/111/fff?text=INDIVIDUALS" alt="Individuals"> <img src="https://via.placeholder.com/150x60/111/fff?text=SMALL+BUSINESS" alt="Small Business"> <img src="https://via.placeholder.com/150x60/111/fff?text=REAL+ESTATE" alt="Real Estate"> <img src="https://via.placeholder.com/150x60/111/fff?text=TECH+COMPANIES" alt="Tech Companies"> </div> </div> </div> </div> </section> <!-- About Section --> <section class="about" id="about"> <div class="container"> <div class="about-image"> <div class="image-main"> <img src="https://images.unsplash.com/photo-1589829545856-d10d557cf95f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Our Law Firm"> </div> <div class="image-badge"> <h3>25+</h3> <p>Years Experience</p> </div> </div> <div class="about-content"> <span class="section-tag">ABOUT OUR FIRM</span> <h2 class="section-title">Committed To <span>Justice</span> And <span>Excellence</span></h2> <p class="about-text">Founded in 1998, Justice Law Firm has grown to become one of the most respected legal practices in the country. Our team of dedicated attorneys brings diverse expertise to provide comprehensive legal solutions.</p> <div class="about-features"> <div class="feature-item"> <div class="feature-icon"> <i class="fas fa-balance-scale"></i> </div> <div class="feature-content"> <h3>Ethical Practice</h3> <p>We adhere to the highest standards of professional ethics and integrity.</p> </div> </div> <div class="feature-item"> <div class="feature-icon"> <i class="fas fa-user-tie"></i> </div> <div class="feature-content"> <h3>Personalized Approach</h3> <p>Every client receives individualized attention and tailored legal strategies.</p> </div> </div> </div> <a href="#team" class="btn-primary">Meet Our Team</a> </div> </div> </section> <!-- Services Section --> <section class="services" id="services"> <div class="container"> <span class="section-tag">OUR PRACTICE AREAS</span> <h2 class="section-title">Legal <span>Services</span> We Provide</h2> <p class="section-subtitle">Comprehensive legal solutions for individuals and businesses</p> <div class="services-grid"> <div class="service-card"> <div class="service-icon"> <i class="fas fa-gavel"></i> </div> <h3>Criminal Defense</h3> <p>Aggressive representation for all criminal charges from misdemeanors to felonies.</p> <a href="#" class="service-link">Learn More <i class="fas fa-arrow-right"></i></a> <div class="hover-effect"></div> </div> <div class="service-card"> <div class="service-icon"> <i class="fas fa-home"></i> </div> <h3>Real Estate Law</h3> <p>Transactions, disputes, zoning issues, and property development guidance.</p> <a href="#" class="service-link">Learn More <i class="fas fa-arrow-right"></i></a> <div class="hover-effect"></div> </div> <div class="service-card"> <div class="service-icon"> <i class="fas fa-briefcase"></i> </div> <h3>Business Law</h3> <p>Formation, contracts, mergers, acquisitions, and corporate governance.</p> <a href="#" class="service-link">Learn More <i class="fas fa-arrow-right"></i></a> <div class="hover-effect"></div> </div> <div class="service-card"> <div class="service-icon"> <i class="fas fa-heart"></i> </div> <h3>Family Law</h3> <p>Divorce, child custody, adoption, and domestic relations matters.</p> <a href="#" class="service-link">Learn More <i class="fas fa-arrow-right"></i></a> <div class="hover-effect"></div> </div> <div class="service-card"> <div class="service-icon"> <i class="fas fa-user-injured"></i> </div> <h3>Personal Injury</h3> <p>Compensation for accidents, medical malpractice, and wrongful death.</p> <a href="#" class="service-link">Learn More <i class="fas fa-arrow-right"></i></a> <div class="hover-effect"></div> </div> <div class="service-card"> <div class="service-icon"> <i class="fas fa-file-contract"></i> </div> <h3>Estate Planning</h3> <p>Wills, trusts, probate, and asset protection strategies.</p> <a href="#" class="service-link">Learn More <i class="fas fa-arrow-right"></i></a> <div class="hover-effect"></div> </div> </div> </div> </section> <!-- Team Section --> <section class="team" id="team"> <div class="container"> <span class="section-tag">OUR LEGAL TEAM</span> <h2 class="section-title">Meet Our <span>Attorneys</span></h2> <p class="section-subtitle">Dedicated professionals with diverse expertise</p> <div class="swiper teamSwiper"> <div class="swiper-wrapper"> <div class="swiper-slide"> <div class="team-card"> <div class="team-image"> <img src="https://images.unsplash.com/photo-1562788869-4ed32648eb72?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Sarah Johnson"> <div class="team-social"> <a href="#"><i class="fab fa-linkedin-in"></i></a> <a href="#"><i class="fab fa-twitter"></i></a> <a href="#"><i class="fas fa-envelope"></i></a> </div> </div> <div class="team-details"> <h3>Sarah Johnson</h3> <p class="position">Senior Partner</p> <p class="expertise">Criminal Defense, Litigation</p> <a href="#" class="btn-team">View Profile</a> </div> </div> </div> <div class="swiper-slide"> <div class="team-card"> <div class="team-image"> <img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Michael Chen"> <div class="team-social"> <a href="#"><i class="fab fa-linkedin-in"></i></a> <a href="#"><i class="fab fa-twitter"></i></a> <a href="#"><i class="fas fa-envelope"></i></a> </div> </div> <div class="team-details"> <h3>Michael Chen</h3> <p class="position">Partner</p> <p class="expertise">Corporate Law, Mergers & Acquisitions</p> <a href="#" class="btn-team">View Profile</a> </div> </div> </div> <div class="swiper-slide"> <div class="team-card"> <div class="team-image"> <img src="https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Emily Rodriguez"> <div class="team-social"> <a href="#"><i class="fab fa-linkedin-in"></i></a> <a href="#"><i class="fab fa-twitter"></i></a> <a href="#"><i class="fas fa-envelope"></i></a> </div> </div> <div class="team-details"> <h3>Emily Rodriguez</h3> <p class="position">Partner</p> <p class="expertise">Family Law, Estate Planning</p> <a href="#" class="btn-team">View Profile</a> </div> </div> </div> <div class="swiper-slide"> <div class="team-card"> <div class="team-image"> <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="David Wilson"> <div class="team-social"> <a href="#"><i class="fab fa-linkedin-in"></i></a> <a href="#"><i class="fab fa-twitter"></i></a> <a href="#"><i class="fas fa-envelope"></i></a> </div> </div> <div class="team-details"> <h3>David Wilson</h3> <p class="position">Associate</p> <p class="expertise">Real Estate, Contract Law</p> <a href="#" class="btn-team">View Profile</a> </div> </div> </div> </div> <div class="swiper-pagination"></div> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> </div> </div> </section> <!-- Case Studies Section --> <section class="case-studies" id="cases"> <div class="container"> <span class="section-tag">OUR SUCCESS STORIES</span> <h2 class="section-title">Notable <span>Case Studies</span></h2> <p class="section-subtitle">Examples of our successful legal representations</p> <div class="case-tabs"> <div class="tab-buttons"> <button class="tab-btn active" data-tab="all">All Cases</button> <button class="tab-btn" data-tab="criminal">Criminal</button> <button class="tab-btn" data-tab="civil">Civil</button> <button class="tab-btn" data-tab="corporate">Corporate</button> <button class="tab-btn" data-tab="family">Family</button> </div> <div class="tab-content"> <div class="case-card" data-category="criminal"> <div class="case-image"> <img src="https://images.unsplash.com/photo-1589391886645-d51941baf7fb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Criminal Case"> </div> <div class="case-details"> <span class="case-category criminal">Criminal Defense</span> <h3>State vs. Client - DUI Charges Dismissed</h3> <p>Successfully challenged improper police procedure leading to dismissal of all charges.</p> <div class="case-result"> <span>Result:</span> <strong>All charges dismissed</strong> </div> <a href="#" class="btn-case">Read Full Story</a> </div> </div> <div class="case-card" data-category="corporate"> <div class="case-image"> <img src="https://images.unsplash.com/photo-1450101499163-c8848c66ca85?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Corporate Case"> </div> <div class="case-details"> <span class="case-category corporate">Corporate Law</span> <h3>$50M Merger Negotiation</h3> <p>Represented tech startup in successful acquisition by Fortune 500 company.</p> <div class="case-result"> <span>Result:</span> <strong>Favorable terms for our client</strong> </div> <a href="#" class="btn-case">Read Full Story</a> </div> </div> <div class="case-card" data-category="civil"> <div class="case-image"> <img src="https://images.unsplash.com/photo-1589829545856-d10d557cf95f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Civil Case"> </div> <div class="case-details"> <span class="case-category civil">Civil Litigation</span> <h3>Property Dispute Resolution</h3> <p>Resolved complex boundary dispute preserving client's property rights.</p> <div class="case-result"> <span>Result:</span> <strong>Favorable settlement</strong> </div> <a href="#" class="btn-case">Read Full Story</a> </div> </div> </div> </div> </div> </section> <!-- Testimonials Section --> <section class="testimonials" id="testimonials"> <div class="container"> <span class="section-tag">CLIENT TESTIMONIALS</span> <h2 class="section-title">What Our <span>Clients Say</span></h2> <p class="section-subtitle">Hear from those we've represented</p> <div class="testimonial-slider"> <div class="swiper testimonialSwiper"> <div class="swiper-wrapper"> <div class="swiper-slide"> <div class="testimonial-card"> <div class="testimonial-content"> <div class="quote-icon"> <i class="fas fa-quote-left"></i> </div> <p>"The team at Justice Law Firm handled my complex business litigation with exceptional skill. Their attention to detail and strategic thinking resulted in a settlement far beyond my expectations."</p> <div class="rating"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> </div> </div> <div class="testimonial-author"> <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Robert K."> <div> <h4>Robert K.</h4> <span>CEO, TechStart Inc.</span> </div> </div> </div> </div> <div class="swiper-slide"> <div class="testimonial-card"> <div class="testimonial-content"> <div class="quote-icon"> <i class="fas fa-quote-left"></i> </div> <p>"During the most difficult time of my life, Emily Rodriguez provided not just legal expertise but genuine compassion. She guided me through my divorce with dignity and achieved a fair outcome for my children and me."</p> <div class="rating"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> </div> </div> <div class="testimonial-author"> <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Jennifer M."> <div> <h4>Jennifer M.</h4> <span>Client since 2018</span> </div> </div> </div> </div> <div class="swiper-slide"> <div class="testimonial-card"> <div class="testimonial-content"> <div class="quote-icon"> <i class="fas fa-quote-left"></i> </div> <p>"Sarah Johnson's defense in my criminal case was nothing short of brilliant. Her thorough preparation and courtroom presence turned what seemed like a hopeless situation into a complete acquittal."</p> <div class="rating"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> </div> </div> <div class="testimonial-author"> <img src="https://randomuser.me/api/portraits/men/68.jpg" alt="Thomas R."> <div> <h4>Thomas R.</h4> <span>Client since 2020</span> </div> </div> </div> </div> </div> <div class="swiper-pagination"></div> </div> </div> </div> </section> <!-- CTA Section --> <section class="cta"> <div class="container"> <div class="cta-content"> <h2>Ready To Discuss Your Legal Needs?</h2> <p>Contact us today for a confidential consultation. We're here to help you navigate the legal system and protect your rights.</p> </div> <div class="cta-buttons"> <a href="#contact" class="btn-primary">Schedule Consultation</a> <a href="tel:+1234567890" class="btn-secondary"><i class="fas fa-phone"></i> Call Now</a> </div> </div> </section> <!-- Blog Section --> <section class="blog" id="blog"> <div class="container"> <span class="section-tag">LATEST ARTICLES</span> <h2 class="section-title">Legal <span>Insights</span></h2> <p class="section-subtitle">Stay informed with our latest legal updates</p> <div class="blog-grid"> <div class="blog-card"> <div class="blog-image"> <img src="https://images.unsplash.com/photo-1589391886645-d51941baf7fb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Legal Article"> <span class="blog-category">Criminal Law</span> </div> <div class="blog-details"> <div class="blog-meta"> <span><i class="far fa-calendar"></i> June 15, 2023</span> <span><i class="far fa-user"></i> Sarah Johnson</span> </div> <h3>Understanding Your Rights During Police Encounters</h3> <p>Know what to do and what not to do when interacting with law enforcement to protect your constitutional rights.</p> <a href="#" class="btn-blog">Read More <i class="fas fa-arrow-right"></i></a> </div> </div> <div class="blog-card"> <div class="blog-image"> <img src="https://images.unsplash.com/photo-1450101499163-c8848c66ca85?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Legal Article"> <span class="blog-category">Business Law</span> </div> <div class="blog-details"> <div class="blog-meta"> <span><i class="far fa-calendar"></i> May 28, 2023</span> <span><i class="far fa-user"></i> Michael Chen</span> </div> <h3>Essential Contracts Every Startup Needs</h3> <p>Protect your business from the beginning with these crucial legal agreements that can save you from future disputes.</p> <a href="#" class="btn-blog">Read More <i class="fas fa-arrow-right"></i></a> </div> </div> <div class="blog-card"> <div class="blog-image"> <img src="https://images.unsplash.com/photo-1589829545856-d10d557cf95f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Legal Article"> <span class="blog-category">Family Law</span> </div> <div class="blog-details"> <div class="blog-meta"> <span><i class="far fa-calendar"></i> April 10, 2023</span> <span><i class="far fa-user"></i> Emily Rodriguez</span> </div> <h3>Child Custody: What the Court Considers</h3> <p>Learn about the factors judges evaluate when making custody determinations and how to prepare your case.</p> <a href="#" class="btn-blog">Read More <i class="fas fa-arrow-right"></i></a> </div> </div> </div> </div> </section> <!-- Contact Section --> <section class="contact" id="contact"> <div class="container"> <div class="contact-content"> <span class="section-tag">GET IN TOUCH</span> <h2 class="section-title">Contact <span>Our Office</span></h2> <p class="section-subtitle">We're here to answer your questions and discuss your legal needs</p> <div class="contact-info"> <div class="info-item"> <div class="info-icon"> <i class="fas fa-map-marker-alt"></i> </div> <div class="info-content"> <h3>Our Location</h3> <p>123 Justice Avenue, Suite 500<br>New York, NY 10001</p> </div> </div> <div class="info-item"> <div class="info-icon"> <i class="fas fa-phone-alt"></i> </div> <div class="info-content"> <h3>Phone Number</h3> <p>+1 (234) 567-8900<br>+1 (234) 567-8901 (Fax)</p> </div> </div> <div class="info-item"> <div class="info-icon"> <i class="far fa-envelope"></i> </div> <div class="info-content"> <h3>Email Address</h3> <p>info@justicelaw.com<br>consultation@justicelaw.com</p> </div> </div> <div class="info-item"> <div class="info-icon"> <i class="far fa-clock"></i> </div> <div class="info-content"> <h3>Office Hours</h3> <p>Monday - Friday: 9:00 AM - 6:00 PM<br>Saturday: By appointment only</p> </div> </div> </div> </div> <div class="contact-form"> <form> <div class="form-group"> <input type="text" placeholder="Your Name" required> </div> <div class="form-group"> <input type="email" placeholder="Your Email" required> </div> <div class="form-group"> <input type="tel" placeholder="Phone Number"> </div> <div class="form-group"> <select required> <option value="">Select Service</option> <option value="criminal">Criminal Defense</option> <option value="real-estate">Real Estate Law</option> <option value="business">Business Law</option> <option value="family">Family Law</option> <option value="injury">Personal Injury</option> <option value="estate">Estate Planning</option> <option value="other">Other</option> </select> </div> <div class="form-group"> <textarea placeholder="Your Message" rows="5" required></textarea> </div> <button type="submit" class="btn-primary">Send Message</button> </form> </div> </div> </section> <!-- Footer --> <footer class="footer"> <div class="container"> <div class="footer-top"> <div class="footer-about"> <a href="#" class="logo">JUSTICE<span>LAW</span></a> <p>Providing exceptional legal representation with integrity, dedication, and personalized attention since 1998.</p> <div class="footer-social"> <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-linkedin-in"></i></a> <a href="#"><i class="fab fa-instagram"></i></a> </div> </div> <div class="footer-links"> <h3>Quick Links</h3> <ul> <li><a href="#home">Home</a></li> <li><a href="#about">About Us</a></li> <li><a href="#services">Services</a></li> <li><a href="#team">Our Team</a></li> <li><a href="#cases">Case Studies</a></li> <li><a href="#blog">Blog</a></li> <li><a href="#contact">Contact</a></li> </ul> </div> <div class="footer-services"> <h3>Our Services</h3> <ul> <li><a href="#">Criminal Defense</a></li> <li><a href="#">Real Estate Law</a></li> <li><a href="#">Business Law</a></li> <li><a href="#">Family Law</a></li> <li><a href="#">Personal Injury</a></li> <li><a href="#">Estate Planning</a></li> <li><a href="#">Civil Litigation</a></li> </ul> </div> <div class="footer-newsletter"> <h3>Newsletter</h3> <p>Subscribe to our newsletter for legal updates and firm news.</p> <form> <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 Justice Law Firm. All Rights Reserved.</p> <div class="footer-legal"> <a href="#">Privacy Policy</a> <a href="#">Terms of Service</a> <a href="#">Disclaimer</a> </div> </div> </div> </footer> <script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script> <script src="script.js"></script> </body> </html>
CSS
/* Base Styles */ :root { --primary-color: #1a3e72; --secondary-color: #e63946; --accent-color: #457b9d; --dark-color: #1d3557; --light-color: #f1faee; --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); --box-shadow-dark: 0 5px 15px rgba(0, 0, 0, 0.2); --border-radius: 8px; } * { 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 { font-weight: 700; line-height: 1.2; } a { text-decoration: none; color: inherit; } img { max-width: 100%; height: auto; display: block; } ul { list-style: none; } .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 2rem; } .btn { display: inline-block; padding: 1.2rem 2.4rem; border-radius: var(--border-radius); font-weight: 600; font-size: 1.6rem; text-align: center; transition: var(--transition); cursor: pointer; border: none; } .btn-primary { background-color: var(--primary-color); color: var(--white); border: 2px solid var(--primary-color); } .btn-primary:hover { background-color: transparent; color: var(--primary-color); transform: translateY(-3px); box-shadow: var(--box-shadow); } .btn-secondary { background-color: transparent; color: var(--primary-color); border: 2px solid var(--primary-color); } .btn-secondary:hover { background-color: var(--primary-color); color: var(--white); transform: translateY(-3px); box-shadow: var(--box-shadow); } .section-tag { display: block; font-size: 1.4rem; color: var(--secondary-color); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 1rem; text-align: center; } .section-title { font-size: 3.6rem; margin-bottom: 1.5rem; text-align: center; position: relative; } .section-title span { color: var(--primary-color); position: relative; } .section-title span::after { content: ''; position: absolute; bottom: 5px; left: 0; width: 100%; height: 10px; background-color: rgba(26, 62, 114, 0.2); z-index: -1; } .section-subtitle { font-size: 1.6rem; color: var(--text-light); text-align: center; margin-bottom: 5rem; max-width: 700px; margin-left: auto; margin-right: auto; } /* Preloader */ .preloader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--white); display: flex; justify-content: center; align-items: center; z-index: 9999; transition: opacity 0.5s ease; } .scales { position: relative; width: 120px; height: 60px; margin: 0 auto 2rem; } .scale-left, .scale-right { position: absolute; width: 50px; height: 10px; background-color: var(--primary-color); border-radius: 5px; animation: scaleBalance 1.5s infinite ease-in-out; } .scale-left { left: 0; transform: rotate(-15deg); transform-origin: right center; } .scale-right { right: 0; transform: rotate(15deg); transform-origin: left center; animation-delay: 0.2s; } .preloader p { font-size: 2.4rem; font-weight: 700; color: var(--dark-color); letter-spacing: 2px; animation: fadeInOut 2s infinite; } @keyframes scaleBalance { 0%, 100% { transform: rotate(-15deg); } 50% { transform: rotate(15deg); } } @keyframes fadeInOut { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } } /* Navigation */ .navbar { position: fixed; top: 0; left: 0; width: 100%; padding: 2rem 0; z-index: 1000; transition: all 0.3s ease; background-color: rgba(255, 255, 255, 0.95); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } .navbar .container { display: flex; justify-content: space-between; align-items: center; } .logo { font-size: 2.4rem; font-weight: 700; color: var(--dark-color); letter-spacing: 1px; } .logo span { color: var(--primary-color); } .nav-links { display: flex; gap: 3rem; } .nav-links a { font-size: 1.6rem; font-weight: 500; transition: var(--transition); position: relative; } .nav-links a::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 2px; background-color: var(--primary-color); transition: var(--transition); } .nav-links a:hover::after { width: 100%; } .nav-cta { display: flex; align-items: center; gap: 2rem; } .phone { display: flex; align-items: center; gap: 0.5rem; font-size: 1.4rem; font-weight: 600; color: var(--primary-color); transition: var(--transition); } .phone:hover { color: var(--secondary-color); } .hamburger { display: none; flex-direction: column; justify-content: space-between; width: 25px; height: 20px; cursor: pointer; z-index: 1001; } .hamburger span { display: block; width: 100%; height: 3px; background-color: var(--dark-color); transition: all 0.3s ease; } .hamburger.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); } .hamburger.active span:nth-child(2) { opacity: 0; } .hamburger.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } /* Hero Section */ .hero { padding: 15rem 0 10rem; position: relative; overflow: hidden; background: linear-gradient(135deg, rgba(241, 250, 238, 0.9) 0%, rgba(255, 255, 255, 1) 100%); } .hero .container { display: flex; align-items: center; justify-content: space-between; gap: 5rem; } .hero-content { flex: 1; max-width: 600px; } .hero-title { font-size: 5.5rem; margin-bottom: 2rem; line-height: 1.1; text-align: left; } .hero-title span { color: var(--primary-color); position: relative; } .hero-title span::after { content: ''; position: absolute; bottom: 5px; left: 0; width: 100%; height: 10px; background-color: rgba(26, 62, 114, 0.3); z-index: -1; } .hero-subtitle { font-size: 1.8rem; margin-bottom: 3rem; color: var(--text-light); text-align: left; } .hero-buttons { display: flex; gap: 2rem; margin-bottom: 4rem; } .hero-stats { display: flex; gap: 3rem; } .stat-item { text-align: center; } .stat-item h3 { font-size: 3rem; color: var(--primary-color); margin-bottom: 0.5rem; } .stat-item p { font-size: 1.4rem; color: var(--text-light); } .hero-image { flex: 1; position: relative; z-index: 1; } .hero-image img { width: 100%; max-width: 600px; border-radius: var(--border-radius); box-shadow: var(--box-shadow-dark); animation: floating 3s infinite ease-in-out; } .scroll-down { position: absolute; bottom: 3rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; cursor: pointer; } .mouse { width: 25px; height: 40px; border: 2px solid var(--dark-color); border-radius: 20px; position: relative; margin-bottom: 5px; } .mouse::before { content: ''; position: absolute; top: 5px; left: 50%; transform: translateX(-50%); width: 4px; height: 8px; background-color: var(--dark-color); border-radius: 2px; animation: scrollDown 2s infinite; } .arrow { width: 15px; height: 15px; border-right: 2px solid var(--dark-color); border-bottom: 2px solid var(--dark-color); transform: rotate(45deg); animation: arrowBounce 2s infinite; } @keyframes floating { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } } @keyframes scrollDown { 0% { opacity: 1; transform: translateY(0) translateX(-50%); } 100% { opacity: 0; transform: translateY(15px) translateX(-50%); } } @keyframes arrowBounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0) rotate(45deg); } 40% { transform: translateY(-10px) rotate(45deg); } 60% { transform: translateY(-5px) rotate(45deg); } } /* Trusted By Section */ .trusted-by { padding: 5rem 0; background-color: var(--light-color); } .trusted-by h2 { font-size: 1.6rem; text-align: center; margin-bottom: 3rem; color: var(--text-light); letter-spacing: 2px; text-transform: uppercase; } .scroller-container { overflow: hidden; position: relative; } .scroller { display: flex; width: max-content; animation: scroll 20s linear infinite; } .scroller-inner { display: flex; gap: 5rem; padding: 0 2rem; } .scroller img { height: 40px; filter: grayscale(100%); opacity: 0.7; transition: var(--transition); } .scroller img:hover { filter: grayscale(0); opacity: 1; } @keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* About Section */ .about { padding: 8rem 0; background-color: var(--white); } .about .container { display: flex; align-items: center; gap: 5rem; } .about-image { flex: 1; position: relative; } .image-main img { border-radius: var(--border-radius); box-shadow: var(--box-shadow-dark); } .image-badge { position: absolute; bottom: -20px; right: -20px; background-color: var(--secondary-color); color: var(--white); padding: 2rem; border-radius: 50%; width: 120px; height: 120px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; box-shadow: var(--box-shadow); } .image-badge h3 { font-size: 3rem; line-height: 1; } .image-badge p { font-size: 1.2rem; } .about-content { flex: 1; } .about-text { font-size: 1.6rem; margin-bottom: 3rem; color: var(--text-light); } .about-features { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-bottom: 3rem; } .feature-item { display: flex; gap: 2rem; align-items: flex-start; } .feature-icon { width: 60px; height: 60px; background-color: rgba(26, 62, 114, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2rem; color: var(--primary-color); flex-shrink: 0; } .feature-content h3 { font-size: 1.8rem; margin-bottom: 0.5rem; } .feature-content p { font-size: 1.4rem; color: var(--text-light); } /* Services Section */ .services { padding: 8rem 0; background-color: var(--light-color); } .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 3rem; } .service-card { background-color: var(--white); padding: 3rem; border-radius: var(--border-radius); box-shadow: var(--box-shadow); transition: var(--transition); position: relative; overflow: hidden; z-index: 1; } .service-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%); z-index: -1; opacity: 0; transition: var(--transition); } .service-card:hover::before { opacity: 1; } .service-icon { width: 70px; height: 70px; background-color: rgba(26, 62, 114, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; color: var(--primary-color); margin-bottom: 2rem; transition: var(--transition); } .service-card:hover .service-icon { background-color: rgba(255, 255, 255, 0.2); color: var(--white); } .service-card h3 { font-size: 2rem; margin-bottom: 1.5rem; transition: var(--transition); } .service-card:hover h3 { color: var(--white); } .service-card p { font-size: 1.4rem; color: var(--text-light); margin-bottom: 2rem; transition: var(--transition); } .service-card:hover p { color: rgba(255, 255, 255, 0.8); } .service-link { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 1.4rem; font-weight: 600; color: var(--primary-color); transition: var(--transition); } .service-card:hover .service-link { color: var(--white); } .hover-effect { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.1); z-index: -1; opacity: 0; transition: var(--transition); } .service-card:hover .hover-effect { opacity: 1; } /* Team Section */ .team { padding: 8rem 0; background-color: var(--white); } .teamSwiper { padding: 3rem 1rem; margin-top: 5rem; } .swiper-slide { padding: 1rem; } .team-card { background-color: var(--white); border-radius: var(--border-radius); overflow: hidden; box-shadow: var(--box-shadow); transition: var(--transition); height: 100%; } .team-card:hover { transform: translateY(-10px); box-shadow: var(--box-shadow-dark); } .team-image { position: relative; height: 300px; overflow: hidden; } .team-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .team-card:hover .team-image img { transform: scale(1.05); } .team-social { position: absolute; bottom: -60px; left: 0; width: 100%; display: flex; justify-content: center; gap: 1rem; padding: 1.5rem; background-color: rgba(26, 62, 114, 0.9); transition: var(--transition); } .team-card:hover .team-social { bottom: 0; } .team-social a { width: 35px; height: 35px; background-color: var(--white); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--primary-color); transition: var(--transition); } .team-social a:hover { background-color: var(--secondary-color); color: var(--white); } .team-details { padding: 2rem; text-align: center; } .team-details h3 { font-size: 2rem; margin-bottom: 0.5rem; } .position { font-size: 1.4rem; color: var(--secondary-color); font-weight: 600; margin-bottom: 0.5rem; } .expertise { font-size: 1.4rem; color: var(--text-light); margin-bottom: 2rem; } .btn-team { display: inline-block; padding: 0.8rem 2rem; background-color: var(--primary-color); color: var(--white); border-radius: 30px; font-size: 1.4rem; font-weight: 600; transition: var(--transition); } .btn-team:hover { background-color: var(--secondary-color); transform: translateY(-3px); } .swiper-button-next, .swiper-button-prev { color: var(--primary-color) !important; background-color: rgba(255, 255, 255, 0.8); width: 50px !important; height: 50px !important; border-radius: 50%; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); transition: var(--transition); } .swiper-button-next::after, .swiper-button-prev::after { font-size: 1.8rem !important; font-weight: 700; } .swiper-button-next:hover, .swiper-button-prev:hover { background-color: var(--primary-color); color: var(--white) !important; } .swiper-pagination-bullet { background-color: var(--text-light) !important; opacity: 0.5 !important; } .swiper-pagination-bullet-active { background-color: var(--primary-color) !important; opacity: 1 !important; } /* Case Studies Section */ .case-studies { padding: 8rem 0; background-color: var(--light-color); } .case-tabs { margin-top: 5rem; } .tab-buttons { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-bottom: 3rem; } .tab-btn { padding: 1rem 2rem; background-color: var(--white); border: none; border-radius: 30px; font-size: 1.4rem; font-weight: 600; color: var(--text-light); cursor: pointer; transition: var(--transition); } .tab-btn.active, .tab-btn:hover { background-color: var(--primary-color); color: var(--white); } .tab-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 3rem; } .case-card { background-color: var(--white); border-radius: var(--border-radius); overflow: hidden; box-shadow: var(--box-shadow); transition: var(--transition); } .case-card:hover { transform: translateY(-10px); box-shadow: var(--box-shadow-dark); } .case-image { height: 250px; overflow: hidden; } .case-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .case-card:hover .case-image img { transform: scale(1.05); } .case-details { padding: 2rem; } .case-category { display: inline-block; padding: 0.5rem 1.5rem; font-size: 1.2rem; font-weight: 600; border-radius: 30px; margin-bottom: 1rem; } .case-category.criminal { background-color: rgba(230, 57, 70, 0.1); color: var(--secondary-color); } .case-category.civil { background-color: rgba(69, 123, 157, 0.1); color: var(--accent-color); } .case-category.corporate { background-color: rgba(29, 53, 87, 0.1); color: var(--dark-color); } .case-category.family { background-color: rgba(241, 250, 238, 0.5); color: #2a9d8f; } .case-details h3 { font-size: 2rem; margin-bottom: 1rem; } .case-details p { font-size: 1.4rem; color: var(--text-light); margin-bottom: 2rem; } .case-result { display: flex; align-items: center; gap: 1rem; font-size: 1.4rem; margin-bottom: 2rem; } .case-result span { color: var(--text-light); } .case-result strong { color: var(--primary-color); font-weight: 700; } .btn-case { display: inline-block; padding: 0.8rem 2rem; background-color: transparent; color: var(--primary-color); border: 1px solid var(--primary-color); border-radius: 30px; font-size: 1.4rem; font-weight: 600; transition: var(--transition); } .btn-case:hover { background-color: var(--primary-color); color: var(--white); } /* Testimonials Section */ .testimonials { padding: 8rem 0; background-color: var(--white); } .testimonial-slider { margin-top: 5rem; } .testimonialSwiper { padding: 3rem; } .testimonial-card { background-color: var(--white); border-radius: var(--border-radius); padding: 3rem; box-shadow: var(--box-shadow); transition: var(--transition); height: 100%; } .testimonial-content { position: relative; margin-bottom: 2rem; } .quote-icon { font-size: 4rem; color: rgba(26, 62, 114, 0.1); margin-bottom: 1rem; } .testimonial-content p { font-size: 1.6rem; font-style: italic; color: var(--text-color); margin-bottom: 1.5rem; } .rating { color: #f1c40f; font-size: 1.4rem; } .testimonial-author { display: flex; align-items: center; gap: 1.5rem; } .testimonial-author img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; } .testimonial-author h4 { font-size: 1.6rem; margin-bottom: 0.3rem; } .testimonial-author span { font-size: 1.2rem; color: var(--text-light); } /* CTA Section */ .cta { padding: 6rem 0; background: linear-gradient(135deg, var(--primary-color) 0%, var(--dark-color) 100%); color: var(--white); } .cta .container { display: flex; align-items: center; justify-content: space-between; gap: 3rem; } .cta-content h2 { font-size: 3rem; margin-bottom: 1.5rem; } .cta-content p { font-size: 1.6rem; opacity: 0.8; } .cta-buttons { display: flex; gap: 2rem; } /* Blog Section */ .blog { padding: 8rem 0; background-color: var(--light-color); } .blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 3rem; margin-top: 5rem; } .blog-card { background-color: var(--white); border-radius: var(--border-radius); overflow: hidden; box-shadow: var(--box-shadow); transition: var(--transition); } .blog-card:hover { transform: translateY(-10px); box-shadow: var(--box-shadow-dark); } .blog-image { height: 200px; position: relative; overflow: hidden; } .blog-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .blog-card:hover .blog-image img { transform: scale(1.05); } .blog-category { position: absolute; top: 1rem; right: 1rem; background-color: var(--secondary-color); color: var(--white); padding: 0.5rem 1.5rem; font-size: 1.2rem; font-weight: 600; border-radius: 30px; } .blog-details { padding: 2rem; } .blog-meta { display: flex; gap: 1.5rem; margin-bottom: 1rem; font-size: 1.2rem; color: var(--text-light); } .blog-meta span { display: flex; align-items: center; gap: 0.5rem; } .blog-details h3 { font-size: 1.8rem; margin-bottom: 1rem; } .blog-details p { font-size: 1.4rem; color: var(--text-light); margin-bottom: 2rem; } .btn-blog { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 1.4rem; font-weight: 600; color: var(--primary-color); transition: var(--transition); } .btn-blog:hover { color: var(--secondary-color); } /* Contact Section */ .contact { padding: 8rem 0; background-color: var(--white); } .contact .container { display: flex; gap: 5rem; } .contact-content { flex: 1; } .contact-info { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-top: 3rem; } .info-item { display: flex; gap: 2rem; align-items: flex-start; } .info-icon { width: 50px; height: 50px; background-color: rgba(26, 62, 114, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; color: var(--primary-color); flex-shrink: 0; } .info-content h3 { font-size: 1.8rem; margin-bottom: 0.5rem; } .info-content p { font-size: 1.4rem; color: var(--text-light); } .contact-form { flex: 1; background-color: var(--light-color); 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.2rem 2rem; border: 1px solid #ddd; border-radius: var(--border-radius); font-size: 1.4rem; transition: var(--transition); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(26, 62, 114, 0.1); } .form-group textarea { resize: vertical; } /* Footer */ .footer { padding: 8rem 0 0; background-color: var(--dark-color); color: var(--white); } .footer-top { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 4rem; margin-bottom: 5rem; } .footer-about .logo { color: var(--white); margin-bottom: 2rem; display: block; } .footer-about p { font-size: 1.4rem; color: rgba(255, 255, 255, 0.7); margin-bottom: 2rem; } .footer-social { display: flex; gap: 1.5rem; } .footer-social a { width: 40px; height: 40px; background-color: rgba(255, 255, 255, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; color: var(--white); transition: var(--transition); } .footer-social a:hover { background-color: var(--secondary-color); transform: translateY(-3px); } .footer-links h3, .footer-services h3, .footer-newsletter h3 { font-size: 1.8rem; margin-bottom: 2rem; position: relative; } .footer-links h3::after, .footer-services h3::after, .footer-newsletter h3::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 40px; height: 2px; background-color: var(--secondary-color); } .footer-links ul li, .footer-services ul li { margin-bottom: 1rem; } .footer-links ul li a, .footer-services ul li a { font-size: 1.4rem; color: rgba(255, 255, 255, 0.7); transition: var(--transition); } .footer-links ul li a:hover, .footer-services ul li a:hover { color: var(--secondary-color); padding-left: 5px; } .footer-newsletter p { font-size: 1.4rem; color: rgba(255, 255, 255, 0.7); margin-bottom: 2rem; } .footer-newsletter form { display: flex; } .footer-newsletter input { flex: 1; padding: 1rem 1.5rem; border: none; border-radius: 30px 0 0 30px; font-size: 1.4rem; } .footer-newsletter button { width: 50px; background-color: var(--secondary-color); color: var(--white); border: none; border-radius: 0 30px 30px 0; cursor: pointer; transition: var(--transition); } .footer-newsletter button:hover { background-color: var(--primary-color); } .footer-bottom { padding: 2rem 0; border-top: 1px solid rgba(255, 255, 255, 0.1); display: flex; justify-content: space-between; align-items: center; } .footer-bottom p { font-size: 1.4rem; color: rgba(255, 255, 255, 0.5); } .footer-legal { display: flex; gap: 2rem; } .footer-legal a { font-size: 1.2rem; color: rgba(255, 255, 255, 0.5); transition: var(--transition); } .footer-legal a:hover { color: var(--secondary-color); } /* Responsive Styles */ @media (max-width: 1200px) { .hero-title { font-size: 4.8rem; } } @media (max-width: 992px) { .hero .container, .about .container, .contact .container { flex-direction: column; } .hero-content, .about-content, .contact-content { max-width: 100%; margin-bottom: 5rem; text-align: center; } .hero-title, .hero-subtitle { text-align: center; } .hero-buttons, .about-features { justify-content: center; } .hero-stats { justify-content: center; } .image-badge { right: 20px; } .cta .container { flex-direction: column; text-align: center; } .cta-buttons { justify-content: center; } } @media (max-width: 768px) { .nav-links { position: fixed; top: 0; right: -100%; width: 80%; max-width: 300px; height: 100vh; background-color: var(--white); flex-direction: column; align-items: center; justify-content: center; gap: 3rem; transition: var(--transition); box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1); z-index: 1000; } .nav-links.active { right: 0; } .hamburger { display: flex; } .phone { display: none; } .section-title { font-size: 3rem; } .hero-title { font-size: 4rem; } .tab-buttons { flex-wrap: wrap; } } @media (max-width: 576px) { .hero-title { font-size: 3.2rem; } .hero-buttons, .cta-buttons { flex-direction: column; gap: 1.5rem; } .btn { width: 100%; } .hero-stats { flex-direction: column; gap: 2rem; } .footer-bottom { flex-direction: column; gap: 1.5rem; text-align: center; } .footer-legal { flex-wrap: wrap; justify-content: center; } }
JavaScript
document.addEventListener('DOMContentLoaded', function() { // Preloader const preloader = document.querySelector('.preloader'); window.addEventListener('load', function() { setTimeout(function() { preloader.style.opacity = '0'; setTimeout(function() { preloader.style.display = 'none'; }, 500); }, 1000); }); // Mobile Navigation const hamburger = document.querySelector('.hamburger'); const navLinks = document.querySelector('.nav-links'); hamburger.addEventListener('click', function() { this.classList.toggle('active'); navLinks.classList.toggle('active'); }); // Close mobile menu when clicking on a link document.querySelectorAll('.nav-links a').forEach(link => { link.addEventListener('click', () => { hamburger.classList.remove('active'); navLinks.classList.remove('active'); }); }); // Initialize Swipers const teamSwiper = new Swiper('.teamSwiper', { slidesPerView: 1, spaceBetween: 20, pagination: { el: '.swiper-pagination', clickable: true, }, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, breakpoints: { 768: { slidesPerView: 2, }, 992: { slidesPerView: 3, } } }); const testimonialSwiper = new Swiper('.testimonialSwiper', { slidesPerView: 1, spaceBetween: 30, pagination: { el: '.swiper-pagination', clickable: true, }, }); // Case Studies Filter const tabBtns = document.querySelectorAll('.tab-btn'); const caseCards = document.querySelectorAll('.case-card'); tabBtns.forEach(btn => { btn.addEventListener('click', function() { // Remove active class from all buttons tabBtns.forEach(btn => btn.classList.remove('active')); // Add active class to clicked button this.classList.add('active'); const filter = this.dataset.tab; caseCards.forEach(card => { if (filter === 'all' || card.dataset.category === filter) { card.style.display = 'block'; } else { card.style.display = 'none'; } }); }); }); // GSAP Animations gsap.registerPlugin(ScrollTrigger); // Hero section animation gsap.from('.hero-title, .hero-subtitle', { duration: 1, y: 50, opacity: 0, stagger: 0.3, ease: 'power3.out' }); gsap.from('.hero-buttons', { duration: 1, y: 50, opacity: 0, delay: 0.6, ease: 'power3.out' }); gsap.from('.hero-image', { duration: 1, x: 100, opacity: 0, delay: 0.3, ease: 'power3.out' }); gsap.from('.hero-stats', { duration: 1, y: 50, opacity: 0, delay: 0.9, ease: 'power3.out' }); // Section animations gsap.utils.toArray('section').forEach(section => { const sectionId = section.getAttribute('id'); if (sectionId) { gsap.from(`#${sectionId} .section-tag, #${sectionId} .section-title, #${sectionId} .section-subtitle`, { scrollTrigger: { trigger: section, start: 'top 80%', }, y: 50, opacity: 0, duration: 0.8, stagger: 0.2, ease: 'power3.out' }); } }); // About section animation gsap.from('.about-image', { scrollTrigger: { trigger: '.about', start: 'top 70%', }, x: -100, opacity: 0, duration: 0.8, ease: 'power3.out' }); gsap.from('.about-content', { scrollTrigger: { trigger: '.about', start: 'top 70%', }, x: 100, opacity: 0, duration: 0.8, ease: 'power3.out' }); // Services animation gsap.from('.service-card', { scrollTrigger: { trigger: '.services', start: 'top 70%', }, y: 100, opacity: 0, duration: 0.8, stagger: 0.1, ease: 'power3.out' }); // Team animation gsap.from('.teamSwiper', { scrollTrigger: { trigger: '.team', start: 'top 70%', }, y: 100, opacity: 0, duration: 0.8, ease: 'power3.out' }); // Case Studies animation gsap.from('.case-tabs', { scrollTrigger: { trigger: '.case-studies', start: 'top 70%', }, y: 100, opacity: 0, duration: 0.8, ease: 'power3.out' }); // Testimonials animation gsap.from('.testimonial-slider', { scrollTrigger: { trigger: '.testimonials', start: 'top 70%', }, y: 100, opacity: 0, duration: 0.8, ease: 'power3.out' }); // CTA animation gsap.from('.cta-content', { scrollTrigger: { trigger: '.cta', start: 'top 70%', }, x: -100, opacity: 0, duration: 0.8, ease: 'power3.out' }); gsap.from('.cta-buttons', { scrollTrigger: { trigger: '.cta', start: 'top 70%', }, x: 100, opacity: 0, duration: 0.8, ease: 'power3.out' }); // Blog animation gsap.from('.blog-card', { scrollTrigger: { trigger: '.blog', start: 'top 70%', }, y: 100, opacity: 0, duration: 0.8, stagger: 0.2, ease: 'power3.out' }); // Contact animation gsap.from('.contact-content', { scrollTrigger: { trigger: '.contact', start: 'top 70%', }, x: -100, opacity: 0, duration: 0.8, ease: 'power3.out' }); gsap.from('.contact-form', { scrollTrigger: { trigger: '.contact', start: 'top 70%', }, x: 100, opacity: 0, duration: 0.8, ease: 'power3.out' }); // 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' }); } }); }); });
Output Preview
Desktop
Mobile
Fullscreen