historia-de-zainab/templates/page6.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/c6_IMG_story.jpg" class="img-responsive" /> <!-- imagen de historia-->
                </div>
                <div class="data-content" style="display:none">
                    <div class="row">
                        <div class="col-sm-1" style="margin-top:2em">
                            <ul class="carousel-btn">
                                <a href="#" class="carouselGotoBtn btn btn-default btn-block active" >
                                <li data-target="#myCarousel" data-slide-to="0" >
                                    2011
                                </li> </a>
                                <a href="#" class="carouselGotoBtn btn btn-default btn-block">
                                    <li data-target="#myCarousel" data-slide-to="1">
                                    2012
                                </li></a>
                                <a href="#" class="carouselGotoBtn btn btn-default btn-block">
                                    <li data-target="#myCarousel" data-slide-to="2">
                                    2013
                                </li></a>
                                <a href="#" class="carouselGotoBtn btn btn-default btn-block">
                                    <li data-target="#myCarousel" data-slide-to="3" >
                                    2014
                                </li></a>
                                <a href="#" class="carouselGotoBtn btn btn-default btn-block">
                                    <li data-target="#myCarousel" data-slide-to="4">
                                    2015
                                </li></a>
                                <a href="#" class="carouselGotoBtn btn btn-default btn-block">
                                    <li data-target="#myCarousel" data-slide-to="5">
                                    2016
                                </li></a>
                            </ul>
                        </div>
                        <div class="col-sm-11">
                            <div id="myCarousel" class="carousel slide" data-ride="carousel">
                                <div class="carousel-inner">
                                    <div class="item active">
                                      <img src="images/c6_aerea2011.jpg" alt="2011">
                                    </div>

                                    <div class="item">
                                      <img src="images/c6_aerea2012.jpg" alt="2012">
                                    </div>

                                    <div class="item">
                                      <img src="images/c6_aerea2013.jpg" alt="2013">
                                    </div>
                                    <div class="item">
                                      <img src="images/c6_aerea2013.jpg" alt="2014">
                                    </div>
                                    <div class="item">
                                      <img src="images/c6_aerea2013.jpg" alt="2015">
                                    </div>
                                    <div class="item">
                                      <img src="images/c6_aerea2013.jpg" alt="2016">
                                    </div>
                                  </div>
                              </div>
                              <div>
                                  <img src="images/c6_IMG_grafico_inferior.jpg" class="img-responsive">
                              </div>
                          </div>
                      </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="menu-content">
                <!-- METER CONTENIDO DEL PANEL DERECHO AQUÍ -->
                <!-- 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">
                            <h2> menu </h2>
                            <a href="#" class="switchMode" class="btn btn-circle">  <img src="images/c6_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">
                            <h2> menu </h2>
                            <div> texto de datos </div>
                            <a href="#" class="switchMode" class="btn btn-circle">  <img src="images/c6_ver_story.jpg" class="verstory img-responsive" /> </a>
                        </div>
                    </div>
                </div>

            </div>
            <div class="extra-btn-container">
                <a class="" id="map-btn-page-6" href="#"> <img src="images/c6_mapa.png" class="mapa img-responsive" />  <a>
            </div>
        </div>
    </div>

</div>

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