<!--
@type: Header
@industry: Marketing
@style: Dark
@category: Navigation, Page Section
@framework: HTML/CSS
@license: Free
-->
<style>
/* CSS Custom Properties */
:root {
--color-gray-300: #d1d5db;
--color-gray-900: #111827;
--color-blue-600: #2563eb;
--color-blue-700: #1d4ed8;
--color-white: #ffffff;
--container-padding: 1.5rem;
--nav-padding-y: 1rem;
--space-x-3: 0.75rem;
--space-x-8: 2rem;
--space-y-4: 1rem;
--rounded-lg: 0.5rem;
--button-padding-x: 1.5rem;
--button-padding-y: 0.75rem;
--icon-size: 1.5rem;
--logo-size: 2.5rem;
--font-size-xl: 1.25rem;
}
/* Reset */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
/* Component styles */
.header-section {
background-color: var(--color-gray-900);
}
.nav-container {
max-width: 1536px;
margin: 0 auto;
padding: var(--container-padding);
}
.nav-wrapper {
padding: var(--nav-padding-y) 0;
}
.nav-content {
display: flex;
align-items: center;
justify-content: space-between;
}
.brand {
display: flex;
align-items: center;
gap: var(--space-x-3);
}
.logo {
width: var(--logo-size);
height: var(--logo-size);
background-color: var(--color-blue-600);
border-radius: var(--rounded-lg);
display: flex;
align-items: center;
justify-content: center;
}
.logo svg {
width: var(--icon-size);
height: var(--icon-size);
color: var(--color-white);
}
.brand-name {
font-size: var(--font-size-xl);
font-weight: 700;
color: var(--color-white);
}
.desktop-nav {
display: none;
align-items: center;
gap: var(--space-x-8);
}
.nav-link {
color: var(--color-gray-300);
text-decoration: none;
transition: color 0.2s ease;
}
.nav-link:hover {
color: var(--color-white);
}
.cta-button {
background-color: var(--color-blue-600);
color: var(--color-white);
padding: var(--button-padding-y) var(--button-padding-x);
border-radius: var(--rounded-lg);
border: none;
cursor: pointer;
transition: background-color 0.2s ease;
}
.cta-button:hover {
background-color: var(--color-blue-700);
}
.mobile-menu-button {
display: block;
color: var(--color-gray-300);
background: none;
border: none;
cursor: pointer;
padding: 0;
}
.mobile-menu-button:hover {
color: var(--color-white);
}
.mobile-menu-button:focus {
outline: none;
}
.mobile-menu-button svg {
width: var(--icon-size);
height: var(--icon-size);
}
.mobile-menu {
display: none;
margin-top: var(--space-y-4);
padding-bottom: var(--nav-padding-y);
}
.mobile-menu.active {
display: block;
}
.mobile-nav {
display: flex;
flex-direction: column;
gap: var(--space-y-4);
}
.mobile-nav .cta-button {
width: 100%;
}
/* Hide menu icon when close icon is visible */
.menu-icon.hidden,
.close-icon.hidden {
display: none;
}
/* Responsive styles */
@media (min-width: 768px) {
.desktop-nav {
display: flex;
}
.mobile-menu-button {
display: none;
}
.mobile-menu {
display: none !important;
}
}
</style>
<section class="header-section">
<nav class="nav-container">
<div class="nav-content">
<!-- Logo and company name -->
<div class="brand">
<!-- Marketing agency logo placeholder -->
<div class="logo">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
</svg>
</div>
<span class="brand-name">MarketEdge</span>
</div>
<!-- Desktop Navigation -->
<div class="desktop-nav">
<a href="#services" class="nav-link">Services</a>
<a href="#about" class="nav-link">About</a>
<a href="#portfolio" class="nav-link">Portfolio</a>
<a href="#contact" class="nav-link">Contact</a>
<button class="cta-button" aria-label="Get Started">
Get Started
</button>
</div>
<!-- Mobile menu button -->
<button id="mobile-menu-button" class="mobile-menu-button" aria-label="Toggle menu" aria-expanded="false">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path class="menu-icon" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
<path class="close-icon hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
<!-- Mobile Navigation -->
<div id="mobile-menu" class="mobile-menu" aria-label="Mobile navigation">
<div class="mobile-nav">
<a href="#services" class="nav-link">Services</a>
<a href="#about" class="nav-link">About</a>
<a href="#portfolio" class="nav-link">Portfolio</a>
<a href="#contact" class="nav-link">Contact</a>
<button class="cta-button" aria-label="Get Started">
Get Started
</button>
</div>
</div>
</nav>
</section>
<script>
// Mobile menu toggle functionality
const mobileMenuButton = document.getElementById('mobile-menu-button');
const mobileMenu = document.getElementById('mobile-menu');
const menuIcon = mobileMenuButton.querySelector('.menu-icon');
const closeIcon = mobileMenuButton.querySelector('.close-icon');
mobileMenuButton.addEventListener('click', () => {
const isExpanded = mobileMenuButton.getAttribute('aria-expanded') === 'true';
mobileMenuButton.setAttribute('aria-expanded', !isExpanded);
mobileMenu.classList.toggle('active');
menuIcon.classList.toggle('hidden');
closeIcon.classList.toggle('hidden');
});
</script>
<!--
@type: Header
@industry: Marketing
@style: Dark
@category: Navigation, Page Section
@framework: Tailwind
@license: Free
-->
<section class="bg-gray-900">
<nav class="container mx-auto px-6 py-4">
<div class="flex items-center justify-between">
<!-- Logo and company name -->
<div class="flex items-center space-x-3">
<!-- Marketing agency logo placeholder -->
<div class="w-10 h-10 bg-blue-600 rounded-lg flex items-center justify-center">
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
</svg>
</div>
<span class="text-xl font-bold text-white">MarketEdge</span>
</div>
<!-- Desktop Navigation -->
<div class="hidden md:flex items-center space-x-8">
<a href="#services" class="text-gray-300 hover:text-white transition-colors">Services</a>
<a href="#about" class="text-gray-300 hover:text-white transition-colors">About</a>
<a href="#portfolio" class="text-gray-300 hover:text-white transition-colors">Portfolio</a>
<a href="#contact" class="text-gray-300 hover:text-white transition-colors">Contact</a>
<button class="bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition-colors" aria-label="Get Started">
Get Started
</button>
</div>
<!-- Mobile menu button -->
<button id="mobile-menu-button" class="md:hidden text-gray-300 hover:text-white focus:outline-none" aria-label="Toggle menu" aria-expanded="false">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path class="menu-icon" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
<path class="close-icon hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
<!-- Mobile Navigation -->
<div id="mobile-menu" class="md:hidden hidden mt-4 pb-4" aria-label="Mobile navigation">
<div class="flex flex-col space-y-4">
<a href="#services" class="text-gray-300 hover:text-white transition-colors">Services</a>
<a href="#about" class="text-gray-300 hover:text-white transition-colors">About</a>
<a href="#portfolio" class="text-gray-300 hover:text-white transition-colors">Portfolio</a>
<a href="#contact" class="text-gray-300 hover:text-white transition-colors">Contact</a>
<button class="bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition-colors w-full" aria-label="Get Started">
Get Started
</button>
</div>
</div>
</nav>
</section>
<script>
// Mobile menu toggle functionality
const mobileMenuButton = document.getElementById('mobile-menu-button');
const mobileMenu = document.getElementById('mobile-menu');
const menuIcon = mobileMenuButton.querySelector('.menu-icon');
const closeIcon = mobileMenuButton.querySelector('.close-icon');
mobileMenuButton.addEventListener('click', () => {
const isExpanded = mobileMenuButton.getAttribute('aria-expanded') === 'true';
mobileMenuButton.setAttribute('aria-expanded', !isExpanded);
mobileMenu.classList.toggle('hidden');
menuIcon.classList.toggle('hidden');
closeIcon.classList.toggle('hidden');
});
</script>
