Cum organizezi structura pentru antet?

CSS

/* Stil pentru containerul antetului */
header {
  display: flex; /* Utilizarea flexbox pentru alinierea elementelor */
  justify-content: space-between; /* Distribuirea spațiului între elemente */
  align-items: center; /* Alinierea verticală a elementelor */
  padding: 10px 20px; /* Spațiere internă */
  background-color: #f0f0f0; /* Culoare de fundal */
}

/* Stil pentru logo */
.logo {
  flex-shrink: 0; /* Previne comprimarea logo-ului */
}

.logo img {
  height: 40px; /* Înălțimea imaginii logo-ului */
}

/* Stil pentru navigație */
nav ul {
  list-style: none; /* Elimină marcatorii listei */
  margin: 0;
  padding: 0;
  display: flex; /* Utilizarea flexbox pentru aranjament orizontal */
}

nav li {
  margin-left: 20px; /* Spațiu între elementele meniului */
}

nav a {
  text-decoration: none; /* Elimină sublinierea linkurilor */
  color: #333; /* Culoarea textului linkurilor */
}

/* Stil pentru butoane sau alte elemente de control */
.controls {
  display: flex; /* Utilizarea flexbox */
  align-items: center; /* Aliniere verticală */
}

.controls button {
  margin-left: 10px; /* Spațiu între butoane */
}

HTML

<header>
  <div class="logo">
    <img src="logo.png" alt="Logo companie">
  </div>
  <nav>
    <ul>
      <li><a href="/">Acasă</a></li>
      <li><a href="/about">Despre noi</a></li>
      <li><a href="/services">Servicii</a></li>
      <li><a href="/contact">Contact</a></li>
    </ul>
  </nav>
  <div class="controls">
    <button>Autentificare</button>
    <button>Înregistrare</button>
  </div>
</header>

Principii de bază:

• Semantică: Utilizați tag-ul <header>.
• Design flexibil: Aplicați Flexbox sau Grid pentru aliniere și adaptabilitate ușoară.
• Separarea componentelor: Evidențiați logo-ul, navigația și butoanele în blocuri separate.
• Accesibilitate: Utilizați tag-uri semantice (<nav>, <ul>, <li>, <a>) și atribute alt pentru imagini.
• Modularitate: Stilizați blocurile (.logo, nav, .controls) pentru ușurința întreținerii.
• Design receptiv: Adăugați media queries pentru adaptarea antetului la diferite dimensiuni de ecran.

Structura poate varia în funcție de complexitatea și conținutul antetului (de exemplu, adăugarea unei bare de căutare, meniuri derulante etc.).