Formulario de contacto
This commit is contained in:
@@ -1,4 +1,3 @@
|
|||||||
|
|
||||||
<footer class="bg-dark text-white py-4">
|
<footer class="bg-dark text-white py-4">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
@@ -9,18 +8,20 @@
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-6 text-center text-md-end">
|
<div class="col-md-6 text-center text-md-end">
|
||||||
<a href="#" class="text-white me-2"
|
<a href="#" class="text-white me-2 text-decoration-none">
|
||||||
><i class="fab fa-facebook-f"></i></a
|
<i class="fab fa-facebook-f"></i>
|
||||||
>
|
</a>
|
||||||
<a href="#" class="text-white me-2"
|
<a href="#" class="text-white me-2 text-decoration-none">
|
||||||
><i class="fab fa-twitter"></i></a
|
<i class="fab fa-twitter"></i>
|
||||||
>
|
</a>
|
||||||
<a href="#" class="text-white me-2"
|
<a href="#" class="text-white me-2 text-decoration-none">
|
||||||
><i class="fab fa-instagram"></i></a
|
<i class="fab fa-instagram"></i>
|
||||||
>
|
</a>
|
||||||
<a href="#" class="text-white"
|
<a href="#" class="text-white me-2 text-decoration-none">
|
||||||
><i class="fab fa-linkedin-in"></i></a
|
<i class="fab fa-linkedin-in"></i>
|
||||||
>
|
</a>
|
||||||
|
|
|
||||||
|
<a href="/contacto" class="text-light ms-2 text-decoration-none">Contacto</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
125
src/pages/contacto.astro
Normal file
125
src/pages/contacto.astro
Normal file
@@ -0,0 +1,125 @@
|
|||||||
|
---
|
||||||
|
import Footer from "../components/Footer.astro";
|
||||||
|
import Navbar from "../components/Navbar.astro";
|
||||||
|
|
||||||
|
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.0" />
|
||||||
|
<meta name="generator" content={Astro.generator} />
|
||||||
|
<link rel="sitemap" href="/sitemap-index.xml" />
|
||||||
|
<meta
|
||||||
|
name="description"
|
||||||
|
content="Contacta con nosotros para cualquier duda sobre sostenibilidad y los Objetivos de Desarrollo Sostenible (ODS)."
|
||||||
|
/>
|
||||||
|
<link rel="icon" type="image/png" href="logo.png" />
|
||||||
|
<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>Contacto | Ecobjetivos</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="page-container">
|
||||||
|
<Navbar />
|
||||||
|
|
||||||
|
<main class="container py-5">
|
||||||
|
<h1 class="text-center mt-4 mb-5 animate__animated animate__fadeInDown">Contacta con Nosotros</h1>
|
||||||
|
|
||||||
|
<div class="row justify-content-center">
|
||||||
|
<div class="col-md-8">
|
||||||
|
<div class="card shadow-lg animate-on-scroll">
|
||||||
|
<div class="card-body p-5">
|
||||||
|
<div class="row mb-4 justify-content-center">
|
||||||
|
<div class="col-md-6 mb-4 mb-md-0">
|
||||||
|
<div class="text-center">
|
||||||
|
<i class="fas fa-envelope fa-3x text-primary mb-3"></i>
|
||||||
|
<h3>Email</h3>
|
||||||
|
<p>Escríbenos a:</p>
|
||||||
|
<a href="mailto:ecobjetivos@h4ckdata.es" class="btn btn-primary">
|
||||||
|
ecobjetivos@h4ckdata.es
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- <div class="col-md-6">
|
||||||
|
<div class="text-center">
|
||||||
|
<i class="fab fa-discord fa-3x text-primary mb-3"></i>
|
||||||
|
<h3>Discord</h3>
|
||||||
|
<p>Únete a nuestra comunidad:</p>
|
||||||
|
<a href="https://discord.gg/tuenlace" class="btn btn-primary">
|
||||||
|
Servidor de Discord
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div> -->
|
||||||
|
</div>
|
||||||
|
<!--
|
||||||
|
<hr class="my-5" />
|
||||||
|
|
||||||
|
<form class="animate-on-scroll">
|
||||||
|
<h3 class="text-center mb-4">O envíanos un mensaje directamente</h3>
|
||||||
|
<div class="mb-3">
|
||||||
|
<label for="nombre" class="form-label">Nombre</label>
|
||||||
|
<input type="text" class="form-control" id="nombre" required />
|
||||||
|
</div>
|
||||||
|
<div class="mb-3">
|
||||||
|
<label for="email" class="form-label">Email</label>
|
||||||
|
<input type="email" class="form-control" id="email" required />
|
||||||
|
</div>
|
||||||
|
<div class="mb-3">
|
||||||
|
<label for="asunto" class="form-label">Asunto</label>
|
||||||
|
<input type="text" class="form-control" id="asunto" required />
|
||||||
|
</div>
|
||||||
|
<div class="mb-3">
|
||||||
|
<label for="mensaje" class="form-label">Mensaje</label>
|
||||||
|
<textarea class="form-control" id="mensaje" rows="5" required></textarea>
|
||||||
|
</div>
|
||||||
|
<div class="text-center">
|
||||||
|
<button type="submit" class="btn btn-primary btn-lg">Enviar Mensaje</button>
|
||||||
|
</div>
|
||||||
|
</form> -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<Footer/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script set:html={animateOnScroll} />
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.page-container {
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user