Skip to main content

​
Overview

The Volunteer Program is a core feature of Siloé Perú that enables volunteers to accompany children and families during their hospital stay at Hospital del Niño and in vulnerable communities throughout Peru.

​
Key Activities

The volunteer program includes three main activities:

Bedside Accompaniment

Reading stories, board games, and active listening to reduce hospitalization stress

Family Support

Providing emotional support to parents from provinces who spend long hours at the hospital

Art Workshops

Creative spaces where children can express themselves and forget their ailments for a moment
The volunteer section features a 3D flip card gallery that showcases volunteer stories and impact. When users click on an image, it flips to reveal an inspirational message.

​
HTML Structure

Each gallery item follows this structure from index.html:66-84: 
<div class="galeria-item">
    <div class="galeria-flip-card">
        <div class="galeria-flip-front">
            <img src="./img voluntario/img2.png" alt="Voluntarios ayudando">
            <div class="galeria-overlay">
                <p>Juntos Somos Más Fuertes</p>
            </div>
        </div>
        <div class="galeria-flip-back">
            <div class="galeria-historia">
                <p class="historia-titulo">🤝 Comunidad</p>
                <p class="historia-texto">"Un voluntario es fuerte, pero una comunidad de voluntarios es invencible. Trabajamos juntos para crear un impacto tan grande que ningún niño se sienta abandonado."</p>
                <p class="historia-autor">— Misión Siloé</p>
            </div>
        </div>
    </div>
</div>
The gallery system uses these key CSS classes from style.css: 
.galeria-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    max-width: 1400px;
    margin: 0 auto;
}

​
3D Flip Card Animation

The flip effect is achieved using CSS 3D transforms:
1

Flip Card Container

The .galeria-flip-card container enables 3D perspective:
style.css:1440-1447
.galeria-flip-card {
    width: 100%;
    height: 100%;
    position: relative;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    cursor: pointer;
}
2

Flipped State

When clicked, the .flipped class rotates the card 180 degrees:
style.css:1450-1452
.galeria-flip-card.flipped {
    transform: rotateY(180deg);
}
3

Front Face

The front shows the image with an overlay on hover:
style.css:1455-1460
.galeria-flip-front {
    width: 100%;
    height: 100%;
    position: absolute;
    backface-visibility: hidden;
}
4

Back Face

The back face contains the story/message:
style.css:1463-1476
.galeria-flip-back {
    width: 100%;
    height: 100%;
    position: absolute;
    backface-visibility: hidden;
    transform: rotateY(180deg);
    background: linear-gradient(135deg, var(--azul-siloe), var(--rosa-vibrante));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    border-radius: 15px;
    overflow: hidden;
}

​
JavaScript Click Handler

The flip functionality is controlled by JavaScript in index.html:831-854: 
// Select all flip cards
const flipCards = document.querySelectorAll('.galeria-flip-card');
let currentFlipped = null; // Track currently flipped card

// Add click listener to each card
flipCards.forEach(card => {
    card.addEventListener('click', function() {
        // If another card is flipped, flip it back
        if (currentFlipped && currentFlipped !== this) {
            currentFlipped.classList.remove('flipped');
        }
        
        // Toggle 'flipped' class on current card
        this.classList.toggle('flipped');
        
        // Update reference to flipped card
        if (this.classList.contains('flipped')) {
            currentFlipped = this;
        } else {
            currentFlipped = null;
        }
    });
});
The JavaScript ensures only one card is flipped at a time. When clicking a new card, the previously flipped card automatically flips back.

​
Volunteer Application Form

The volunteer program includes a comprehensive application form that integrates with FormSubmit.co for email delivery.

​
Form Structure

From index.html:178-210, the form includes these fields: 
<form class="volunteer-form" action="https://formsubmit.co/[email protected]" method="POST">
    <div class="form-group">
        <label for="nombre-voluntario">Nombre Completo *</label>
        <input type="text" id="nombre-voluntario" name="Nombre Completo" 
               placeholder="Tu nombre completo" required>
    </div>
    
    <div class="form-group">
        <label for="dni-voluntario">DNI (Identificación) *</label>
        <input type="text" id="dni-voluntario" name="DNI" 
               placeholder="Tu número de DNI" required>
    </div>
    
    <div class="form-group">
        <label for="telefono-voluntario">Número de Celular *</label>
        <input type="tel" id="telefono-voluntario" name="Teléfono" 
               placeholder="Tu teléfono de contacto" required>
    </div>
    
    <div class="form-group">
        <label for="motivacion-voluntario">¿Por qué te gustaría apoyar? *</label>
        <textarea id="motivacion-voluntario" name="Motivación" 
                  placeholder="¿Por qué te gustaría apoyar en el Hospital del Niño?" 
                  rows="5" required></textarea>
    </div>
    
    <div class="form-group checkbox-group">
        <input type="checkbox" id="aceptacion-voluntario" 
               name="Aceptación" required style="width: auto;">
        <label for="aceptacion-voluntario" style="width: auto;">
            Acepto la política de privacidad y el uso de mis datos para la gestión del voluntariado.
        </label>
    </div>
    
    <button type="submit" class="btn-enviar">ENVIAR MI SOLICITUD</button>
</form>

​
Form Fields

Field NameTypeRequiredPurpose
Nombre CompletotextYesVolunteer’s full name
DNItextYesNational identification number
TeléfonotelYesContact phone number
MotivacióntextareaYesWhy they want to volunteer
AceptacióncheckboxYesPrivacy policy acceptance

​
Form Styling

The form uses these CSS classes from style.css:329-427: 
.form-section { 
    padding: 60px 20px; 
    background: #f4f7f6; 
}

​
FormSubmit.co Integration

The form uses FormSubmit.co as a serverless email service:
1

Set Form Action

Point the form action to FormSubmit’s endpoint:
<form action="https://formsubmit.co/[email protected]" method="POST">
2

Name Input Fields

Use descriptive name attributes that will appear in the email:
<input name="Nombre Completo" ...>
<input name="DNI" ...>
<input name="Teléfono" ...>
<textarea name="Motivación" ...></textarea>
3

Submit Form

When submitted, FormSubmit sends an email with all field data to the specified email address.
FormSubmit requires email verification on first use. The recipient will receive a confirmation email to activate the endpoint.
To add a new story to the volunteer gallery:
1

Choose Gallery Size

Decide if the item should be regular or large:
  • Regular: <div class="galeria-item">
  • Large (2x2 grid): <div class="galeria-item galeria-item-grande">
2

Add the HTML Structure

Copy the flip card structure and customize:
<div class="galeria-item">
    <div class="galeria-flip-card">
        <div class="galeria-flip-front">
            <img src="./img voluntario/your-image.jpg" alt="Description">
            <div class="galeria-overlay">
                <p>Your Overlay Title</p>
            </div>
        </div>
        <div class="galeria-flip-back">
            <div class="galeria-historia">
                <p class="historia-titulo">📸 Your Icon & Title</p>
                <p class="historia-texto">"Your inspirational story or message here."</p>
                <p class="historia-autor">— Author Name</p>
            </div>
        </div>
    </div>
</div>
3

Place in Gallery Grid

Add your new item inside the .galeria-grid container in the volunteer section (around line 66 in index.html).
4

Test the Flip

The JavaScript automatically attaches click handlers to all .galeria-flip-card elements, so no additional code is needed.

​
Color Variables

The volunteer section uses these color variables defined in style.css:4-11: 
:root {
    --azul-siloe: #29abe2;       /* Main blue color */
    --celeste-claro: #e1f5fe;    /* Light blue for cards */
    --gris-oscuro: #333;         /* Main text color */
    --blanco: #ffffff;           /* Main background */
    --amarillo-vibrante: #FFD700; /* Yellow accent */
    --rosa-vibrante: #FF69B4;     /* Pink accent */
}
The volunteer program primarily uses --azul-siloe (blue) for its branding, while the clown section uses the vibrant yellow and pink gradient.

Build docs developers (and LLMs) love

Get started for freeTalk to us