BCNmetropolitan/index.html at main · FABJAH/BCNmetropolitan · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!DOCTYPE html>
<html lang="es">
<head>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">

  <meta charset="UTF-8">
  <title>Barcelona Metropolitan 2.0</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <header>
    <h1>Barcelona Metropolitan</h1>
    <nav>
      <ul>
        <li><a href="#">Inicio</a></li>
        <li><a href="#">Artículos</a></li>
        <li><a href="#">Negocios</a></li>
        <li><a href="#">Contacto</a></li>
      </ul>
    </nav>
  </header>

  <!-- Agrega esto dentro de <main> antes de </main> -->
<section class="galeria">
  <h2>Galería de Barcelona</h2>
  <div class="galeria-fotos">
    <div class="foto">
    <img src="Imagenes/bcn1.webp" alt="Amplio paisaje español con colinas verdes y cielo azul claro, ambiente tranquilo y natural, sin texto visible">
      <h3>Un lugar apara disfrutar noches frias </h3>
    </div>
    <div class="foto">
    <img src="Imagenes/bcn2.webp" alt="">
      <h3>Ya penso donde ir de desacanso?</h3>
    </div>
    <div class="foto">
      <img src="Imagenes/bcn3.webp" alt="Descripción 3">
      <h3>Necesitan Documentos</h3>
    </div>
    <div class="foto">
      <img src="Imagenes/bcn4.webp" alt="Descripción 4">
      <h3>Asesoria en salud</h3>
    </div>
    <div class="foto">
      <img src="Imagenes/bcn5.webp" alt="Descripción 5">
      <h3>opciones para disfrutar en Familia </h3>
    </div>
    <div class="foto">
      <img src="Imagenes/bcn6.webp" alt="Descripción 6">
      <h3>Paisajes que relajan</h3>
    </div>
  </div>
</section>

  <main>
    <main>
  <section>
    <h2>Destacados</h2>
    <div class="destacado-banner">
      <img src="Imagenes/bcnD.jpg" alt="Destacado Barcelona">
      <span class="destacado-texto">Artículos Destacados</span>
    </div>
    <p>Explora lo mejor de Barcelona en dos idiomas.</p>
  </section>

    <section>
      <h2>Negocios recomendados</h2>
      <p>Conectamos lectores con comercios locales.</p>


  <h2>Negocios recomendados</h2>
  <div class="negocios-lista">
    <div class="negocio">
      <img src="Imagenes/cafe.jpg" alt="Café Central">
      <h3>Café Central</h3>
      <p>Un café acogedor con repostería internacional y wifi rápido. Ideal para trabajar o relajarse.</p>
      <span>Dirección: Calle Mayor 12, Barcelona</span>
    </div>
    <div class="negocio">
      <img src="Imagenes/tienda.jpg" alt="Tienda Mundo Latino">
      <h3>Tienda Mundo Latino</h3>
      <p>Productos latinos y asesoría para trámites de residencia.</p>
      <span>Dirección: Avenida Diagonal 45, Barcelona</span>
    </div>
    <div class="negocio">
      <img src="Imagenes/asesoria.jpg" alt="Asesoría ExpatHelp">
      <h3>Asesoría ExpatHelp</h3>
      <p>Ayuda legal y traducciones para expatriados. Atención en inglés y español.</p>
      <span>Dirección: Plaza Cataluña 3, Barcelona</span>
    </div>
  </div>
</section>

</main>


  <footer>
    <p>&copy; 2025 Barcelona Metropolitan</p>
  </footer>

  <!-- Botón flotante -->
  <div class="chat-button" onclick="abrirChat()">
    💬
  </div>

  <script src="script.js"></script>

  <link rel="icon" href="favicon.ico" type="image/x-icon" />

  <!-- Chat flotante -->
<div id="chatbox" class="chatbox" style="display:none;">
  <div class="chatbox-header">
    <span>ChatBot BCN</span>
    <button onclick="cerrarChat()" class="cerrar-chat">×</button>
  </div>
  <div id="chat-mensajes" class="chat-mensajes"></div>
  <input id="chat-input" type="text" placeholder="Escribe tu pregunta..." onkeydown="if(event.key==='Enter'){enviarPregunta();}">
  <button onclick="enviarPregunta()">Enviar</button>
</div>

</body>
</html>