Added some css and fixed some alignment.

src/agent-page/AgentPage.js

@@ -8,32 +8,36 @@ import Agent3 from "../images/Agent3.jpg";
 import Agent4 from "../images/Agent4.jpg";
 import Agent5 from "../images/Agent5.jpg";
 import Agent6 from "../images/Agent6.jpg";
- class AgentPage extends Component {
+class AgentPage extends Component {
-   state={
+  state = {
     agents: [
 
-      {title:'head sales assistant',name: 'Michael', src: Agent1,word:'Michael has a genuine passion for helping others and for giving back to the community.',id:1},
+      { title: 'head sales assistant', name: 'Michael', src: Agent1, word: 'Michael has a genuine passion for helping others and for giving back to the community.', id: 1 },
-       {title:'sales assistant',name: 'Jin', src: Agent2,word:'I have a passion for assisting clients with various real estate needs.',id:2},
+      { title: 'sales assistant', name: 'Jin', src: Agent2, word: 'I have a passion for assisting clients with various real estate needs.', id: 2 },
-       {title:'sales assistant',name: 'Anita', src: Agent3,word:'Anita looks forward to servicing you to her fullest potential, building long-lasting relationships and making your real estate experience a smooth and memorable one.',id:3},
+      { title: 'sales assistant', name: 'Anita', src: Agent3, word: 'Anita looks forward to servicing you to her fullest potential, building long-lasting relationships and making your real estate experience a smooth and memorable one.', id: 3 },
-       {title:'sales assistant',name: 'Alex', src: Agent4,word:'Since getting licensed in 2010 Alex has consistently been a top producing agent in the GTA',id:4},
+      { title: 'sales assistant', name: 'Alex', src: Agent4, word: 'Since getting licensed in 2010 Alex has consistently been a top producing agent in the GTA', id: 4 },
-       {title:'sales assistant',name: 'Xuan', src: Agent5,word:'Xuan grew up in the GTA, and he explored many different neighborhoods in and surrounding Toronto. ',id:5},
+      { title: 'sales assistant', name: 'Xuan', src: Agent5, word: 'Xuan grew up in the GTA, and he explored many different neighborhoods in and surrounding Toronto. ', id: 5 },
-       {title:'sales assistant',name: 'Walter', src: Agent6,word:'Walter Henry has always been one to follow his passion. At 13 years old, he started his career as a competitive gymnast.Walter will be certain that you feel informed and at ease throughout the entire process.',id:6},
+      { title: 'sales assistant', name: 'Walter', src: Agent6, word: 'Walter Henry has always been one to follow his passion. At 13 years old, he started his career as a competitive gymnast.Walter will be certain that you feel informed and at ease throughout the entire process.', id: 6 },
 
 
     ]
   }
-    render(){
+  render() {
-      return(
+    return (
-          <div className="container">
+      <div>
         <div className="center  blue-text text-darken-4">
-                  <h1>Meet the team</h1>
+          <h1 style={{ fontFamily: "Georgia"  }} >Meet the Team</h1>
         </div>
 
+        <div className="container">
           <Agents agents={this.state.agents} /> 
         </div>
+
+
+      </div>
     )
   }
-  displayAgents= (agent) => {
+  displayAgents = (agent) => {
     console.log(agent);
   }
 

src/agent-page/Agents.js

@@ -9,8 +9,8 @@ const Agents = ({ agents }) => {
     return (
       <div className="agent" key={agent.id}>
         {}
-            <Card style={{ width: "18rem" }}>
+            <Card style={{ width: "22rem", height: "40rem"  }}>
-              <Card.Img variant="top" src={agent.src} />
+              <Card.Img variant="top" style={{ height: "22rem" }} src={agent.src} />
               <Card.Body>
                 <Card.Title>{agent.title}</Card.Title>
                 <Card.Text>{agent.name}</Card.Text>

src/agent-page/agent-page.css

@@ -12,8 +12,12 @@
   }
   .center{
     height: 25vh; /* Magic here */
-    background-color: yellow;
+    background-color: #ffe609;
     display: flex;
     justify-content: center;
     align-items: center;
   }
+
+  .agent{
+    padding-left: 16%;
+  }

src/homePage/homePage.css

@@ -14,6 +14,13 @@
     font-family: "Georgia";
 }
 
+#features .container-fluid {
+    padding: 2% 48% 2%;
+    text-align: left;
+    font-family: "Georgia";
+}
+
+
 .housesIntro{
     padding: 4% 5%;
 }

src/listings-page/ListingsPage.js

@@ -5,12 +5,12 @@ import {
   withGoogleMap,
   Marker,
   InfoWindow
- } from "react-google-maps";
+} from "react-google-maps";
- import * as listingData from "./data/property-data.json";
+import * as listingData from "./data/property-data.json";
- import mapStyles from "./mapStyles";
+import mapStyles from "./mapStyles";
- import "./ListingsPage.css";
+import "./ListingsPage.css";
 
-function Map(){
+function Map() {
 
   const [selectedProperty, setSelectedProperty] = useState(null);
 
@@ -19,9 +19,9 @@ function Map(){
   return (
     <GoogleMap
       defaultZoom={10}
-      defaultCenter={{lat: 45.4231, lng:-75.6931}}
+      defaultCenter={{ lat: 45.4231, lng: -75.6931 }}
       //https://snazzymaps.com/explore
-      defaultOptions={{styles: mapStyles}}
+      defaultOptions={{ styles: mapStyles }}
     >
 
       {listingData.Properties.map(house => (
@@ -39,8 +39,8 @@ function Map(){
           }}
 
           icon={{
-              url:"homes-3.svg",
+            url: "homes-3.svg",
-              scaledSize: new window.google.maps.Size(50,50)
+            scaledSize: new window.google.maps.Size(50, 50)
           }}
 
 
@@ -158,7 +158,11 @@ class ListingsPage extends Component {
 
             <div class="col-12">
 
+              <section className="colored-section" id="features">
+                <div className="container-fluid">
                   <h2> Map </h2>
+                </div>
+              </section>
 
               <div style={{ width: "100vm", height: "800px" }}>
                 <MapWrapped

src/shared-components/navbar-component/Navbar.css

@@ -1,3 +1,5 @@
 .Navbar{
-    background-color: pink;
+    background-color: rgb(56, 55, 55);
+    padding-top: 20px;
+    padding-bottom: 24px;
 }