<?php require_once "header.php" ?>
<div class="container-fluid whole gallery content">
    <div class="col-md-12">
        <section>
            <h1><span>Gallery</span></h1>
            <article class="col-md-12">
                
                <div id="big-picture" class="col-md-12">
                    <h3><span>Take a look at these.</span></h3>
                    <figure>
                        <!--
                        Content is dinamic but the reference to the default image is:
                        SOURCE
                        http://www.coolplaces.co.uk/system/images/6506/the-arnolfini-see-do-museums-galleries-large.jpg
                        -->
                      <img src="img/the-arnolfini-building.jpg" class="img-responsive" alt="An awesome picture">	
                      <figcaption>The exterior of the Arnolfini Building.</figcaption>
                    </figure>
                <h4>Click an image to make it larger!</h4>
                </div>
                <nav id="nav-picture">
                    <div class="col-md-2">
                         <figure>
                        <!--
                        SOURCE
                        http://www.foodincmovie.co.uk/img/site/background_home-01.jpg
                        -->
                        <img src="img/food-inc-cover.jpg" alt="Food, inc documentary cover.">
                        <figcaption>Food, inc documentary cover.</figcaption>
                        </figure>
                    </div>
                    <div class="col-md-3">
                         <figure>
                        <!--
                        SOURCE
                        https://thefilmcricket.files.wordpress.com/2012/09/samsara-2.jpg
                        -->
                        <img src="img/samsara-2.jpg" alt="A frame from documentary Samsara.">
                        <figcaption>A frame from documentary Samsara.</figcaption>
                        </figure>
                    </div>
                    <div class="col-md-2">
                         <figure>
                        <!--
                        SOURCE
                        http://www.coolplaces.co.uk/system/images/6506/the-arnolfini-see-do-museums-galleries-large.jpg
                        -->
                        <img src="img/the-arnolfini-building.jpg" alt="The exterior of the Arnolfini Building.">
                        <figcaption>The exterior of the Arnolfini Building.</figcaption>
                        </figure>
                    </div>
                    <div class="col-md-2">
                         <figure>
                        <!--
                        SOURCE
                        http://www.arnolfini.org.uk/about/about-us/slideshow/arnolfini-4-max-mcclure-60/image_crop
                        -->
                        <img src="img/the_arnolfini_interior.jpg" alt="Interior of the Arnolfini building.">
                        <figcaption>The interior of the Arnolfini Building.</figcaption>
                        </figure>
                    </div>
                    <div class="col-md-2">
                         <figure>
                        <!--
                        SOURCE
                        https://s3.amazonaws.com/content.tiff.net/content/carousel/eb1118884d346230fc47a442dfc11be6.jpg
                        -->
                        <img src="img/food_inc_factory.jpg" alt="Food, inc documentaly frame.">
                        <figcaption>A frame from documentary Food, inc.</figcaption>
                        </figure>
                    </div>
                </nav>
            </article>
        </section>
    </div>
</div>
<?php require_once "footer.php" ?>