Working on Css

src/App.css

@@ -1,6 +1,4 @@
-
 .hero-image {
-
   height: 50%;
   background-position: center;
   background-repeat: no-repeat;
@@ -15,7 +13,6 @@
   left: 50%;
   transform: translate(-50%, -50%);
   color: white;
-
 }
 
 .hero-text button {
@@ -33,17 +30,18 @@
   background-color: blue;
   color: white;
 }
-.modal-header, h4, .close {
+.modal-header,
+h4,
+.close {
   background-color: #5cb85c;
-  color:white !important;
+  color: white !important;
   text-align: center;
   font-size: 30px;
 }
 
-.img{
-  width:100%;
-  height:50%
-
+.img {
+  width: 100%;
+  height: 50%;
 }
 .fixarRodape {
   width: 100%;
@@ -68,11 +66,46 @@
   color: white;
 }
 
-.list-group-flush{
-
-
-
-
+.hero-image-buy {
+  height: 40%;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  position: relative;
+}
+.hero-text-buy {
+  text-align: center;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: rgb(0, 51, 102);
+}
+.img-buy-house {
+  width: 40%;
+  height: 20%;
+}
 
+.hero-image-rent {
+  width: 60%;
 }
 
+.hero-text-rent {
+  text-align: center;
+  position: absolute;
+  top: 30%;
+  left: 80%;
+  transform: translate(-50%, -50%);
+  color: rgb(0, 51, 102);
+}
+.form-control-nav {
+  position: absolute;
+  top: 50%;
+ width: 100%;
+}
+.textAd{
+  text-align: center;
+  color: rgb(0, 51, 102);
+  padding: 20px;
+
+}

src/StyleCss/Login.css

@@ -13,3 +13,18 @@ justify-content: flex-end;
   margin-right: 10px;
 }
 
+.btn-login{
+  position: absolute;
+  top: 15%;
+  left: 90%;
+  cursor: pointer;
+  border: 0;
+  border-radius: 2px;
+  font-weight: 700;
+  margin: 0 10px;
+  width: 100px;
+  height: 55px;
+  padding: 5px 0;
+  box-shadow: 0 0 10px rgba(0, 51, 102);
+  transition: 0.2s;
+}

src/components/Footer.js

@@ -4,16 +4,19 @@ import { FaGithub } from "react-icons/fa";
 
 const Footer = () => {
   return (
-    <footer className="fixarRodape">
+    <footer className="fixarRodape text-center justify-content:space-between">
       <div ClassName="social">
-        <a href="https://github.com/keniakfa">
+        <a href="https://github.com/keniakfa" >
           <FaGithub color="#fff9c4" size="35" />
         </a>
         <a href="https://github.com/Henrique-Portela">
           <FaGithub color="#fff9c4" size="35" />
         </a>
       </div>
       <p className="copyright">Made by Kênia Araújo and Henrique Portela</p>
+      <p className= "data" color="white">
+        &copy;{new Date().getFullYear()} All rights reserved
+      </p>
     </footer>
   );
 };

src/components/HouseDetail.js

@@ -7,9 +7,10 @@ import AuthContext from "../context/AuthContext";
 
 
 function HouseDetail(props) {
-  const [house, setHouse] = useState({});
+  const [house, setHouse] = useState();
   const { id } = useParams();
 
+
   const token = localStorage.getItem('token')
   const headers = {
     'Authorization': 'Bearer ' + token
@@ -20,7 +21,7 @@ function HouseDetail(props) {
     async function fetchHouse() {
       try {
         const response = await axios.get(
-          `${process.env.REACT_APP_API_URL}/viewhouse/${id}`,{headers:headers}
+          `${process.env.REACT_APP_API_URL}/viewhouse/${id}`,{headers}
         )
         console.log(response)
         setHouse(response.data)
@@ -30,7 +31,7 @@ function HouseDetail(props) {
       }
     }
     fetchHouse();
-  }, [id,headers]);
+  }, [id]);
 
 
 
@@ -47,7 +48,7 @@ function HouseDetail(props) {
     <Card style={{ width: "15rem" }}>
     <Card.Img style= {{height: "19np8.81px" }} variant="top" src={house.picture} />
     <div className="card-title">
-          <h3>{house.address}</h3>
+          <h3>{house.address.street}</h3>
       </div>
     <ListGroup className="list-group-flush">
 

src/components/Navbar.js

@@ -3,25 +3,55 @@ import Nav from "react-bootstrap/Nav";
 import Navbar from "react-bootstrap/Navbar";
 
 function NavBar() {
-
   return (
-    <nav className="nav flex space-x-10">
+    <nav className="navbar navbar-expand-lg navbar-light bg-light">
+      <a className="navbar-brand" href="#">
+        Navbar
+      </a>
+      <button
+        class="navbar-toggler"
+        type="button"
+        data-toggle="collapse"
+        data-target="#navbarNavDropdown"
+        aria-controls="navbarNavDropdown"
+        aria-expanded="false"
+        aria-label="Toggle navigation"
+      >
+        <span className="navbar-toggler-icon"></span>
+      </button>
+      <div className="collapse navbar-collapse" id="navbarNavDropdown">
+        <ul className="navbar-nav">
+          <li className="nav-item active">
+            <a className="nav-link" href="/">
+              Home<span class="sr-only">(current)</span>
+            </a>
+          </li>
+          <li className="nav-item">
+            <a className="nav-link" href="/buyhouse">
+              Buy
+            </a>
+          </li>
 
-          <Nav.Link href="/">Home</Nav.Link>
-          <Nav.Link href="/buyhouse">Buy</Nav.Link>
-          <Nav.Link href="/renthouse">Rent</Nav.Link>
-
-
-
-          <Nav.Link href="/login">Login</Nav.Link>
-          <Nav.Link href="/adcreate">AdCreate</Nav.Link>
+          <li className="nav-item">
+            <a className="nav-link" href="/renthouse">
+              Rent
+            </a>
+          </li>
 
-
-
+          <li class="nav-item">
+            <a className="nav-link" href="/adcreate">
+              Advertise
+            </a>
+          </li>
+          <button className="btn-login">
+            <a className="nav-link" href="/login">
+              Login
+            </a>
+          </button>
+        </ul>
+      </div>
     </nav>
   );
 }
 
 export default NavBar;
-
-