Image gallery travel blog

by Justin Harker

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8" /meta>
    <title> BloggingOverBorders </title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


  </head>

  <header>
    <a href="http://www.bloggingoverborders.com/">
      <h1> Image gallery </h1>
      <p> By Justin Harker. </p>
    </a>

    <nav>
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="contact.html">Contact</a></li>
        <li><a href="image_gallery.html">Image Gallery</a></li>
      </ul>

    </nav>
  </header>

  <body>
    <section>
     
      <article>
        <h2> USA Boys Trip</h2>
        <div class="gallery">
          <a target="_blank" href="img_fjords.jpg">
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e9/Goldfish3.jpg/560px-Goldfish3.jpg", alt="picture of a goldfish" width="500" height="500">
            <a href="https://commons.wikimedia.org/wiki/File:Goldfish3.jpg">Image License</a>
          <div class="desc">Add a description of the image here</div>
      </article>
    </section>
  </body>




  <footer>
    <p><strong>Like this page? Subscribe for travel news and updates!</strong></p>
    <form class="form" Id="subscription-form" action="/action_page.php" method="POST">
      Enter email address: <input type="text" name="EmailAddress" value="">
      <input type="submit" value="Submit">
    </form>
    <p><small>&copy; Contents of this page licensed under a Creative Commons Share Alike license.</small></p>
  </footer>


</html>

CSS

/*<link rel="stylesheet" href="style.css" /> 
  <script src="javascript.js"> </script>*/

header {
  display: block;
  text-align: center;
  position: static;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

nav li {
  float: left;
}

nav li a {
  display: block;
  color: white;
  text-align: center;
  padding: 10px 10px;
  text-decoration: none;
}

/* Change the link color to #111 (black) on hover */

nav li a:hover {
  background-color: #111;
}

section {
  clear: both;
  float: center;
  text-align: center;
  margin: 5% 5%;
  width: 95%;
}

article {
  clear: both;
  float: center;
}

div.gallery {
  clear:both;
  float: center;
  margin: 5px;
  border: 1px solid #ccc;
  width: 800px;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 15px;
  text-align: center;
}

footer {
  clear: both;
  float: center;
  text-align: center;
}