Merge pull request #13 from codewithvk/frontend

Header and footer- design 1 - @codewithvk

frontend/.eslintcache

@@ -1 +1 @@
-[{"D:\\OpenSource\\Community-Website\\frontend\\src\\index.js":"1","D:\\OpenSource\\Community-Website\\frontend\\src\\App.js":"2","D:\\OpenSource\\Community-Website\\frontend\\src\\reportWebVitals.js":"3"},{"size":500,"mtime":1607232438519,"results":"4","hashOfConfig":"5"},{"size":181,"mtime":1607259018608,"results":"6","hashOfConfig":"5"},{"size":362,"mtime":1607232438519,"results":"7","hashOfConfig":"5"},{"filePath":"8","messages":"9","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"2xv6f9",{"filePath":"10","messages":"11","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"12","messages":"13","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"D:\\OpenSource\\Community-Website\\frontend\\src\\index.js",[],"D:\\OpenSource\\Community-Website\\frontend\\src\\App.js",[],"D:\\OpenSource\\Community-Website\\frontend\\src\\reportWebVitals.js",[]]
+[{"D:\\OpenSource\\Community-Website\\frontend\\src\\index.js":"1","D:\\OpenSource\\Community-Website\\frontend\\src\\App.js":"2","D:\\OpenSource\\Community-Website\\frontend\\src\\reportWebVitals.js":"3","D:\\OpenSource\\Community-Website\\frontend\\src\\Components\\Header.js":"4","D:\\OpenSource\\Community-Website\\frontend\\src\\Components\\Footer.js":"5","D:\\OpenSource\\Community-Website\\frontend\\src\\components\\footer.js":"6","D:\\OpenSource\\Community-Website\\frontend\\src\\components\\header.js":"7"},{"size":517,"mtime":1607315506051,"results":"8","hashOfConfig":"9"},{"size":279,"mtime":1607324323415,"results":"10","hashOfConfig":"9"},{"size":375,"mtime":1607315506053,"results":"11","hashOfConfig":"9"},{"size":669,"mtime":1607318444596,"results":"12","hashOfConfig":"9"},{"size":228,"mtime":1607319196393,"results":"13","hashOfConfig":"9"},{"size":228,"mtime":1607324346090,"results":"14","hashOfConfig":"9"},{"size":669,"mtime":1607324351155,"results":"15","hashOfConfig":"9"},{"filePath":"16","messages":"17","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"18"},"2xv6f9",{"filePath":"19","messages":"20","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"21","messages":"22","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"18"},{"filePath":"23","messages":"24","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"25","messages":"26","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"27","messages":"28","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"29","messages":"30","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"D:\\OpenSource\\Community-Website\\frontend\\src\\index.js",[],["31","32"],"D:\\OpenSource\\Community-Website\\frontend\\src\\App.js",[],"D:\\OpenSource\\Community-Website\\frontend\\src\\reportWebVitals.js",[],"D:\\OpenSource\\Community-Website\\frontend\\src\\Components\\Header.js",[],"D:\\OpenSource\\Community-Website\\frontend\\src\\Components\\Footer.js",[],"D:\\OpenSource\\Community-Website\\frontend\\src\\components\\footer.js",[],"D:\\OpenSource\\Community-Website\\frontend\\src\\components\\header.js",[],{"ruleId":"33","replacedBy":"34"},{"ruleId":"35","replacedBy":"36"},"no-native-reassign",["37"],"no-negated-in-lhs",["38"],"no-global-assign","no-unsafe-negation"]

frontend/package.json

@@ -3,12 +3,14 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@material-ui/core": "^4.11.2",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-scripts": "4.0.1",
+    "reactstrap": "^8.7.1",
     "web-vitals": "^0.2.4"
   },
   "scripts": {

frontend/src/App.js

@@ -1,10 +1,13 @@
 // import logo from './logo.svg';
 import './App.css';
+import Footer from './components/footer';
+import Header from './components/header';
 
 function App() {
   return (
     <div className="App">
-      <h1>Community Website</h1>
+     <Header />
+     <Footer />
     </div>
   );
 }

frontend/src/Components/Footer.js

@@ -0,0 +1,11 @@
+import React from 'react'
+import './style/footer.css'
+function Footer() {
+    return (
+        <div className='footer'>
+           <h2> Made With ❤️ By HITK-TECH</h2>
+        </div>
+    )
+}
+
+export default Footer

frontend/src/Components/Header.js

@@ -0,0 +1,24 @@
+import React from 'react'
+import './style/header.css'
+// import { makeStyles } from '@material-ui/core/styles';
+// import Button from '@material-ui/core/Button';
+function Header() {
+    return (
+        <div >
+            <div className="topnav">
+                <a className="/" href="#home">Home</a>
+                <a href="/">News</a>
+                <a href="/">Contact</a>
+                <a href="/">About</a>
+                <div className='login'>
+                <a href="/">SingIn</a>
+                <a href="/">SingUp</a>
+
+                </div>
+            </div>
+
+        </div>
+    )
+}
+
+export default Header

frontend/src/Components/Style/Footer.css

@@ -0,0 +1,22 @@
+@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@500&family=Roboto&display=swap');
+
+.footer {
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  background-color: #6868cb;
+  color: white;
+  text-align: center;
+  height: 4vh;
+  display: flex;
+  justify-content: center;
+  font-family: 'Raleway', sans-serif;
+font-family: 'Roboto', sans-serif;
+
+}
+.footer h2 { 
+    margin: auto;
+    width: 50%;
+    font-size: 20px;
+}

frontend/src/Components/Style/Header.css

@@ -0,0 +1,29 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap');
+
+.topnav {
+    background-color:#6868cb;
+    overflow: hidden;
+    font-family: 'Roboto', sans-serif;
+    font-weight: 20;
+  }
+  .topnav a {
+    float: left;
+    color: #f2f2f2;
+    text-align: center;
+    padding: 14px 16px;
+    text-decoration: none;
+    font-size: 17px;
+  }
+
+  .topnav a:hover {
+    background-color: #ddd;
+    color: black;
+  }
+
+  .topnav a.active {
+    background-color: #4CAF50;
+    color: white;
+  }
+  .topnav .login {
+        float: right;
+  }