genesi-react

.vscode/settings.json

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

src/js/components/Card.jsx

@@ -0,0 +1,22 @@
+import React from "react";
+
+const Card = (props) => {
+    const { image, title, description } = props;
+    return (
+
+        <div className="col-12 col-sm-6 col-md-4 col-lg-3 mb-4">
+            <div className="card h-100">
+                <img src={image} className="img-fluid w-100 mb-3" alt={title} style={{ height: "200px", objectFit: "cover" }} />
+                <div className="card-body text-center">
+                    <h2 className="card-title">{title}</h2>
+                    <p className="card-text">{description}</p>
+                </div>  {/*este div cierra h-100*/}
+                <div className="card-footer text-center bg-light border-top-0">
+                    <a href="#" className="btn btn-primary"> Find Out More! </a>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default Card;

src/js/components/Footer.jsx

@@ -0,0 +1,18 @@
+import React from "react";
+
+const Footer = () => {
+    return (
+
+        <footer className="py-5 bg-dark mt-auto">
+            <div className="col-12 col-md-4 text-md-start">
+                <div className="container">
+                    <p className="m-0 text-align:center text-white">
+                        Copyright &copy; Genesis Falcon
+                    </p>
+
+                </div>
+            </div>
+        </footer>
+    );
+};
+export default Footer;

src/js/components/Home.jsx

@@ -1,26 +1,61 @@
 import React from "react";
+//// aqui el import de navbar//
+/// aqui el jumbotrom////
+
+
+
+
+import Card from "./Card";
+import Footer from "./Footer";
 
-//include images into your bundle
-import rigoImage from "../../img/rigo-baby.jpg";
 
-//create your first component
 const Home = () => {
 	return (
 		<div className="text-center">
-
-
-			<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>
+			{/* aqui va el navbar y el jumbotrom*/}
+
+
+
+
+
+
+
+
+			<div className="container mt-5">
+				<div className="row">
+					<Card
+						image="https://png.pngtree.com/thumb_back/fh260/background/20210207/pngtree-simple-solid-color-on-gray-background-image_557017.jpg"
+						title="Carta uno"
+						description="Lorem Ipsum is simply dummy text of the printing and typesetting industry."
+					/>
+
+					<Card
+						image="https://png.pngtree.com/thumb_back/fh260/background/20210207/pngtree-simple-solid-color-on-gray-background-image_557017.jpg"
+						title="Carta Dos"
+						description="Lorem Ipsum is simply dummy text of the printing and typesetting industry."
+					/>
+
+
+					<Card
+						image="https://png.pngtree.com/thumb_back/fh260/background/20210207/pngtree-simple-solid-color-on-gray-background-image_557017.jpg"
+						title="Carta Tres"
+						description="Lorem Ipsum is simply dummy text of the printing and typesetting industry."
+					/>
+
+					<Card
+						image="https://png.pngtree.com/thumb_back/fh260/background/20210207/pngtree-simple-solid-color-on-gray-background-image_557017.jpg"
+						title="Carta Cuatro"
+						description="Lorem Ipsum is simply dummy text of the printing and typesetting industry."
+					/>
+
+				</div>
+			</div>
+			<Footer />
+
+
+
+
+
 		</div>
 	);
 };