Codespace musical space yodel r45g954gwxrxhxrwx

.vscode/settings.json

@@ -3,5 +3,11 @@
     "editor.defaultFormatter": "esbenp.prettier-vscode",
     "workbench.editorAssociations": {   
         "*.md": "vscode.markdown.preview.editor"
+    },
+    "githubPullRequests.ignoredPullRequestBranches": [
+        "main"
+    ],
+    "[javascriptreact]": {
+        "editor.defaultFormatter": "vscode.typescript-language-features"
     }
 }

src/js/components/Card.jsx

@@ -0,0 +1,31 @@
+
+export const Card = ({raza, img, descripcion})=> {
+
+    return (
+
+       <div className="col-12 col-md-6 col-lg-4  p-2">
+                <div className="card d-flex justify-content-center card h-100">
+                    <img src={img} className="card-img-top" alt="Imagen 1" />
+
+
+                    <div className="card-body bg-secondary text-white ">
+                        <h5 className="card-title">{raza}</h5>
+                        <p className="card-text">
+                            {descripcion}
+                        </p>
+                    </div>
+
+
+                    <div className="card-footer d-grid bg-secondary text-white">
+                        <a href="#" className="btn btn-primary">Find Out More!</a>
+                    </div>
+                </div>
+            </div>
+
+
+
+    )
+}
+
+
+

src/js/components/Footer.jsx

@@ -0,0 +1,15 @@
+export const Footer =()=>{
+
+    return(<div className="card text-center">
+
+  <div className="card-body bg-secondary text-white">
+    <h5 className="card-title">Marco Cebrian</h5>
+    <p className="card-text">Copyright , your Website 2018.</p>
+
+  </div>
+
+</div>)
+}
+
+
+

src/js/components/Home.jsx

@@ -2,27 +2,69 @@ import React from "react";
 
 //include images into your bundle
 import rigoImage from "../../img/rigo-baby.jpg";
+import { Navbar } from "./Navbar";
+import { Jumbotron } from "./Jumbotron";
+import { Footer } from "./Footer";
+import { Card } from "./Card";
 
 //create your first component
 const Home = () => {
+	const perros = [
+  {
+    raza: "Labrador Retriever",
+    img: "https://media.istockphoto.com/id/122286715/es/foto/labrador-blanco-sobre-un-fondo-blanco.jpg?s=2048x2048&w=is&k=20&c=lqzjhPrzZo0Eaxc0uFNWyHYTAIMm10VgmkCKerUv4dM=",
+    descripcion: "Perro amable, inteligente y muy sociable. Ideal para familias y trabajos de asistencia."
+  },
+  {
+    raza: "Pastor Alemán",
+    img: "https://images.unsplash.com/photo-1621951714491-3cde56a9cadf?fm=jpg&q=60&w=3000&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8N3x8cGVycm8lMjBwYXN0b3IlMjBhbGVtJUMzJUExbnxlbnwwfHwwfHx8MA%3D%3D",
+    descripcion: "Raza fuerte, obediente y protectora. Conocida por su papel en trabajos policiales y de rescate."
+  },
+  {
+    raza: "Golden Retriever",
+    img: "https://images.unsplash.com/photo-1633722715463-d30f4f325e24?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8Z29sZGVuJTIwcmV0cmlldmVyfGVufDB8fDB8fHww",
+    descripcion: "Muy cariñoso y paciente, excelente compañero para familias y actividades al aire libre."
+  },
+  {
+    raza: "Bulldog Francés",
+    img: "https://www.purina.es/sites/default/files/2021-02/BREED%20Hero_0051_french_bulldog.jpg",
+    descripcion: "Pequeño, simpático y tranquilo. Perfecto para espacios reducidos y vida urbana."
+  },
+  {
+    raza: "Husky Siberiano",
+    img: "https://images.dog.ceo/breeds/husky/n02110185_1469.jpg",
+    descripcion: "Energético, independiente y muy resistente. Destaca por su bello pelaje y ojos llamativos."
+  },
+  {
+    raza: "Beagle",
+    img: "https://images.dog.ceo/breeds/beagle/n02088364_11136.jpg",
+    descripcion: "Curioso, amigable y con un gran olfato. Excelente perro de compañía y rastreo."
+  }
+];
 	return (
-		<div className="text-center">
-
+		<div>
+			<Navbar/>
+		<Jumbotron/>
+		<div className="row d-flex flex-wrap">
+		{perros.map((perro)=>(
+			<Card 
+			raza={perro.raza} 
+			img={perro.img} 
+			descripcion={perro.descripcion}  
+			/> 
+
+		))}
+		</div>
 
-			<h1 className="text-center mt-5">Hello Rigo!</h1>
-			<p>
-				<img src={rigoImage} />
-			</p>
-			<a href="#" className="btn btn-success">
-				If you see this green button... bootstrap is working...
-			</a>
-			<p>
-				Made by{" "}
-				<a href="http://www.4geeksacademy.com">4Geeks Academy</a>, with
-				love!
-			</p>
+		<Footer/>
+
 		</div>
+
+
 	);
 };
 
-export default Home;
+export default Home;
+
+
+

src/js/components/Jumbotron.jsx

@@ -0,0 +1,27 @@
+//header
+export const Jumbotron = () => {
+
+    return (
+
+        <div className="card py-5 mb-3 bg-light rounded-3  text-center">
+            <div className="card-body">
+                <h1 className="card-title display-5 fw-bold">A Warm Welcome!!!</h1>
+                <p className="card-text fs-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa, eligendi, in quo sunt possimus...</p>
+                <a href="#" className="btn btn-primary">Call to Action!!</a>
+            </div>
+        </div>
+
+
+
+
+
+
+
+
+
+    )
+}
+
+
+
+

src/js/components/Navbar.jsx

@@ -0,0 +1,33 @@
+export const Navbar = () => {
+
+    return(<nav className="navbar navbar-expand-lg bg-secondary">
+  <div className="container-fluid">
+    <a className="navbar-brand" href="#">Start Bootstrap</a>
+    <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+      <span className="navbar-toggler-icon"></span>
+    </button>
+    <div className="collapse navbar-collapse" id="navbarNav">
+      <ul className="navbar-nav ms-auto mb-2 mb-lg-0">
+        <li className="nav-item">
+          <a className="nav-link active" aria-current="page" href="#">Home</a>
+        </li>
+        <li className="nav-item">
+          <a className="nav-link" href="#">Features</a>
+        </li>
+        <li className="nav-item">
+          <a className="nav-link" href="#">Pricing</a>
+        </li>
+        <li className="nav-item">
+          <a className="nav-link " aria-disabled="true">Tools</a>
+        </li>
+      </ul>
+    </div>
+  </div>
+</nav>)
+
+}
+
+
+
+
+