Skip to content

Responsive design #23

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 3 commits into
base: main
Choose a base branch
from
Open

Responsive design #23

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ea4c66e
[Developed by vicenteagt]
VicenteAGT Nov 6, 2025
c693dbf
[Styles updates by vicenteagt]
VicenteAGT Nov 6, 2025
67d13ab
[Responsive Design by vicenteagt]
VicenteAGT Nov 7, 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
7 changes: 5 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,15 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/4geeks.ico" />
<link rel="icon" type="image/svg+xml" href="/src/img/ESLO.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hello Rigo with Vanilla.js</title>
<title>ESLO|AGENCIA PEDAGÓGICA</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css" integrity="sha512-2SwdPD6INVrV/lHTZbO2nodKhrnDdJK9/kg2XD1r9uGqPo1cUbujc+IYdlYdEErWNu69gVcYgdxlmVmzTWnetw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</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.

Binary file added src/img/ESLO.ico
View file
Open in desktop
Binary file not shown.
22 changes: 22 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,22 @@
import React from "react";

const Card = (props) => {
return(

<div id="packages">
<div className="ms-0 ms-sm-0 ms-md-0 ms-lg-3 ms-xl-3">
<div className="card bg-black mt-2" style= {{width: "19rem", height: "24rem"}}>
<img src={props.urlImageCardProps} style= {{width: "100%", height: "100%"}} className="card-img-top" alt="imagen"/>
<div className="card-body card bg-black" style= {{width: "19em", height: "24rem"}}>
<h5 className="card-title text-white fw-bolder">{props.packagesNamesProps}</h5>
<p className="card-text text-white">{props.packagesDescriptionProps}</p>
<a href="#" className="btn btn-warning fw-bolder">Más Información</a>
</div>
</div>
</div>
</div>

)
};

export default Card;
38 changes: 38 additions & 0 deletions src/js/components/CardFinal.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import React from "react";
import Card from "../components/Card.jsx";

const CardFinal = () => {
let cardInformation = [
{urlImageCard: "https://www.ecoportal.net/wp-content/uploads/2019/04/simientes.jpg",
packagesNames: "Paquete: Semilla",
packagesDescription: "Transforma tu idea en el esqueleto profesional de un curso[...]"
},
{urlImageCard: "https://cdn77.pressenza.com/wp-content/uploads/2025/01/crecimiento-freepik-1-820x442.jpg",
packagesNames: "Paquete: Crecimiento",
packagesDescription: "Dale vida a tu estructura con actividades para tus estudiantes[...]"
},
{urlImageCard: "https://mexico.unir.net/wp-content/uploads/sites/6/2024/12/funciones-docente-universidad.jpg",
packagesNames: "Paquete: Potencial",
packagesDescription: "Refuerza el aprendizaje de tus alumnos con recursos clave[...]"
},
{urlImageCard: "https://www.agustinmedina.com/wp-content/uploads/676767.jpeg",
packagesNames: "Paquete: Éxito",
packagesDescription: "El paquete todo incluido para un curso de alto impacto y calidad[...]"
}
]
return(
cardInformation.map((item, index, array) =>{
return (
<div className="col-3">
<Card key={index}
urlImageCardProps = {item.urlImageCard}
packagesNamesProps = {item.packagesNames}
packagesDescriptionProps = {item.packagesDescription}
/>
</div>
)
})
)
}

export default CardFinal;
30 changes: 30 additions & 0 deletions src/js/components/Footer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import React from "react";

const Footer = () => {
return (
<div id="contact">
<div className="contain-fluid d-flex bg-black mt-3 justify-content-center">
<div className="row mt-2">
<div className="col-5">
<p className="text-white">Copyright © ESLO 2025</p>
</div>
<div className="col-1">
<a href="https://github.com/VicenteAGT" target="blank"><i class="fa-brands fa-instagram text-white fs-2 anchorsFooter"></i></a>
</div>
<div className="col-2">
<a className="text-warning text-decoration-none anchorsFooter" href="https://github.com/VicenteAGT" target="blank">eslo.edu</a>
</div>
<div className="col-1">
<a href="https://github.com/VicenteAGT" target="blank"><i class="fa-brands fa-facebook text-white fs-2 anchorsFooter"></i></a>
</div>
<div className="col-3">
<a className="text-warning text-decoration-none anchorsFooter" href="https://github.com/VicenteAGT" target="blank">Eslo Educa</a>
</div>
</div>
</div>
</div>

)
};

export default Footer;
46 changes: 31 additions & 15 deletions src/js/components/Home.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,26 +2,42 @@ import React from "react";

//include images into your bundle
import rigoImage from "../../img/rigo-baby.jpg";
import Navbar from "../components/Navbar.jsx";
import Jumbotron from "../components/Jumbotron.jsx";
import CardFinal from "../components/CardFinal.jsx";
import Footer from "../components/Footer.jsx";

//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="contain-fluid d-flex justify-content-center m-auto">
<div className="row d-flex flex-row">
<div className="col-12 d-flex flex-column flex-sm-column flex-md-column flex-lg-column flex-xl-row">
<CardFinal/>
</div>
</div>
</div>





<Footer/>
</div>








);
};

Expand Down
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 @@
import React from "react";

const Jumbotron = () => {
return (
<div id="aboutUs">
<div className="container-fluid">
<div className="row">
<div className="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 p-0">
<div className="bg-light p-5 bgImage">
<div className="container-fluid py-5">
<h1 className="display-5 fw-bold text-warning">¿QUIÉNES SOMOS?</h1><br />
<p className="col-md-8 fs-4 text-white bgInfo">En <b>ESLO</b> somos una agencia de orientación y diseño de procesos de aprendizaje en entornos particulares y diversas comunidades de aprendizaje. Nuestro compromiso es innovar, analizar y proponer estretegías de aprendizajes con propósito y valor duradero, ofreciendo siempre resultados garantizados a nuestros colaboradores.</p>
<a href="#contact" className="btn btn-warning btn-lg fw-bold" type="button">Contáctanos</a>
</div>
</div>
</div>
</div>
</div>
</div>
)
};

export default Jumbotron;
32 changes: 32 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,32 @@
import React from "react";

const Navbar = () => {
return (
<nav className="navbar navbar-expand-lg bg-black fixed-top">
<div className="container-fluid">
<a className="navbar-brand fs-1 fw-bold text-warning" href="">ESLO</a>
<button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon bg-warning"></span>
</button>
<div className="collapse navbar-collapse" id="navbarSupportedContent">
<ul className="navbar-nav ms-auto mb-2 mb-lg-0 fw-bolder">
<li className="nav-item">
<a className="nav-link active anchorsNavbar text-white" aria-current="page" href="#">Inicio</a>
</li>
<li className="nav-item">
<a className="nav-link text-white anchorsNavbar" href="#aboutUs">Sobre Nosotros</a>
</li>
<li className="nav-item">
<a className="nav-link text-white anchorsNavbar" href="#packages">Servicios</a>
</li>
<li className="nav-item">
<a className="nav-link text-white anchorsNavbar" href="#contact">Contacto</a>
</li>
</ul>
</div>
</div>
</nav>
)
};

export default Navbar;
31 changes: 22 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,24 @@
/*
body{
background-color: rgb(232, 167, 3);
}

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';
.bgImage{
background-image: url(https://integratec.com/blog/imagenes/trabajo-equipo-productividad.webp);
background-size: cover;
}

*/
.bgInfo{
background-color: rgba(0, 0, 0, 0.813);
}

.marginCopyright{
margin-left: 38rem;
}

.anchorsNavbar:hover{
background-color: rgba(245, 189, 20, 0.83);
}

.anchorsFooter:hover{
background-color: rgba(240, 248, 255, 0.269);
}