footer implemented

2024/ellehacks2024/src/App.js

@@ -1,25 +1,20 @@
 import logo from './logo.svg';
 import './App.css';
-
+import Footer from "./component/Footer.js";
 function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
+    return (
+        <div>
+            <div
+                style={{
+                    minHeight: "400px",
+                    color: "green",
+                }}
+            >
+                <h1></h1>
+            </div>
+            <Footer />;
+        </div>
+    );
 }
 
 export default App;

2024/ellehacks2024/src/component/Footer.js

@@ -0,0 +1,117 @@
+import React from "react";
+import Red from "../images/Red.png";
+import facebook from "../images/socials/facebook.png";
+import icRoundEmail from "../images/socials/ic_round-email.png";
+import logostiktokicon from "../images/socials/logos_tiktok-icon.png";
+import linkedin from "../images/socials/linkedin.png";
+import twitter from "../images/socials/twitter.png";
+import instagram from "../images/socials/instagram.png";
+
+
+import {
+  Box,
+  FooterContainer,
+  Row,
+  Column,
+  FooterLink,
+  SocialIconsContainer,
+  ContactSection,
+  ContactLink,
+  Logo,
+  ColumnSocial,
+  RowSocial,
+} from "./FooterStyles";
+
+const Footer = () => {
+	return (
+		<Box>
+
+
+			<FooterContainer>
+
+
+				<Row>
+				{/* Logo */}
+                    < Logo img src={Red} alt="Logo" />
+
+					<Column>
+						<FooterLink href="#">
+							Home
+						</FooterLink>
+						<FooterLink href="#">
+							About
+						</FooterLink>
+						<FooterLink href="#">
+							Register
+						</FooterLink>
+					</Column>
+
+					<Column>
+						<FooterLink href="#">
+							Sponsors
+						</FooterLink>
+						<FooterLink href="#">
+							FAQ
+						</FooterLink>
+						<FooterLink href="#">
+							Contact
+						</FooterLink>
+
+					</Column>
+
+
+					<ColumnSocial>
+
+                    <RowSocial>
+					 {/* Social media icons directly in Footer.js */}
+					 <SocialIconsContainer>
+                              <div id="contact-socials" className="socials">
+                                <a href="mailto::info@ellehacks.com">
+                                  <img className="social-icons" src={icRoundEmail} alt="email" />
+                                </a>
+                                <a href="https://www.instagram.com/ellehacks/">
+                                  <img className="social-icons" src={instagram} alt="instagram" />
+                                </a>
+                                <a href="https://www.tiktok.com/@ellehacks">
+                                  <img className="social-icons" src={logostiktokicon} alt="tiktok" />
+                                </a>
+                                <a href="https://www.linkedin.com/company/ellehacks/">
+                                  <img className="social-icons" src={linkedin} alt="linkedin" />
+                                </a>
+                                <a href="https://twitter.com/ellehacks">
+                                  <img className="social-icons" src={twitter} alt="twitter" />
+                                </a>
+                                <a href="https://www.facebook.com/ellehacks/">
+                                  <img className="social-icons" src={facebook} alt="facebook" />
+                                </a>
+                              </div>
+                     </SocialIconsContainer>
+                     </RowSocial>
+
+                            <RowSocial>
+                     {/* Contact section */}
+                               <ContactSection>
+                                 <div className="container-fluid" id="contact-us">
+                                   <p>
+                                     Questions? Contact us at{" "}
+                                     <ContactLink href="mailto:info@ellehacks.com">info@ellehacks.com</ContactLink>
+                                   </p>
+                                 </div>
+                               </ContactSection>
+
+
+                           </RowSocial>
+
+                     </ColumnSocial>
+
+
+
+
+				</Row>
+
+			</FooterContainer>
+		</Box>
+
+	);
+};
+export default Footer;

2024/ellehacks2024/src/component/FooterStyles.js

@@ -0,0 +1,130 @@
+
+import styled from "styled-components";
+import background_footer from "../images/background_footer.png";
+
+export const Logo = styled.img`
+  max-width: 100px; /* Adjust the max width as needed */
+  margin-right: 20px; /* Adjust the margin as needed for spacing */
+`;
+
+export const Box = styled.div`
+  padding: 10% 2.5%;
+  background: #712323;
+  bottom: 0;
+  width: 95%;
+
+  background-image: url(${background_footer}),
+
+  height: 100vh,
+  marginTop: -70px,
+  fontSize: 50px,
+  backgroundSize: cover,
+  backgroundRepeat: no-repeat,
+
+  @media (max-width: 1000px) {
+    // padding: 70px 30px;
+  }
+`;
+
+export const FooterContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  max-width: 1200px;
+  margin: 0 auto;
+
+`;
+
+export const Column = styled.div`
+  display: flex;
+  flex-direction: column;
+  text-align: left;
+  margin-left: 6px;
+
+`;
+
+export const ColumnSocial = styled.div`
+  display: flex;
+  flex-direction: column;
+  text-align: left;
+  margin-left: 200px;
+
+`;
+
+export const Row = styled.div`
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
+  grid-gap: 20px;
+
+  @media (max-width: 1000px) {
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  }
+`;
+
+export const RowSocial = styled.div`
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
+  grid-gap: 20px;
+
+  @media (max-width: 1000px) {
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  }
+`;
+
+export const FooterLink = styled.a`
+  color: #fff;
+  margin-bottom: 20px;
+  font-size: 20px;
+  text-decoration: none;
+  font-weight: bold;
+
+  &:hover {
+    color: #ffce82;
+    transition: 200ms ease-in;
+  }
+`;
+
+export const SocialIconsContainer = styled.div`
+  display: flex; /* Updated to flex */
+  justify-content: flex-end; /* Added flex-end for right alignment */
+  align-items: center; /* Added align-items for vertical centering */
+
+  .socials {
+    /* Add styles for the social icons container */
+    display: flex; /* Updated to flex */
+    gap: 20px; /* Added gap for spacing between icons */
+  }
+
+`;
+
+export const ContactSection = styled.div`
+  .container-fluid {
+      padding: 2px; /* Add padding for the contact section */
+      border-radius: 10px; /* Add border-radius for rounded corners */
+      display: bottom;
+     flex-direction: column;
+    }
+
+    p {
+      color: #fff;
+      font-size: 16px;
+      margin: 0;
+        font-weight: bold;
+        margin-bottom: auto;
+
+    }
+  `;
+
+export const ContactLink = styled.a`
+  color: #fff;
+  text-decoration: underline;
+
+
+  &:hover {
+    color: #ffce82;
+    transition: 200ms ease-in;
+
+  }
+`;
+
+