Improved the css of about us page

Yashgabani845 · Oct 11, 2024 · 4a0c1e1 · 4a0c1e1
1 parent 3c55a3d
commit 4a0c1e1
Show file tree

Hide file tree

Showing 5 changed files with 140 additions and 209 deletions.
diff --git a/hiring-portal/src/App.js b/hiring-portal/src/App.js
@@ -30,20 +30,20 @@ function App() {
   return (
     <Router>
       <Routes>
-        <Route path='/' element={<Homepage />}/>
-        <Route path='/signup' element={<Signup />}/>
-        <Route path='/jobcard' element={<Jobpage />}/>
-        <Route path="/job/:id" element={<Job/>} />
-        <Route path="/owner" element={<Employer/>}/>
-        <Route path="/ownerside" element={<Dashboard/>}/>
-        <Route path="/admin" element={<AdminDashboard/>}/>
-        <Route path="/postjob" element ={<JobPostForm/>}/>
-        <Route path='/about' element={<About/>}/>
-        <Route path='/contactus' element={<Contactus/>}/>
-        <Route path="/company" element={<CompanyRegistration/>}/>  
-        <Route path="/profile" element={<Profile/>}/>    
-        <Route path="/signin" element={<SignIn/>}/> 
-        <Route path='/uploadedjobs' element={<UploadedJobs/>}/>
+        <Route path='/' element={<Homepage />} />
+        <Route path='/signup' element={<Signup />} />
+        <Route path='/jobcard' element={<Jobpage />} />
+        <Route path="/job/:id" element={<Job />} />
+        <Route path="/owner" element={<Employer />} />
+        <Route path="/ownerside" element={<Dashboard />} />
+        <Route path="/admin" element={<AdminDashboard />} />
+        <Route path="/postjob" element={<JobPostForm />} />
+        <Route path='/about' element={<About />} />
+        <Route path='/contactus' element={<Contactus />} />
+        <Route path="/company" element={<CompanyRegistration />} />
+        <Route path="/profile" element={<Profile />} />
+        <Route path="/signin" element={<SignIn />} />
+        <Route path='/uploadedjobs' element={<UploadedJobs />} />
         <Route path='/code/:assessmentId' element={<Coding />} />
         <Route path='/manage-assesment/:jobId' element={<CreateAssessment />} />
         <Route path="/managejobs/:jobId" element={<ManageJobs />} />

diff --git a/hiring-portal/src/CSS/about.css b/hiring-portal/src/CSS/about.css
@@ -1,5 +1,3 @@
-/* about.css */
-
 .about-container {
   padding: 20px;
   max-width: 1200px;
@@ -12,77 +10,99 @@
 }
 
 .feature-section h1 {
-  font-size: 2.5rem;
+  font-size: 3.5rem;
+  font-weight: 700;
   margin-bottom: 10px;
+  color: #333;
 }
 
 .feature-section p {
-  font-size: 1.2rem;
+  font-size: 1.5rem;
   color: #555;
 }
 
 .features {
-  display: flex;
-  flex-direction: column;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
   gap: 20px;
 }
 
 .feature {
-  background: #f9f9f9;
-  border-radius: 8px;
+  background: #ffffff;
+  border-radius: 12px;
   padding: 20px;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  transition: box-shadow 0.3s ease;
 }
 
-.feature-content {
-  display: flex;
-  align-items: center;
-  gap: 20px;
+.feature:hover {
+  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
 }
 
 .feature-image {
-  width: 50%;
-  height: 100%;
-
+  width: 100%;
+  height: auto;
+  max-height: 250px;
   border-radius: 8px;
+  object-fit: cover;
 }
 
 .feature-text {
-  flex: 1;
+  text-align: left;
 }
 
 .feature-text h2 {
   font-size: 1.8rem;
-  margin-top: 0;
+  margin: 10px 0;
+  text-align: center;
+  color: #222;
 }
 
 .feature-text p {
-  font-size: 1rem;
-  color: #333;
+  font-size: 1.1rem;
+  color: #777;
+  margin-bottom: 10px;
+  line-height: 1.5;
+  /* Increased line spacing */
 }
 
 .feature-text ul {
   list-style-type: disc;
   padding-left: 20px;
+  margin: 10px 0;
 }
 
 .feature-text ul li {
   font-size: 1rem;
-  margin-bottom: 10px;
+  margin-bottom: 8px;
+  color: #444;
 }
 
 @media (max-width: 768px) {
   .about-container {
-    padding: 0px;
+    padding: 10px;
   }
-  .feature {
-    padding: 10px 10px;
+
+  .features {
+    grid-template-columns: 1fr;
   }
-  .feature-content {
-    display: flex;
-    flex-direction: column;
+
+  .feature-section h1 {
+    font-size: 2.5rem;
   }
-  .feature-text h2{
-    text-align: center;
+
+  .feature-section p {
+    font-size: 1.2rem;
   }
-}
+
+  .feature-text h2 {
+    font-size: 1.5rem;
+  }
+
+  .feature-text p {
+    font-size: 1rem;
+  }
+}