Landing page maquetada
This commit is contained in:
@@ -1,23 +1,35 @@
|
||||
---
|
||||
|
||||
---
|
||||
|
||||
<main>
|
||||
<nav class="navbar navbar-expand-md bg-light">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="#">EcoFuturo</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
||||
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="#">Inicio</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="#">Posts</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="#">Proyectos</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
|
||||
<div class="container">
|
||||
<a class="navbar-brand d-flex align-items-center" href="#">
|
||||
<img src="/imgs/logo.jpg" alt="Logo Ecobjetivos" class="me-2" height="24" />
|
||||
Ecobjetivos
|
||||
</a>
|
||||
<button
|
||||
class="navbar-toggler"
|
||||
type="button"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#navbarNav"
|
||||
aria-controls="navbarNav"
|
||||
aria-expanded="false"
|
||||
aria-label="Toggle navigation"
|
||||
>
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav ms-auto">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#posts">Posts</a>
|
||||
</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
|
||||
import Navbar from '../components/Navbar.astro';
|
||||
import Navbar from "../components/Navbar.astro";
|
||||
|
||||
// Full Astro Component Syntax:
|
||||
// https://docs.astro.build/basics/astro-components/
|
||||
const animateOnScroll = `
|
||||
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">
|
||||
<head>
|
||||
<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} />
|
||||
<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 rel="stylesheet" href="style.css">
|
||||
<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
|
||||
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>
|
||||
</head>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
</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