kefus

index.html

@@ -18,7 +18,9 @@
                 <li><img src="cppLogo.jpg" alt="Dining Guide Logo" class="logo-image"></li>
                 <li><a href="#places">Places to Eat</a></li>
                 <li><a href="https://www.foundation.cpp.edu/dining/hours/current/index.htm" target="_blank">Dining Hours</a></li>
-                <input type="text" id="searchInput" placeholder="Search by place...">
+                <div class="search-container">
+                    <input type="text" id="searchInput" placeholder="Search by place...">
+                </div>
             </ul>
         </nav>
     </header>
@@ -158,8 +160,6 @@ <h3>FitBites</h3>
             </div>
     </section>
 
-
-
     <footer>
         <p>&copy; 2024 CPP On-Campus Dining Guide. All rights reserved.</p>
     </footer>

styles.css

@@ -61,7 +61,18 @@ nav input:focus {
 
 /* Add a transition effect for a smooth visual change */
 nav input {
-    transition: all 0.3s;
+    padding: 10px 30px 10px 10px;
+    border: none;
+    border-radius: 5px;
+    font-size: 14px;
+    width: 200px;
+    background-color: #fff;
+    color: #333;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+    background-image: url('search.png');
+    background-position: 95% center;
+    background-repeat: no-repeat;
+    background-size: 20px 20px;
 }
 
 nav a::after {
@@ -124,6 +135,13 @@ nav a:hover {
     margin-top: -400px;
 }
 
+.search-container {
+    display: flex;
+    align-items: center;
+    margin: 0;
+    margin-left: 180px;
+}
+
 .about-section {
     text-align: center;
     padding: 40px;