Added updates to the carousel.

package.json

@@ -6,11 +6,13 @@
     "@testing-library/jest-dom": "^5.11.10",
     "@testing-library/react": "^11.2.5",
     "@testing-library/user-event": "^12.8.3",
+    "axios": "^0.21.1",
     "bootstrap": "^4.6.0",
     "react": "^17.0.2",
     "react-bootstrap": "^1.5.2",
     "react-bootstrap-carousel": "^4.1.1",
     "react-dom": "^17.0.2",
+    "react-fa": "^5.0.0",
     "react-google-maps": "^9.4.5",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",

src/homePage/Homepage.css

@@ -69,7 +69,64 @@
     padding-top: 15px;
 }
 
-.Buttonka{
+.buttonka{
     padding-top: 2px;
-    padding-bottom: 6px;
 }
+
+.prev-icon,
+.next-icon {
+  height: 210px;
+  width: 100px;
+  outline: black;
+  background-size: 100%, 100%;
+  border-radius: 50%;
+  background-image: none;
+  text-shadow: 2px 2px 5px black;
+}
+
+.next-icon:after
+{
+  content: '>';
+  font-size: 140px;
+  color: rgb(255, 255, 255);
+  text-shadow: 2px 2px 5px black;
+}
+
+.prev-icon:after {
+  content: '<';
+  font-size: 140px;
+  color: rgb(255, 255, 255);
+  text-shadow: 2px 2px 5px black;
+}
+
+ol.carousel-indicators {
+    position: absolute;
+    bottom: 5px;
+    margin: 0;
+    left: 0;
+    right: 0;
+    width: auto;
+ }
+ 
+ ol.carousel-indicators li,
+ ol.carousel-indicators li.active {
+    width: 1rem;
+    height: 1rem;
+    margin: 0;
+    border-radius: 50%;
+    border: 0;
+    background: transparent;
+    box-shadow: 0 0 1px 1px black;
+ }
+ 
+ ol.carousel-indicators li {
+    background: rgb(255, 255, 255);
+    margin-left: .5rem;
+    margin-right: .5rem;
+    box-shadow: 0 0 1px 1px black;
+ }
+ 
+ ol.carousel-indicators li.active {
+    background: #17a2b8;
+    box-shadow: 0 0 1px 1px black;
+ }

src/homePage/Homepage.js

@@ -7,6 +7,8 @@ import Carousel from "react-bootstrap/Carousel";
 import Button from "react-bootstrap/Button";
 import axios from 'axios'
 
+
+
 class Homepage extends Component {
   constructor(props) {
     super(props);
@@ -15,10 +17,13 @@ class Homepage extends Component {
       lastname: "",
       email: "",
       message: "",
+      nextIcon: <span className="next-icon"></span>,
+      prevIcon: <span className="prev-icon"></span>,
     };
   }
 
   render() {
+    const {nextIcon,prevIcon}=this.state;
     return (
       <div className="homePage">
         <section className="colored-section" id="title">
@@ -33,12 +38,12 @@ class Homepage extends Component {
         </section>
         <section className="white-section" id="white-section">
           <div className="housesIntro">
-            <Carousel>
+            <Carousel nextIcon={nextIcon} prevIcon={prevIcon}>
               <Carousel.Item>
                 <img className="headerImg" src={house1} alt="First House" />
                 <Carousel.Caption>
-                  <h3 style={{textShadow: "3px 3px 5px black"}}>360 Michawashkode St, Ottawa, Ontario K4A 3N6</h3>
+                  <h3 style={{ fontSize: "250%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>360 Michawashkode St, Ottawa, Ontario K4A 3N6</h3>
-                  <div className="Buttonka">
+                  <div className="buttonka">
                     <Button href="/listings" variant="info">Click for Details</Button>
                   </div>
                 </Carousel.Caption>
@@ -46,8 +51,8 @@ class Homepage extends Component {
               <Carousel.Item>
                 <img className="headerImg" src={house2} alt="Second House" />
                 <Carousel.Caption>
-                  <h3 style={{textShadow: "3px 3px 5px black"}}>6865 PEBBLE TRAIL WAY, Ottawa, Ontario K4P 0B7</h3>
+                  <h3 style={{ fontSize: "250%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>6865 PEBBLE TRAIL WAY, Ottawa, Ontario K4P 0B7</h3>
-                  <div className="Buttonka">
+                  <div className="buttonka">
                     <Button href="/listings" variant="info">Click for Details</Button>
                   </div>
                 </Carousel.Caption>
@@ -55,8 +60,8 @@ class Homepage extends Component {
               <Carousel.Item>
                 <img className="headerImg" src={house3} alt="Third House" />
                 <Carousel.Caption>
-                  <h3 style={{textShadow: "3px 3px 5px black"}}>5284 Knott Crescent, Ottawa, Ontario K4M 0A2</h3>
+                  <h3 style={{ fontSize: "250%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>5284 Knott Crescent, Ottawa, Ontario K4M 0A2</h3>
-                  <div className="Buttonka">
+                  <div className="buttonka">
                     <Button href="/listings" variant="info">Click for Details</Button>
                   </div>
                 </Carousel.Caption>