historia-de-zainab/templates/page1.html

<div class="container-fluid">
    <div class="row">
        <div class="col-md-9 section-left">
            <div class="section-inner-content">
                <div class="story-content" style="background-image: url(images/c1_IMG_story.jpg)">
                <!--     <img src="images/c1_IMG_story.jpg" class="img-responsive" /> imagen de historia-->
                </div>
                <div class="data-content" style="display:none; background-image: url(images/c1_IMG_grafico.jpg)">
                    <!-- <img src="images/c1_IMG_grafico.jpg" class="img-responsive" /> imagen de datos-->
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="menu-content">
                <!-- METER CONTENIDO DEL PANEL DERECHO AQUÍ -->
                <div class="menu-story-content">
                    <div class="row">
                        <div class="col-md-9 col-md-offset-1 col-lg-8 col-lg-offset-2 col-sm-10 col-sm-offset-1 col-xl-7 col-xl-offset-1">

                        <div class="menu-story-inner">
                            Este cómic quiere2 visibilizar el éxodo de Zainab y su familia que, como otros 11 millones de personas, se han visto obligadas a abandonar su hogar desde que en 2011 comenzó la guerra en Siria. Esta historia y sus protagonistas se basan en casos y hechos reales.
                        </div>
                        <a href="#" class="switchMode" class="btn btn-circle">   <img src="images/c1_ver_grafico.jpg" class="vergrafico img-responsive" /> </a>
                </div>
            </div>
                </div>
                <div class="menu-data-content" style="display:none">
                    <div class="row">
                        <div class="col-md-9 col-md-offset-1 col-lg-8 col-lg-offset-2 col-sm-10 col-sm-offset-1 col-xl-7 col-xl-offset-1">

                            <div class="menu-data-inner"> Este proyecto se ha realizado durante Visualizar'17, un proceso de investigación participativo sobre visualización de información y migraciones.
                                Los datos entran en acción para contar una historia. Y si a menudo es difícil obtener datos fiables, en un contexto de guerra todas las cifras se convierten en estimaciones.
                                 No por ello dejan de representar una realidad que están viviendo millones de personas tratadas como números.
                                 Aquí tratamos a los números como personas.
                            </div>
                            <a href="#" class="referencias" id="referencias-page-btn-1"> Referencias bibliográficas </a>
                            <a href="#" class="switchMode" class="btn btn-circle">
                                <img src="images/c1_ver_story.jpg" class="verstory img-responsive" />
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="extra-btn-container">
                <a class="" id="map-btn-page-1" href="#"> <img src="images/c1_menu_mapa.png" class="mapa img-responsive" />  </a>
            </div>
            
            <div class="extra-btn-container2">
                <a class="" id="map-btn-page-1" href="#"> <img src="images/c1_menu_story.png" class="mapa img-responsive" />  </a>
            </div>
            
            <div class="extra-btn-container3">
                <a class="" id="map-btn-page-1" href="#"> <img src="images/c1_menu_datos.png" class="mapa img-responsive" />  </a>
            </div>

        </div>
    </div>

</div>

<div class="map-popover"  id="map-page-1">
    <img src="images/c1_mapa_ACT.jpg" class="img-responsive" />
</div>

<div class="referencias-popover"  id="referencias-page-1">
    <h2> Fuentes relacionadas con las gráficas y datos:</h2>
        <ul>
            <li><a href="http://www.elmundo.es/internacional/2016/12/14/584f1b1ae5fdea4a3b8b4678.html" target="_blank">Batalla de Alepo (2012-2016)</a> (s.f.) En <em>Wikipedia</em>.</li>
            <li>Meneses, Rosa (2016, 14 de diciembre). <a href="http://www.elmundo.es/internacional/2016/12/14/584f1b1ae5fdea4a3b8b4678.html" target="_blank">Cronología de la barbarie en Alepo.</a> <em>El Mundo.</em></li>
        </ul>
    <h3>Bibliografía complementaria consultada:</h3>
        <ul>
            <li>Defensor del Pueblo de España (s.f.). <em><a href="https://www.defensordelpueblo.es/wp-content/uploads/2015/05/2011-09-Menores-o-Adultos-Procedimientos-para-la-determinaci%C3%B3n-de-la-edad1.pdf" target="_blank">¿Menores o adultos? Procedimientos para la determinación de la edad.</a></em> Madrid: Defensor del Pueblo.</li>
            <li>Godin, Marie; Moller Hansen, Katrine; Lounasmaa, Aura; Squire, Corinne y Zaman, Tahir (Eds.) (2017). <em>Voices from the 'Jungle'. Stories from the Calais Refugee Camp.</em> United Kindgdom & United States of America: Pluto Press.</li>
            <li>Mijallo, Óscar (2017). <em>La niña a las puertas del infierno.</em> España: Kailas Editorial.</li>
            <li>Espinosa, Javier y García Prieto, Mónica (2016). Siria, el país de las almas rotas. De la revolución al califato del ISIS. Madrid: Debate.</li>
            <li>Save the Children (2017). <em><a href="https://www.savethechildren.es/publicaciones/heridas-invisibles" target="_blank">Heridas invisibles. El impacto de seis de años de guerra sobre la salud mental de los niños y niñas sirios.</a></em> Editado por Save the Children.</li>
            <li>UNICEF (2017). <em><a href="https://www.unicef.org/appeals/syrianrefugees.html" target="_blank">Refugiados sirios. Informe de Siria, datos totales 2016.</a></em></li>
            <li>Save the Children (2016). <em><a href="https://www.savethechildren.es/sites/default/files/imce/docs/infancias-invisibles-ninos-migrantes-refugiados-trata-save-the-children.pdf" target="_blank">Infancias Invisibles. Menores Extranjeros No Acompañados, víctimas de trata y refugiados en España.</a></em> Editado por Save the Children.</li>
        </ul>
 </div>