header and footer

src/Component/Footer.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import LogoFooter from '../assets/logowhite.png';
+
+function Footer() {
+  return (
+    <footer className="footer">
+      <div className="ft">
+        <div className="ft-col">
+          <img src={LogoFooter} alt="EduKolab white logo" />
+        </div>
+
+        <div className="ft-col">
+          <ul>
+            <li><a href="/">Courses</a></li>
+            <li><a href="/">Assessment</a></li>
+            <li><a href="/">Further Study</a></li>
+          </ul>
+        </div>
+
+        <div className="ft-col">
+          <ul>
+            <li><a href="/">About EduKolab</a></li>
+            <li><a href="/">The Team</a></li>
+            <li><a href="/">Contact Us</a></li>
+          </ul>
+        </div>
+      </div>
+      <div className="copyright">
+        <p className="copy">&copy; 2020 copyright EduKolab.</p>
+      </div>
+    </footer>
+  );
+}
+
+export default Footer;

src/Component/Header.js

@@ -0,0 +1,55 @@
+import React, { useState } from 'react';
+import Logo from '../assets/logo.png';
+
+function Header() {
+  const [showMenu, setShowMenu] = useState(false);
+
+  const menu = <React.Fragment>
+                <div className="menu">
+                  <ul>
+                    <li><a href="/">Courses</a></li>
+                    <li><a href="/">Assessment</a></li>
+                    <li><a href="/">Further Study</a></li>
+                    <li><a href="/">About EduKolab</a></li>
+                  </ul>
+                </div>
+
+                <div className="cta">
+                  <a href="/" className="cta-login">Login</a>
+                  <a href="/" className="cta-reg">Register</a>
+                </div>
+              </React.Fragment>;
+
+  return (
+    <React.Fragment>
+      <nav className="nav fixed-top">
+        <div className="nav-main">
+          <div className="logo">
+            <a href="/"><img src={Logo} alt="Edukolab logo" /></a>
+          </div>
+
+            { menu }
+
+            <div className="hambuger">
+              <span className="bar" onClick={() => setShowMenu(!showMenu)}></span>
+              <span className="bar" onClick={() => setShowMenu(!showMenu)}></span>
+            </div>
+        </div>
+      </nav>
+      {showMenu && <div className="mobile-menu">
+        <ul className="m-menu">
+          <li><a href="/">Courses</a></li>
+          <li><a href="/">Assessment</a></li>
+          <li><a href="/">Further Study</a></li>
+          <li><a href="/">About EduKolab</a></li>
+        </ul>
+        <div className="m-cta">
+          <a href="/" className="cta-login">Login</a>
+          <a href="/" className="cta-reg">Register</a>
+        </div>
+      </div>}
+    </React.Fragment>
+  );
+}
+
+export default Header;

src/app.css

@@ -0,0 +1,217 @@
+* {
+  padding: 0;
+  margin: 0;
+}
+
+.nav {
+  width: 100%;
+  height: 80px;
+  display: flex;
+  flex-direction: row;
+  background-color: #f1f1f1;
+}
+
+.nav-main {
+  display: flex;
+  width: 95%;
+  margin: 0 auto;
+}
+
+.logo {
+  width: 20%;
+}
+
+.logo img {
+  width: 85px;
+  height: auto;
+}
+
+.menu {
+  width: 55%;
+  display: inline-block;
+  text-align: center;
+}
+
+.menu ul li {
+  display: inline-block;
+  margin: 30px 15px;
+  vertical-align: middle;
+}
+
+.m-menu li a,
+.menu ul li a {
+  font-size: 15px;
+  color: #161940;
+  font-weight: 500;
+  text-transform: uppercase;
+}
+
+.cta {
+  width: 25%;
+  margin: auto 0;
+  text-align: right;
+}
+
+.cta-login {
+  background-color: #4b4d6c;
+  color: #fff;
+  font-weight: 600;
+  padding: 10px 20px;
+  margin: 10px;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.cta-reg {
+  background-color: #40447c;
+  color: #fff;
+  font-weight: 600;
+  padding: 10px 20px;
+  margin: 10px;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.cta-reg:hover,
+.cta-login:hover {
+  color: #fff;
+  box-shadow: 1px 2px 8px 4px rgba(164, 164, 208, 0.52);
+}
+
+.fixed-top {
+  position: sticky;
+  top: 0;
+  z-index: 99;
+}
+
+.footer {
+  background-color: #161940;
+  width: 100%;
+}
+
+.ft {
+  width: 90%;
+  margin: 0 auto;
+  padding: 50px 0;
+  display: flex;
+}
+
+.ft-col {
+  width: 33.33%;
+}
+
+.ft-col img {
+  width: 100px;
+}
+
+.ft-col ul {
+  margin: 0 30%;
+}
+
+.ft-col ul li {
+  margin: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.ft-col ul li a {
+  color: #fff;
+  line-height: 40px;
+  font-size: 15px;
+}
+
+.menu ul li a:hover {
+  border-bottom: 1px solid #161940;
+}
+
+.ft-col ul li a:hover {
+  color: #f1f1f1;
+}
+
+.copyright {
+  padding: 20px 0;
+  border-top: 2px dashed #fff;
+}
+
+.copy {
+  text-align: center;
+  color: #fff;
+  font-size: 13px;
+}
+
+@media only screen and (min-width: 900px) {
+  .hambuger {
+    display: none;
+  }
+}
+
+@media only screen and (max-width: 768px) {
+  .logo {
+    width: 50%;
+  }
+
+  .logo img {
+    width: 45%;
+  }
+
+  .menu,
+  .cta {
+    display: none;
+  }
+
+  .bar {
+    width: 100%;
+    display: block;
+    border: 1px solid #000;
+    text-align: right;
+    margin: 9px 0;
+  }
+
+  .hambuger {
+    width: 20px;
+    margin: auto 15px;
+  }
+
+  .nav-main {
+    justify-content: space-between;
+  }
+
+  .ft {
+    flex-direction: column;
+  }
+
+  .ft-col {
+    width: 100%;
+  }
+
+  .ft-col ul {
+    margin: 20px;
+  }
+
+  .copy {
+    text-align: left;
+    margin-left: 40px;
+  }
+
+  .mobile-menu {
+    display: block;
+    width: 100%;
+    height: 100vh;
+    position: fixed;
+    background-color: #fff;
+  }
+
+  .m-menu {
+    margin-top: 30px;
+    list-style-type: none;
+    line-height: 40px;
+    text-align: center;
+  }
+
+  .m-cta {
+    display: flex;
+    flex-direction: column;
+    margin: auto 30%;
+    text-align: center;
+  }
+}

src/app.js

@@ -1,7 +1,16 @@
-import React from 'react';
+import React, { Fragment } from 'react';
+import Header from './Component/Header.js';
+import Footer from './Component/Footer.js';
+import './app.css';
 
 function App() {
-  return <div className="App">Learn React</div>;
+  return (
+    <Fragment>
+      <Header />
+      <div className="App">Learn React</div>
+      <Footer />
+    </Fragment>
+  );
 }
 
 export default App;