<html lang="en">
<head>
<title>Gallery | Portfolio</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Luznery Vera">
</head>
<!-- Code of the Professors Dr Matthew Yee-King and Dr Marco Gillies from the University of London -->
<!-- I used the bootstrap libraries and w3 school -->
<!-- Container (navbar Section) -->
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand w3-container w3-center w3-animate-opacity" href="portfolio.html">Portfolio</a>
</div>
<ul class="nav navbar-nav">
<li class=""><a href="me.html">Me</a></li>
<li class="dropdown active"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Works<span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="active"><a href="#">Gallery</a></li>
<li><a href="#">SlideShow</a></li>
<li><a href="#">eReader</a></li>
</ul>
</li>
<li><a href="#"><span class="glyphicon glyphicon-phone"></span>Contact</a></li>
</ul>
</div>
</nav><!-- End navbar Section -->
<!-- Container (Image Gallery) -->
<div class="w3-container text-center w3-animate-opacity">
<h1>Image Gallery</h1>
<!--
These are the thumbnail images.
They are laid out using the
bootstrap grid.
I have given them all the class
"crop-image" which I use in the
css and the javascript code.
-->
<div class="row">
<div class="col-md-3 w3-hover-opacity">
<img class="crop-img"
src="https://3.bp.blogspot.com/-xtp2d4xB6_M/V_WLcW5m-eI/AAAAAAAAAag/zGfpc0BfS949pecObmPW5c3qzXnJeGZmwCLcB/s1600/bouquet-15308_1920.jpg" alt="Bouquet pink tulips"/>
</div>
<div class="col-md-3 w3-hover-opacity">
<img class="crop-img"
src="https://1.bp.blogspot.com/-et5lUaBJMEI/V_WOCydAYcI/AAAAAAAAAaw/43eNFxDPv0Q_le6ccIdxR4OsIQUW6Az8wCLcB/s1600/tulips-1405406_1920.jpg" alt="Tulips various colors"/>
</div>
<div class="col-md-3 w3-hover-opacity">
<img class="crop-img"
src="https://3.bp.blogspot.com/-wIA2bKmePKA/V_WLblRRfII/AAAAAAAAAac/Tfam2kBAmLwc0A8hDZ_ODbu3jcYzLGBrgCLcB/s1600/tulips-56423_1920.jpg" alt="Tulips at night"/>
</div>
<div class="col-md-3 w3-hover-opacity">
<img class="crop-img"
src="https://4.bp.blogspot.com/-VynRTc_Na9I/V_WQND72r9I/AAAAAAAAAbQ/aa_xv3iTqusPg6VVXEKH-ouFVU44GFVygCLcB/s1600/flower-1451676_1920.jpg" alt="purple flowers"/>
</div>
<div class="col-md-3 w3-hover-opacity">
<img class="crop-img"
src="https://2.bp.blogspot.com/-DxQewoGXbLw/V_WP0WUgViI/AAAAAAAAAbI/LtJ6WgwI30MQOtI2kg67ErFoCymPctv7ACLcB/s1600/flowers-260894.jpg" alt="flowers and alliances"/>
</div>
<div class="col-md-3 w3-hover-opacity">
<img class="crop-img"
src="https://2.bp.blogspot.com/-aa1aglSo4XQ/V_WO5dCcxaI/AAAAAAAAAa4/thN2GBjgxPkuCyrY_LZYhRTCTWe1XoyLgCLcB/s1600/roses-1229148_1920.jpg" alt="Roses various colors"/>
</div>
<div class="col-md-3 w3-hover-opacity">
<img class="crop-img"
src="https://4.bp.blogspot.com/-BHd3WqMKhas/V_WQLHYsYfI/AAAAAAAAAbM/1njQdFpUOG09WgQ3sJ-zKSYCIdvZ8XmXwCLcB/s1600/flowers-1325012_1920.jpg" alt="pink carnations"/>
</div>
<div class="col-md-3 w3-hover-opacity">
<img class="crop-img"
src="https://4.bp.blogspot.com/-X6w4rsL6IFc/V_WO_sbVa-I/AAAAAAAAAa8/00fWbkbSOy0puqlbn8R-Hbozcp2J0hADgCLcB/s1600/roses-1477992_1920.jpg" alt="pink roses"/>
</div>
<div class="col-md-3 w3-hover-opacity">
<img class="crop-img"
src="https://1.bp.blogspot.com/-BsSzatjdldU/V_WQbb2Pt4I/AAAAAAAAAbY/qny7wqXgEgg4zgg-9GUfnDm8-nuwQyXoQCLcB/s1600/frozen-201495_1920.jpg" alt="cherry on snow"/>
</div>
<div class="col-md-3 w3-hover-opacity">
<img class="crop-img"
src="https://2.bp.blogspot.com/-FU4cfzY-vYc/V_WRC66VXjI/AAAAAAAAAbk/lBvng5z6rNgePbQrqmGWlLv6XJ7K70yOgCLcB/s1600/cherry-blossom-1350172_1920.jpg" alt="cherry blossom"/>
</div>
<div class="col-md-3 w3-hover-opacity">
<img class="crop-img"
src="https://3.bp.blogspot.com/--4UAorcFHig/V_WRPe43ZuI/AAAAAAAAAbs/VZx6JjcBPgUA8MYOdGeEvbM94hN3QOu-QCLcB/s1600/winter-flowers-1200013_1920.jpg" alt="winter flowers"/>
</div>
<div class="col-md-3 w3-hover-opacity">
<img class="crop-img"
src="https://2.bp.blogspot.com/-PA2VtScuOf0/V_WQ-9hmATI/AAAAAAAAAbg/cMsN2RnwMPktP3HiBBMouAG_YhIZ3rH6gCLcB/s1600/rose-1146368_1920.jpg" alt="winter rose"/>
</div>
</div>
<!--
this is the large image which is
on a row of its own.
I will change it source in the
javascript
-->
<div class="row">
<div class="col-md-12">
<img id="bigImage"
class="large-img"
src="https://2.bp.blogspot.com/-DxQewoGXbLw/V_WP0WUgViI/AAAAAAAAAbI/LtJ6WgwI30MQOtI2kg67ErFoCymPctv7ACLcB/s1600/flowers-260894.jpg" alt="flowers and alliances"/>
</div>
</div>
</div><!-- End Image Gallery -->
<!-- footer -->
<footer class="container-fluid text-center bg-3">
<a href="#myPage" title="To Top">
<span class="glyphicon glyphicon-chevron-up" style="font-size: 30px;"></span>
</a><p>Build a Responsive Web Page for the course <a href="https://www.coursera.org/learn/website-coding" target="_blank">Responsive website basics</a> By<a href="https://twitter.com/LuzneryVera" target="_blank"> @LuzneryVera</a> Responsive website basics is the first course of specialization program <a href="https://www.coursera.org/specializations/website-development" target="_blank">Responsive Website Development and Design</a> created by University of London & Goldsmiths and University of London through Coursera.</p><p>© Copyright 2016 Luznery Vera</p><img class="logo-u" src="https://2.bp.blogspot.com/-EtcSWLAyoHY/V_WLLf6XqpI/AAAAAAAAAaY/7Kppc58ytBQPqW3QwCjHqH73MRTCSkzegCLcB/s1600/University-of-London.jpg" alt="Logo"><img class="logo-c" src="https://1.bp.blogspot.com/-t0wj80EtIJY/V_WKj-nYrNI/AAAAAAAAAaQ/Ovv5r90Xpw4lysAJtLMEqNv7GnuzxmA5ACLcB/s1600/coursera_logo.png" alt="Logo">
</footer><!-- End footer -->
</body>
</html>
/* Gallery */
/* Style header */
.navbar {
padding-top: 20px;
border: 0;
border-radius: 0;
margin-bottom: 0;
font-size: 16px;
letter-spacing: 5px;
color: #fff;
background: linear-gradient(#051118, #681B6C);
width: 100%;
font-weight: bold;
}
/* Style dropdown-menu. If hovering change the background color and font color and more */
.dropdown-menu a:hover {background-color: #f1f1f1;
color: #0FB5FF;}
.navbar-header a {
font-size: 22px !important;
color: #fff !important;
}
.navbar-nav li a:hover {
color: #E00004 !important;
}
.navbar-nav li a {
color: #fff;
}
ul .dropdown-menu li a {
border-color: none !important;
color: #0056AA;
}
ul .dropdown-menu:hover {
box-shadow: 0 4px 8px 0 rgba(104, 27, 108, 0.40), 0 6px 50px 0 rgba(104, 27, 108, 0.40);
}
/* Style "h1" */
h1 {
margin-top: 100px;
text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
/* Style for links */
a {
color: #6FC4F0;
text-decoration: none;
}
a:hover {
color: #f4511e;
}
/* Style footer */
.bg-3 {
background-color: #48003B;
color: #fff;
font-size: 17px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
padding-top: 30px;
padding-bottom: 30px;
}
/* Style Image Gallery */
.crop-img {
padding-top: 10px;
}
.col-md-12 {
margin: 5px;
}
.logo-u {
width: 130px;
border: none;
}
.logo-c {
width: 170px;
border: none;
}
.glyphicon-chevron-up a:hover {
color: #E00004;
}
.glyphicon-chevron-up {
margin: 10px;
text-align: center;
font-size: 20px;
}
.glyphicon-chevron-up a:hover {
color: #f4511e !important;
}
/* this is for the thumbnail images */
.crop-img{
max-height:150px;
max-width:100%;
}
/* this is for the big main image */
.large-img{
max-width:70%;
}
// jQuery Image Gallery
// when we click on the thumbnail
// we set the src attribute of the
// bit image to be the same as the
// src of the image we have clicked on
// ("this"). This loads the same
// image file into the big image
$(".crop-img").click(function(){
$("#bigImage").attr('src',
$(this).attr('src'));
});// End jQuery Image Gallery
