CRUZ ROJA ARGENTINA

1. 1863 Se fundó Cruz Roja por inspiración del comerciante suizo Henry Dunant. Tras presenciar la Batalla de Solferino en Italia, quedó sensibilizado por la necesidad de ayudar a las personas heridas sin hacer distinción de bandos, por lo que decidió crear un equipo para brindar Primeros Auxilios.
2. 1864 El Comité Internacional de la Cruz Roja logró convocar a una conferencia diplomática donde se firmó el Primer Convenio de Ginebra, dando inicio al Derecho Internacional Humanitario.
3. 1864 Se determina al 8 de mayo cómo el Día Mundial de la Cruz Roja, en homenaje al nacimiento de Henry Dunant.
4. 1880 Guillermo Rawson y Toribio Ayerza crean Cruz Roja Argentina. El país se sumó al Movimiento Internacional de la Cruz Roja y la Media Luna Roja. A 10 días de su fundación, la Sociedad Nacional se desplegó por primera vez en las batallas de la guerra civil para brindar atención a las personas heridas.
5. 1886 Durante la epidemia de cólera, Cruz Roja Argentina estableció un hospital en Tucumán y envió equipos para brindar socorro a las provincias afectadas.
6. 1920 Cruz Roja Argentina crea la primera escuela de enfermería en Buenos Aires.
7. 1930 Durante el levantamiento contra Hipólito Yrigoyen, los equipos de Cruz Roja Argentina estuvieron desde el primer momento. El voluntariado brindó Primeros Auxilios y trasladó a personas heridas con armas de fuego durante los enfrentamientos en la Plaza del Congreso.
8. 1934 Cruz Roja Argentina comienza a dictar clases y a formar guardavidas.
9. 1944 Un sismo destruyó el 90% de la ciudad de San Juan y causó la muerte de alrededor de 10.000 habitantes. El voluntariado de Cruz Roja Argentina brindó Primeros Auxilios a las personas heridas y gestionó un puente aéreo de ayuda humanitaria.
10. 1992-94 El voluntariado de Cruz Roja Argentina apoyó en tareas logísticas a los equipos de bomberos y policías durante la respuesta a emergencia por los atentados en la Embajada de Israel y AMIA.
11. 2001 Cientos de voluntarios y voluntarias brindaron asistencia en la calle durante las movilizaciones sociales que tuvieron lugar en el mes de diciembre. En los años siguientes, Cruz Roja Argentina implementó un Plan de Acción contra la desnutrición y la pobreza en el norte del país.
12. 2003 Más de 5.000 voluntarios y voluntarias de Cruz Roja Argentina realizaron rescates acuáticos, distribución de ayuda humanitaria y brindaron apoyo psicosocial a las familias afectadas por inundaciones en Santa Fe.
13. 2004 El voluntariado de Cruz Roja Argentina brindó apoyo psicosocial y acompañamiento a las y los familiares de las víctimas en Cromañón, Ciudad Autónoma de Buenos Aires.
14. 2009 Más de 20.000 personas fueron afectadas por un alud en Tartagal, Salta. Cruz Roja Argentina brindó apoyo psicosocial, entregó kits de ayuda humanitaria y capacitó a la comunidad en agua y saneamiento.
15. 2013 Más de 350.000 personas fueron afectadas y más de 3.000 fueron evacuadas por las inundaciones en La Plata, Buenos Aires. El voluntariado de Cruz Roja Argentina asistió a 9.600 personas con acciones de ayuda humanitaria, atención en Primeros Auxilios y preparación para emergencias y desastres.
16. 2020 Se instala el primer Campamento Humanitario en el norte de Salta para asistir a las comunidades toba, wichí y chorote ante la emergencia sociosanitaria declarada en la zona. Además, se elaboró un Plan de Acción que ayudó a fortalecer a estas comunidades.
17. 2020-22… Se brindó respuesta ante la emergencia sociosanitaria por COVID-19 en todo el país gracias al trabajo de sus 66 filiales. Fortalecimos el sistema de salud, brindamos asistencia y apoyo psicosocial en los centros de aislamiento. Además, trabajamos en la recuperación de la población promoviendo su resiliencia.

button {
background: transparent;
border: none;
cursor: pointer;
outline: none;
}

body {
background: #f5f5f5;
color: #fff;
}

/* .section SECTION
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.section {
background: #F45B69;
padding: 50px 0;
}

.section .container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
text-align: center;
}

.section h1 {
font-size: 2.5rem;
}

.section h2 {
font-size: 1.3rem;
}

/* TIMELINE
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.timeline {
white-space: nowrap;
overflow-x: hidden;
}

.timeline ol {
font-size: 0;
width: 100vw;
padding: 250px 0;
transition: all 1s;
}

.timeline ol li {
position: relative;
display: inline-block;
list-style-type: none;
width: 160px;
height: 3px;
background: #e32219;
}

.timeline ol li:last-child {
width: 280px;
}

.timeline ol li:not(:first-child) {
margin-left: 14px;
}

.timeline ol li:not(:last-child)::after {
content: '';
position: absolute;
top: 50%;
left: calc(100% + 1px);
bottom: 0;
width: 22px;
height: 22px;
transform: translateY(-50%);
border-radius: 50%;
border: none!important;
background: #fff;
z-index: 2;
}
.timeline ol li div {
box-shadow: 2px 2px 5px 0px rgb(0 0 0 / 75%);
-webkit-box-shadow: 2px 2px 5px 0px rgb(0 0 0 / 75%);
-moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);
}
.timeline time {
color: #e32219;
}
.timeline ol li div {
position: absolute;
left: calc(100% + 7px);
width: 280px;
padding: 15px;
font-size: 1rem;
white-space: normal;
color: black;
background: white;
border-radius: 10px;
border: 1px;
}

.timeline ol li div::before {
content: '';
position: absolute;
top: 100%;
left: 0;
width: 0;
height: 0;
border-style: solid;
}

.timeline ol li:nth-child(odd) div {
top: -16px;
transform: translateY(-100%);
border-radius: 10px 10px 10px 0px;
}

.timeline ol li:nth-child(odd) div::before {
top: 100%;
border-width: 8px 8px 0 0;
border-color: white transparent transparent transparent;
border-width: 8px 8px 4px 0;
border-radius: 8px;
}

.timeline ol li:nth-child(even) div {
top: calc(100% + 16px);
}

.timeline ol li:nth-child(even) div::before {
top: -8px;
border-width: 8px 0 0 8px;
border-color: transparent transparent transparent white;
}

.timeline time {
display: block;
font-size: 3rem;
font-weight: bold;
margin-bottom: 25px;
margin-top: 12px;
}

/* TIMELINE ARROWS
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.timeline .arrows {
display: flex;
justify-content: center;
margin-bottom: 20px;
}

.timeline .arrows .arrow__prev {
margin-right: 20px;
}

.timeline .disabled {
opacity: .5;
}

.timeline .arrows img {
width: 45px;
height: 45px;
}

.timeline ol li {
position: relative;
display: inline-block;
list-style-type: none;
width: 160px;
height: 3px;
background: transparent;
padding-top: 0;
border-bottom: none!important;
padding-bottom: 17px;
}
.timeline ol li div {
position: absolute;
left: calc(100% + 7px);
width: 280px;
padding: 15px;
font-size: 1rem;
white-space: normal;
color: black;
background: white;
margin-top: 7px;
border-radius: 0px 10px 10px 10px;
border: 1px;
}
.timeline ol li:nth-child(even) div::before {
top: -8px;
border-color: transparent transparent transparent transparent;
background: none!important;
width: 20px;
height: 20px;
background-repeat: no-repeat;
background-position: left top;
margin-top: -8px;
background-size: contain;
margin-left: -1px;
border-width: 8px 8px 4px 0;
border-radius: 8px;
}

.timeline ol li:not(:last-child)::after {
content: '';
position: absolute;
top: 0;
left: calc(100% + 1px);
bottom: 0;
width: 22px;
height: 22px;
transform: translateY(-50%);
border-radius: 50%;
border: none!important;
background: #fff;
margin: 15px 0px;
/* padding-bottom: 50px; */
z-index: 2;
}

.timeline ol li:nth-child(odd) div::before {
top: 100%;
border-width: 8px 8px 4px 0;
border-radius: 8px;
border-color: transparent transparent transparent transparent;
background: none!important;
width: 20px;
height: 20px;
background-repeat: no-repeat;
background-position: left top;
margin-top: -8px;
background-size: contain;
margin-left: -1px;
}

/* GENERAL MEDIA QUERIES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media screen and (max-width: 599px) {
.timeline ol,
.timeline ol li {
width: auto;
}

.timeline ol {
padding: 0;
transform: none !important;
}

.timeline ol li {
display: block;
height: auto;
background: transparent;
}

.timeline ol li:first-child {
margin-top: 25px;
}

.timeline ol li:not(:first-child) {
margin-left: auto;
}

.timeline ol li div {
width: 94%;
height: auto !important;
margin: 0 auto 25px;
}

.timeline ol li div {
position: static;
}

.timeline ol li:nth-child(odd) div {
transform: none;
}

.timeline ol li:nth-child(odd) div::before,
.timeline ol li:nth-child(even) div::before {
left: 50%;
top: 100%;
transform: translateX(-50%);
/* border: none; */
border-left: 1px solid white;
height: 25px;
}

.timeline ol li:last-child,
.timeline ol li:nth-last-child(2) div::before,
.timeline ol li:not(:last-child)::after,
.timeline .arrows {
display: none;
}
}

(function() {

// VARIABLES const timeline = document.querySelector(".timeline ol"), elH = document.querySelectorAll(".timeline li > div"), arrows = document.querySelectorAll(".timeline .arrows .arrow"), arrowPrev = document.querySelector(".timeline .arrows .arrow__prev"), arrowNext = document.querySelector(".timeline .arrows .arrow__next"), firstItem = document.querySelector(".timeline li:first-child"), lastItem = document.querySelector(".timeline li:last-child"), xScrolling = 880, disabledClass = "disabled";

// START window.addEventListener("load", init);

function init() { setEqualHeights(elH); animateTl(xScrolling, arrows, timeline); setSwipeFn(timeline, arrowPrev, arrowNext); setKeyboardFn(arrowPrev, arrowNext); }

// SET EQUAL HEIGHTS function setEqualHeights(el) { let counter = 0; for (let i = 0; i < el.length; i++) { const singleHeight = el[i].offsetHeight; if (counter < singleHeight) { counter = singleHeight; } } for (let i = 0; i = 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth) ); } // SET STATE OF PREV/NEXT ARROWS function setBtnState(el, flag = true) { if (flag) { el.classList.add(disabledClass); } else { if (el.classList.contains(disabledClass)) { el.classList.remove(disabledClass); } el.disabled = false; } } // ANIMATE TIMELINE function animateTl(scrolling, el, tl) { let counter = 0; for (let i = 0; i { isElementInViewport(firstItem) ? setBtnState(arrowPrev) : setBtnState(arrowPrev, false); isElementInViewport(lastItem) ? setBtnState(arrowNext) : setBtnState(arrowNext, false); }, 1100);

counter++; }); } }

// ADD SWIPE SUPPORT FOR TOUCH DEVICES function setSwipeFn(tl, prev, next) { const hammer = new Hammer(tl); hammer.on("swipeleft", () => next.click()); hammer.on("swiperight", () => prev.click()); }

// ADD BASIC KEYBOARD FUNCTIONALITY function setKeyboardFn(prev, next) { document.addEventListener("keydown", (e) => { if ((e.which === 37) || (e.which === 39)) { const timelineOfTop = timeline.offsetTop; const y = window.pageYOffset; if (timelineOfTop !== y) { window.scrollTo(0, timelineOfTop); } if (e.which === 37) { prev.click(); } else if (e.which === 39) { next.click(); } } }); }

})();