1. HTML ile temel yapıyı oluşturma:
   • Bir navigasyon çubuğu (navlist) oluşturun ve içine menü linkleri ekleyin 4.
   • Sağ hizalanmış bir

     <div>

     içine, yer tutucu metinle birlikte bir metin giriş alanı ve arama simgesi içeren bir arama butonu ekleyin 24.
2. CSS ile stillendirme:
   • Navigasyon linkleri ve arama çubuğunu düzenlemek için Flexbox (esnek kutu) kullanın 4.
   • Giriş kutusuna ve butona padding, border, hover efektleri ve duyarlı davranışlar ekleyin 24.

<form>
  <div id="box">
    <input type="text" id="search" placeholder="Ara..">
    <i class="fa fa-search"></i>
  </div>
</form>
Kopyala

#box {
  max-width: 300px;
  position: relative;
}

#box .fa-search {
  position: absolute;
  top: 14px;
  left: 12px;
  font-size: 20px;
  color: cornflowerblue;
}

#search {
  width: 100px;
  box-sizing: border-box;
  border: 2px solid cornflowerblue;
  border-radius: 4px;
  font-size: 18px;
  padding: 12px 20px 12px 40px;
  -moz-transition: width 0.4s ease-in-out;
  -o-transition: width 0.4s ease-in-out;
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
}

#search:focus {
  width: 100%;
}
Kopyala