Skip to content

No hiciste fork 😭 #22

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

No hiciste fork 😭 #22

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6e414a8
finalizacion01
Diego-sci01 Oct 12, 2025
ffcd311
Initial commit
Diego-sci01 Oct 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .vscode/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,5 +3,11 @@
"editor.defaultFormatter": "esbenp.prettier-vscode",
"workbench.editorAssociations": {
"*.md": "vscode.markdown.preview.editor"
},
"[javascriptreact]": {
"editor.defaultFormatter": "vscode.typescript-language-features"
},
"[html]": {
"editor.defaultFormatter": "vscode.html-language-features"
}
}
25 changes: 14 additions & 11 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,16 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/4geeks.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hello Rigo with Vanilla.js</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/js/main.jsx"></script>
</body>
</html>

<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/4geeks.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hello Rigo with Vanilla.js</title>
</head>

<body>
<div id="root"></div>
<script type="module" src="/src/js/main.jsx"></script>
</body>

</html>
3 changes: 3 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

19 changes: 19 additions & 0 deletions src/js/components/Card.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
const Card = ({ imagen, titulo, texto, boton }) => {
return (
<div className="col-12 col-sm-6 col-md-4 col-lg-3 mb-3 ">
<div className="card h-100 ">
<img src={imagen} className="card-img-top" alt="..." />
<div className="card-body">
<h5 className="card-title">{titulo}</h5>
<p className="card-text">{texto}</p>
</div>
<div className="card-footer">
<small className="boton d-flex justify-content-center text-body-secondary"><a href={boton} target="blank" class="btn btn-primary">Find Out More!</a></small>
</div>
</div>
</div>
)
}
export default Card;


9 changes: 9 additions & 0 deletions src/js/components/End.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
const End = () => {
return (
<div className="end">
<p className="fin">Copyright @ your website 2019</p>
</div>
)
}

export default End
47 changes: 26 additions & 21 deletions src/js/components/Home.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,28 +1,33 @@
import React from "react";
import Navbar from "./Navbar"
import Jumbotron from "./Jumbotron"
import Card from "./Card"
import End from "./End";
let imagen1 = "https://hips.hearstapps.com/hmg-prod/images/pchelenepambrun-resized-1576190436.jpg?crop=1.00xw:0.668xh;0,0&resize=1200:*";
let imagen2 = "https://crazyminds.es/wp-content/uploads/img_1289-1-1068x1068.jpg"
let imagen3 = "https://www.dodmagazine.es/wp-content/uploads/2021/04/lana-del-rey-blue-banisters-2021.jpg"
let imagen4 = "https://herasayssheshouldbethestarnow.wordpress.com/wp-content/uploads/2018/03/fig-4-aurora.jpg?w=1200"
let boton1 = "https://es.wikipedia.org/wiki/Harry_Styles"
let boton2 = "https://es.wikipedia.org/wiki/Bad_Bunny"
let boton3 = "https://es.wikipedia.org/wiki/Lana_Del_Rey"
let boton4 = "https://es.wikipedia.org/wiki/Aurora_Aksnes"

//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>
<div>
<Navbar />
<Jumbotron />
<div className="container">
<div className="row mt-4">
<Card imagen={imagen1} boton={boton1} titulo="Harry Styles" texto="Harry Edward Styles (Holmes Chapel, Cheshire; 1 de febrero de 1994) es un cantante, compositor y actor británico. Inició su carrera como cantante en 2010 como integrante de la boy band One Direction, con la que participó en el programa The X." />
<Card imagen={imagen2} boton={boton2} titulo="Bad Bunny" texto="Benito Antonio Martínez Ocasio (Vega Baja, 10 de marzo de 1994),​ conocido artísticamente como Bad Bunny, es un cantante, compositor, productor discográfico y luchador puertorriqueño." />
<Card imagen={imagen3} boton={boton3} titulo="Lana de Rey" texto="Elizabeth Woolridge Grant (Nueva York, 21 de junio de 1985), ​conocida artísticamente como Lana Del Rey, es una cantante, compositora, modelo, actriz, escritora, productora y poetisa estadounidense." />
<Card imagen={imagen4} boton={boton4} titulo="Aurora Aksnes" texto="Aurora Aksnes (Stavanger; 15 de junio de 1996), conocida simplemente como AURORA, es una cantautora noruega. Inició su carrera en 2012 con una serie de sencillos independientes que sirvieron para desarrollar su propuesta artística." />
</div>
</div>
<End />
</div>
);

)
};

export default Home;
23 changes: 23 additions & 0 deletions src/js/components/Jumbotron.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
const Jumbotron = () => {
return (
<div className="d-flex justify-content-center mt-3 ">
<div style={{ width: '88%', minheight: '50vh' }}>
<div className="card border-0 bg-body-tertiary h-100">
<div className="card-body">
<h5 className="card-title display-3 pt-3">A warn Welcome</h5>
<p className="card-text">
🎤✨ ¡Conoce a tus artistas y cantantes favoritos! ✨🎤
🎶 Descubre sus canciones, historias y todo lo que los hace únicos. 💖
🌟 Sigue cada lanzamiento, cada concierto y cada momento épico de tu estrella favorita. 🎵
📸 Mira fotos exclusivas, entrevistas y curiosidades que no encontrarás en ningún otro lugar. 🎬
💃 Vive la música, comparte la emoción con otros fans y sé parte de su mundo. 💫💜 </p>
<a href="#" className="btn btn-primary">Call to action</a>
</div>
</div>
</div>
</div>
)
}

export default Jumbotron;

30 changes: 30 additions & 0 deletions src/js/components/Navbar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
const Navbar = () => {
return (
<nav className="navbar navbar-expand-lg bg-body-tertiary bg-success-subtle text-success-emphasis" >
<div className="container-fluid">
<a className="navbar-brand" href="#">Navbar</a>
<button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul className="navbar-nav me- mb-2 mb-lg-0 ms-auto">
<li className="nav-item">
<a className="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li className="nav-item">
<a className="nav-link active" aria-current="page" href="#">About</a>
</li>
<li className="nav-item">
<a className="nav-link active" aria-current="page" href="#">Services</a>
</li>
<li className="nav-item">
<a className="nav-link active" aria-current="page" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
)
}

export default Navbar;
23 changes: 14 additions & 9 deletions src/styles/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,16 @@
/*
.end {
background-color: grey;
width: 100%;
height: 80px;
text-align: center;
color:aliceblue;
justify-content: center;
}

You can write your own styles here...


...Or you can use the import command to include
other sylesheets into your bunde as well, e.j:

import 'relative/path/to/stylesheet.scss';
.fin {
padding-top: 30px;
}

*/
body {
background-color: rgba(224, 190, 190, 0.685);
}