Create About Section

.eslintrc.js

@@ -23,7 +23,7 @@ module.exports = {
             4
         ],
         "linebreak-style": [
-            "error",
+            "warn",
             "unix"
         ],
         "quotes": [

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;
+
+    }

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 <p>about</p>;
-};
+
+
+    return (
+        <div>
+
+            <h1 className="who-are-we">Who Are We?</h1>
+            <body className="lorem-ipsum">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In id dolor ut nisi ullacorper ultricies. Suspendisse finibus metus eros, a eleifend nulla</body>
+            <img className="bear" src ={HiBear} height={348} width={314}/>
+
+            <img className="outreach" src ={outreach} height={157} width={153}/>
+            <img className="teams" src ={teams} height={240} width={165}/>
+            <img className="education" src ={education} height={200} width={250}/>
+
+            <button className="social-button">CHECK OUR SOCIALS</button>
+            <button className="team-button">MEET THE TEAM</button>
+            <button className="partner-button">PARTNER PROGRAM</button>
+
+            <div className="outreach-box" />
+            <div className="member-box" />
+            <div className="university-box" />
+
+            <p className="outreach-TEXT">7.5k Outreach</p>
+            <p className="team">39 Team Members</p>
+            <p className="universities">15 Universities</p>
+
+
+        </div>
+    );
+
+};