Pastel-Header – CSS Snippet

Go back



  <header class="pastel-header">

    <!-- Logo -->
    <a href="#" class="logo">

      <span class="logo-icon">V.</span>

      <span class="logo-text">
     Vidyamath
      </span>

    </a>


    <!-- Navigation -->
    <nav class="navigation">

      <a href="#" class="nav-link active">
        Home
      </a>

      <a href="#" class="nav-link">
        About
      </a>

      <a href="#" class="nav-link">
        Services
      </a>

      <a href="#" class="nav-link">
        Portfolio
      </a>

      <a href="#" class="nav-link">
        Contact
      </a>

    </nav>


    <!-- Right Side -->
    <div class="header-actions">

      <!-- Search -->
      <button class="search-btn">

        <svg viewBox="0 0 24 24">

          <circle
            cx="11"
            cy="11"
            r="6">
          </circle>

          <path
            d="M16 16L21 21">
          </path>

        </svg>

      </button>


      <!-- CTA -->
      <a href="#" class="cta-btn">

        Get Started

        <span>↗</span>

      </a>


      <!-- Mobile Menu -->
      <button class="menu-btn">

        <span></span>
        <span></span>
        <span></span>

      </button>

    </div>

  </header>