<!-- Top Header -->
<div class="bg-dark text-white py-2 d-none d-lg-block">
<div class="container d-flex justify-content-between align-items-center">
<div class="small">
<i class="bi bi-envelope-at me-2"></i> info@modernagency.com
<span class="mx-3">|</span>
<i class="bi bi-telephone me-2"></i> +1 (555) 000-1234
</div>
<div class="d-flex align-items-center">
<div id="currentDateTime" class="small me-4 border-end pe-3 border-secondary"></div>
<div class="social-links">
<a href="#" class="text-white ms-3 text-decoration-none"><i class="bi bi-facebook"></i></a>
<a href="#" class="text-white ms-3 text-decoration-none"><i class="bi bi-twitter-x"></i></a>
<a href="#" class="text-white ms-3 text-decoration-none"><i class="bi bi-linkedin"></i></a>
<a href="#" class="btn btn-sm btn-outline-light ms-4">Login</a>
</div>
</div>
</div>
</div>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light bg-white sticky-top shadow-sm py-3">
<div class="container">
<a class="navbar-brand fw-bold fs-3 text-primary" href="#">
<i class="bi bi-lightning-charge-fill"></i> AGENCY
</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 fw-medium">
<li class="nav-item"><a class="nav-link active" href="#">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="#news">News</a></li>
<li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
<li class="nav-item ms-lg-3"><a class="btn btn-primary px-4 rounded-pill" href="#">Get a Quote</a></li>
</ul>
</div>
</div>
</nav>
<!-- Hero Carousel -->
<header id="heroHeader">
<div id="heroCarousel" class="carousel slide carousel-fade" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="0" class="active"></button>
<button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="1"></button>
<button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="2"></button>
</div>
<div class="carousel-inner text-white">
<div class="carousel-item active vh-100" style="background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&q=80&w=1920'); background-size: cover; background-position: center;">
<div class="carousel-caption h-100 d-flex flex-column justify-content-center align-items-center animate-up">
<h1 class="display-1 fw-bold mb-4">Innovate Your Future</h1>
<p class="lead mb-5 col-lg-8 mx-auto">Discover modern solutions for your business growth with our expert consulting services.</p>
<div class="d-flex gap-3">
<a href="#" class="btn btn-primary btn-lg px-5">Get Started</a>
<a href="#" class="btn btn-outline-light btn-lg px-5">Learn More</a>
</div>
</div>
</div>
<div class="carousel-item vh-100" style="background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('https://images.unsplash.com/photo-1522202176988-66273c2fd55f?auto=format&fit=crop&q=80&w=1920'); background-size: cover; background-position: center;">
<div class="carousel-caption h-100 d-flex flex-column justify-content-center align-items-center">
<h1 class="display-1 fw-bold mb-4">Digital Excellence</h1>
<p class="lead mb-5 col-lg-8 mx-auto">We provide top-tier web and design solutions tailored for your unique brand identity.</p>
<a href="#" class="btn btn-primary btn-lg px-5">Our Portfolio</a>
</div>
</div>
<div class="carousel-item vh-100" style="background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('https://images.unsplash.com/photo-1556761175-b413da4baf72?auto=format&fit=crop&q=80&w=1920'); background-size: cover; background-position: center;">
<div class="carousel-caption h-100 d-flex flex-column justify-content-center align-items-center">
<h1 class="display-1 fw-bold mb-4">Strategic Success</h1>
<p class="lead mb-5 col-lg-8 mx-auto">Join over 1,000+ businesses who trusted us to scale their digital operations.</p>
<a href="#" class="btn btn-primary btn-lg px-5">Contact Us</a>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#heroCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon p-3 bg-dark rounded-circle"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#heroCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon p-3 bg-dark rounded-circle"></span>
</button>
</div>
</header>
<!-- Welcome Section -->
<section id="about" class="py-5 scroll-reveal">
<div class="container py-5">
<div class="row align-items-center g-5">
<div class="col-lg-6">
<img src="https://images.unsplash.com/photo-1542744173-8e7e53415bb0?auto=format&fit=crop&q=80&w=800" class="img-fluid rounded-4 shadow-lg" alt="About">
</div>
<div class="col-lg-6">
<h6 class="text-primary fw-bold text-uppercase mb-3">Welcome to Agency</h6>
<h2 class="display-5 fw-bold mb-4">We are Creative Creators & Digital Solution Providers</h2>
<p class="text-muted mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Our approach combines data-driven insights with creative excellence.</p>
<div class="row g-4 mb-5">
<div class="col-sm-6">
<div class="d-flex align-items-center">
<i class="bi bi-check-circle-fill text-primary fs-4"></i>
<span class="ms-3 fw-bold">Quality Service</span>
</div>
</div>
<div class="col-sm-6">
<div class="d-flex align-items-center">
<i class="bi bi-check-circle-fill text-primary fs-4"></i>
<span class="ms-3 fw-bold">Expert Support</span>
</div>
</div>
</div>
<a href="#" class="btn btn-primary px-4 py-2">Read More About Us</a>
</div>
</div>
</div>
</section>
<!-- Stats Counter -->
<section class="bg-primary py-5 text-white">
<div class="container">
<div class="row text-center g-4">
<div class="col-md-3 col-6">
<div class="counter-item">
<h2 class="counter-value display-4 fw-bold" data-target="1500">0</h2>
<p class="mb-0">Projects Done</p>
</div>
</div>
<div class="col-md-3 col-6">
<div class="counter-item">
<h2 class="counter-value display-4 fw-bold" data-target="250">0</h2>
<p class="mb-0">Satisfied Clients</p>
</div>
</div>
<div class="col-md-3 col-6">
<div class="counter-item">
<h2 class="counter-value display-4 fw-bold" data-target="50">0</h2>
<p class="mb-0">Awards Won</p>
</div>
</div>
<div class="col-md-3 col-6">
<div class="counter-item">
<h2 class="counter-value display-4 fw-bold" data-target="15">0</h2>
<p class="mb-0">Years Experience</p>
</div>
</div>
</div>
</div>
</section>
<!-- Featured Services -->
<section id="services" class="py-5 bg-light scroll-reveal">
<div class="container py-5">
<div class="text-center mb-5">
<h6 class="text-primary fw-bold text-uppercase">Our Services</h6>
<h2 class="display-5 fw-bold">What We Offer</h2>
</div>
<div class="row g-4">
<div class="col-lg-4">
<div class="card h-100 border-0 shadow-sm p-4 hover-lift">
<div class="icon-box mb-4 fs-1 text-primary"><i class="bi bi-code-slash"></i></div>
<h4 class="fw-bold mb-3">Web Development</h4>
<p class="text-muted">High-performance custom websites built with the latest modern techniques.</p>
<a href="#" class="stretched-link text-decoration-none fw-bold">Read More <i class="bi bi-arrow-right"></i></a>
</div>
</div>
<div class="col-lg-4">
<div class="card h-100 border-0 shadow-sm p-4 hover-lift">
<div class="icon-box mb-4 fs-1 text-primary"><i class="bi bi-palette"></i></div>
<h4 class="fw-bold mb-3">UI/UX Design</h4>
<p class="text-muted">User-centric designs that provide intuitive experiences for your customers.</p>
<a href="#" class="stretched-link text-decoration-none fw-bold">Read More <i class="bi bi-arrow-right"></i></a>
</div>
</div>
<div class="col-lg-4">
<div class="card h-100 border-0 shadow-sm p-4 hover-lift">
<div class="icon-box mb-4 fs-1 text-primary"><i class="bi bi-graph-up-arrow"></i></div>
<h4 class="fw-bold mb-3">Digital Marketing</h4>
<p class="text-muted">Comprehensive marketing strategies to help you reach more audience.</p>
<a href="#" class="stretched-link text-decoration-none fw-bold">Read More <i class="bi bi-arrow-right"></i></a>
</div>
</div>
</div>
</div>
</section>
<!-- Why Choose Us -->
<section class="py-5 bg-dark text-white scroll-reveal">
<div class="container py-4">
<div class="row align-items-center g-5">
<div class="col-lg-6">
<h2 class="display-5 fw-bold mb-4">Why Choose Our Expertise?</h2>
<div class="d-flex mb-4">
<div class="flex-shrink-0"><i class="bi bi-shield-check fs-2 text-primary"></i></div>
<div class="ms-3">
<h5 class="fw-bold">Secured & Trustworthy</h5>
<p class="text-secondary">We prioritize safety and integrity in every project we handle.</p>
</div>
</div>
<div class="d-flex mb-4">
<div class="flex-shrink-0"><i class="bi bi-lightning fs-2 text-primary"></i></div>
<div class="ms-3">
<h5 class="fw-bold">Fast Performance</h5>
<p class="text-secondary">Optimized execution flows that guarantee speed and reliability.</p>
</div>
</div>
<div class="d-flex">
<div class="flex-shrink-0"><i class="bi bi-headset fs-2 text-primary"></i></div>
<div class="ms-3">
<h5 class="fw-bold">24/7 Support</h5>
<p class="text-secondary">Our dedicated team is always ready to assist you any time.</p>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="position-relative">
<img src="https://images.unsplash.com/photo-1600880212319-78d7e59b0f2a?auto=format&fit=crop&q=80&w=800" class="img-fluid rounded-4 shadow" alt="Feature">
<div class="position-absolute bottom-0 start-0 bg-primary p-4 rounded m-4 shadow-lg">
<h3 class="mb-0 fw-bold">100%</h3>
<p class="mb-0 small">Client Satisfaction</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Latest News -->
<section id="news" class="py-5 scroll-reveal">
<div class="container py-5">
<div class="text-center mb-5">
<h6 class="text-primary fw-bold text-uppercase">Blog & News</h6>
<h2 class="display-5 fw-bold">Latest Industry Trends</h2>
</div>
<div class="row g-4">
<div class="col-md-4">
<div class="card border-0 shadow-sm overflow-hidden h-100">
<img src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&q=80&w=600" class="card-img-top" alt="News">
<div class="card-body p-4">
<div class="small text-primary mb-2">October 24, 2023</div>
<h5 class="card-title fw-bold">SEO Strategies for 2024</h5>
<p class="card-text text-muted">Keep up with the latest Google algorithm updates.</p>
<a href="#" class="btn btn-link p-0 text-decoration-none fw-bold">Read Blog</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card border-0 shadow-sm overflow-hidden h-100">
<img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?auto=format&fit=crop&q=80&w=600" class="card-img-top" alt="News">
<div class="card-body p-4">
<div class="small text-primary mb-2">October 21, 2023</div>
<h5 class="card-title fw-bold">Mastering Data Analytics</h5>
<p class="card-text text-muted">Utility of big data in small business operations.</p>
<a href="#" class="btn btn-link p-0 text-decoration-none fw-bold">Read Blog</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card border-0 shadow-sm overflow-hidden h-100">
<div class="position-relative">
<img src="https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?auto=format&fit=crop&q=80&w=600" class="card-img-top" alt="News">
<span class="badge bg-danger position-absolute mt-2 me-2 top-0 end-0">Trending</span>
</div>
<div class="card-body p-4">
<div class="small text-primary mb-2">October 18, 2023</div>
<h5 class="card-title fw-bold">UI Trends in E-commerce</h5>
<p class="card-text text-muted">Designing for higher conversion in online stores.</p>
<a href="#" class="btn btn-link p-0 text-decoration-none fw-bold">Read Blog</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Partners Container (Simplified Slider Style) -->
<section class="py-5 bg-white border-top border-bottom">
<div class="container overflow-hidden">
<div class="row align-items-center text-center row-cols-2 row-cols-md-4 row-cols-lg-6 g-4 partner-slider">
<div class="col"><img src="https://img.icons8.com/color/144/google-logo.png" class="img-fluid opacity-50 grayscale" style="max-height: 40px;" alt="Logo"></div>
<div class="col"><img src="https://img.icons8.com/color/144/amazon.png" class="img-fluid opacity-50 grayscale" style="max-height: 40px;" alt="Logo"></div>
<div class="col"><img src="https://img.icons8.com/color/144/slack.png" class="img-fluid opacity-50 grayscale" style="max-height: 40px;" alt="Logo"></div>
<div class="col"><img src="https://img.icons8.com/color/144/intel.png" class="img-fluid opacity-50 grayscale" style="max-height: 40px;" alt="Logo"></div>
<div class="col"><img src="https://img.icons8.com/color/144/spotify.png" class="img-fluid opacity-50 grayscale" style="max-height: 40px;" alt="Logo"></div>
<div class="col"><img src="https://img.icons8.com/color/144/netflix.png" class="img-fluid opacity-50 grayscale" style="max-height: 40px;" alt="Logo"></div>
</div>
</div>
</section>
<!-- Newsletter -->
<section class="py-5">
<div class="container">
<div class="bg-primary rounded-4 p-5 text-white text-center position-relative overflow-hidden">
<div class="row justify-content-center position-relative z-1">
<div class="col-lg-7">
<h2 class="fw-bold mb-3">Newsletter Subscription</h2>
<p class="mb-4">Get the latest news and special offers directly in your inbox.</p>
<form class="row g-2">
<div class="col-md-9">
<input type="email" class="form-control form-control-lg rounded-pill" placeholder="Enter your email address">
</div>
<div class="col-md-3 d-grid">
<button class="btn btn-dark btn-lg rounded-pill">Subscribe</button>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-dark text-white pt-5 mt-5">
<div class="container py-5 border-bottom border-secondary">
<div class="row g-4">
<div class="col-lg-4">
<h4 class="fw-bold mb-4 text-primary">AGENCY</h4>
<p class="text-secondary pe-lg-5">Building digital products that people love. We are a full-service agency specializing in design and development.</p>
<div class="d-flex pt-3">
<a href="#" class="btn btn-outline-light btn-sm rounded-circle me-2"><i class="bi bi-facebook"></i></a>
<a href="#" class="btn btn-outline-light btn-sm rounded-circle me-2"><i class="bi bi-linkedin"></i></a>
<a href="#" class="btn btn-outline-light btn-sm rounded-circle me-2"><i class="bi bi-instagram"></i></a>
</div>
</div>
<div class="col-lg-2 col-md-4">
<h5 class="fw-bold mb-4">Quick Links</h5>
<ul class="list-unstyled text-secondary">
<li class="mb-2"><a href="#" class="text-decoration-none text-secondary">About Us</a></li>
<li class="mb-2"><a href="#" class="text-decoration-none text-secondary">Services</a></li>
<li class="mb-2"><a href="#" class="text-decoration-none text-secondary">Portfolio</a></li>
<li class="mb-2"><a href="#" class="text-decoration-none text-secondary">Careers</a></li>
</ul>
</div>
<div class="col-lg-2 col-md-4">
<h5 class="fw-bold mb-4">Support</h5>
<ul class="list-unstyled text-secondary">
<li class="mb-2"><a href="#" class="text-decoration-none text-secondary">Help Center</a></li>
<li class="mb-2"><a href="#" class="text-decoration-none text-secondary">Privacy Policy</a></li>
<li class="mb-2"><a href="#" class="text-decoration-none text-secondary">Terms of Service</a></li>
<li class="mb-2"><a href="#" class="text-decoration-none text-secondary">Contact FAQ</a></li>
</ul>
</div>
<div class="col-lg-4 col-md-4">
<h5 class="fw-bold mb-4">Contact Info</h5>
<p class="text-secondary mb-2"><i class="bi bi-geo-alt me-3 text-primary"></i> 123 Business Avenue, London, NY</p>
<p class="text-secondary mb-2"><i class="bi bi-telephone me-3 text-primary"></i> +1 234 567 890</p>
<p class="text-secondary mb-2"><i class="bi bi-envelope me-3 text-primary"></i> support@agency.com</p>
</div>
</div>
</div>
<div class="container py-4 text-center text-secondary small">
<p class="mb-0">© 2023 Creative Agency. All rights reserved.</p>
</div>
</footer>
<style>
:root {
--bs-primary: #0d6efd;
}
.carousel-item {
transition: transform 1.2s ease-in-out, opacity 1s ease-in-out;
}
.hover-lift {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hover-lift:hover {
transform: translateY(-10px);
box-shadow: 0 1rem 3rem rgba(0, 0, 0, .175) !important;
}
.grayscale {
filter: grayscale(100%);
transition: 0.3s;
}
.grayscale:hover {
filter: grayscale(0%);
}
.scroll-reveal {
opacity: 0;
transform: translateY(30px);
transition: all 0.8s ease-out;
}
.scroll-reveal.visible {
opacity: 1;
transform: translateY(0);
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate-up {
animation: fadeIn 1s ease-out;
}
</style>
<script>
// Count Animation
function animateCounter(el) {
const target = +el.getAttribute('data-target');
const count = +el.innerText;
const speed = target / 100;
if (count < target) {
el.innerText = Math.ceil(count + speed);
setTimeout(() => animateCounter(el), 30);
} else {
el.innerText = target + '+';
}
}
// Intersection Observer for Animations
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
if (entry.target.classList.contains('counter-value')) {
animateCounter(entry.target);
}
}
});
}, {
threshold: 0.5
});
document.querySelectorAll('.scroll-reveal, .counter-value').forEach(el => observer.observe(el));
// Current Date & Time
function updateDateTime() {
const now = new Date();
const options = {
weekday: 'short',
year: 'numeric',
month: 'short',
day: 'numeric',
hour: '2-digit',
minute: '2-digit'
};
document.getElementById('currentDateTime').innerText = now.toLocaleDateString('en-US', options);
}
setInterval(updateDateTime, 1000);
updateDateTime();
</script>