diff --git a/.vscode/settings.json b/.vscode/settings.json index d83b5ba6c..0a6240b1c 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -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" } } \ No newline at end of file diff --git a/index.html b/index.html index 62cb9bc4f..2a5d37c91 100644 --- a/index.html +++ b/index.html @@ -1,13 +1,16 @@ - - - - - Hello Rigo with Vanilla.js - - -
- - - + + + + + + Hello Rigo with Vanilla.js + + + +
+ + + + \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index d6b5fd56a..a87d148a9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21,6 +21,9 @@ "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-refresh": "^0.4.6", "vite": "^5.2.0" + }, + "engines": { + "node": ">=20.0.0" } }, "node_modules/@eslint-community/eslint-utils": { diff --git a/src/js/components/Card.jsx b/src/js/components/Card.jsx new file mode 100644 index 000000000..5f9171f1d --- /dev/null +++ b/src/js/components/Card.jsx @@ -0,0 +1,19 @@ +const Card = ({ imagen, titulo, texto, boton }) => { + return ( +
+
+ ... +
+
{titulo}
+

{texto}

+
+
+ Find Out More! +
+
+
+ ) +} +export default Card; + + diff --git a/src/js/components/End.jsx b/src/js/components/End.jsx new file mode 100644 index 000000000..0c658db65 --- /dev/null +++ b/src/js/components/End.jsx @@ -0,0 +1,9 @@ +const End = () => { + return ( +
+

Copyright @ your website 2019

+
+ ) +} + +export default End diff --git a/src/js/components/Home.jsx b/src/js/components/Home.jsx index 74bc8d768..ba91e4613 100644 --- a/src/js/components/Home.jsx +++ b/src/js/components/Home.jsx @@ -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 ( -
- - -

Hello Rigo!

-

- -

- - If you see this green button... bootstrap is working... - -

- Made by{" "} - 4Geeks Academy, with - love! -

+
+ + +
+
+ + + + +
+
+
- ); + + ) }; export default Home; \ No newline at end of file diff --git a/src/js/components/Jumbotron.jsx b/src/js/components/Jumbotron.jsx new file mode 100644 index 000000000..7147feefa --- /dev/null +++ b/src/js/components/Jumbotron.jsx @@ -0,0 +1,23 @@ +const Jumbotron = () => { + return ( +
+
+
+
+
A warn Welcome
+

+ 🎤✨ ¡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. 💫💜

+ Call to action +
+
+
+
+ ) +} + +export default Jumbotron; + diff --git a/src/js/components/Navbar.jsx b/src/js/components/Navbar.jsx new file mode 100644 index 000000000..d2926a047 --- /dev/null +++ b/src/js/components/Navbar.jsx @@ -0,0 +1,30 @@ +const Navbar = () => { + return ( + + ) +} + +export default Navbar; \ No newline at end of file diff --git a/src/styles/index.css b/src/styles/index.css index 50716eb70..61b711410 100644 --- a/src/styles/index.css +++ b/src/styles/index.css @@ -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); +} \ No newline at end of file