Meet The Team Files

2024/ellehacks2024/package.json

@@ -14,6 +14,12 @@
     "react": "^18.2.0",
     "react-bootstrap": "^2.9.1",
     "react-dom": "^18.2.0",
+<<<<<<< Updated upstream
+=======
+
+    "react-router-dom": "^6.21.3",
+
+>>>>>>> Stashed changes
     "react-scripts": "5.0.1",
     "styled-components": "^6.1.1",
     "web-vitals": "^2.1.4"

2024/ellehacks2024/src/App.css

@@ -1,5 +1,6 @@
 .App {
   text-align: center;
+  background-color: #853536;
 }
 
 .App-logo {
@@ -13,16 +14,16 @@
   }
 }
 
-.App-header {
-  background-color: #282c34;
+/* .App-header {
+  background-color: #853536;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   font-size: calc(10px + 2vmin);
   color: white;
-}
+} */
 
 .App-link {
   color: #61dafb;
@@ -36,3 +37,17 @@
     transform: rotate(360deg);
   }
 }
+
+/* NavBar{
+  background-color: #853536;
+  color: #FFF;
+text-align: center;
+font-family: Space Grotesk;
+font-size: 180px;
+font-style: normal;
+font-weight: 700;
+line-height: normal;
+} */
+body{
+  background-color: #853536;
+}

2024/ellehacks2024/src/App.js

@@ -1,24 +1,57 @@
-import logo from './logo.svg';
+<<<<<<< Updated upstream
+import './App.css'
+import Hello from './components/Hello.js';
+import Home from './components/Home.js';
+import NavBar from './components/NavBar.js';
+import AboutUs from './components/AboutUs.js';
+import JoinUS from './components/JoinUS.js';
+import MeetTheTeam from './components/MeetTheTeam.js';
+=======
+import React from 'react';
+
+import { HashRouter as Router } from 'react-router-dom';
+
 import './App.css';
+import NavBar from './components/NavBar';
+import Home from './components/Home';
+import AboutUs from './components/AboutUs';
+import JoinUS from './components/JoinUS';
+import FAQ from './components/FAQ';
+import MeetTheTeam from './components/MeetTheTeam'
+import MeetOurSponsors from './components/MeetOurSponsors'
+import Footer from './components/Footer';
+>>>>>>> Stashed changes
+import 'bootstrap/dist/css/bootstrap.min.css';
+;
 
 function App() {
   return (
+<<<<<<< Updated upstream
     <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>
+       <NavBar />
+       <Home />
+       <AboutUs/>
+       <MeetTheTeam/>
+       <JoinUS />;
+      <Hello />
     </div>
+
+
+
+=======
+    <Router>
+      <div className="App">
+        <NavBar />
+        <Home id="home" />
+        <AboutUs id="aboutus" />
+        <MeetTheTeam id="meettheteam" />
+        <JoinUS id="joinus" />
+        <FAQ id="faq" />
+        <MeetOurSponsors id="meetoursponsors" />
+        <Footer />
+      </div>
+    </Router>
+>>>>>>> Stashed changes
   );
 }
 

2024/ellehacks2024/src/components/AboutUs.js

@@ -0,0 +1,56 @@
+import React, { Component } from 'react';
+import Carousel from 'react-bootstrap/Carousel';
+import Image from 'react-bootstrap/Image';
+import img1 from '../assets/aboutUs/ElleHacks2024-01.jpg';
+import img2 from '../assets/aboutUs/ElleHacks2024-02.jpg';
+import img3 from '../assets/aboutUs/ElleHacks2024-03.jpg';
+import img4 from '../assets/aboutUs/ElleHacks2024-04.jpg';
+import img5 from '../assets/aboutUs/ElleHacks2024-05.jpg';
+import img6 from '../assets/aboutUs/ElleHacks2024-06.jpg';
+import img7 from '../assets/aboutUs/ElleHacks2024-07.jpg';
+
+class AboutUs extends Component {
+  render() {
+    return (
+      <div style={{ display: 'flex', flexDirection: 'row', flexWrap: 'wrap', marginBottom: '5vh'}}>
+        <div style={{ flex: 1, minWidth: 300 }}>
+          <Carousel>
+            <Carousel.Item>
+              <Image width={500} height={600} alt="First slide" src={img1} />
+            </Carousel.Item>
+            <Carousel.Item>
+              <Image width={500} height={600} alt="First slide" src={img2} />
+            </Carousel.Item>
+            <Carousel.Item>
+              <Image width={500} height={600} alt="First slide" src={img3} />
+            </Carousel.Item>
+            <Carousel.Item>
+              <Image width={500} height={600} alt="First slide" src={img4} />
+            </Carousel.Item>
+            <Carousel.Item>
+              <Image width={500} height={600} alt="First slide" src={img5} />
+            </Carousel.Item>
+            <Carousel.Item>
+              <Image width={500} height={600} alt="First slide" src={img6} />
+            </Carousel.Item>
+            <Carousel.Item>
+              <Image width={500} height={600} alt="First slide" src={img7} />
+            </Carousel.Item>
+          </Carousel>
+        </div>
+
+        <div style={{ color: 'white', padding: '20px', textAlign: 'left', flex: 1, maxWidth: '800px', alignContent: 'center' }}>
+          <h1 style={{ textAlign: 'center' }}>About Us</h1>
+          <br />
+          <h5 style={{ textAlign: 'center' }}>Girls who // CODE write the future</h5>
+          <br />
+          <p>ElleHacks is one of Canada's largest hackathons for women and gender-diverse students! </p>
+          <p>We're a free, student-run, and beginner-friendly competition where attendees pitch technical solutions to global issues, participate in fun workshops,
+            and network with recruiters and industry professionals.</p>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default AboutUs;

2024/ellehacks2024/src/components/Hello.js

@@ -0,0 +1,23 @@
+import React, {Component} from 'react';
+
+class Hello extends Component {
+render(){
+    return (
+      <div>
+        <h1>Hello World!AAAAAAAAAAAAAAAa</h1>
+        <h1>Hello World!AAAAAAAAAAAAAAAa</h1>
+        <h1>Hello World!AAAAAAAAAAAAAAAa</h1>
+        <h1>Hello World!AAAAAAAAAAAAAAAa</h1>
+        <h1>Hello World!AAAAAAAAAAAAAAAa</h1>
+        <h1>Hello World!AAAAAAAAAAAAAAAa</h1>
+        <h1>Hello World!AAAAAAAAAAAAAAAa</h1>
+        <h1>Hello World!AAAAAAAAAAAAAAAa</h1>
+        <h1>Hello World!AAAAAAAAAAAAAAAa</h1>
+        <h1>Hello World!AAAAAAAAAAAAAAAa</h1>
+        <h1>Hello World!AAAAAAAAAAAAAAAa</h1>
+
+      </div>
+    );
+  }
+}  
+  export default Hello;

2024/ellehacks2024/src/components/Home.js

@@ -0,0 +1,90 @@
+import React, { Component } from 'react';
+import Image from 'react-bootstrap/Image';
+import Button from 'react-bootstrap/Button';
+
+class Home extends Component {
+  render() {
+    const mainName = {
+      color: '#FFF',
+      fontSize: '5vw',
+      fontWeight: 700,
+      lineHeight: 'normal',
+    };
+
+    const mainNum = {
+      color: '#5E191A',
+      fontSize: '5vw',
+      fontWeight: 700,
+      lineHeight: 'normal',
+    };
+
+    const mainDateTime = {
+      color: '#FFF',
+      fontSize: '2vw',
+      fontWeight: 700,
+      lineHeight: 'normal',
+    };
+
+    const mainLocation = {
+      color: '#FFF',
+      fontSize: '2vw',
+      fontWeight: 700,
+      lineHeight: 'normal',
+    };
+
+    const apply = {
+      color: '#FFF',
+      backgroundColor: '#702122',
+      fontSize: '2vw',
+      fontWeight: 500,
+      lineHeight: 'normal',
+      textDecoration: 'none',
+      border: '1px',
+    };
+
+    const containerStyle = {
+        display: 'flex',
+        margin: '5vw auto', // Adjust the margin
+        justifyContent: 'space-evenly',
+        backgroundColor: '#853536',
+      };
+
+      const leftStyle = {
+        flex: '2',
+        textAlign: 'left',
+        marginLeft: '12vw', // Adjust the margin
+      };
+
+      const rightStyle = {
+        flex: '1',
+        textAlign: 'right',
+        marginRight: '12vw', // Adjust the margin
+      };
+
+    return (
+      <div id="Main-Name" style={containerStyle}>
+        <div id="Main-left" style={leftStyle}>
+          <h1 style={mainName}>
+            ElleHacks <span style={mainNum}>2024</span>
+          </h1>
+          <div style={mainDateTime} id="Main-Text">
+            <p style={mainDateTime}>Febuary 17-19, 2024 </p>
+            <p style={mainLocation}>York University, Toronto, ON </p>
+          </div>
+          <Button variant="link" style={apply}>Apply</Button>
+        </div>
+
+        <div id="Main-right" style={rightStyle}>
+          <Image
+            src={require('../assets/Simplification.png')}
+            alt="ElleHacks Logo"
+            fluid
+            style={{ maxHeight: '150vw', marginRight: '10px' }}
+          />
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Home;