Dependopolis Consulting LImited

Components

Documentation

Header

logo
Let's Talk

Header – This component serves as the main navigation bar for the website, providing access to essential pages and actions.

  • The Plus Addon Widget: Horizontal Mega Menu
  • Custom Logo Integration Widget for branding.
  • Call-to-Action Button Widget for the “Let’s Talk” feature.
<div class=”centered-image”>
<img src=”https://www.dependopolis.com/wp-content/uploads/2023/01/Group-1000005252.png” alt=”logo” loading=”eager” fetchpriority=”high”>
</div>
  • Logo Placement: Positioned on the top-left, adhering to brand alignment standards.
  • Menu Items:
    • Font Style: [Specify the font, e.g., “Roboto, 16px”].
    • Hover Effect: Underline animation with a subtle fade.
    • Spacing: Evenly distributed with 20px padding.
  • Call-to-Action Button (“Let’s Talk”):
    • Color: Primary brand color for background, white for text.
    • Hover State: Slightly darker background with smooth transition.
    • Shape: Rounded corners (8px radius).
  • Responsiveness: The header adapts seamlessly across devices:
    • Desktop: Full-width display with all menu items visible.
    • Mobile: Collapsible menu with a hamburger icon for easy navigation.

Header – This component serves as the main navigation bar for the website, providing access to essential pages and actions.

  • The Plus Addon Widget: Horizontal Mega Menu
  • Custom Logo Integration Widget for branding.
  • Call-to-Action Button Widget for the “Let’s Talk” feature.
<div class=”centered-image”>
<img src=”https://www.dependopolis.com/wp-content/uploads/2023/01/Group-1000005252.png” alt=”logo” loading=”eager” fetchpriority=”high”>
</div>
  • Logo Placement: Positioned on the top-left, adhering to brand alignment standards.
  • Menu Items:
    • Font Style: [Specify the font, e.g., “Roboto, 16px”].
    • Hover Effect: Underline animation with a subtle fade.
    • Spacing: Evenly distributed with 20px padding.
  • Call-to-Action Button (“Let’s Talk”):
    • Color: Primary brand color for background, white for text.
    • Hover State: Slightly darker background with smooth transition.
    • Shape: Rounded corners (8px radius).
  • Responsiveness: The header adapts seamlessly across devices:
    • Desktop: Full-width display with all menu items visible.
    • Mobile: Collapsible menu with a hamburger icon for easy navigation.