Landing page maquetada
This commit is contained in:
@@ -1,23 +1,35 @@
|
|||||||
|
---
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
<nav class="navbar navbar-expand-md bg-light">
|
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
|
||||||
<div class="container-fluid">
|
<div class="container">
|
||||||
<a class="navbar-brand" href="#">EcoFuturo</a>
|
<a class="navbar-brand d-flex align-items-center" href="#">
|
||||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
<img src="/imgs/logo.jpg" alt="Logo Ecobjetivos" class="me-2" height="24" />
|
||||||
<span class="navbar-toggler-icon"></span>
|
Ecobjetivos
|
||||||
</button>
|
</a>
|
||||||
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
<button
|
||||||
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
class="navbar-toggler"
|
||||||
<li class="nav-item">
|
type="button"
|
||||||
<a class="nav-link active" aria-current="page" href="#">Inicio</a>
|
data-bs-toggle="collapse"
|
||||||
</li>
|
data-bs-target="#navbarNav"
|
||||||
<li class="nav-item">
|
aria-controls="navbarNav"
|
||||||
<a class="nav-link disabled" href="#">Posts</a>
|
aria-expanded="false"
|
||||||
</li>
|
aria-label="Toggle navigation"
|
||||||
<li class="nav-item">
|
>
|
||||||
<a class="nav-link disabled" href="#">Proyectos</a>
|
<span class="navbar-toggler-icon"></span>
|
||||||
</li>
|
</button>
|
||||||
</ul>
|
<div class="collapse navbar-collapse" id="navbarNav">
|
||||||
</div>
|
<ul class="navbar-nav ms-auto">
|
||||||
</div>
|
<li class="nav-item">
|
||||||
</nav>
|
<a class="nav-link" href="#posts">Posts</a>
|
||||||
</main>
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link" href="#proyectos">Proyectos</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</main>
|
||||||
|
|||||||
@@ -1,25 +1,294 @@
|
|||||||
---
|
---
|
||||||
// Component Imports
|
// Component Imports
|
||||||
import Navbar from '../components/Navbar.astro';
|
import Navbar from "../components/Navbar.astro";
|
||||||
|
|
||||||
// Full Astro Component Syntax:
|
const animateOnScroll = `
|
||||||
// https://docs.astro.build/basics/astro-components/
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
const observer = new IntersectionObserver((entries) => {
|
||||||
|
entries.forEach(entry => {
|
||||||
|
if (entry.isIntersecting) {
|
||||||
|
entry.target.classList.add('animate__animated', 'animate__fadeIn');
|
||||||
|
entry.target.style.visibility = 'visible';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
document.querySelectorAll('.animate-on-scroll').forEach(el => {
|
||||||
|
observer.observe(el);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
`;
|
||||||
---
|
---
|
||||||
|
|
||||||
<html lang="es">
|
<html lang="es">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<meta name="generator" content={Astro.generator} />
|
<meta name="generator" content={Astro.generator} />
|
||||||
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
|
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
|
||||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
|
<link
|
||||||
<link rel="stylesheet" href="style.css">
|
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
|
||||||
|
rel="stylesheet"
|
||||||
|
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
|
||||||
|
crossorigin="anonymous"
|
||||||
|
/>
|
||||||
|
<link
|
||||||
|
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
|
||||||
|
rel="stylesheet"
|
||||||
|
/>
|
||||||
|
<link
|
||||||
|
rel="stylesheet"
|
||||||
|
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
|
||||||
|
/>
|
||||||
<title>EcoFuturo</title>
|
<title>EcoFuturo</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<Navbar />
|
||||||
|
<header class="header-bg text-white">
|
||||||
|
<div class="container text-center">
|
||||||
|
<h1
|
||||||
|
class="display-1 mb-4 animate__animated animate__fadeInDown"
|
||||||
|
>
|
||||||
|
Ecobjetivos
|
||||||
|
</h1>
|
||||||
|
<p
|
||||||
|
class="lead mb-5 animate__animated animate__fadeInUp animate__delay-1s"
|
||||||
|
>
|
||||||
|
Construyendo juntos un futuro más verde y equitativo
|
||||||
|
</p>
|
||||||
|
<a
|
||||||
|
href="#intro"
|
||||||
|
class="btn btn-lg btn-outline-light animate__animated animate__zoomIn animate__delay-2s"
|
||||||
|
>Descubre más</a
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
<Navbar/>
|
<section id="intro" class="py-5 bg-light">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row align-items-center">
|
||||||
|
<div class="col-md-6 animate-on-scroll">
|
||||||
|
<h2 class="display-4 mb-4">¿Qué son los ODS?</h2>
|
||||||
|
<p class="lead">
|
||||||
|
Los Objetivos de Desarrollo Sostenible (ODS) son
|
||||||
|
un llamado universal a la acción para erradicar
|
||||||
|
la pobreza, proteger el planeta y garantizar que
|
||||||
|
todas las personas gocen de paz y prosperidad
|
||||||
|
para 2030.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6 animate-on-scroll">
|
||||||
|
<div
|
||||||
|
class="bg-secondary text-white p-5 text-center"
|
||||||
|
>
|
||||||
|
<p>Aquí iría una imagen de los 17 ODS</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="objetivos" class="py-5">
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="text-center mb-5 animate-on-scroll">
|
||||||
|
Nuestros Objetivos Principales
|
||||||
|
</h2>
|
||||||
|
<div class="row">
|
||||||
|
{
|
||||||
|
[
|
||||||
|
"fa-seedling",
|
||||||
|
"fa-hands-holding-circle",
|
||||||
|
"fa-graduation-cap",
|
||||||
|
"fa-industry",
|
||||||
|
].map((icon, index) => (
|
||||||
|
<div class="col-md-6 col-lg-3 mb-4 animate-on-scroll">
|
||||||
|
<div class="card h-100 text-center">
|
||||||
|
<div class="card-body">
|
||||||
|
<i
|
||||||
|
class={`fa-solid ${icon} fa-3x mb-3 text-primary`}
|
||||||
|
/>
|
||||||
|
<h5 class="card-title">
|
||||||
|
Objetivo {index + 1}
|
||||||
|
</h5>
|
||||||
|
<p class="card-text">
|
||||||
|
Descripción del objetivo{" "}
|
||||||
|
{index + 1}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="impact" class="py-5 bg-success text-white">
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="text-center mb-5 animate-on-scroll">
|
||||||
|
Nuestro Impacto
|
||||||
|
</h2>
|
||||||
|
<div class="row text-center">
|
||||||
|
{
|
||||||
|
["1M+", "500K", "100+", "50+"].map(
|
||||||
|
(number, index) => (
|
||||||
|
<div class="col-md-3 mb-4 animate-on-scroll">
|
||||||
|
<h3 class="display-4 fw-bold">
|
||||||
|
{number}
|
||||||
|
</h3>
|
||||||
|
<p class="lead">
|
||||||
|
Estadística {index + 1}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
)
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="gallery" class="py-5">
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="text-center mb-5 animate-on-scroll">
|
||||||
|
Galería de Impacto
|
||||||
|
</h2>
|
||||||
|
<div class="row g-4">
|
||||||
|
{
|
||||||
|
[1, 2, 3, 4, 5, 6].map((num) => (
|
||||||
|
<div class="col-md-4 animate-on-scroll">
|
||||||
|
<div class="bg-light p-4 text-center">
|
||||||
|
<p>Imagen de impacto {num}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="posts" class="py-5 bg-light">
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="text-center mb-5 animate-on-scroll">
|
||||||
|
Posts Recientes
|
||||||
|
</h2>
|
||||||
|
<div class="row">
|
||||||
|
{
|
||||||
|
[1, 2, 3].map((num) => (
|
||||||
|
<div class="col-md-4 mb-4 animate-on-scroll">
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-body">
|
||||||
|
<h5 class="card-title">
|
||||||
|
Título del Post {num}
|
||||||
|
</h5>
|
||||||
|
<p class="card-text">
|
||||||
|
Breve descripción del post {num}
|
||||||
|
...
|
||||||
|
</p>
|
||||||
|
<a href="#" class="btn btn-primary">
|
||||||
|
Leer más
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="proyectos" class="py-5">
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="text-center mb-5 animate-on-scroll">
|
||||||
|
Nuestros Proyectos
|
||||||
|
</h2>
|
||||||
|
<div class="row">
|
||||||
|
{
|
||||||
|
[1, 2, 3, 4].map((num) => (
|
||||||
|
<div class="col-md-6 mb-4 animate-on-scroll">
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-body">
|
||||||
|
<h5 class="card-title">
|
||||||
|
Proyecto {num}
|
||||||
|
</h5>
|
||||||
|
<p class="card-text">
|
||||||
|
Descripción del proyecto {num} y
|
||||||
|
su impacto en los ODS.
|
||||||
|
</p>
|
||||||
|
<a href="#" class="btn btn-success">
|
||||||
|
Ver detalles
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="cta" class="py-5 bg-primary text-white text-center">
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="display-4 mb-4 animate-on-scroll">
|
||||||
|
¡Únete al Cambio!
|
||||||
|
</h2>
|
||||||
|
<p class="lead mb-5 animate-on-scroll">
|
||||||
|
Juntos podemos crear un impacto duradero. Descubre cómo
|
||||||
|
puedes contribuir a los ODS.
|
||||||
|
</p>
|
||||||
|
<a href="#" class="btn btn-lg btn-light animate-on-scroll"
|
||||||
|
>¡Participa ahora!</a
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
</main>
|
</main>
|
||||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
|
|
||||||
|
<footer class="bg-dark text-white py-4">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-6 text-center text-md-start">
|
||||||
|
<p>
|
||||||
|
© 2024 Ecobjetivos. Todos los derechos
|
||||||
|
reservados.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6 text-center text-md-end">
|
||||||
|
<a href="#" class="text-white me-2"
|
||||||
|
><i class="fab fa-facebook-f"></i></a
|
||||||
|
>
|
||||||
|
<a href="#" class="text-white me-2"
|
||||||
|
><i class="fab fa-twitter"></i></a
|
||||||
|
>
|
||||||
|
<a href="#" class="text-white me-2"
|
||||||
|
><i class="fab fa-instagram"></i></a
|
||||||
|
>
|
||||||
|
<a href="#" class="text-white"
|
||||||
|
><i class="fab fa-linkedin-in"></i></a
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script
|
||||||
|
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
|
||||||
|
></script>
|
||||||
|
<script set:html={animateOnScroll} />
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.header-bg {
|
||||||
|
background-color: #4caf50;
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.animate-on-scroll {
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
.navbar-brand img {
|
||||||
|
height: 40px;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user