jesus-y-maria-en-accion/index.html at main · FredGui10/jesus-y-maria-en-accion · 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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Jesús y María en Acción | Amar es Servir</title>
  <meta name="description" content="Grupo católico hispanohablante en Hamburgo dedicado al servicio, evangelización y ayuda social. Amar es Servir.">
  <meta name="keywords" content="católicos hamburgo, comunidad hispana hamburgo, misión católica hamburgo, ayuda social, jesús y maría en acción">
  <link rel="icon" type="image/png" href="images/favicon/favicon.png">
  <link rel="stylesheet" href="style.css" />
</head>
<body>

  <div id="header"></div>

  <main class="page-layout">
    <div id="sidebar"></div>

    <section class="main-content">
      <div class="hero-card fade-in">
        <img src="images/image-center.png" alt="Jesús y María en Acción" class="hero-image" />
      </div>

      <section class="welcome-section reveal">
        <h1>Bienvenidos</h1>
        <p>
          <strong>“Jesús y María en Acción”</strong> es el grupo de acción social de la Comunidad Católica
          Hispanohablante de Hamburgo. Promovemos iniciativas de solidaridad, acompañamiento
          y ayuda a las personas más necesitadas en Hamburgo, viviendo el llamado cristiano
          a las obras de misericordia.
        </p>
        <p>
          Nuestro lema <strong>“Amar es Servir”</strong>, expresa nuestro compromiso de hacer
          presente el amor de Cristo mediante acciones concretas al servicio del prójimo.
        </p>

        <div class="button-group">
          <a href="contacto.html" class="btn primary">Necesito ayuda</a>
          <a href="como-ayudar.html" class="btn secondary">Quiero colaborar</a>
        </div>
      </section>

      <section class="cards-section reveal">
        <article class="info-card">
          <h2>Asistencia Social</h2>
          <p>Apoyo a personas vulnerables mediante alimentos, ropa, juguetes y acompañamiento.</p>
        </article>

        <article class="info-card">
          <h2>Comunidad</h2>
          <p>Encuentros, convivios y espacios para fortalecer la unión de la comunidad.</p>
        </article>

        <article class="info-card">
          <h2>Autosustento</h2>
          <p>Talleres y actividades que promueven integración, aprendizaje y desarrollo personal.</p>
        </article>
      </section>
      <section class="home-mission reveal">
  <h2>Una comunidad al servicio del prójimo</h2>
  <p>
    Trabajamos con fe, amor y compromiso para acompañar a personas y familias
    en Hamburgo mediante actividades solidarias, apoyo comunitario y espacios de integración.
  </p>
</section>

<section class="home-actions reveal">
  <article>
    <h3>🤝 Ayuda solidaria</h3>
    <p>Recolectamos y distribuimos alimentos, ropa, juguetes y artículos de primera necesidad.</p>
  </article>

  <article>
    <h3>❤️ Acompañamiento</h3>
    <p>Brindamos apoyo humano y espiritual a quienes atraviesan momentos difíciles.</p>
  </article>

  <article>
    <h3>🌍 Integración</h3>
    <p>Orientamos a personas recién llegadas y fortalecemos la unión de la comunidad.</p>
  </article>

  <article>
    <h3>🙏 Fe y servicio</h3>
    <p>Vivimos nuestra fe católica a través de acciones concretas de amor al prójimo.</p>
  </article>
</section>

<section class="home-call reveal">
  <h2>¿Quieres ser parte de esta misión?</h2>
  <p>
    Cada persona puede aportar algo: tiempo, oración, conocimientos, donaciones
    o simplemente el deseo de servir.
  </p>
  <a href="como-ayudar.html" class="btn secondary">Ver cómo ayudar</a>
</section>
    </section>

    <aside class="right-column reveal">
      <div class="right-box">
    <h3>Próxima actividad</h3>

    <img src="images/actividad-1.jpeg"
         alt="Fiesta de la Comunidad"
         class="activity-image">

    <h4>Fiesta de la Comunidad</h4>

    <p>
        La Comunidad Católica en Idioma Español de Hamburgo invita a
        todas las familias y amigos a participar en esta gran celebración.
    </p>

    <p>
        📅 <strong>20 de Junio de 2026</strong><br>
        🕑 De 14:00 a 20:00 horas<br>
        📍 HdKD, Danziger Str. 64, 20099 Hamburg
    </p>

    <p>
        Comida típica, música, baile, rifas, premios y mucho más.
        ¡Todos unidos por la fe!
    </p>
</div>

<div class="right-box">
    <h3>Rosario Virtual</h3>

    <img src="images/rosario-1.jpeg"
         alt="Rosario Virtual"
         class="activity-image">

    <p>
        <strong>Bendecido día para todos.</strong>
    </p>

    <p>
        Invitación al Santo Rosario 🌹🙏🏼
    </p>

    <p>
        Unidos en oración con nuestra Santísima Madre,
        la Virgen María. Cada día nos reunimos para orar juntos,
    encomendar nuestras intenciones y acercarnos
    más a Jesús por medio de María.
    </p>

    <a
      href="https://meet.google.com/ncn-cphq-fcn"
      target="_blank"
      class="rosario-link">
      Unirme al Rosario
    </a>
</div>

      <div class="right-box">
        <h3>¿Quieres unirte?</h3>
        <p>Si deseas servir, colaborar o formar parte del grupo, contáctanos.</p>
        <a href="contacto.html">Ir a contacto</a>
      </div>

      <div class="right-box">
        <h3>Lema</h3>
        <p><strong>Amar es Servir</strong></p>
      </div>
    </aside>
  </main>

  <div id="footer"></div>

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