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">
                    <img src="images/c1_IMG_story.jpg" class="img-responsive" /> <!-- imagen de historia-->
                </div>
                <div class="data-content" style="display:none">
                    <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-8 col-md-offset-2 col-sm-10 col-sm-offset-1 col-xl-7 col-xl-offset-1">

                        <div class="menu-story-inner">
                            Este cómic quiere 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.
                        </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-8 col-md-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="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_mapa.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>