-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathinteracciones.html
206 lines (189 loc) · 11.6 KB
/
interacciones.html
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
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="/img/favicon.jpg" type="image/x-icon">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="/css/styles.css">
<title>Interacciones</title>
</head>
<body>
<header class="hero__">
<div class="container__">
<nav class="nav__">
<a href="index.html" class="nav_item__">Inicio</a>
<a href="historias-inspiradoras.html" class="nav_item__">Historias Inspiradoras</a>
<a href="mujeres-actualidad.html" class="nav_item__">Mujeres en la Actualidad</a>
<a href="interacciones.html" class="nav_item__">Interacciones</a>
<a href="contacto.html" class="nav_item__">Contacto</a>
</nav>
</div>
</header>
<div style="background-color: #f9f9f9;">
<h2 class="historias-title font-bold" style="padding: 10px 0;">Interacciones</h2>
<div class="flag-container">
<img src="/img/news.png" alt="Bandera de Colombia" class="news-icon">
</div>
<div class="container mx-auto p-6 max-w-6xl">
<!-- Información de la Publicación -->
<div class="bg-white shadow-lg rounded-lg overflow-hidden mb-6">
<img class="w-full h-72 object-cover" src="/img/noticias.png" alt="Foto de la Publicación">
<div class="p-6">
<h1 class="text-3xl font-bold mb-4">Laxmi: evitar que otras mujeres experimenten el mismo el dolor
que
padeció su propia madre</h1>
<p class="text-gray-600 text-lg mb-4">La maternidad sigue siendo peligrosa en muchos países,
especialmente en áreas rurales y desfavorecidas. Laxmi Tamang, una enfermera y partera de Nepal,
cuenta cómo su madre la desalentó a casarse o tener hijos debido al dolor y sufrimiento que ella
misma experimentó durante el parto, incluyendo largas horas, hemorragias y falta de atención
adecuada. Esto inspiró a Laxmi a trabajar para mejorar la salud de las mujeres rurales,
ofreciendo
capacitación en planificación familiar y atención materna. Aunque estas intervenciones pueden
prevenir complicaciones graves como la fístula obstétrica, en muchas áreas los partos aún
ocurren
sin la asistencia de profesionales. Laxmi insta a los trabajadores de salud a promover el
cuidado de
partería para reducir la morbimortalidad materna y neonatal.</p>
<div class="text-sm text-gray-500 flex justify-between items-center mb-4">
<span>Fecha: 09 Junio 2010</span>
<span>País: Estados Unidos</span>
</div>
<div class="flex items-center space-x-4 mb-6">
<img class="w-10 h-10 rounded-full" src="/img/interaccion1.jpeg" alt="Perfil del Usuario">
<div>
<p class="font-medium text-gray-900">Fondo de Población de las Naciones Unidas</p>
<p class="text-sm text-gray-500">Comentarios: 1, Lecturas: 50</p>
</div>
</div>
</div>
</div>
<!-- Área de Comentarios -->
<div class="bg-white shadow-lg rounded-lg p-6">
<h2 class="text-2xl font-bold mb-4">Comentarios</h2>
<!-- Lista de Comentarios -->
<div id="comentarios" class="space-y-4 mb-6">
<!-- Comentario de Ejemplo -->
<div class="p-4 bg-gray-100 rounded-lg">
<p class="text-gray-700">Es inspirador ver cómo Laxmi transformó el dolor de su madre en un
propósito para ayudar a otras mujeres, especialmente en zonas rurales. Sin embargo, es
preocupante que en pleno siglo XXI, tantas mujeres aún enfrenten partos sin acceso a
profesionales cualificados. Es urgente que los gobiernos y las organizaciones
internacionales
prioricen la salud materna y el acceso a servicios de calidad en todas las regiones.</p>
<div class="flex justify-between items-center text-sm text-gray-500 mt-2">
<span>Escrito por: Laura Gómez</span>
<span>Fecha: 16/10/2024, 9:25:03 p. m.</span>
</div>
</div>
</div>
<!-- Formulario para Añadir Comentarios -->
<form id="comentarioForm" class="space-y-4">
<input type="text" id="nombre" placeholder="Tu nombre"
class="w-full p-4 text-gray-700 border border-gray-300 rounded-lg">
<textarea id="comentarioTexto" placeholder="Escribe tu comentario..."
class="w-full p-4 text-gray-700 border border-gray-300 rounded-lg"></textarea>
<button type="submit" class="px-4 py-2 text-white rounded-lg hover:bg-blue-600"
style="background-color: #667eea;">Enviar</button>
</form>
</div>
<br><br><br>
<div class="bg-white shadow-lg rounded-lg overflow-hidden mb-6">
<img class="w-full h-72 object-cover" src="/img/interaccion2.jpeg" alt="Foto de la Publicación">
<div class="p-6">
<h1 class="text-3xl font-bold mb-4">El empoderamiento femenino se afianza en el sector de la belleza
en
Colombia</h1>
<p class="text-gray-600 text-lg mb-4">En América Latina, la industria de la belleza es ampliamente
liderada por mujeres, representando más del 80% de los negocios del sector. En Colombia, este
liderazgo femenino se refleja en empresas como Krika Cosmetics, el mayor retail de belleza del
país,
cuya fuerza laboral es predominantemente femenina. La empresa no solo se enfoca en ofrecer
productos
de belleza, sino también en fomentar el empoderamiento y el desarrollo profesional de sus
colaboradoras, buscando contribuir a la igualdad de género y al crecimiento económico de las
mujeres. Camilo Zuluaga, CEO de Krika, destaca que este enfoque ha mejorado la experiencia de
compra, permitiendo que las trabajadoras comprendan mejor las necesidades de sus clientes, en su
mayoría mujeres.</p>
<div class="text-sm text-gray-500 flex justify-between items-center mb-4">
<span>Fecha: 02 de abril de 2024</span>
<span>País: Colombia</span>
</div>
<div class="flex items-center space-x-4 mb-6">
<img class="w-10 h-10 rounded-full" src="/img/noticia.jpg" alt="Perfil del Usuario">
<div>
<p class="font-medium text-gray-900">El Espectador</p>
<p class="text-sm text-gray-500">Comentarios: 2, Lecturas: 55</p>
</div>
</div>
</div>
</div>
<!-- Área de Comentarios -->
<div class="bg-white shadow-lg rounded-lg p-6">
<h2 class="text-2xl font-bold mb-4">Comentarios</h2>
<!-- Lista de Comentarios -->
<div id="comentarios" class="space-y-4 mb-6">
<!-- Comentario de Ejemplo -->
<div class="p-4 bg-gray-100 rounded-lg">
<p class="text-gray-700">El enfoque de Krika Cosmetics en promover el talento femenino y generar
un
espacio de trabajo inclusivo es un gran paso hacia la igualdad de género en la industria.
</p>
<div class="flex justify-between items-center text-sm text-gray-500 mt-2">
<span>Escrito por: Ana Lopez</span>
<span>Fecha: 05/09/2024, 06:23:15 a. m.</span>
</div>
</div>
</div>
<div id="comentarios" class="space-y-4 mb-6">
<!-- Comentario de Ejemplo -->
<div class="p-4 bg-gray-100 rounded-lg">
<p class="text-gray-700">Es interesante ver cómo la industria de la belleza está liderada por
mujeres, pero aún hay mucho por hacer para cerrar la brecha de género en otras áreas
laborales.</p>
<div class="flex justify-between items-center text-sm text-gray-500 mt-2">
<span>Escrito por: Jeronimo</span>
<span>Fecha: 07/09/2024, 10:45:50 a. m.</span>
</div>
</div>
</div>
<!-- Formulario para Añadir Comentarios -->
<form id="comentarioForm" class="space-y-4">
<input type="text" id="nombre" placeholder="Tu nombre"
class="w-full p-4 text-gray-700 border border-gray-300 rounded-lg">
<textarea id="comentarioTexto" placeholder="Escribe tu comentario..."
class="w-full p-4 text-gray-700 border border-gray-300 rounded-lg"></textarea>
<button type="submit" class="px-4 py-2 text-white rounded-lg hover:bg-blue-600"
style="background-color: #667eea;">Enviar</button>
</form>
</div>
</div>
</div>
<script>
document.getElementById("comentarioForm").addEventListener("submit", function (event) {
event.preventDefault();
const nombre = document.getElementById("nombre").value;
const comentarioTexto = document.getElementById("comentarioTexto").value;
const fecha = new Date().toLocaleString();
if (nombre && comentarioTexto) {
const comentarioDiv = document.createElement("div");
comentarioDiv.classList.add("p-4", "bg-gray-100", "rounded-lg");
comentarioDiv.innerHTML = `
<p class="text-gray-700">${comentarioTexto}</p>
<div class="flex justify-between items-center text-sm text-gray-500 mt-2">
<span>Escrito por: ${nombre}</span>
<span>Fecha: ${fecha}</span>
</div>
`;
document.getElementById("comentarios").appendChild(comentarioDiv);
document.getElementById("nombre").value = "";
document.getElementById("comentarioTexto").value = "";
}
});
</script>
</body>
</html>