CodeFlowOrg · CyberGhost2023 · Oct 28, 2021 · Oct 28, 2021 · Oct 28, 2021 · Oct 28, 2021
diff --git a/public/index.html b/public/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-
+    <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
     <link rel="icon" href="%PUBLIC_URL%/logo.png" />
     <link rel="stylesheet" type ="text/css" href="index.css">
     <meta name="viewport" content="width=device-width, initial-scale=1" />

diff --git a/src/components/layout/Footer.js b/src/components/layout/Footer.js
@@ -1,69 +1,51 @@
-import logo from "../../assets/logo.png";
-import img from "../../assets/Qr-code.png";
 import { Link } from "react-router-dom";
 import "../styles/footer.css";
 
 const Footer = () => {
   return (
-    <div className="footer-styling">
-      <footer>
-        <div className="container">
-          <div className="footer-logo">
-            <Link to="/">
-              <img src={logo} alt="Codeflow logo" width="100" />
-            </Link>
-            <div className="footer-logo-text">
-              <h2>Codeflow</h2>
-              <p>Learning must go on!</p>
-            </div>
-          </div>
-          <div className="footer-link-group">
-          <h3>Quick Links</h3>
-            <Link to="/">Home</Link>
-            <Link to="/events">Events</Link>
-            <Link to="/hackathon">Hackathons</Link>
-            <Link to="/">Open Source</Link>
-            <Link to="/">Collaborations</Link>
-          </div>
-          <div className="footer-link-group social-media-links">
-            <h3>Social Media Links</h3>
-            <a
-              href="https://www.facebook.com/"
-              target="_blank"
-              rel="noreferrer">
-              Facebook
-            </a>
-            <a href="https://www.twitter.com/" target="_blank" rel="noreferrer">
-              Twitter
-            </a>
-            <a
-              href="https://www.instagram.com/"
-              target="_blank"
-              rel="noreferrer">
-              Instagram
-            </a>
-          </div>
-          <div className="footer-link-group other-links">
-            <h3>Other Links</h3>
-            <a href="https://www.github.com/codeflow201" target="_blank" rel="noreferrer">
-              Github
-            </a>
-            <a
-              href="https://www.linkedin.com/"
-              target="_blank"
-              rel="noreferrer">
-              LinkedIn
-            </a>
-            <a href="mailto:codefloworg@gmail.com" target="_blank" rel="noreferrer">
-              Email Us
-            </a>
-          </div>
-          <div>
-          <img src={img} width="200px" height="200px" />
-          </div>
-        </div>
-      </footer>
+    <footer class="footer">    
+  <div class="footer-left col-md-4 col-sm-6">
+    <p class="about">
+      <h1> About the company</h1> Ut congue augue non tellus bibendum, in varius tellus condimentum. In scelerisque nibh tortor, sed rhoncus odio condimentum in. Sed sed est ut sapien ultrices eleifend. Integer tellus est, vehicula eu lectus tincidunt,
+      ultricies feugiat leo. Suspendisse tellus elit, pharetra in hendrerit ut, aliquam quis augue. Nam ut nibh mollis, tristique ante sed, viverra massa.
+    </p>
+    <div class="icons">
+      <a href="https://www.facebook.com/"><i class="icon-facebook"></i></a>
+      <a href="https://www.twitter.com/"><i class="icon-twitter"></i></a>
+      <a href="https://www.linkedin.com/"><i class="icon-linkedin"></i></a>
+      <a href="https://www.github.com/"><i class="icon-github"></i></a>
+      <a href="https://www.instagram.com/"><i class="icon-instagram"></i></a>
     </div>
+  </div>
+
+  <div class="footer-center col-md-4 col-sm-6">
+
+    <div>
+      <i class="icon-map-marker"></i>
+      <p><span> Street name and number</span> City, Country</p>
+    </div>
+    <div>
+      <i class="icon-phone"></i>
+      <p> (+00) 0000 000 000</p>
+    </div>
+    <div>
+      <i class="icon-envelope"></i>
+      <p> Codeflow@company.com</p>
+    </div>
+  </div>
+  <div class="footer-right col-md-4 col-sm-6">
+
+    <p class="menu">
+    <Link to="/"> Home</Link> <br></br> 
+    <Link to="/events"> Events</Link> <br></br>
+    <Link to="/Hackathons"> Hackathons</Link> <br></br>
+    <Link to="/"> Open Source</Link> <br></br>
+    <Link to="/"> Collaborations</Link> <br></br>
+    <Link to="/"> Terms and Conditions</Link> 
+    </p>
+    <p class="name"> Codeflow &copy; 2021</p>
+  </div>
+</footer>
   );
 };
 

diff --git a/src/components/pages/Hackathon.js b/src/components/pages/Hackathon.js
@@ -1,5 +1,4 @@
 import React, { useState } from "react";
-import Customnav from "../layout/customnavbar";
 import "../styles/hackathon.css";
 import img1 from "../../assets/img1.png";
 import HackCard from "../utilities/HackCard";
@@ -50,6 +49,7 @@ function Hackathon() {
               } else if (item.cat === option) {
                 return item;
               }
+              return null;
             }).map((item) => {
               return (
                 <HackCard

diff --git a/src/components/styles/footer.css b/src/components/styles/footer.css
@@ -1,112 +1,163 @@
-.footer-styling a {
-  color: #000 !important;
+.footer {
+  background-color: #414141;
+  width: 100%;
+  text-align: left;
+  font-family: sans-serif;
+  font-weight: bold;
+  font-size: 16px;
+  padding: 50px;
+  margin-top: 50px;
 }
-.footer-styling a:hover {
-  color: #000;
+
+.footer .footer-left,
+.footer .footer-center,
+.footer .footer-right {
+  display: inline-block;
+  vertical-align: top;
 }
-footer {
-  background-color: #edfbfb;
-  padding: 1rem;
+
+
+/* footer left*/
+
+.footer .footer-left {
+  width: 33%;
+  padding-right: 15px;
 }
-footer h3 {
-  font-size: 1rem;
-  text-decoration: underline;
+
+.footer .about {
+  line-height: 20px;
+  color: #ffffff;
+  font-size: 13px;
   font-weight: normal;
+  margin: 0;
 }
-footer .container {
-  display: flex;
-  justify-content: space-around;
-  max-width: 70%;
+
+.footer .about span {
+  display: block;
+  color: #ffffff;
+  font-size: 14px;
+  font-weight: bold;
+  margin-bottom: 20px;
 }
-.footer-link-group {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
+
+.footer .icons {
+  margin-top: 25px;
 }
-.footer-link-group a{
-  margin: 3px;
+
+.footer .icons a {
+  display: inline-block;
+  width: 35px;
+  height: 35px;
+  cursor: pointer;
+  background-color: #33383b;
+  border-radius: 2px;
+  font-size: 20px;
+  color: #ffffff;
+  text-align: center;
+  line-height: 35px;
+  margin-right: 3px;
+  margin-bottom: 5px;
 }
-.footer-link-group a:last-child {
-  border-radius: 5px;
-  padding: 0 5px;
-  border : 1px solid black;
+
+
+/* footer center*/
+
+.footer .footer-center {
+  width: 30%;
+}
+
+.footer .footer-center i {
+  background-color: #33383b;
+  color: #ffffff;
+  font-size: 25px;
+  width: 38px;
+  height: 38px;
+  border-radius: 50%;
+  text-align: center;
+  line-height: 42px;
+  margin: 10px 15px;
+  vertical-align: middle;
 }
-.footer-logo {
-  display: flex;
-  justify-content: center;
-  align-items: center;
+
+.footer .footer-center i.fa-envelope {
+  font-size: 17px;
+  line-height: 38px;
 }
-.footer-logo h2 {
+
+.footer .footer-center p {
+  display: inline-block;
+  color: #ffffff;
+  vertical-align: middle;
   margin: 0;
 }
-.footer-logo-text {
-  margin-left: 0.5rem;
+
+.footer .footer-center p span {
+  display: block;
+  font-weight: normal;
+  font-size: 14px;
+  line-height: 2;
 }
-@media screen and (max-width: 1200px) {
-  footer .container {
-    max-width: 85%;
-  }
+
+.footer .footer-center p a {
+  color: #0099ff;
+  text-decoration: none;
 }
 
-@media screen and (max-width: 992px) {
-  footer .container {
-    max-width: 95%;
-  }
+
+/* footer right*/
+
+.footer .footer-right {
+  width: 35%;
 }
-@media screen and (max-width: 768px) {
-  footer .container {
-    flex-wrap: wrap;
-  }
-  .footer-logo {
-    width: 100%;
-    margin-bottom: 1rem;
-  }
+
+.footer h2 {
+  color: #ffffff;
+  font-size: 36px;
+  font-weight: normal;
+  margin: 0;
 }
-@media screen and (max-width: 576px) {
-  footer .container {
-    flex-wrap: nowrap;
-    flex-direction: column;
-    align-items: center;
-  }
-  .footer-link-group {
-    margin: 0.5rem auto;
-    align-items: center;
-  }
+
+.footer h2 span {
+  color: #0099ff;
 }
 
-.footer-link-group a {
-  position: relative;
-  color: #000;
-  text-decoration: none;
+.footer .menu {
+  color: #ffffff;
+  margin: 20px 0 12px;
+  padding: 0;
 }
 
-.footer-link-group a:hover {
-  color: #000;
+.footer .menu a {
+  display: inline-block;
+  line-height: 1.8;
   text-decoration: none;
+  color: inherit;
 }
 
-.footer-link-group a::before {
-  content: "";
-  position: absolute;
-  display: block;
-  width: 100%;
-  height: 1.75px;
-  bottom: 0;
-  left: 0;
-  background-color: #000;
-  transform: scaleX(0);
-  transition: transform 0.3s ease;
+.footer .menu a:hover {
+  color: #0099ff;
 }
 
-.footer-link-group a:hover::before {
-  transform: scaleX(1);
+.footer .name {
+  color: #0099ff;
+  font-size: 14px;
+  font-weight: normal;
+  margin: 0;
 }
 
-.social-media-links > h3,
-.other-links > h3 ,.footer-link-group > h3 {
-  background-color: var(--dark);
-  color: #edfbfb !important;
-  border-radius: 5px;
-  padding: 0 5px;
-  text-decoration: none;
+@media (max-width: 767px) {
+  .footer {
+    font-size: 14px;
+  }
+  .footer .footer-left,
+  .footer .footer-center,
+  .footer .footer-right {
+    display: block;
+    width: 100%;
+    margin-bottom: 40px;
+    text-align: center;
+  }
+  .footer .footer-center i {
+    margin-left: 0;
+  }
 }