You got the travel plans, we got the travel vans.
Add adventure to your life by joining the #vanlife movement. Rent the perfect van to make your perfect road trip.
diff --git a/src/Components/Vans.jsx b/src/Components/Vans.jsx
index 52d91e0..2875bc9 100644
--- a/src/Components/Vans.jsx
+++ b/src/Components/Vans.jsx
@@ -1,9 +1,49 @@
import React from "react";
+import Button from "./Button";
+import CarInfo from "./CarInfo";
+import Footer from "./Footer";
export default function Vans() {
+ // useState that hold the Date
+ const [data, setData] = React.useState([]);
+ // useEffect to fetch Data
+ React.useEffect(() => {
+ fetch("/api/vans")
+ .then((res) => res.json())
+ .then((data) => setData(data.vans));
+ }, []);
+ console.log(data);
return (
-
-
Welcome in Vans Page
+
+
+
Explore our van options
+
+
+
+
+
+
+
+
+
+ {data.map((van) => {
+ return (
+
+ );
+ })}
+
+
+
);
}
diff --git a/src/Server.js b/src/Server.js
index 79f42ff..9f91aa1 100644
--- a/src/Server.js
+++ b/src/Server.js
@@ -17,6 +17,7 @@ createServer({
routes() {
this.namespace = "api"
+ this.logging = false
this.get("/vans", (schema, request) => {
return schema.vans.all()
diff --git a/src/index.css b/src/index.css
index 453b467..0599d8b 100644
--- a/src/index.css
+++ b/src/index.css
@@ -11,12 +11,30 @@ body{
}
/* Start Media queries */
+/* very small screen */
+@media (max-width:460px){
+ .home{
+ height: fit-content;
+ }
+ .car-content{
+ grid-template-columns: 1fr;
+ }
+}
/* Small Screen */
-@media (min-width: 768px) {
+@media (min-width: 460px) {
+ .car-content{
+ grid-template-columns: 1fr 1fr;
+ }
+ .car-button{
+ width: 70%;
+ }
}
/* medium Screen */
@media (min-width: 992px) {
+ .car-content{
+ grid-template-columns: 1fr 1fr 1fr;
+ }
}
/* Large Screen */
@@ -37,6 +55,6 @@ body{
background-size: cover;
}
.image2{
- background: url("./assets/Images/image\ 55.png") no-repeat center center ;
+ background: url("./assets/images/image\ 55.png") no-repeat center center ;
background-size: cover;
}
\ No newline at end of file
+