Create a Website Header Design In HTML and CSS Code

Final Output:

• HTML Structure:

  • The <header> element is used to define the top section of the webpage.

  • Inside the header:

    • A logo is placed using a <div> with a class like logo.

    • A navigation menu is created using a <nav> element containing an unordered list (<ul>), with each navigation item as a list item (<li>).

    • A Call-to-Action (CTA) button is added using an anchor tag <a> styled as a button.

• CSS Styling:

  • General Layout:

    • The header uses flexbox for alignment, with display: flex to place items (logo, navigation, and CTA) in a row.

    • justify-content: space-between ensures the elements are evenly spaced.

  • Colors and Typography:

    • Background and text colors are set for better contrast.

    • Font sizes and styles ensure readability.

  • Navigation Links:

    • Links are styled to remove underlines (text-decoration: none) and change color on hover using the :hover pseudo-class.

  • Button Styling:

    • The CTA button is styled with padding, rounded corners (border-radius), and hover effects to make it visually appealing.

  • Responsiveness:

    • A media query adjusts the layout for smaller screens, changing the navigation to a vertical column and resizing the button for better usability.

Create a Website Header Design In HTML and CSS Code