Merge pull request #420 from Ojas-Arora/test

Alignment Issue

src/Components/Footer.js

@@ -18,6 +18,7 @@ const Footer = () => {
               <li><a href='/services'>Services</a></li>
               <li><a href='/careers'>Careers</a></li>
               <li><a href='/contacts'>Contact Us</a></li>
+              <li><a href='/freelancer'>Hire a Freelancer</a></li>
             </ul>
           </div>
           <div className='footer-2'>

src/Components/FreeLancer/Freelancer.js

@@ -1,5 +1,7 @@
 import React from 'react'
+import { Link } from 'react-router-dom';
 import './Freelancer.css'
+import homeIcon from './homeicon.png';
 
 const Freelancer = () => {
     return (
@@ -9,6 +11,9 @@ const Freelancer = () => {
                 <div className="desc1freelancerbox1">Connect with Skilled Freelancers for Your Projects</div>
                 <button className='btnFreelancer'>Get Started</button>
             </div>
+            <Link to="/" className="home-link">
+                <img src={homeIcon} alt="Home" className="home-icon" />
+            </Link>
             <div className="box2Freelancer">
                 <div className="containerFreelancer" id='one'>
                     <div className='descbox2Freelancer'>Logo Design</div>

src/Components/Menu.css

@@ -60,7 +60,7 @@ menu ul li a::before {
   left: -10px;
   width: 0px;
   height: 20px;
-  background: #0db5cb;
+  background: #cf00a3;
   border-radius: 50%;
 }
 

src/Components/TopContainer.css

@@ -1,15 +1,16 @@
-.profileContainer,
-.notification-container {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
+.nav-item a span {
+  white-space: nowrap;
+  color: white;
 }
+.nav-item a:hover span {
+  color: #cf00a3; /* Pink color on hover */
+}
+
 .navbar {
   width: 100%;
-  height: auto;
+  height: 60px;
   background: #19162c;
   display: flex;
-  flex-wrap: wrap;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
@@ -19,19 +20,80 @@
   gap: 0.5rem;
   z-index: 99999;
 }
+.profileContainer .go-pro-btn {
+  padding: 10px 10px; /* Adjust padding to change the button size */
+}
+
 
-#list {
-  display: inline;
-  padding: 20px;
+.largeview {
+  display: flex;
+  list-style: none;
+  margin: 0;
+  padding: 0;
 }
-.largeview a:hover {
-  color: #cf00a3;
-  font-size: 1.05rem; /* Slightly increase font size on hover */
+
+.largeview .nav-item {
+  margin-right: 20px;
+}
+
+.largeview .nav-item a {
+  color: #ffffff;
+  text-decoration: none;
+  transition: color 0.3s ease, font-size 0.3s ease;
 }
-.open a:hover {
+
+.largeview .nav-item a:hover {
   color: #cf00a3;
-  font-size: 1.05rem; /* Slightly increase font size on hover */
+  font-size: 1.05rem;
+}
+
+.inputBox {
+  position: relative;
+  margin-top: -10px;
+}
+@media screen and (max-width: 1500px) {
+  .mobview .inputBox {
+    margin-top: 10px; /* Add 10px space above the search box */
+    padding: 5px 5px;
+  }
+
+  .mobview .searchbtn {
+    font-size: 1.3rem; /* Adjust the search button size */
+  }
+
+  .mobview #search_results {
+    top: 50px; /* Adjust position of search results */
+  }
+}
+
+.searchbtn {
+  position: absolute;
+  top: 70%;
+  right: 10px;
+  transform: translateY(-50%);
+  color: #757380;
+  font-size: 1.5rem;
+}
+
+#search_results {
+  position: absolute;
+  top: 40px;
+  background: white;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  width: 100%;
+  z-index: 10;
+}
+
+#search_result_title {
+  margin: 0;
+  padding: 10px;
+  font-weight: bold;
 }
+
+#list li {
+  flex-shrink: 0; /* Prevent items from shrinking */
+}
+
 .mobview {
   display: none;
 }
@@ -104,8 +166,9 @@
     text-align: center;
     font-size: 14px;
   }
+
   .mobview #shortview ul li:hover {
-    background: #19162c; /* Light background on hover */
+    background: #19162c;
     color: #757380;
     transition: 0.3s;
   }

src/Components/TopContainer.js

@@ -111,14 +111,14 @@ function TopContainer() {
     <div className="topContainer">
       <div className="navbar">
         <ul className="largeview">
-          <li id="list"><a href='/'>Home</a></li>
-          <li id="list"><a href='/about'>About Us</a></li>
-          <li id="list"><a href='/services'>Services</a></li>
-          <li id="list"><a href='/careers'>Careers</a></li>
-          <li id="list"><a href="/freelancer">Hire a Freelancer</a></li>
-          <li id="list"><a href='/contacts'>Contact</a></li>
-          <li id="list"><a href='/blogs'>Blogs</a></li>
-          <li id="list"><a href='/faq'>FAQ</a></li>
+          <li className="nav-item"><a href='/'>Home</a></li>
+          <li className="nav-item"><a href='/about'><span>About Us</span></a></li>
+          <li className="nav-item"><a href='/services'>Services</a></li>
+          <li className="nav-item"><a href='/careers'>Careers</a></li>
+          <li className="nav-item"><a href="/freelancer"><span>Hire a Freelancer</span></a></li>
+          <li className="nav-item"><a href='/contacts'>Contact</a></li>
+          <li className="nav-item"><a href='/blogs'>Blogs</a></li>
+          <li className="nav-item"><a href='/faq'>FAQ</a></li>
         </ul>
 
         <div className="mobview">
@@ -129,6 +129,7 @@ function TopContainer() {
               <li><a href='/about'>About Us</a></li>
               <li><a href='/services'>Services</a></li>
               <li><a href='/careers'>Careers</a></li>
+              <li><a href='/freelancer'>Freelancer</a></li>
               <li><a href='/contacts'>Contact</a></li>
               <li><a href='/blogs'>Blogs</a></li>
               <li><a href='/faq'>FAQ</a></li>
@@ -160,7 +161,7 @@ function TopContainer() {
           ) : null}
         </div>
 
-        <div className="profileContainer">
+        <div className="profileContainer" >
           <a href="/pricing">
             <button className="go-pro-btn">Go Pro</button>
           </a>