About section completed

DeepCodeWork · DeepCodeWork · commit 2d43a796e572 · 2020-06-09T20:35:29.000+05:30
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^7.2.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.1",
     "react-scroll": "^1.7.16"
   },
diff --git a/src/UI/SectionTitle/SectionTitle.js b/src/UI/SectionTitle/SectionTitle.js
@@ -3,7 +3,7 @@ import React from 'react';
 const SectionTitle = (props) => {
     return (
                 <div className = "row justify-content-center mb-5">
-                    <p className = "display-4 mt-5 text-weight-bold"><strong>{props.title}</strong></p>
+                    <p className = "display-4 mt-5 text-weight-bold" style={{color:props.color}}><strong>{props.title}</strong></p>
                 </div>
     );
 }
diff --git a/src/assets/images/onlineStudy.jpg b/src/assets/images/onlineStudy.jpg
diff --git a/src/assets/images/study.jpg b/src/assets/images/study.jpg
diff --git a/src/components/AboutSection/AboutSection.js b/src/components/AboutSection/AboutSection.js
@@ -1,13 +1,17 @@
 import React from 'react';
+import classes from './AboutSection.module.css';
 import Features from './Features/Features';
 import SectionTitle from '../../UI/SectionTitle/SectionTitle';
+import Introduction from './Introduction/Introduction';
+
 
 const AboutSection = () => {
     return (
-        <div>
+        <div className = {classes.aboutSection}>
             <div className="container">
-                <SectionTitle title="About"/>
+                <SectionTitle title="About" color="white"/>
                 <Features/>
+                <Introduction/>
             </div>
         </div>
 
diff --git a/src/components/AboutSection/AboutSection.module.css b/src/components/AboutSection/AboutSection.module.css
@@ -0,0 +1,4 @@
+.aboutSection{
+    height: 100vh;
+    background-color: #292D2E ;
+}
diff --git a/src/components/AboutSection/Features/Feature/Feature.js b/src/components/AboutSection/Features/Feature/Feature.js
@@ -3,8 +3,8 @@ import classes from './Feature.module.css';
 
 const Feature = (props) => {
     return (
-        <div className = { classes.feature+" justify-content-center" }>
-            <div className = {classes.rotate+" justify-content-center p-3"}>
+        <div className = { classes.feature }>
+            <div className = {classes.rotate+" p-3"}>
                 <i className = {classes.mdi+props.icon}></i>
                 <h5><strong>{props.title}</strong></h5>
                 <p>{props.body}</p>
diff --git a/src/components/AboutSection/Features/Feature/Feature.module.css b/src/components/AboutSection/Features/Feature/Feature.module.css
@@ -1,7 +1,10 @@
 .feature{
+    border: 2px solid white  ;
+    border-radius: 5px;
     margin: 10px;
-    background-color: #64C7CC;
+    background-color: #646c74  ;
     color: white;
+    text-align: center;
 }
 
 .feature:hover{
diff --git a/src/components/AboutSection/Introduction/Introduction.js b/src/components/AboutSection/Introduction/Introduction.js
@@ -0,0 +1,19 @@
+import React from 'react';
+import classes from './Introduction.module.css';
+
+const Introduction = () => {
+    return(
+        <div className = {classes.intro}>
+            <div className = "row">
+                <div className = "col-lg-10 offset-lg-1">
+                <p className="text-justify pt-5">
+            We are a bootstrap startup with a vision to impact education and economics solving complex problems with simple solutions. 
+            Edunomics combines tech expertise and business intelligence to catalyze change and deliver results. 
+            We are employing top talent to provide a uniquely matching solution for your unique problem.
+            </p>
+                </div>
+            </div>
+        </div>
+    );
+}
+export  default Introduction;
diff --git a/src/components/AboutSection/Introduction/Introduction.module.css b/src/components/AboutSection/Introduction/Introduction.module.css
@@ -0,0 +1,4 @@
+.intro p{
+    font-size: 20px;
+    color: #0096ea  ;
+}
diff --git a/src/components/HomeSection/HomeSection.js b/src/components/HomeSection/HomeSection.js
@@ -9,11 +9,14 @@ const HomeSection = () => {
             <div className="container">
                 <div className="row">
                     <div className = "col-lg-6 d-lg-block">
+                        <div className="d-flex flex-column">
                         <div className = { classes.quote }>
                             <p className="display-4">Physics is the most fundamental, and least significant, of the sciences.</p>
                             <p style={{color:"#0096ea"}}>Celebrating physics with the best minds</p>
                         </div>
-                        <button className="py-2 px-3">Get Started</button>
+                        <div><button className="py-2 px-3">Get Started</button></div>
+                        </div>
+                        
                     </div>
                     <div className = "col-lg-6 d-none d-lg-block">
                         <div>
diff --git a/src/components/HomeSection/HomeSection.module.css b/src/components/HomeSection/HomeSection.module.css
@@ -6,8 +6,9 @@
 
 .home{
     background-color: #292D2E;
-    height: 80vh;
+    height: 85vh;
     color: white;
+    margin-top: 50px;
 }
 
 .quote{
@@ -30,4 +31,10 @@ button:hover{
     background-color: #0096ea;
     color: white;
     border: 3px solid lightblue;
-}
+}
+
+@media(min-width: 480px) {
+    body {
+      height: 100vh;
+    }
+  }
diff --git a/src/components/Layout/Layout.js b/src/components/Layout/Layout.js
@@ -2,13 +2,16 @@ import React from 'react';
 import Navigation from '../Navigation/Navigation';
 import HomeSection from '../HomeSection/HomeSection';
 import AboutSection from '../AboutSection/AboutSection';
+import RegisterSection from '../RegisterSection/RegisterSection';
 
 const Layout = () => {
     return (
         <div>
             <Navigation/>
             <HomeSection/>
+            <RegisterSection/>
             <AboutSection/>
+            
         </div>
     );
 }
diff --git a/src/components/Navigation/Navigation.js b/src/components/Navigation/Navigation.js
@@ -6,7 +6,7 @@ import NavigationItems from './NavigationItems/NavigationItems';
 
 const Navigation = () => {
     const navBar = 
-        <nav className = {classes.navBar + " navbar navbar-expand-lg navbar-dark"}>
+        <nav className = {classes.navBar + " navbar navbar-expand-lg navbar-dark fixed-top"}>
             <div className = "container">
                 {/* {<Logo className = {classes.logo}/>} */}
                 <a className = {classes.navbarBrand+" navbar-brand ml-1 text-white"}> <span style={{color:"#0096ea"}}>E</span><span style={{color:"white"}}>dunomics</span></a>
diff --git a/src/components/RegisterSection/LoginSection/LoginSection.js b/src/components/RegisterSection/LoginSection/LoginSection.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import Aux from '../../../hoc/Auxi';
+
+const LoginSection = (props) => {
+    return (
+        <Aux>
+            <div>
+                <h1>Kumar</h1>
+            </div>
+        </Aux>
+    );
+}
+
+export default LoginSection;
diff --git a/src/components/RegisterSection/LoginSection/LoginSection.module.css b/src/components/RegisterSection/LoginSection/LoginSection.module.css
diff --git a/src/components/RegisterSection/RegisterSection.js b/src/components/RegisterSection/RegisterSection.js
@@ -0,0 +1,39 @@
+import React from 'react';
+import Aux from '../../hoc/Auxi';
+import classes from './RegisterSection.module.css';
+import SectionTitle from '../../UI/SectionTitle/SectionTitle';
+import {Link,Route} from 'react-router-dom';
+import LoginSection from '../RegisterSection/LoginSection/LoginSection';
+import SignupSection from '../RegisterSection/SignupSection/SignupSection';
+
+const RegisterSection  = () => {
+    return (
+        <Aux>
+            <div className = { classes.registerSection }>
+                <div className = "container">
+                    <SectionTitle title="Register Yourself!"/>
+                    <div className = "row pt-3">
+                        <div className="col-lg-8 offset-lg-2">
+                            <div className = "row">
+                                <div>
+                                    <button>Login</button>
+                                    <button>Signup</button>
+                                </div>
+                            </div>
+                            <div className = "row">
+                                <div className = "col-lg-6">
+                                    
+                                </div>
+                                <div className = "col-lg-6">
+
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </Aux>
+    );
+}
+
+export default RegisterSection;
diff --git a/src/components/RegisterSection/RegisterSection.module.css b/src/components/RegisterSection/RegisterSection.module.css
@@ -0,0 +1,3 @@
+.registerSection{
+    height: 100vh;
+}
diff --git a/src/components/RegisterSection/SignupSection/SignupSection.js b/src/components/RegisterSection/SignupSection/SignupSection.js
@@ -0,0 +1,12 @@
+import React from 'react';
+import Aux from '../../../hoc/Auxi';
+
+const SignupSection = () => {
+    return (
+        <Aux>
+            <h1>Deep</h1>
+        </Aux>
+    );
+}
+
+export default SignupSection;
diff --git a/src/components/RegisterSection/SignupSection/SignupSection.module.css b/src/components/RegisterSection/SignupSection/SignupSection.module.css

Original file line number	Diff line number	Diff line change
`@@ -3,7 +3,7 @@ import React from 'react';`
`3`	`3`	`const SectionTitle = (props) => {`
`4`	`4`	`return (`
`5`	`5`	`<div className = "row justify-content-center mb-5">`
`6`		`- <p className = "display-4 mt-5 text-weight-bold"><strong>{props.title}</strong></p>`
	`6`	`+ <p className = "display-4 mt-5 text-weight-bold" style={{color:props.color}}><strong>{props.title}</strong></p>`
`7`	`7`	`</div>`
`8`	`8`	`);`
`9`	`9`	`}`