thomasmarren/gallery.html

## gallery.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1">
  <title>Multiple Galleries</title>

  <!-- CSS-->
  <link rel="stylesheet" href="main.css">
  <!-- END CSS -->

  <!--FONTS-->
  <link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
  <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
  <!--END FONTS-->

</head>
<body>
    <div class="wrapper" id="gallery">

      <div id="galleryNav">
        <ul>
          <li><a href="" onclick="return false;" data-val="one" id="galleryOne">Gallery One</a></li>
          <li><a href="" onclick="return false;" data-val="two" id="galleryTwo">Gallery Two</a></li>
          <li><a href="" onclick="return false;" data-val="three" id="galleryThree">Gallery Three</a></li>
        </ul>
      </div>

<!--GALLERY 1-->

      <div class="category" id="one">
        <div class="thumbnails">
          <ul>
            <li><a href="img/image1.jpg" alt="Image 1.1"><img src="img/image1.jpg" height="75px"></a></li>
            <li><a href="img/image2.jpg" alt="Image 1.2"><img src="img/image2.jpg" height="75px"></a></li>
            <li><a href="img/image3.jpg" alt="Image 1.3"><img src="img/image3.jpg" height="75px"></a></li>
          </ul>
        </div>
      </div>

<!--GALLERY 2-->

      <div class="category" id="two">
        <div class="thumbnails">
          <ul>
            <li><a href="img/image4.jpg" alt="Image 2.1"><img src="img/image4.jpg" height="75px"></a></li>
            <li><a href="img/image5.jpg" alt="Image 2.2"><img src="img/image5.jpg" height="75px"></a></li>
            <li><a href="img/image6.jpg" alt="Image 2.3"><img src="img/image6.jpg" height="75px"></a></li>
          </ul>
        </div>
      </div>

<!--GALLERY 3-->

      <div class="category" id="three">
        <div class="thumbnails">
          <ul>
            <li><a href="img/image7.jpg" alt="Image 3.1"><img src="img/image7.jpg" height="75px"></a></li>
            <li><a href="img/image8.jpg" alt="Image 3.2"><img src="img/image8.jpg" height="75px"></a></li>
            <li><a href="img/image9.jpg" alt="Image 3.3"><img src="img/image9.jpg" height="75px"></a></li>
          </ul>
        </div>
      </div>

      <div class="mainPhoto"></div>

      <div class="descriptions">
        <div id="description-one">
        <h3>Description One</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis ultrices nunc consectetur sodales. Nulla facilisi. Praesent egestas gravida ante, imperdiet fermentum elit pretium in. Nulla sollicitudin tempus accumsan. Nullam consequat, est ac pellentesque condimentum, massa velit lobortis nulla, vitae rutrum nisl ex mollis turpis. Nullam rutrum consequat nisi, non faucibus augue volutpat vel. Nam eros nunc, eleifend vel lectus vel, tempor laoreet massa. Maecenas dapibus pharetra ex, ut accumsan lorem convallis nec. Nulla in iaculis dui. Donec tincidunt sed ligula a tempus.</p>

          <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec vehicula felis porta placerat facilisis. Sed pretium fermentum maximus. Phasellus gravida vestibulum ligula, eget eleifend odio efficitur pulvinar. Sed sem sem, congue in commodo interdum, vestibulum vehicula enim. Vivamus convallis sollicitudin arcu. Vestibulum nisi velit, accumsan in lorem a, dapibus sagittis arcu. Aliquam ultrices laoreet molestie. Nullam quis convallis lectus. Sed et molestie ipsum.</p>

        </div>

        <div id="description-two">
          <h3>Description Two</h3>
          <p>Quisque eget dignissim orci. Donec purus metus, interdum in vestibulum sit amet, semper eu elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam porta libero malesuada, elementum est eu, molestie nisl. Suspendisse potenti. Vivamus nisl quam, maximus sit amet convallis eget, commodo id eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

          <p>Aliquam tempus et dolor eget imperdiet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec faucibus, dolor ac lobortis semper, ipsum magna convallis erat, ac imperdiet ligula eros in massa. Sed luctus, nunc eu gravida imperdiet, tellus elit pulvinar urna, vel congue mi augue vitae erat. Integer dictum velit in lacus venenatis, id sodales lectus venenatis. Donec eu justo ante. </p>

        </div>

        <div id="description-three">
        <h3>Description Three</h3>
        <p>Etiam vel enim maximus, pretium augue ac, varius ligula. Pellentesque porttitor ipsum ut ante tincidunt, eget lobortis nisi blandit. In fermentum rhoncus nibh, non lobortis eros tempus sed. Vivamus imperdiet eu velit eget fermentum. Vivamus sodales porttitor augue. Donec posuere ullamcorper dui ultrices vestibulum. Vivamus eu ex eleifend nibh tincidunt tristique. Etiam mauris ipsum, imperdiet vitae arcu quis, tristique ullamcorper odio.</p>
          <p>Sed vulputate, nisl nec tincidunt sodales, nisl nunc viverra est, eu volutpat urna arcu vel diam. Nulla vitae mauris et sem congue laoreet eget ut purus. Nunc lacus odio, ultricies at dui nec, placerat consectetur risus. Vestibulum eget elit tempor, sollicitudin risus vel, consectetur neque. In hac habitasse platea dictumst. Suspendisse sit amet augue vel tortor eleifend ultricies.</p>
        </div>

      </div>
    </div>
  <footer>
    <p>Created by Thomas Marren</p>
  </footer>

  <!--Gallery Script-->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="gallery.js" type="text/javascript" charset="utf-8"></script>
  <!-- END Gallery Script-->

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1">
	<title>Multiple Galleries</title>

	<!-- CSS-->
	<link rel="stylesheet" href="main.css">
	<!-- END CSS -->

	<!--FONTS-->
	<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
	<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
	<!--END FONTS-->

	</head>
	<body>
	<div class="wrapper" id="gallery">

	<div id="galleryNav">
	<ul>
	<li><a href="" onclick="return false;" data-val="one" id="galleryOne">Gallery One</a></li>
	<li><a href="" onclick="return false;" data-val="two" id="galleryTwo">Gallery Two</a></li>
	<li><a href="" onclick="return false;" data-val="three" id="galleryThree">Gallery Three</a></li>
	</ul>
	</div>

	<!--GALLERY 1-->

	<div class="category" id="one">
	<div class="thumbnails">
	<ul>
	<li><a href="img/image1.jpg" alt="Image 1.1"><img src="img/image1.jpg" height="75px"></a></li>
	<li><a href="img/image2.jpg" alt="Image 1.2"><img src="img/image2.jpg" height="75px"></a></li>
	<li><a href="img/image3.jpg" alt="Image 1.3"><img src="img/image3.jpg" height="75px"></a></li>
	</ul>
	</div>
	</div>

	<!--GALLERY 2-->

	<div class="category" id="two">
	<div class="thumbnails">
	<ul>
	<li><a href="img/image4.jpg" alt="Image 2.1"><img src="img/image4.jpg" height="75px"></a></li>
	<li><a href="img/image5.jpg" alt="Image 2.2"><img src="img/image5.jpg" height="75px"></a></li>
	<li><a href="img/image6.jpg" alt="Image 2.3"><img src="img/image6.jpg" height="75px"></a></li>
	</ul>
	</div>
	</div>

	<!--GALLERY 3-->

	<div class="category" id="three">
	<div class="thumbnails">
	<ul>
	<li><a href="img/image7.jpg" alt="Image 3.1"><img src="img/image7.jpg" height="75px"></a></li>
	<li><a href="img/image8.jpg" alt="Image 3.2"><img src="img/image8.jpg" height="75px"></a></li>
	<li><a href="img/image9.jpg" alt="Image 3.3"><img src="img/image9.jpg" height="75px"></a></li>
	</ul>
	</div>
	</div>

	<div class="mainPhoto"></div>

	<div class="descriptions">
	<div id="description-one">
	<h3>Description One</h3>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis ultrices nunc consectetur sodales. Nulla facilisi. Praesent egestas gravida ante, imperdiet fermentum elit pretium in. Nulla sollicitudin tempus accumsan. Nullam consequat, est ac pellentesque condimentum, massa velit lobortis nulla, vitae rutrum nisl ex mollis turpis. Nullam rutrum consequat nisi, non faucibus augue volutpat vel. Nam eros nunc, eleifend vel lectus vel, tempor laoreet massa. Maecenas dapibus pharetra ex, ut accumsan lorem convallis nec. Nulla in iaculis dui. Donec tincidunt sed ligula a tempus.</p>

	<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec vehicula felis porta placerat facilisis. Sed pretium fermentum maximus. Phasellus gravida vestibulum ligula, eget eleifend odio efficitur pulvinar. Sed sem sem, congue in commodo interdum, vestibulum vehicula enim. Vivamus convallis sollicitudin arcu. Vestibulum nisi velit, accumsan in lorem a, dapibus sagittis arcu. Aliquam ultrices laoreet molestie. Nullam quis convallis lectus. Sed et molestie ipsum.</p>

	</div>

	<div id="description-two">
	<h3>Description Two</h3>
	<p>Quisque eget dignissim orci. Donec purus metus, interdum in vestibulum sit amet, semper eu elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam porta libero malesuada, elementum est eu, molestie nisl. Suspendisse potenti. Vivamus nisl quam, maximus sit amet convallis eget, commodo id eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

	<p>Aliquam tempus et dolor eget imperdiet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec faucibus, dolor ac lobortis semper, ipsum magna convallis erat, ac imperdiet ligula eros in massa. Sed luctus, nunc eu gravida imperdiet, tellus elit pulvinar urna, vel congue mi augue vitae erat. Integer dictum velit in lacus venenatis, id sodales lectus venenatis. Donec eu justo ante. </p>

	</div>

	<div id="description-three">
	<h3>Description Three</h3>
	<p>Etiam vel enim maximus, pretium augue ac, varius ligula. Pellentesque porttitor ipsum ut ante tincidunt, eget lobortis nisi blandit. In fermentum rhoncus nibh, non lobortis eros tempus sed. Vivamus imperdiet eu velit eget fermentum. Vivamus sodales porttitor augue. Donec posuere ullamcorper dui ultrices vestibulum. Vivamus eu ex eleifend nibh tincidunt tristique. Etiam mauris ipsum, imperdiet vitae arcu quis, tristique ullamcorper odio.</p>
	<p>Sed vulputate, nisl nec tincidunt sodales, nisl nunc viverra est, eu volutpat urna arcu vel diam. Nulla vitae mauris et sem congue laoreet eget ut purus. Nunc lacus odio, ultricies at dui nec, placerat consectetur risus. Vestibulum eget elit tempor, sollicitudin risus vel, consectetur neque. In hac habitasse platea dictumst. Suspendisse sit amet augue vel tortor eleifend ultricies.</p>
	</div>

	</div>
	</div>
	<footer>
	<p>Created by Thomas Marren</p>
	</footer>

	<!--Gallery Script-->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	<script src="gallery.js" type="text/javascript" charset="utf-8"></script>
	<!-- END Gallery Script-->

	</body>
	</html>