feat: added a universal footer nav (#34864)

client/src/components/Footer/footer.css

@@ -0,0 +1,14 @@
+footer{
+  position: absolute;
+  background-color: #E0E0E0;
+  color:#555555;
+  background-size: cover;
+  font-size: .9em;
+  width:100%;
+  margin-top: 5px;
+  padding-top: 40px;
+}
+
+footer b {
+  padding-bottom: 5px;
+}

client/src/components/Footer/index.js

@@ -0,0 +1,69 @@
+/* eslint-disable max-len*/
+import React from 'react';
+import './footer.css';
+
+function Footer() {
+  return (
+    <footer className='pt-5 pb-4 footer' id='contact'>
+      <div className='container'>
+        <div className='row'>
+          <div className='col-lg-5 col-md-6 col-sm-6  '>
+            <p>
+              freeCodeCamp is a donor-supported tax-exempt 501(c)(3) nonprofit
+              organization (United States Federal Tax Identification Number:
+              82-0779546)
+            </p>
+            <p>
+              Our mission: to help people learn to code for free. We accomplish
+              this by creating thousands of videos, articles, and interactive
+              coding lessons - all freely available to the public. We also have
+              thousands of freeCodeCamp study groups around the world.
+            </p><p>
+              Donations to freeCodeCamp go toward our education initiatives, and
+              help pay for servers, services, and staff. You can&nbsp;
+              <a className='underline  white' href='https://donate.freecodecamp.org'>make a tax-deductible donation here</a>.
+            </p>
+          </div>
+           <div className='col-lg-2 col-md-2 col-sm-2 col-xs-6'>
+             <div className='row'>
+              <b className='paddingLow  font-weight-bold col-xs-12'>Our Nonprofit</b>
+              <a className=' col-xs-12' href='https://about.freecodecamp.org'>About </a>
+              <a className=' col-xs-12' href='https://donate.freecodecamp.org'>Donate</a>
+              <a className=' col-xs-12' href='https://shop.freecodecamp.org'>Shop</a>
+              <a className=' col-xs-12' href='https://sponsors.freecodecamp.org'>Sponsors</a>
+              <a className=' col-xs-12' href='mailto:team@freecodecamp.org'>Contact email</a>
+            </div>
+           </div>
+           <div className='col-lg-2 col-md-2 col-sm-2 col-xs-6'>
+             <div className='row'>
+              <b className='paddingLow  font-weight-bold col-xs-12'>Our Community</b>
+              <a className=' col-xs-12' href='https://www.linkedin.com/school/free-code-camp/people/'>Alumni Network </a>
+              <a className=' col-xs-12' href='https://study-group-directory.freecodecamp.org'>Study Groups </a>
+              <a className=' col-xs-12' href='https://www.freecodecamp.org/forum'>Forum </a>
+              <a className=' col-xs-12' href='https://gitter.im/FreeCodeCamp/home'>Gitter </a>
+              <a className=' col-xs-12' href='https://github.com/freeCodeCamp/'>GitHub</a>
+              <a className=' col-xs-12' href='https://support.freecodecamp.org'>Support </a>
+              <a className=' col-xs-12' href='https://code-of-conduct.freecodecamp.org'>Code of Conduct </a>
+              <a className=' col-xs-12' href='https://privacy.freecodecamp.org'>Privacy Policy</a>
+              <a className=' col-xs-12' href='https://terms-of-service.freecodecamp.org'>Terms of Service </a>
+             </div>
+           </div>
+           <div className='col-lg-3 col-md-2 col-sm-2 col-xs-12'>
+             <div className='row'>
+              <b className='paddingLow  font-weight-bold col-xs-12'>Our Learning Resources</b>
+              <a className=' col-xs-12' href='https://learn.freecodecamp.org'>Curriculum </a>
+              <a className=' col-xs-12' href='https://guide.freecodecamp.org'>Guide </a>
+              <a className=' col-xs-12' href='https://www.youtube.com/freecodecamp'>Youtube </a>
+              <a className=' col-xs-12' href='https://podcast.freecodecamp.org'>Podcast </a>
+              <a className=' col-xs-12' href='https://twitter.com/freecodecamp'>Twitter </a>
+              <a className=' col-xs-12' href='https://medium.freecodecamp.org'>Medium </a>
+              <a className=' col-xs-12' href='https://instagram.com/freecodecamp'>Instagram </a>
+            </div>
+           </div>
+        </div>
+      </div>
+    </footer>
+  );
+}
+
+export default Footer;

client/src/components/layouts/Default.js

@@ -19,6 +19,7 @@ import { isBrowser } from '../../../utils';
 import OfflineWarning from '../OfflineWarning';
 import Flash from '../Flash';
 import Header from '../Header';
+import Footer from '../Footer';
 
 import './global.css';
 import './layout.css';
@@ -156,6 +157,7 @@ class DefaultLayout extends Component {
           ) : null}
           {children}
         </div>
+        <Footer/>
       </Fragment>
     );
   }

client/src/components/layouts/global.css

@@ -27,4 +27,4 @@ h6 {
 .btn-invert {
   background-color: #fff;
   color: #006400;
-}
+}

client/src/pages/learn.css

@@ -18,11 +18,7 @@
 }
 
 #learn-app-wrapper {
-  margin: 0 2em;
+  overflow-x:hidden;
-  position: absolute;
-  width: 100%;
-  right: -1.4em;
-  padding: 5px 10px 5px 10px;
 }
 
 @media screen, (max-width: 767px) {
@@ -33,6 +29,5 @@
 }
 
 .reflex-layout.reflex-container.vertical {
-  width: 100%;
   margin: 0 18px;
 }