fix landing page

acesknust · May 30, 2024 · 50990b6 · 50990b6
1 parent 0048517
commit 50990b6
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 36 deletions.
diff --git a/src/App.js b/src/App.js
@@ -2,18 +2,17 @@ import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import Landingpage from "./pages/landingpage";
 import Home from "./pages/Home";
 import SignIn from "./pages/SignIn";
-import SignUp from "./pages/SignUp";
 import CourseFiles from "./pages/CourseFiles";
+import SignUp from "./pages/SignUp";
 
 function App() {
   return (
     <Router>
       <Routes>
         <Route path="/" element={<Landingpage />} />
-
         <Route path="/Home" element={<Home />} />
-        <Route path="/SignUp" element={<SignUp />} />
         <Route path="/SignIn" element={<SignIn />} />
+        <Route path="/SignUp" element={<SignUp />} />
         <Route path="/CourseFiles" element={<CourseFiles />} />
       </Routes>
     </Router>

diff --git a/src/pages/CourseFiles.js b/src/pages/CourseFiles.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import '../styles/coursefiles.css';
 import { FaBook, FaDownload } from 'react-icons/fa';
+import Navbar from '../components/Navbar';
 
 function CourseFiles() {
   const courses = [
@@ -12,9 +13,11 @@ function CourseFiles() {
   ];
 
   return (
-    <div className="container">
-    <h1 className="heading">ACES Course Files</h1>
-    <div className="content">
+    <>
+    <Navbar />
+    <div className="cf-container">
+    <h1 className="cf-heading">ACES Course Files</h1>
+    <div className="cf-content">
         <h2>First Semester</h2>
         <ul>
           {courses.map(course => (
@@ -25,6 +28,7 @@ function CourseFiles() {
         </ul>
     </div>
   </div>
+  </>
   );
 }
 

diff --git a/src/pages/landingpage.jsx b/src/pages/landingpage.jsx
@@ -7,7 +7,7 @@ const Landingpage = () => {
       <div className="App">
         <div className="container">
           <div className="content">
-            <h2>CBET</h2>
+            <h2 style={{color: '#fff'}}>CBET</h2>
 
             <p>
               Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente
@@ -24,6 +24,7 @@ const Landingpage = () => {
             <div className="buttons">
             <button className="login-button"><Link to="/SignUp" style={{textDecoration: 'None', color: '#fff'}}>Sign Up</Link></button>
               <button className="login-button"><Link to="/SignIn" style={{textDecoration: 'None', color: '#fff'}}>Login</Link></button>
+              <button className="login-button"><Link to="/Home" style={{textDecoration: 'None', color: '#fff'}}>Home</Link></button>
             </div>
           </div>
         </div>

diff --git a/src/styles/coursefiles.css b/src/styles/coursefiles.css
@@ -1,4 +1,4 @@
-.container {
+.cf-container {
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -8,7 +8,7 @@
   }
 
 
-.heading {
+.cf-heading {
     color: #ffffff;
     margin-top: 100px;
     margin-left: 10px;
@@ -19,7 +19,7 @@
   }
 
 
-.content {
+.cf-content {
     background-color: #ffffff;
     font-weight: bold;
     border-top-left-radius: 50px;
@@ -36,15 +36,15 @@
   }
 
 
-.content h2 {
+.cf-content h2 {
     position: absolute;
     top: 5%;
     margin-top: 0;
     color: #002366;
     margin-bottom: 20px;
 }
 
-.content ul {
+.cf-content ul {
     position: absolute;
     top: 17%;
     list-style: none;
@@ -55,7 +55,7 @@
 
     }
 
-    .content li {
+    .cf-content li {
     background-color: #f0f0f0;
     width: calc(90% - 10px);
     margin-bottom: 10px;
@@ -69,21 +69,21 @@
     margin-right: auto;
     }
 
-.content li:hover {
+.cf-content li:hover {
 background-color: #e0e0e0;
 }
 
-.content i {
+.cf-content i {
 color: #002366;
 }
 
 @media (min-width: 1058px) {
-    .container {
+    .cf-container {
       padding-top: 20px;
       justify-content: center;
     }
 
-    .content {
+    .cf-content {
       width: 60%;
       max-width: 600px;
       height: auto;
@@ -93,13 +93,13 @@ color: #002366;
       bottom: auto;
       padding: 40px;
     }
-    .content h2 {
+    .cf-content h2 {
         position: static;
         color: #002366;
         margin-bottom: 20px;
         }
 
-        .content ul {
+        .cf-content ul {
             position: static;
         list-style: none;
         text-align: center;
@@ -109,7 +109,7 @@ color: #002366;
 
         }
 
-        .content li {
+        .cf-content li {
         background-color: #f0f0f0;
         width: calc(90% - 10px);
         margin-bottom: 10px;
@@ -123,23 +123,23 @@ color: #002366;
         margin-right: auto;
         }
 
-        .content li:hover {
+        .cf-content li:hover {
         background-color: #e0e0e0;
         }
 
-        .content i {
+        .cf-content i {
         color: #002366;
         }
   }
 
 
   @media (min-width: 902px) {
-    .container {
+    .cf-container {
       padding-top: 20px;
       justify-content: center;
     }
 
-    .content {
+    .cf-content {
       width: 60%;
       max-width: 600px;
       height: auto;
@@ -150,13 +150,13 @@ color: #002366;
       padding: 40px;
     }
 
-    .content h2 {
+    .cf-content h2 {
         position: static;
         color: #002366;
         margin-bottom: 20px;
         }
 
-        .content ul {
+        .cf-content ul {
             position: static;
             list-style: none;
             text-align: center;
@@ -166,7 +166,7 @@ color: #002366;
 
             }
 
-            .content li {
+            .cf-content li {
             background-color: #f0f0f0;
             width: calc(90% - 10px);
             margin-bottom: 10px;
@@ -180,24 +180,24 @@ color: #002366;
             margin-right: auto;
             }
 
-        .content li:hover {
+        .cf-content li:hover {
         background-color: #e0e0e0;
         }
 
-        .content i {
+        .cf-content i {
         color: #002366;
         }
 
   }
 
 
   @media (min-width: 608px) {
-    .container {
+    .cf-container {
       padding-top: 20px;
       justify-content: center;
     }
 
-    .content {
+    .cf-content {
       width: 60%;
       max-width: 600px;
       height: auto;

diff --git a/src/styles/landingPage.css b/src/styles/landingPage.css
@@ -21,7 +21,7 @@
 }
 .content h2{
   font-size: 4.5rem;
-  color: #fff;
+  color: #ffffff;
   font-family: "ubuntu",sans-serif;
 }
 .content p{

diff --git a/src/styles/signup.css b/src/styles/signup.css
@@ -206,8 +206,8 @@
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
     position: relative;
     bottom: auto;
-    padding: 20px;
-    margin: 20px;
+    padding: 10px 40px 14px 40px;
+    margin: 10px;
   }
 
   .signInText {
@@ -248,6 +248,7 @@
   .signInButton {
     width: 30%;
     /* padding: 15px; */
+    margin-bottom: 0;
     font-size: 16px;
   }
 
@@ -267,6 +268,8 @@
 
   .signUpText {
     font-size: 18px;
+    margin: 5px;
+    padding: 0;
   }
 }
 
@@ -285,7 +288,7 @@
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
     position: relative;
     bottom: auto;
-    padding: 40px;
+    padding: 10px 40px 14px 40px;
   }
 
   .signInText {
@@ -320,7 +323,7 @@
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
     position: relative;
     bottom: auto;
-    padding: 40px;
+    padding: 10px 40px 14px 40px;
   }
 
   .signInText {