add sections and footer

src/App.css

@@ -1,117 +0,0 @@
-html {
-  box-sizing: border-box;
-  font-family: 'Lato', sans-serif;
-}
-*,
-:before,
-:after {
-  box-sizing: inherit;
-}
-.container {
-  max-width: 1150px;
-  margin: 0 auto;
-}
-.btn {
-  margin: 0 auto;
-  border: solid 3px #fff;
-}
-.btn_header {
-      width: 280px;
-      height: 68px;
-      padding: 25px 0 30px 0;
-      margin-bottom: 41px;
-}
-.btn_header a {
-          text-decoration: none;
-          font-family: Lato;
-          font-size: 18px;
-          font-weight: bold;
-          font-stretch: normal;
-          font-style: normal;
-          line-height: 1.17;
-          letter-spacing: 0.45px;
-          text-align: center;
-          color: #fff;
-}
-
-.btn_log {
-      width: 80%;
-      height: 50px;
-      background-color:rgb(119, 22, 78); 
-      border:none;
-      color: #fff;
-}
-
-.header { 
-  min-height: 880px;
-  width: 100%;
-  padding: 31px 0 240px 0 ;
-  background: url(main_image.png) no-repeat 100% / cover; 
-}
-.header__top {
-      display: flex;
-      justify-content: space-between;
-      align-items:center;
-      margin-bottom: 292px;
-}
-.header__nav ul{
-      display: flex;
-      justify-content: space-between;
-      list-style: none;
-}
-.header__nav li{
-          padding-right: 30px;
-          text-transform: uppercase;
-}
-
-.header__link a {
-      text-decoration: none;
-      text-shadow: -0.9px 0.5px 40px rgba(1, 1, 1, 0.55);
-      font-family: Lato;
-      font-size: 14px;
-      font-stretch: normal;
-      font-style: normal;
-      line-height: 2.14;
-      letter-spacing: 0.7px;
-      text-align: left;
-      color: #fff;
-}
-.header__nav{
-      display: flex;
-      justify-content: space-evenly;
-      align-items:center;
-}
-.header__content {
-      text-align: center;
-}
-.header__content h1 {
-          text-shadow: -0.9px 0.5px 40px rgba(1, 1, 1, 0.55);
-          font-family: Lato;
-          font-size: 100px;
-          font-weight: bold;
-          font-stretch: normal;
-          font-style: normal;
-          letter-spacing: 5px;
-          color: #fff;
-          margin-bottom: 41px;
-}
-.header__content h2 {
-          text-shadow: -0.9px 0.5px 40px rgba(1, 1, 1, 0.55);
-          font-family: TimesNewRomanPS-MT;
-          font-size: 36px;
-          font-weight: bold;
-          font-stretch: normal;
-          font-style: italic;
-          letter-spacing: 1.8px;
-          color: rgba(255, 255, 255, 0.7);
-}
-.header__content h4 {
-          text-shadow: -0.9px 0.5px 40px rgba(1, 1, 1, 0.55);
-          font-family: Lato;
-          font-weight: normal;
-          font-stretch: normal;
-          font-style: normal;
-          letter-spacing: 0.7px;
-          color: #fff;
-          text-transform: uppercase;
-}

src/App.js

@@ -1,69 +0,0 @@
-//import React from 'react'; or 
-import {Component, StrictMode} from 'react';  //  destruct sintax
-import './App.css';
-import About from './About';
-
-//using another sintax class
-
-class Nav extends Component {
-    render() {
-        return  <nav class="header__nav"> 
-                    <ul>
-                        <li class="header__link login"><a href="#">LOG IN</a></li>
-                        <li class="header__link sign"><a href="#">SIGN UP</a></li>
-                    </ul> 
-                    <div class="hamburger">
-                        <span></span>
-                        <span></span>
-                        <span></span>
-                    </div>   
-                </nav> 
-        }   
-}
-
-//another sintx function 
-function Btn() {
-
-    const text = 'Log in';
-    const logged = true; //conditions
-
-    return <div class="btn btn_header">
-                <a href="#"> {logged?'GET STARTED': text}</a>
-           </div>
-}
-
-//another sintax const 
-let h2Text = 'Find your Favorite',
-    h1Text = 'RECIPES',
-    h4Text = 'OR SEND US YOUR OWN RECIPES AND GET REWARDED!';
-
-let Logo = () => <a href="#"><img src="logo.png" alt="Food"/></a>;
-
-const Header = () => {
-    return <header class="header">
-              <div class="container">
-                  <div class="header__top">
-                      <Logo/>
-                      <Nav/>
-                  </div>
-                  <div class="header__content">
-                      <h2>{h2Text}</h2>
-                      <h1>{h1Text}</h1>
-                      <Btn/>
-                      <h4>{h4Text}</h4>
-                  </div>
-              </div>
-          </header>
-}
-
-function App() {
-    return (
-      <div>
-          <StrictMode>
-              <Header/>
-              <About/>
-          </StrictMode>
-      </div>
-    );
-}
-export default App;

src/App.test.js

@@ -1,76 +0,0 @@
-//import React from 'react'; or 
-import {Component, StrictMode} from 'react';  //  destruct sintax
-import './App.css';
-
-//using another sintax class
-
-
-class Nav extends Component {
-    render() {
-        return  <nav class="header__nav"> 
-                    <ul>
-                        <li class="header__link login"><a href="#">LOG IN</a></li>
-                        <li class="header__link sign"><a href="#">SIGN UP</a></li>
-                    </ul> 
-                    <div class="hamburger">
-                        <span></span>
-                        <span></span>
-                        <span></span>
-                    </div>   
-                </nav> 
-        }   
-}
-
-//another sintx function 
-
-function Btn() {
-
-    const text = 'Log in';
-    const logged = true; //conditions
-
-    return <div class="btn btn_header">
-                <a href="#"> {logged?'GET STARTED': text}</a>
-           </div>
-}
-
-
-
-//another sintax const 
-let h2Text = 'Find your Favorite',
-    h1Text = 'RECIPES',
-    h4Text = 'OR SEND US YOUR OWN RECIPES AND GET REWARDED!';
-
-let Logo = () => <a href="#"><img src="logo.png" alt="Food"/></a>;
-
-
-
-
-const Header = () => {
-    return <header class="header">
-              <div class="container">
-                  <div class="header__top">
-                      <Logo/>
-                      <Nav/>
-                  </div>
-                  <div class="header__content">
-                      <h2>{h2Text}</h2>
-                      <h1>{h1Text}</h1>
-                      <Btn/>
-                      <h4>{h4Text}</h4>
-                  </div>
-              </div>
-          </header>
-}
-
-function App() {
-    return (
-      <div>
-          <StrictMode>
-              <Header/>
-          </StrictMode>
-      </div>
-    );
-}
-
-export default App;
-

src/About.js

@@ -1,5 +1,4 @@
-import './About.css';
-
+import'./About.css';
 
 
 const Aboutitem = ({textHeader = 'Title', textDescription = "description", imgLink = '#'}) => {
@@ -21,15 +20,15 @@ const About = () => {
                     
                    <Aboutitem textHeader = 'GET INSPIRED' textDescription = 'Lorem ipsum dolor sit amet, consectetur adipisc 
                         Pellentesque vel enim a elit viverra elementuma.
-                        Aliquam erat volutpat.' imgLink ='icons/donat.png'/>
+                        Aliquam erat volutpat.' imgLink ='../../icons/donat.png'/>
 
                     <Aboutitem textHeader = 'GET REWARDED' textDescription = 'Lorem ipsum dolor sit amet, consectetur adipisc 
                             Pellentesque vel enim a elit viverra elementuma.
-                             Aliquam erat volutpat.' imgLink ='icons/money.png'/>
+                             Aliquam erat volutpat.' imgLink ='../../icons/money.png'/>
 
                     <Aboutitem textHeader = 'GET SOCIAL' textDescription = 'Lorem ipsum dolor sit amet, consectetur adipisc 
                             Pellentesque vel enim a elit viverra elementuma.
-                             Aliquam erat volutpat.' imgLink ='icons/kok.png'/>
+                             Aliquam erat volutpat.' imgLink ='../../icons/kok.png'/>
 
                 </div>
             </div>

src/components/app/App.css

@@ -0,0 +1,16 @@
+html {
+  box-sizing: border-box;
+  font-family: 'Lato', sans-serif;
+}
+*,
+:before,
+:after {
+  box-sizing: inherit;
+}
+.container {
+  max-width: 1150px;
+  margin: 0 auto;
+  
+}
+
+

src/components/app/App.js

@@ -0,0 +1,23 @@
+//import React from 'react'; or 
+import {StrictMode} from 'react';  //  destruct sintax
+import Header from '../header/header';
+import About from '../about/About';
+import OurApps from '../our-apps/our-apps';
+import Footer from '../footer/footer';
+import './App.css';
+
+
+
+function App() {
+    return (
+      <div>
+          <StrictMode>
+              <Header/>
+              <About/>
+              <OurApps/>
+              <Footer/>
+          </StrictMode>
+      </div>
+    );
+}
+export default App;

src/components/footer/footer.css

@@ -0,0 +1,31 @@
+.footer {
+    min-height: 93px;
+    padding: 42px 0 38px 0;
+    background-color: #e7e1e1;
+}
+
+.footer__wrapper {
+    display: flex;
+    justify-content: space-between;
+}
+
+.footer__wrapper span {
+    display: block;
+    opacity: 0.5;
+    font-size: 14px;
+    font-weight: 300;
+    letter-spacing: normal;
+    text-align: left;
+    color: rgba(17, 15, 15, 0.781);
+}
+
+.footer__wrapper:last-child {
+    letter-spacing: 2px;
+}
+
+.footer__wrapper:last-child a {
+    text-decoration: none;
+    letter-spacing: 2px;
+    font-weight: 700;
+    color: #000;
+}

src/components/footer/footer.js

@@ -0,0 +1,17 @@
+import './footer.css';
+
+
+const Footer = (footerLinkText = 'WWW.MYSITE', footerLink = "#") => {
+    return <footer class="footer">
+                <div class="container">
+                    <div class="footer__wrapper">
+                        <span >©2014 Fudi. All Rights Reserved.</span>
+                        <span>DESIGN BY:<a href='footerLink'>footerLinkText</a></span>
+                    </div>
+                </div>
+            </footer>
+}
+
+export default Footer;
+
+

src/components/header/header.css

@@ -0,0 +1,114 @@
+.header {
+      min-height: 880px;
+      width: 100%;
+      padding: 31px 0 240px 0;
+      background: url(../../img/main_image.png) no-repeat 100% / cover;
+}
+
+.header__top {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 292px;
+}
+
+.header__nav ul {
+      display: flex;
+      justify-content: space-between;
+      list-style: none;
+}
+
+.header__nav li {
+      padding-right: 30px;
+      text-transform: uppercase;
+}
+
+.header__link a {
+      text-decoration: none;
+      text-shadow: -0.9px 0.5px 40px rgba(1, 1, 1, 0.55);
+      font-family: Lato;
+      font-size: 14px;
+      font-stretch: normal;
+      font-style: normal;
+      line-height: 2.14;
+      letter-spacing: 0.7px;
+      text-align: left;
+      color: #fff;
+}
+
+.header__nav {
+      display: flex;
+      justify-content: space-evenly;
+      align-items: center;
+}
+
+.header__content {
+      text-align: center;
+}
+
+.header__content h1 {
+      text-shadow: -0.9px 0.5px 40px rgba(1, 1, 1, 0.55);
+      font-family: Lato;
+      font-size: 100px;
+      font-weight: bold;
+      font-stretch: normal;
+      font-style: normal;
+      letter-spacing: 5px;
+      color: #fff;
+      margin-bottom: 41px;
+}
+
+.header__content h2 {
+      text-shadow: -0.9px 0.5px 40px rgba(1, 1, 1, 0.55);
+      font-family: TimesNewRomanPS-MT;
+      font-size: 36px;
+      font-weight: bold;
+      font-stretch: normal;
+      font-style: italic;
+      letter-spacing: 1.8px;
+      color: rgba(255, 255, 255, 0.7);
+}
+
+.header__content h4 {
+      text-shadow: -0.9px 0.5px 40px rgba(1, 1, 1, 0.55);
+      font-family: Lato;
+      font-weight: normal;
+      font-stretch: normal;
+      font-style: normal;
+      letter-spacing: 0.7px;
+      color: #fff;
+      text-transform: uppercase;
+}
+
+.btn {
+      margin: 0 auto;
+      border: solid 3px #fff;
+}
+
+.btn_header {
+      width: 280px;
+      height: 68px;
+      padding: 25px 0 30px 0;
+      margin-bottom: 41px;
+}
+
+.btn_header a {
+      text-decoration: none;
+      font-family: Lato;
+      font-size: 18px;
+      font-weight: bold;
+      font-stretch: normal;
+      font-style: normal;
+      line-height: 1.17;
+      letter-spacing: 0.45px;
+      text-align: center;
+      color: #fff;
+}
+
+.btn_log {
+      width: 80%;
+      height: 50px;
+      background-color: rgb(119, 22, 78);
+      border: none;
+      color: #fff;
+}

src/components/header/header.js

@@ -0,0 +1,38 @@
+import Nav from '../nav/nav';
+import './header.css'
+
+let Logo = () => <a href="#"><img src='logo.png' alt="Food"/></a>;
+
+
+let h2Text = 'Find your Favorite',
+    h1Text = 'RECIPES',
+    h4Text = 'OR SEND US YOUR OWN RECIPES AND GET REWARDED!';
+
+function Btn() {
+
+    const text = 'Log in';
+    const logged = true; //conditions
+
+    return <div class="btn btn_header">
+                <a href="#"> {logged?'GET STARTED': text}</a>
+            </div>
+}
+
+const Header = () => {
+    return <header class="header">
+              <div class="container">
+                  <div class="header__top">
+                      <Logo/>
+                      <Nav/>
+                  </div>
+                  <div class="header__content">
+                      <h2>{h2Text}</h2>
+                      <h1>{h1Text}</h1>
+                      <Btn/>
+                      <h4>{h4Text}</h4>
+                  </div>
+              </div>
+          </header>
+}
+
+export default Header;

src/components/nav/nav.js

@@ -0,0 +1,19 @@
+import {Component} from 'react';
+
+class Nav extends Component {
+    render() {
+        return  <nav class="header__nav"> 
+                    <ul>
+                        <li class="header__link login"><a href="#">LOG IN</a></li>
+                        <li class="header__link sign"><a href="#">SIGN UP</a></li>
+                    </ul> 
+                    <div class="hamburger">
+                        <span></span>
+                        <span></span>
+                        <span></span>
+                    </div>   
+                </nav> 
+        }   
+}
+
+export default Nav;

src/components/our-apps/our-apps.css

@@ -0,0 +1,46 @@
+.app {
+    
+    background-color: rgba(139, 139, 139, 0.5);
+    padding-top: 102px;
+}
+
+.app__wrapper {
+    display: flex;
+    justify-content: space-around;
+    max-height: 600px;
+    overflow: hidden;
+}
+
+.app__item {
+    margin-right: 115px;
+    text-align: left;
+    font-family: Lato;
+    font-size: 16px;
+    font-weight: 300;
+    line-height: 1.33;
+    letter-spacing: 0.8px;
+    text-align: left;
+    color: #8b8b8b;
+}
+
+.app h3 {
+    margin: 0;
+    font-family: Lato;
+    font-size: 18px;
+    font-weight: bold;
+    font-stretch: normal;
+    font-style: normal;
+    line-height: 1.67;
+    letter-spacing: 0.9px;
+    text-align: left;
+    color: #000;
+}
+
+.app p {
+    margin: 0;
+    margin-bottom: 29px;
+}
+
+.app a {
+    margin-right: 10px;
+}

src/components/our-apps/our-apps.js

@@ -0,0 +1,38 @@
+import './our-apps.css';
+
+const OurApps = () => {
+    return <div class="container">
+                <div class="app__wrapper">
+                    <div class="app__item">
+                        <img  src="img/iphone.png" alt="iphone"/>
+                    </div>
+                    <div class="app__item">
+                        <h3>INTRODUCING THE FUDI APP</h3>
+
+                        <div class="about__divider about__divider_app"></div>
+
+                        <p>Morbi eget posuere dolor. Pellentesque cursus aliquet aliquet. Aeneanet 
+                            felis sit amet diam mollis ullamcorper. Nullam consequat sem a ante vest
+                            ibulum tristique. Suspendisse tristique lacus ac mattis porta. 
+                        </p>
+                        <p>  Vivamus ligula quam, vehicula non lacinia sed, faucibus sit amet libero. In 
+                            libero dui, eleifend eu nisi id, egestas fringilla odio. In varius quam a mas
+                            sa hendrerit ullamcorper a eu justo. Suspendisse porta mattis convallis. 
+                            Aenean tempus ligula ac odio rhoncus, quis aliquam dolor accumsan. </p>
+                        <p>Suspendisse aliquet felis consectetur libero congue, sed pulvinar diam 
+                            malesuada. Duis vehicula a nibh id hendrerit. Donec sit amet ultrices 
+                            ante, a mattis massa.
+                        </p>
+
+                        <div class="app__icons">
+                            <a href="#"><img width="120" height="39" src="icons/appstore.png" alt="appstore"/></a>
+                            <a href="#">  <img width='120' height="39" src="icons/appstore1.png" alt="playmarket"/></a>
+                        </div>
+
+                    </div>
+
+                </div>
+            </div>
+}
+
+export default OurApps;

src/index.js

@@ -1,7 +1,7 @@
 import React, {StrictMode} from 'react';
 import ReactDOM from 'react-dom';
+import App from './components/app/App';
 import './index.css';
-import App from './App';
 
 //const elem = React.createElement('h2', {className: 'App-header'}, 'Hello world');