h4ckx0r/webSostenible
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Cambio favicon e imagen de fondo landing page
All checks were successful
Verificar versión, Compilar y Desplegar / check-version (push) Successful in 10s
Details
Verificar versión, Compilar y Desplegar / build (push) Successful in 25s
Details
Verificar versión, Compilar y Desplegar / deploy (push) Successful in 9s
Details

Browse Source
This commit is contained in:
Natanael Gómez Ortiz
2024-10-29 10:03:57 +01:00
parent ce3214c7ce
commit 7bdec6d419
5 changed files with 23 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@@ -1,7 +1,7 @@
{ {
"name": "websostenible", "name": "websostenible",
"type": "module", "type": "module",
"version": "0.2.0", "version": "0.2.1",
"scripts": { "scripts": {
"dev": "astro dev", "dev": "astro dev",
"devhost": "astro dev --host", "devhost": "astro dev --host",

BIN
public/imgs/bosqueverde.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.2 MiB

0
public/imgs/logo.png → public/logo.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 312 KiB

After

Width:  |  Height:  |  Size: 312 KiB

2
src/components/Navbar.astro
View File

@@ -7,7 +7,7 @@ const { home, posts, proyectos } = Astro.props;
<div class="container"> <div class="container">
<a class="navbar-brand d-flex align-items-center" href={home ? home : "/"}> <a class="navbar-brand d-flex align-items-center" href={home ? home : "/"}>
<Image <Image
src="/imgs/logo.png" src="/logo.png"
alt="Logo Ecobjetivos" alt="Logo Ecobjetivos"
class="me-2 biglogo" class="me-2 biglogo"
height="25" height="25"

39
src/pages/index.astro
View File

@@ -53,9 +53,13 @@ const animateOnScroll = `
<body> <body>
<Navbar /> <Navbar />
<header class="header-bg text-white"> <header class="header-bg text-white">
<img
src={"/imgs/bosqueverde.png"}
alt="Bosque Verde"
class="video-bg"
/>
<video autoplay muted loop class="video-bg"> <video autoplay muted loop class="video-bg">
<source src="/imgs/bosqueverde.mp4" type="video/mp4"> <source src="/imgs/bosqueverde.mp4" type="video/mp4" />
Tu navegador no soporta la reproducción de videos. Tu navegador no soporta la reproducción de videos.
</video> </video>
@@ -84,14 +88,15 @@ const animateOnScroll = `
<div class="row align-items-center"> <div class="row align-items-center">
<div class="col-md-6 animate-on-scroll"> <div class="col-md-6 animate-on-scroll">
<h2 class="display-4 mb-4">¿Qué son los ODS?</h2> <h2 class="display-4 mb-4">¿Qué son los ODS?</h2>
<p class="lead "> <p class="lead">
Los Objetivos de Desarrollo Sostenible (ODS) Los Objetivos de Desarrollo Sostenible (ODS) son
son un llamado universal a la acción para un llamado universal a la acción para erradicar
erradicar la pobreza, proteger el planeta y garantizar la pobreza, proteger el planeta y garantizar que
que todas las personas gocen de paz y prosperidad para todas las personas gocen de paz y prosperidad
2030. Estos objetivos buscan promover un desarrollo que para 2030. Estos objetivos buscan promover un
asegure la sostenibilidad de nuestros recursos desarrollo que asegure la sostenibilidad de
y ecosistemas para las futuras generaciones. nuestros recursos y ecosistemas para las futuras
generaciones.
</p> </p>
</div> </div>
<div class="col-md-6 animate-on-scroll"> <div class="col-md-6 animate-on-scroll">
@@ -251,7 +256,7 @@ const animateOnScroll = `
</section> </section>
</main> </main>
<Footer/> <Footer />
<script <script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
@@ -305,19 +310,17 @@ const animateOnScroll = `
border-radius: 8px; border-radius: 8px;
} }
header { header {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
.video-bg { .video-bg {
position: absolute; position: absolute;
} }
.container { .container {
position: relative; position: relative;
z-index: 1; z-index: 1;
} }
</style> </style>