assets/css/style.css

@@ -93,56 +93,9 @@ body {
 
 /*placeholder for search and login section*/
 .search-and-login {
-    display: flex;
+    width: 277px;
-    align-items: center;
-    position: relative;
-    /* width: 277px;
     height: 49px;
-    border: #000 solid 1px; */
+    border: #000 solid 1px;
-}
-
-.search-input{
-    height: 36px;
-    background-color: #C7E2C9;
-    border: 1px solid #A8C9AA;
-    border-radius: 10px;
-    padding: 10px;
-    font-family: var(--common-font);
-    font-size: 14px;
-    color: var(--input-text-color);
-    padding-left: 2rem;
-    margin-right: 16px;
-    
-}
-
-.login-link{
-    background-color: #C7E2C9;
-    height: 36px;
-    width: 36px;
-    text-align: center;
-    border-radius: 10px;
-    color: rgba(0, 113, 91, 0.45);
-    font-size: 20px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-     border: 1px solid #A8C9AA;
-
-}
-
-
-
-.search-input::placeholder {
-    color: rgba(0, 113, 91, 0.45);
-}
-
-.search-icon {
-  position: absolute;
-  left: 0.6rem;
-  top: 50%;
-  transform: translateY(-50%);
-  color: rgba(0, 113, 91, 0.45); 
-  pointer-events: none; 
 }
 
 .quote {
@@ -153,7 +106,6 @@ body {
     margin-top: 46px;
     margin-bottom: 30px;
     text-align: center;
-    
 }
 
 .black-qoute-word {

components/templates/layout/header.php

@@ -62,11 +62,7 @@
                 </nav>
                
                 <div class="search-and-login">
-                     <i class="fa-solid fa-magnifying-glass search-icon"></i>
+                    placeholder
-                    <input type="text" class="search-input" placeholder="Search recipes...">
-                    <a href="<?php the_permalink("users:login") ?>" class="login-link hover-anim">
-                        <i class="fa-regular fa-user"></i>
-                    </a>
                 </div>
                  <button id="menu-toggle" class="menu-toggle" aria-label="Toggle navigation">
                     <i id="menu-icon" class="fa-solid fa-bars"></i>