<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 5 Navbar with Offcanvas</title>
<!-- Google Roboto Font -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
<!-- Bootstrap 5 CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css" rel="stylesheet">
<!-- Ionicons -->
<script type="module" src="https://cdnjs.cloudflare.com/ajax/libs/ionicons/7.1.0/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://cdnjs.cloudflare.com/ajax/libs/ionicons/7.1.0/ionicons/ionicons.js"></script>
<style>
body {
font-family: 'Roboto', sans-serif;
margin: 0;
padding: 0;
}
.navbar {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
box-shadow: 0 2px 15px rgba(0,0,0,0.1);
padding: 1rem 0;
}
.navbar-brand {
font-weight: 700;
font-size: 1.5rem;
color: white !important;
transition: transform 0.3s;
}
.navbar-brand:hover {
transform: scale(1.05);
}
.navbar-brand ion-icon {
font-size: 32px;
vertical-align: middle;
margin-right: 8px;
}
.nav-link {
color: rgba(255,255,255,0.9) !important;
font-weight: 500;
padding: 0.5rem 1rem !important;
margin: 0 0.2rem;
border-radius: 8px;
transition: all 0.3s;
display: flex;
align-items: center;
}
.nav-link:hover {
background: rgba(255,255,255,0.2);
color: white !important;
transform: translateY(-2px);
}
.nav-link.active {
background: rgba(255,255,255,0.25);
color: white !important;
}
.nav-link ion-icon {
font-size: 20px;
margin-right: 6px;
}
.navbar-toggler {
border: 2px solid white;
padding: 0.5rem 0.75rem;
}
.navbar-toggler:focus {
box-shadow: 0 0 0 0.25rem rgba(255,255,255,0.3);
}
.navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.btn-outline-light {
border: 2px solid white;
color: white;
font-weight: 500;
padding: 0.5rem 1.5rem;
transition: all 0.3s;
}
.btn-outline-light:hover {
background: white;
color: #667eea;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.btn-light {
background: white;
color: #667eea;
font-weight: 500;
border: none;
padding: 0.5rem 1.5rem;
transition: all 0.3s;
}
.btn-light:hover {
background: #f8f9fa;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.offcanvas {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.offcanvas-header {
border-bottom: 1px solid rgba(255,255,255,0.2);
}
.offcanvas-title {
color: white;
font-weight: 700;
}
.btn-close {
filter: brightness(0) invert(1);
opacity: 0.8;
}
.offcanvas .nav-link {
margin: 0.3rem 0;
}
.offcanvas .navbar-nav {
width: 100%;
}
.hero-section {
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
padding: 100px 0;
text-align: center;
}
.hero-section h1 {
font-size: 3rem;
font-weight: 700;
color: #333;
margin-bottom: 1rem;
}
.hero-section p {
font-size: 1.2rem;
color: #666;
max-width: 600px;
margin: 0 auto;
}
.content-section {
padding: 80px 0;
}
.feature-card {
background: white;
border-radius: 15px;
padding: 2rem;
box-shadow: 0 5px 20px rgba(0,0,0,0.1);
transition: transform 0.3s;
height: 100%;
}
.feature-card:hover {
transform: translateY(-10px);
}
.feature-card ion-icon {
font-size: 48px;
color: #667eea;
margin-bottom: 1rem;
}
.feature-card h3 {
color: #333;
margin-bottom: 1rem;
}
.feature-card p {
color: #666;
}
@media (max-width: 991.98px) {
.hero-section h1 {
font-size: 2rem;
}
.hero-section p {
font-size: 1rem;
}
}
</style>
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg sticky-top">
<div class="container">
<a class="navbar-brand" href="#">
<ion-icon name="rocket-outline"></ion-icon>
BrandName
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasNavbarLabel">
<ion-icon name="rocket-outline" style="font-size: 28px; vertical-align: middle;"></ion-icon>
Menu
</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<ul class="navbar-nav justify-content-center flex-grow-1 pe-3">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#home">
<ion-icon name="home-outline"></ion-icon>
Home
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#features">
<ion-icon name="star-outline"></ion-icon>
Features
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#services">
<ion-icon name="briefcase-outline"></ion-icon>
Services
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">
<ion-icon name="information-circle-outline"></ion-icon>
About
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">
<ion-icon name="mail-outline"></ion-icon>
Contact
</a>
</li>
</ul>
<div class="d-flex gap-2 mt-3 mt-lg-0">
<button class="btn btn-outline-light" type="button">
<ion-icon name="log-in-outline" style="font-size: 18px; vertical-align: middle; margin-right: 5px;"></ion-icon>
Login
</button>
<button class="btn btn-light" type="button">
<ion-icon name="person-add-outline" style="font-size: 18px; vertical-align: middle; margin-right: 5px;"></ion-icon>
Sign Up
</button>
</div>
</div>
</div>
</div>
</nav>
<!-- Hero Section -->
<section class="hero-section" id="home">
<div class="container">
<h1>Welcome to Our Platform</h1>
<p>Experience the power of modern web design with Bootstrap 5, beautiful icons, and responsive navigation.</p>
</div>
</section>
<!-- Features Section -->
<section class="content-section" id="features">
<div class="container">
<h2 class="text-center mb-5">Amazing Features</h2>
<div class="row g-4">
<div class="col-md-4">
<div class="feature-card text-center">
<ion-icon name="phone-portrait-outline"></ion-icon>
<h3>Responsive Design</h3>
<p>Fully responsive navbar that adapts to all screen sizes with smooth offcanvas menu.</p>
</div>
</div>
<div class="col-md-4">
<div class="feature-card text-center">
<ion-icon name="color-palette-outline"></ion-icon>
<h3>Beautiful UI</h3>
<p>Modern gradient design with smooth animations and hover effects for better user experience.</p>
</div>
</div>
<div class="col-md-4">
<div class="feature-card text-center">
<ion-icon name="flash-outline"></ion-icon>
<h3>Fast Performance</h3>
<p>Optimized code with Bootstrap 5 and efficient styling for lightning-fast loading times.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Services Section -->
<section class="content-section bg-light" id="services">
<div class="container">
<h2 class="text-center mb-5">Our Services</h2>
<div class="row g-4">
<div class="col-md-3">
<div class="feature-card text-center">
<ion-icon name="code-slash-outline"></ion-icon>
<h3>Development</h3>
<p>Custom web development solutions.</p>
</div>
</div>
<div class="col-md-3">
<div class="feature-card text-center">
<ion-icon name="brush-outline"></ion-icon>
<h3>Design</h3>
<p>Creative UI/UX design services.</p>
</div>
</div>
<div class="col-md-3">
<div class="feature-card text-center">
<ion-icon name="megaphone-outline"></ion-icon>
<h3>Marketing</h3>
<p>Digital marketing strategies.</p>
</div>
</div>
<div class="col-md-3">
<div class="feature-card text-center">
<ion-icon name="analytics-outline"></ion-icon>
<h3>Analytics</h3>
<p>Data-driven insights and reporting.</p>
</div>
</div>
</div>
</div>
</section>
<!-- About Section -->
<section class="content-section" id="about">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6">
<h2 class="mb-4">About Our Platform</h2>
<p class="mb-3">We are dedicated to providing cutting-edge web solutions with modern design principles and best practices.</p>
<p>Our platform combines the power of Bootstrap 5, beautiful Ionicons, and Google Fonts to deliver exceptional user experiences.</p>
</div>
<div class="col-lg-6">
<div class="feature-card">
<ion-icon name="people-outline"></ion-icon>
<h3>Our Team</h3>
<p>A group of passionate developers and designers working together to create amazing web experiences.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section class="content-section bg-light" id="contact">
<div class="container">
<h2 class="text-center mb-5">Get In Touch</h2>
<div class="row justify-content-center">
<div class="col-md-8">
<div class="feature-card">
<div class="text-center mb-4">
<ion-icon name="mail-outline"></ion-icon>
</div>
<p class="text-center">Have questions? We'd love to hear from you. Send us a message and we'll respond as soon as possible.</p>
<div class="text-center mt-4">
<button class="btn" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; padding: 0.75rem 2rem;">
<ion-icon name="send-outline" style="font-size: 18px; vertical-align: middle; margin-right: 5px;"></ion-icon>
Contact Us
</button>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Bootstrap 5 JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/js/bootstrap.bundle.min.js"></script>
<script>
// Smooth scrolling for navigation links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
// Close offcanvas on mobile after clicking link
const offcanvas = bootstrap.Offcanvas.getInstance(document.getElementById('offcanvasNavbar'));
if (offcanvas) {
offcanvas.hide();
}
}
});
});
// Update active nav link on scroll
window.addEventListener('scroll', () => {
let current = '';
const sections = document.querySelectorAll('section[id]');
sections.forEach(section => {
const sectionTop = section.offsetTop;
const sectionHeight = section.clientHeight;
if (scrollY >= (sectionTop - 200)) {
current = section.getAttribute('id');
}
});
document.querySelectorAll('.nav-link').forEach(link => {
link.classList.remove('active');
if (link.getAttribute('href') === `#${current}`) {
link.classList.add('active');
}
});
});
</script>
</body>
</html>
No comments yet. Be the first!