Supreme Court Advocate
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>Supreme Court Advocate</title> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- Font Awesome --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> <!-- Google Fonts --> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet"> <!-- AOS Animation --> <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> </head> <body> <!-- Navigation --> <nav class="navbar navbar-expand-lg navbar-dark fixed-top"> <div class="container"> <a class="navbar-brand" href="#">JUSTICE<span style="color: #ffd700;">.</span></a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav ms-auto"> <li class="nav-item"><a class="nav-link" href="#home">Home</a></li> <li class="nav-item"><a class="nav-link" href="#about">About</a></li> <li class="nav-item"><a class="nav-link" href="#services">Services</a></li> <li class="nav-item"><a class="nav-link" href="#cases">Cases</a></li> <li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li> </ul> </div> </div> </nav> <!-- Hero Section --> <section id="home" class="hero"> <div class="container"> <div class="row align-items-center"> <div class="col-lg-7" data-aos="fade-right"> <h5 class="text-warning">SUPREME COURT ADVOCATE</h5> <h1 class="display-4 fw-bold mb-4">Justice For Everyone & Protect Your Rights</h1> <p class="lead mb-4">With over 20 years of experience in Supreme Court litigation, I provide expert legal representation for complex cases requiring the highest level of advocacy.</p> <div class="d-flex flex-wrap gap-3"> <a href="#contact" class="btn btn-lg btn-warning px-4 py-3">Free Consultation</a> <a href="#cases" class="btn btn-lg btn-outline-light px-4 py-3">View Cases</a> </div> </div> <div class="col-lg-5 text-center" data-aos="fade-left"> <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="Advocate Profile" class="img-fluid rounded-circle" style="max-width: 350px; border: 5px solid rgba(255,255,255,0.3);"> </div> </div> </div> </section> <!-- About Section --> <section id="about" class="py-5"> <div class="container"> <h2 class="text-center section-title" data-aos="fade-up">About Me</h2> <div class="row align-items-center"> <div class="col-lg-6" data-aos="fade-right"> <img src="https://plus.unsplash.com/premium_photo-1694476607276-41276bc573e5?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8YWR2b2NhdGV8ZW58MHx8MHx8fDA%3D" alt="About Advocate" class="img-fluid about-img"> </div> <div class="col-lg-6" data-aos="fade-left"> <h3 class="mb-4">Professional Supreme Court Advocate</h3> <p>I am a dedicated Supreme Court advocate with over two decades of experience in handling complex legal matters at the highest judicial level. My practice focuses on constitutional law, civil rights, and significant appellate litigation.</p> <div class="row mt-4"> <div class="col-md-6"> <ul class="list-unstyled"> <li class="mb-2"><i class="fas fa-check-circle text-primary me-2"></i> Constitutional Law Expert</li> <li class="mb-2"><i class="fas fa-check-circle text-primary me-2"></i> Civil Rights Protection</li> <li class="mb-2"><i class="fas fa-check-circle text-primary me-2"></i> Appellate Litigation</li> </ul> </div> <div class="col-md-6"> <ul class="list-unstyled"> <li class="mb-2"><i class="fas fa-check-circle text-primary me-2"></i> 20+ Years Experience</li> <li class="mb-2"><i class="fas fa-check-circle text-primary me-2"></i> 500+ Cases Handled</li> <li class="mb-2"><i class="fas fa-check-circle text-primary me-2"></i> 95% Success Rate</li> </ul> </div> </div> <div class="mt-4"> <a href="#contact" class="btn btn-primary px-4 py-2">Contact Me</a> </div> </div> </div> </div> </section> <!-- Services Section --> <section id="services" class="services py-5"> <div class="container"> <h2 class="text-center section-title" data-aos="fade-up">Legal Services</h2> <p class="text-center mb-5" data-aos="fade-up">I provide comprehensive legal services for clients requiring representation in the Supreme Court and other high courts.</p> <div class="row g-4"> <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="100"> <div class="service-card"> <div class="service-icon"> <i class="fas fa-balance-scale"></i> </div> <h4>Constitutional Law</h4> <p>Expert representation in matters of constitutional interpretation, fundamental rights, and governmental powers.</p> </div> </div> <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="200"> <div class="service-card"> <div class="service-icon"> <i class="fas fa-gavel"></i> </div> <h4>Civil Litigation</h4> <p>Comprehensive civil litigation services for complex disputes requiring Supreme Court intervention.</p> </div> </div> <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="300"> <div class="service-card"> <div class="service-icon"> <i class="fas fa-lock"></i> </div> <h4>Criminal Appeals</h4> <p>Strategic defense representation for criminal cases at the appellate level before the Supreme Court.</p> </div> </div> <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="400"> <div class="service-card"> <div class="service-icon"> <i class="fas fa-briefcase"></i> </div> <h4>Corporate Law</h4> <p>Representation for corporate entities in high-stakes commercial disputes and regulatory matters.</p> </div> </div> <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="500"> <div class="service-card"> <div class="service-icon"> <i class="fas fa-users"></i> </div> <h4>Human Rights</h4> <p>Dedicated advocacy for human rights cases and public interest litigation in the Supreme Court.</p> </div> </div> <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="600"> <div class="service-card"> <div class="service-icon"> <i class="fas fa-handshake"></i> </div> <h4>Mediation & Arbitration</h4> <p>Alternative dispute resolution services for complex legal matters outside traditional litigation.</p> </div> </div> </div> </div> </section> <!-- Experience Section --> <section id="experience" class="py-5"> <div class="container"> <h2 class="text-center section-title" data-aos="fade-up">My Experience</h2> <p class="text-center mb-5" data-aos="fade-up">With decades of practice in the highest courts, I bring unparalleled expertise to your legal matters.</p> <div class="row"> <div class="col-lg-6" data-aos="fade-right"> <div class="card border-0 shadow-sm mb-4"> <div class="card-body p-4"> <div class="d-flex justify-content-between mb-3"> <h5 class="text-primary">Senior Advocate</h5> <span class="badge bg-primary">2015 - Present</span> </div> <h6>Supreme Court of the United States</h6> <p>Representing clients in landmark cases before the Supreme Court, focusing on constitutional law and civil rights litigation.</p> </div> </div> <div class="card border-0 shadow-sm mb-4"> <div class="card-body p-4"> <div class="d-flex justify-content-between mb-3"> <h5 class="text-primary">Partner</h5> <span class="badge bg-primary">2005 - 2015</span> </div> <h6>Justice Law Associates</h6> <p>Managed appellate practice group and argued cases before various federal courts of appeals and state supreme courts.</p> </div> </div> </div> <div class="col-lg-6" data-aos="fade-left"> <div class="card border-0 shadow-sm mb-4"> <div class="card-body p-4"> <div class="d-flex justify-content-between mb-3"> <h5 class="text-primary">Associate Attorney</h5> <span class="badge bg-primary">2000 - 2005</span> </div> <h6>Constitutional Defense Fund</h6> <p>Specialized in First Amendment cases and civil liberties litigation at both trial and appellate levels.</p> </div> </div> <div class="card border-0 shadow-sm"> <div class="card-body p-4"> <div class="d-flex justify-content-between mb-3"> <h5 class="text-primary">Law Clerk</h5> <span class="badge bg-primary">1998 - 2000</span> </div> <h6>Hon. Justice Robert Miller</h6> <p>Assisted in legal research, opinion drafting, and case analysis for the Supreme Court Justice.</p> </div> </div> </div> </div> </div> </section> <!-- Cases Section --> <section id="cases" class="py-5 bg-light"> <div class="container"> <h2 class="text-center section-title" data-aos="fade-up">Notable Cases</h2> <p class="text-center mb-5" data-aos="fade-up">Landmark cases that have shaped legal precedent and advanced justice.</p> <div class="row g-4"> <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="100"> <div class="case-card"> <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="Case 1" class="img-fluid"> <div class="p-4"> <h5>First Amendment Rights Case</h5> <p>Successfully defended free speech rights in a landmark Supreme Court decision.</p> <a href="#" class="text-primary text-decoration-none">Read More <i class="fas fa-arrow-right ms-1"></i></a> </div> </div> </div> <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="200"> <div class="case-card"> <img src="https://plus.unsplash.com/premium_photo-1694476607276-41276bc573e5?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8YWR2b2NhdGV8ZW58MHx8MHx8fDA%3D" alt="Case 2" class="img-fluid"> <div class="p-4"> <h5>Civil Rights Victory</h5> <p>Secured a landmark ruling protecting individuals from unlawful search and seizure.</p> <a href="#" class="text-primary text-decoration-none">Read More <i class="fas fa-arrow-right ms-1"></i></a> </div> </div> </div> <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="300"> <div class="case-card"> <img src="https://images.unsplash.com/photo-1600880292203-757bb62b4baf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Case 3" class="img-fluid"> <div class="p-4"> <h5>Corporate Law Precedent</h5> <p>Established new standards for corporate accountability in environmental cases.</p> <a href="#" class="text-primary text-decoration-none">Read More <i class="fas fa-arrow-right ms-1"></i></a> </div> </div> </div> </div> </div> </section> <!-- Testimonials Section --> <section id="testimonials" class="testimonials py-5"> <div class="container"> <h2 class="text-center section-title text-white" data-aos="fade-up">Client Testimonials</h2> <p class="text-center mb-5 text-white" data-aos="fade-up">What my clients say about my legal representation.</p> <div class="row"> <div class="col-lg-8 mx-auto"> <div id="testimonialCarousel" class="carousel slide" data-bs-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <div class="testimonial-card text-center"> <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="Client" class="rounded-circle mb-4" width="100"> <h5 class="mb-3">Robert Johnson</h5> <p class="mb-0">"I was facing a complex constitutional challenge, and his expertise before the Supreme Court was invaluable. His strategic approach and deep knowledge of the law led to a successful outcome for my case."</p> </div> </div> <div class="carousel-item"> <div class="testimonial-card text-center"> <img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Client" class="rounded-circle mb-4" width="100"> <h5 class="mb-3">Sarah Williams</h5> <p class="mb-0">"His representation in our corporate law matter before the Supreme Court was exceptional. He has a remarkable ability to simplify complex legal issues and present them persuasively."</p> </div> </div> <div class="carousel-item"> <div class="testimonial-card text-center"> <img src="https://images.unsplash.com/photo-1552058544-f2b08422138a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Client" class="rounded-circle mb-4" width="100"> <h5 class="mb-3">Michael Thompson</h5> <p class="mb-0">"I needed representation for a civil rights appeal, and his expertise made all the difference. His dedication to justice and meticulous preparation resulted in a landmark decision in our favor."</p> </div> </div> </div> <button class="carousel-control-prev" type="button" data-bs-target="#testimonialCarousel" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button> <button class="carousel-control-next" type="button" data-bs-target="#testimonialCarousel" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> </div> </div> </div> </div> </section> <!-- Blog Section --> <section id="blog" class="py-5"> <div class="container"> <h2 class="text-center section-title" data-aos="fade-up">Legal Insights</h2> <p class="text-center mb-5" data-aos="fade-up">Recent articles and legal analysis from my practice.</p> <div class="row g-4"> <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="100"> <div class="card border-0 shadow-sm h-100"> <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="Blog Post" class="card-img-top"> <div class="card-body"> <span class="text-primary">June 15, 2023</span> <h5 class="mt-2">The Evolution of Constitutional Interpretation</h5> <p>Exploring how Supreme Court jurisprudence has shaped modern constitutional law.</p> <a href="#" class="text-primary text-decoration-none">Read More <i class="fas fa-arrow-right ms-1"></i></a> </div> </div> </div> <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="200"> <div class="card border-0 shadow-sm h-100"> <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="Blog Post" class="card-img-top"> <div class="card-body"> <span class="text-primary">May 22, 2023</span> <h5 class="mt-2">Landmark Civil Rights Cases of the Decade</h5> <p>An analysis of recent Supreme Court decisions that have expanded civil rights protections.</p> <a href="#" class="text-primary text-decoration-none">Read More <i class="fas fa-arrow-right ms-1"></i></a> </div> </div> </div> <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="300"> <div class="card border-0 shadow-sm h-100"> <img src="https://plus.unsplash.com/premium_photo-1694476607276-41276bc573e5?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8YWR2b2NhdGV8ZW58MHx8MHx8fDA%3D" alt="Blog Post" class="card-img-top"> <div class="card-body"> <span class="text-primary">April 10, 2023</span> <h5 class="mt-2">Appellate Strategy for Complex Cases</h5> <p>Key considerations when preparing a case for appeal to the Supreme Court.</p> <a href="#" class="text-primary text-decoration-none">Read More <i class="fas fa-arrow-right ms-1"></i></a> </div> </div> </div> </div> </div> </section> <!-- Contact Section --> <section id="contact" class="py-5 bg-light"> <div class="container"> <h2 class="text-center section-title" data-aos="fade-up">Contact Me</h2> <p class="text-center mb-5" data-aos="fade-up">Reach out for a consultation regarding your Supreme Court matter.</p> <div class="row"> <div class="col-lg-8 mx-auto"> <div class="contact-form" data-aos="fade-up"> <form> <div class="row"> <div class="col-md-6"> <input type="text" class="form-control" placeholder="Your Name" required> </div> <div class="col-md-6"> <input type="email" class="form-control" placeholder="Your Email" required> </div> </div> <input type="text" class="form-control" placeholder="Subject"> <textarea class="form-control" rows="5" placeholder="Your Message" required></textarea> <button type="submit" class="btn btn-primary w-100 py-3">Send Message</button> </form> </div> <div class="row mt-5 text-center"> <div class="col-md-4" data-aos="fade-up" data-aos-delay="100"> <div class="p-3"> <i class="fas fa-map-marker-alt fa-2x text-primary mb-3"></i> <h5>Address</h5> <p>123 Supreme Court Blvd, Washington, DC 20001</p> </div> </div> <div class="col-md-4" data-aos="fade-up" data-aos-delay="200"> <div class="p-3"> <i class="fas fa-phone fa-2x text-primary mb-3"></i> <h5>Phone</h5> <p>(555) 123-4567</p> </div> </div> <div class="col-md-4" data-aos="fade-up" data-aos-delay="300"> <div class="p-3"> <i class="fas fa-envelope fa-2x text-primary mb-3"></i> <h5>Email</h5> <p>contact@advocate.com</p> </div> </div> </div> </div> </div> </div> </section> <!-- Footer --> <footer> <div class="container"> <div class="row"> <div class="col-lg-6 mx-auto text-center"> <h3>JUSTICE<span style="color: #ffd700;">.</span></h3> <p class="my-4">Supreme Court Advocate & Constitutional Law Expert</p> <div class="social-links mb-4"> <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> <p>© 2023 Supreme Court Advocate. All Rights Reserved.</p> </div> </div> </div> </footer> <!-- Back to Top Button --> <a href="#" class="back-to-top"><i class="fas fa-arrow-up"></i></a> <!-- Bootstrap JS --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script> <!-- AOS Animation --> <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> </body> </html>
CSS
:root { --primary-blue: #0d47a1; --secondary-blue: #1976d2; --light-blue: #bbdefb; --dark-blue: #002171; --accent-gold: #ffd700; } body { font-family: 'Poppins', sans-serif; overflow-x: hidden; color: #333; } /* Navigation */ .navbar { background-color: rgba(13, 71, 161, 0.95) !important; padding: 15px 0; transition: all 0.3s ease; } .navbar-brand { font-weight: 700; color: white !important; font-size: 1.8rem; } .nav-link { color: rgba(255, 255, 255, 0.85) !important; font-weight: 500; margin: 0 10px; transition: all 0.3s; } .nav-link:hover { color: var(--accent-gold) !important; } /* Hero Section */ .hero { background: linear-gradient(rgba(13, 71, 161, 0.8), rgba(13, 71, 161, 0.9)), url('https://images.unsplash.com/photo-1589391886645-d51941baf7fb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80'); background-size: cover; background-position: center; background-attachment: fixed; color: white; padding: 150px 0 100px; position: relative; } /* Section Common Styles */ section { padding: 80px 0; } .section-title { position: relative; margin-bottom: 50px; font-weight: 700; } .section-title:after { content: ''; display: block; width: 60px; height: 4px; background: var(--secondary-blue); margin: 15px auto 0; } /* About Section */ .about-img { border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); transition: all 0.5s; } .about-img:hover { transform: translateY(-10px); } /* Services Section */ .services { background-color: #f8f9fa; } .service-card { background: white; padding: 30px; border-radius: 10px; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05); transition: all 0.3s; height: 100%; } .service-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); } .service-icon { font-size: 2.5rem; color: var(--secondary-blue); margin-bottom: 20px; } /* Cases Section */ .case-card { overflow: hidden; border-radius: 10px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); transition: all 0.3s; } .case-card:hover { transform: translateY(-8px); box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15); } /* Testimonials */ .testimonials { background: linear-gradient(rgba(13, 71, 161, 0.9), rgba(13, 71, 161, 0.9)), url('https://images.unsplash.com/photo-1566842600175-97dca3dfc3c7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80'); background-size: cover; background-attachment: fixed; color: white; } .testimonial-card { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border-radius: 15px; padding: 30px; } /* Contact Section */ .contact-form { background: white; padding: 30px; border-radius: 10px; box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1); } .form-control { padding: 15px; border: 1px solid #ddd; border-radius: 5px; margin-bottom: 20px; transition: all 0.3s; } .form-control:focus { border-color: var(--secondary-blue); box-shadow: 0 0 0 0.25rem rgba(25, 118, 210, 0.25); } /* Footer */ footer { background: var(--dark-blue); color: white; padding: 60px 0 30px; } .social-links a { color: white; font-size: 1.5rem; margin: 0 15px; transition: all 0.3s; } .social-links a:hover { color: var(--accent-gold); transform: translateY(-5px); } /* Back to Top Button */ .back-to-top { position: fixed; bottom: 30px; right: 30px; width: 50px; height: 50px; background: var(--secondary-blue); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); transition: all 0.3s; z-index: 1000; opacity: 0; visibility: hidden; } .back-to-top.active { opacity: 1; visibility: visible; } .back-to-top:hover { background: var(--primary-blue); transform: translateY(-5px); } /* Animations */ @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .animate-fadein { animation: fadeIn 1s ease forwards; } /* Responsive Adjustments */ @media (max-width: 768px) { .hero { padding: 100px 0 60px; text-align: center; } section { padding: 60px 0; } .section-title { font-size: 1.8rem; } }
JavaScript
// Initialize AOS AOS.init({ duration: 1000, once: true, offset: 100 }); // Back to top button const backToTopButton = document.querySelector('.back-to-top'); window.addEventListener('scroll', () => { if (window.pageYOffset > 300) { backToTopButton.classList.add('active'); } else { backToTopButton.classList.remove('active'); } }); backToTopButton.addEventListener('click', (e) => { e.preventDefault(); window.scrollTo({ top: 0, behavior: 'smooth' }); }); // Navbar background change on scroll const navbar = document.querySelector('.navbar'); window.addEventListener('scroll', () => { if (window.pageYOffset > 50) { navbar.style.padding = '10px 0'; navbar.style.boxShadow = '0 5px 15px rgba(0, 0, 0, 0.1)'; } else { navbar.style.padding = '15px 0'; navbar.style.boxShadow = 'none'; } });
Output Preview
Desktop
Mobile
Fullscreen