diff --git a/.eslintrc.js b/.eslintrc.js index 126a392..18aaee8 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -23,7 +23,7 @@ module.exports = { 4 ], "linebreak-style": [ - "error", + "warn", "unix" ], "quotes": [ diff --git a/src/assets/HiBear.png b/src/assets/HiBear.png new file mode 100644 index 0000000..71ab020 Binary files /dev/null and b/src/assets/HiBear.png differ diff --git a/src/assets/education.png b/src/assets/education.png new file mode 100644 index 0000000..af29bce Binary files /dev/null and b/src/assets/education.png differ diff --git a/src/assets/outreach.png b/src/assets/outreach.png new file mode 100644 index 0000000..e2da836 Binary files /dev/null and b/src/assets/outreach.png differ diff --git a/src/assets/teams.jpeg b/src/assets/teams.jpeg new file mode 100644 index 0000000..c5c5d74 Binary files /dev/null and b/src/assets/teams.jpeg differ diff --git a/src/assets/teams.jpg b/src/assets/teams.jpg new file mode 100644 index 0000000..ef679e3 Binary files /dev/null and b/src/assets/teams.jpg differ diff --git a/src/assets/teams.png b/src/assets/teams.png new file mode 100644 index 0000000..dafd79b Binary files /dev/null and b/src/assets/teams.png differ diff --git a/src/pages/LandingPage/AboutSection/AboutSection.css b/src/pages/LandingPage/AboutSection/AboutSection.css new file mode 100644 index 0000000..fd33a4f --- /dev/null +++ b/src/pages/LandingPage/AboutSection/AboutSection.css @@ -0,0 +1,182 @@ +/* Button Models & Functionality */ + +.social-button { +background-color: white; +color: black; +width: 220px; +height: 50px; +border-radius:24px; +font-weight: bolder; +font-size: 18px; +cursor:pointer; +position:absolute; +top:728px; +left:28%; +z-index:1; +} + + +.partner-button { + background-color: white; + color: black; + width: 220px; + height: 50px; + border-radius:24px; + font-weight: bolder; + font-size: 18px; + cursor: pointer; + z-index:1; + position:relative; + top:168px; + left:69px; + } + +.team-button { + + background-color: white; + color: black; + width: 220px; + height: 50px; + border-radius:24px; + font-weight: bolder; + font-size: 18px; + cursor: pointer; + position:relative; + top:167px; + right:55px; + z-index:1; + + } + + .team-button:hover { + background-color: black; + transition: background-color 0.5s, color 0.15s; + color: white; + + } + + .partner-button:hover { + background-color: black; + transition: background-color 0.5s, color 0.15s; + color: white; + + } + + .social-button:hover { + background-color: black; + transition: background-color 0.5s, color 0.15s; + color: white; + + } + + /* Box Models */ + + + .outreach-box { + display: inline-block; + width: 270px; + height: 130px; + background:#20374A; + margin-right: 75px; + border-radius:20px; + position:relative; + top:200px; + right:846px; + } + + .member-box { + display: inline-block; + width: 270px; + height: 130px;; + background:#FAA436; + margin-right: 75px; + border-radius:20px; + position:relative; + top:51px; + left:801px; + + } + + .university-box { + display: inline-block; + width: 270px; + height: 130px; + background:#5EB7C3; + border-radius:20px; + position:relative; + top:51px; + left:800px; + } + +/* Text Models */ + + .outreach-TEXT{ + font-size:25px; + font-weight:bolder; + color:white; + position:relative; + left: 1200px; + top: -95px; + } + + .team{ + font-size:25px; + font-weight:bolder; + color:white; + position:relative; + bottom:155px; + left:830px; + } + + .universities{ + font-size:25px; + font-weight:bolder; + color:white; + position:relative; + top:-215px; + left:525px; + } + +/*Who Are we & Lorem Ipsum */ + + .lorem-ipsum{ + font-size:40px; + color:black; + font-weight: 550; + font-family: "Lato", sans-serif; + + } + + .who-are-we{ + font-size:64px; + color:black; + font-weight: 400; + font-family: "Lato", sans-serif; + } + + /* Images */ + + .outreach{ + position:relative; + top:60px; + left:225px; + } + + .education{ + position:relative; + top:90px; + left:525px; + } + + .bear{ + position:relative; + left:1200px; + bottom:100px; + } + + .teams{ + position:relative; + top:120px; + left:390px; + + } \ No newline at end of file diff --git a/src/pages/LandingPage/AboutSection/AboutSection.jsx b/src/pages/LandingPage/AboutSection/AboutSection.jsx index 01fa357..454e23c 100644 --- a/src/pages/LandingPage/AboutSection/AboutSection.jsx +++ b/src/pages/LandingPage/AboutSection/AboutSection.jsx @@ -1,5 +1,39 @@ -import React from 'react'; +import React from "react"; +import HiBear from "@assets/HiBear.png"; +import outreach from "@assets/outreach.png"; +import teams from "@assets/teams.jpg"; +import education from "@assets/education.png"; +import "./AboutSection.css"; + export const AboutSection = () => { - return

about

; -}; + + + return ( +
+ +

Who Are We?

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. In id dolor ut nisi ullacorper ultricies. Suspendisse finibus metus eros, a eleifend nulla + + + + + + + + + + +
+
+
+ +

7.5k Outreach

+

39 Team Members

+

15 Universities

+ + +
+ ); + +}; \ No newline at end of file