Formulario de contacto
This commit is contained in:
@@ -1,4 +1,3 @@
|
||||
|
||||
<footer class="bg-dark text-white py-4">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
@@ -9,18 +8,20 @@
|
||||
</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
|
||||
>
|
||||
<a href="#" class="text-white me-2 text-decoration-none">
|
||||
<i class="fab fa-facebook-f"></i>
|
||||
</a>
|
||||
<a href="#" class="text-white me-2 text-decoration-none">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</a>
|
||||
<a href="#" class="text-white me-2 text-decoration-none">
|
||||
<i class="fab fa-instagram"></i>
|
||||
</a>
|
||||
<a href="#" class="text-white me-2 text-decoration-none">
|
||||
<i class="fab fa-linkedin-in"></i>
|
||||
</a>
|
||||
|
|
||||
<a href="/contacto" class="text-light ms-2 text-decoration-none">Contacto</a>
|
||||
</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